Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
$9.99 | ALL EBOOKS & VIDEOS
Over 7,000 tech titles at $9.99 each with AI-powered learning assistants on new releases
Architecting Vue.js 3 Enterprise-Ready Web Applications
Architecting Vue.js 3 Enterprise-Ready Web Applications

Architecting Vue.js 3 Enterprise-Ready Web Applications: Build and deliver scalable and high-performance, enterprise-ready applications with Vue and JavaScript

By Solomon Eseme
$31.99 $9.99
Book Apr 2023 272 pages 1st Edition
eBook
$31.99 $9.99
Print
$39.99
Subscription
$15.99 Monthly
eBook
$31.99 $9.99
Print
$39.99
Subscription
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon AI Assistant (beta) to help accelerate your learning
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Apr 14, 2023
Length 272 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781801073905
Category :
Table of content icon View table of contents Preview book icon Preview Book

Architecting Vue.js 3 Enterprise-Ready Web Applications

Getting Started with Vue.js 3

Before we start learning how to develop enterprise-ready applications with Vue.js 3, you need to understand Vue 3 and the different features it is bundled with to help you navigate through building scalable and enterprise-ready applications.

In this chapter, we will cover the essential aspects of Vue 3 that will directly influence how we develop an enterprise application with Vue.js 3. This background information will put you in a better position to grasp the terms and concepts of Vue 3 and help you understand how to build and scale an enterprise-ready application.

We will cover the following key topics in this chapter:

  • Overview of Vue.js
  • Introducing Vue.js 3
  • Building your first Vue.js 3 app

Once you’ve worked through each of these topics, you will be ready to get started with building your first enterprise-ready Vue.js 3 application.

Technical requirements

To get started, we recommend that you have a basic knowledge of JavaScript with Node.js installed on your computer and must have built projects using Vue.js before.

Overview of Vue.js

Vue.js is an open source progressive JavaScript frontend web framework used to develop interactive frontend web interfaces. It is a very popular and simplified JavaScript framework that focuses on the view layer of web development. It can be easily integrated into big and enterprise web development projects.

Vue.js is a framework that opens the door for developers to create and manage large and scalable projects with ease, as the code structure and development environment are developer-friendly.

In the next section, we will introduce you to the wonders of Vue 3 and the Composition API.

Introducing Vue.js 3

The official Vue.js 3 version was released in September 2020 with highly documented, highly readable, well-structured resources to help you start using Vue 3. Evan You in his article The process: Making Vue 3 (https://increment.com/frontend/making-vue-3/) mentioned that one of the key reasons for the rewrite was to leverage a new language feature, Proxy.

Proxy allows the framework to intercept operations on objects. A core feature of Vue is the ability to listen to changes made to the user-defined state and reactively update the DOM. In Vue 3, using the Proxy feature is the key to resolving the reactivity-related issues in Vue 2.

Most importantly, Vue 3 was completely rewritten in TypeScript and has all the advantages of a modern framework that come with using TypeScript.

In this section, we will explore some of the features and improvements that resonate with building an enterprise application and, most importantly, the new Composition API.

We’ll cover the following topics:

  • Vue 3 performance
  • Tree-shaking support
  • The Composition API

These topics give you a glimpse at the features of Vue.js 3 and we will start with what we are already familiar with in Vue in this book.

Vue 3 performance

The performance increase in Vue 3 is excellent for enterprise applications because any lag in the core framework can result in a loss of funds given the gigantic nature of an enterprise project.

Vue 3 has sped up performance by 55% compared to previous versions. Also, the updates are up to 133% faster, which is excellent for developing and testing large enterprise projects before deployment. Also, memory usage is reduced by 54%, cutting down computing costs drastically on enterprise projects.

Tree-shaking support

Tree-shaking is the process of eliminating dead, useless, or unused code, which drastically decreases the build size of an application if you compare this to an enterprise application with thousands of files and—sometimes unknowingly—unused files that can lead to a bloated and heavy project.

Vue 3 supports tree-shaking right out of the box, eliminating unused files and code, thereby decreasing the build size and increasing the project’s performance.

The Composition API

The Composition API is an entirely new addition and the most significant change to Vue 3. It requires relearning the concepts and total discarding the Options API used in Vue 2. While the Composition API advances, the previous Options API will continue to be supported. In this book, we use the Composition API because of the readability and performance improvements that come with it.

Why the Composition API?

When building a simple application, the component-based architecture alone has proven to be the best approach to developing such an application where individual components can be reused to improve maintainability and flexibility.

However, when building enterprise-ready applications with hundreds of components, from collective experience, it is proven that component-based architecture alone might not be enough, especially when your application is getting big but sharing and reusing code even within components becomes very important, and thus the introduction of the Composition API.

Code example

Let’s imagine we are building an enterprise to-do application with unique features such as filters and search capabilities. Using the Options API, we will approach this project using the traditional data, computed, and watch methods.

The following code block shows how to create and manage a Vue component using the Options API from Vue 2:

// src/components/TodoRepositories.vue
export default {
  components: { RepositoriesFilters, RepositoriesSortBy,
                RepositoriesList },
  props: {
    todo: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      repositories: [], // 1
      filters: {}, // 3
      searchQuery: '', // 2
    }
  },
  computed: {
    filteredRepositories() {}, // 3
    repositoriesMatchingSearchQuery() {}, // 2
  },
  watch: {
    todo: 'getTodoRepositories', // 1
  },
  mounted() {
    this.getTodoRepositories() // 1
  },
  methods: {
    getTodoRepositories() {
      // using `this.Todo` to fetch Todo repositories
    }, // 1
    updateFilters() {}, // 3
  },
}

The preceding component handles many responsibilities, as you can see in the following points:

  • Getting the Todo repository from an external API and refreshing it on user changes
  • Searching the Todo repository using the searchQuery string
  • Filtering the Todo repository using the filters object

Organizing your component’s logic as in the previous example works perfectly, but at the same time poses a huge challenge to readability and maintainability for larger and enterprise projects with bigger components’ logic.

Wouldn’t it be perfect if we could collocate code related to the same logical concern? That’s exactly what the Composition API enables us to do.

Let’s rewrite the same component using the Composition API to see the improvement and readability benefits gained by using it:

<script setup>
import { fetchTodoRepositories } from '@/api/repositories'
import { ref, watch, computed } from 'vue'
const props = defineProps({
    todo: {
        type: String
        default:""
    }
})
  const repositories = ref([])
  const getTodoRepositories = async () => {
    repositories.value =
        await fetchTodoRepositories(props.todo)
  }
  getTodoRepositories()
  // set a watcher on the Reactive Reference to user todo
  // prop
  watchEffect(getTodoRepositories)
  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(
      repository =>
          repository.name.includes(searchQuery.value)
    )
  })
</script>

The Composition API is a great addition, especially for developing enterprise-ready applications. We can move the computed, mounted, and watch lifecycle hooks into a standalone composition function and import it into the script with setup, making it readable, flexible, and maintainable. To learn more about the Composition API, visit the official documentation (https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api), which is outside the scope of this book.

So far, we have covered an overview of Vue 3 and the newly introduced features of Vue that are handy for building enterprise-ready and scalable production-grade applications. We have also covered the basics of the Composition API to foster your understanding of building your modern enterprise application with Vue 3.

In the next section, we will put your knowledge to the test by learning how to build your first Vue 3 application using Vite as the build tool.

According to the official documentation (https://vitejs.dev/guide/), Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is based on Rollup, and it’s configured to support most sensible defaults for modern JavaScript frameworks.

Building your first Vue.js 3 app

Vue.js can be integrated into projects in multiple ways depending on the requirements because it is incrementally adaptable.

We will create a completely blank new Vue 3 project, or you can use the migration guide (https://v3.vuejs.org/guide/migration/migration-build.html#overview) to migrate your Vue 2 project to Vue to follow along.

In this section, we are going to cover how to build our Vue 3 application using the Vite command-line interface (CLI).

Creating a Vue 3 app with Vite

To create our first Vue 3 application, we will use the recommended Vite web development tool. Vite is a web development build tool that allows for lightning-fast code serving due to its native ES Module import approach.

In this book, we will be building an enterprise-ready Pinterest clone project, and all the backend data management of the project will be developed and hosted with Strapi.

Type along with these simple commands:

npm init @vitejs/app pinterest-app-clone
cd pinterest-app-clone
npm install
npm run dev
// If you're having issues with spaces in username, try using:
npx create-vite-app pinterest-app-clone

The preceding commands will create a pinterest-app-clone folder with Vue 3 installed and set up properly. Once done, open your favorite browser and access the web page with localhost:3000. This is what the web page will look like:

Figure 1.1 – A screenshot of the newly installed Vue 3

Figure 1.1 – A screenshot of the newly installed Vue 3

In this section, we explored Vue 3, the Composition API, and how to get started building your first application with Vue 3. In the next section, we will learn about the Strapi CMS that we will use for data and content management.

What is the Strapi CMS?

Strapi is an open source headless CMS based on Node.js that is used to develop and manage content or data using RESTful APIs and GraphQL.

With Strapi, we can scaffold our API faster and consume the content via APIs using any HTTP client or GraphQL-enabled frontend.

Scaffolding a Strapi project

Scaffolding a new Strapi project is very simple and works precisely like installing a new frontend framework. Follow these steps to scaffold a new Strapi project:

  1. Run either of the following commands and test them out in your default browser:
    npx create-strapi-app strapi-api --quickstart
    # OR
    yarn create strapi-app strapi-api --quickstart

The preceding command will scaffold a new Strapi project in the directory you specified.

  1. Next, run yarn build to build your app and, lastly, yarn develop to run the new project if it doesn’t start automatically.

The yarn develop command will open a new tab with a page to register your new admin of the system:

Figure 1.2 – The registration page

Figure 1.2 – The registration page

  1. Go ahead and fill out the form and click on the Submit button to create a new admin.

As we progress in this book, we will customize our Strapi backend instance to reflect Pinterest data modeling.

Summary

This chapter started with an overview of Vue.js and why Vue.js can be used to develop enterprise-ready applications. We discussed the latest release of Vue.js and how it improves the performance aspect of the framework by introducing a tree-shaking feature right out of the box. We then introduced the Composition API, a Vue 3 feature that improves the readability, maintainability, and scalability of Vue 3 for building and deploying enterprise applications. We also looked at creating our first Vue 3 application using Vite and the fundamental reasons for using Vite instead of the other available options.

Finally, we introduced the Strapi CMS, the backend stack and a headless CMS for building and modeling backend applications and APIs. With Strapi, we will only focus on building and scaling our enterprise frontend Pinterest-clone application using Vue 3 while the Strapi CMS handles the backend.

In the next chapter, we will dive deeper into using Vuex, Vue Router, and Axios to build an enterprise-ready app. You will learn how to properly utilize these libraries to develop large-scale applications with maintainability and scalability, and by the end of the chapter, you will have learned how to set up your backend with Strapi and connect it to Vue 3.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Implement Vue.js 3 to create Vue.js application with improved performance
  • Explore the Vue.js 3 composition API in-depth while building your enterprise application
  • Ensure the scalability and maintainability of your apps with different types of testing

Description

Building enterprise-ready Vue.js apps entails following best practices for creating high-performance and scalable applications. Complete with step-by-step explanations and best practices outlined, this Vue.js book is a must-read for any developer who works with a large Vue.js codebase where performance and scalability are indispensable. Throughout this book, you’ll learn how to configure and set up Vue.js 3 and the composition API and use it to build real-world applications. You’ll develop the skills to create reusable components and scale performance in Vue.js 3 applications. As you progress, the book guides you in scaling performance with asynchronous lazy loading, image compression, code splitting, and tree shaking. Furthermore, you’ll see how to use the Restful API, Docker, GraphQL, and different types of testing to ensure that your Vue.js 3 application is scalable and maintainable. By the end of this book, you’ll be well-versed in best practices for implementing Restful API, Docker, GraphQL, and testing methods to build and deploy an enterprise-ready Vue.js 3 application of any scale.

What you will learn

Scale your app’s performance in Vue.js 3 using best practices Implement testing strategies for large-scale Vue.js codebase Manage large file structures using the micro frontend architecture Discover the industry standard to Dockerize and deploy an enterprise Vue.js 3 web application Use GraphQL to deliver scalable and high-performing applications Explore various testing libraries and how to integrate them with Vue.js 3

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon AI Assistant (beta) to help accelerate your learning
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Apr 14, 2023
Length 272 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781801073905
Category :

Table of Contents

21 Chapters
Preface Chevron down icon Chevron up icon
1. Part 1: Getting Started with Vue.js Chevron down icon Chevron up icon
2. Chapter 1: Getting Started with Vue.js 3 Chevron down icon Chevron up icon
3. Chapter 2: Using Libraries for Large-Scale Applications Chevron down icon Chevron up icon
4. Part 2: Large-Scale Apps and Scaling Performance in Vue.js 3 Chevron down icon Chevron up icon
5. Chapter 3: Scaling Performance in Vue.js 3 Chevron down icon Chevron up icon
6. Chapter 4: Architecture for Large-Scale Web Apps Chevron down icon Chevron up icon
7. Chapter 5: An Introduction to GraphQL, Queries, Mutations, and RESTful APIs Chevron down icon Chevron up icon
8. Chapter 6: Building a Complete Pinterest Clone with GraphQL Chevron down icon Chevron up icon
9. Part 3: Vue.js 3 Enterprise Tools Chevron down icon Chevron up icon
10. Chapter 7: Dockerizing a Vue 3 App Chevron down icon Chevron up icon
11. Part 4: Testing Enterprise Vue.js 3 Apps Chevron down icon Chevron up icon
12. Chapter 8: Testing and What to Test in Vue.js 3 Chevron down icon Chevron up icon
13. Chapter 9: Best Practices in Unit Testing Chevron down icon Chevron up icon
14. Chapter 10: Integration Testing in Vue.js 3 Chevron down icon Chevron up icon
15. Chapter 11: Industry-Standard End-to-End Testing Chevron down icon Chevron up icon
16. Part 5: Deploying Enterprise-ready Vue.js 3 Chevron down icon Chevron up icon
17. Chapter 12: Deploying Enterprise-Ready Vue.js 3 Chevron down icon Chevron up icon
18. Chapter 13: Advanced Vue.js Frameworks Chevron down icon Chevron up icon
19. Index Chevron down icon Chevron up icon
20. Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Filter icon Filter
Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.