Vue

Vue.js, or just Vue, is a JavaScript framework that has been steadily gaining popularity among the community. Vue describes itself as being "progressive," meaning that the framework can be quickly put to use for user interfaces, but can then be extended to include more and more functionality as required by your Single-Page Application. This extensibility includes features such as routing and advanced state management. Vue was created by Evan You, who was working at Google at the time, and was using AngularJS (or Angular 1) quite extensively. The first official release of Vue was in February 2014.

Version 3 of Vue, which was released in September 2020, was written in TypeScript, and as such, Vue supports TypeScript as a "first-class citizen," to quote the Vue website. While it was possible to use TypeScript and Vue prior to version 3, the integration and support for TypeScript have now become rather seamless.

In this chapter, we will explore the syntax...

Introduction to Vue

Vue is somewhat unique in its component structure, as it combines HTML templates with TypeScript logic, and also component-specific CSS within the same file. In this section of the chapter, we will set up a Vue development environment, and explore some of the concepts of Vue components.

Vue setup

Similar to what we have seen with Angular and React, Vue also provides a command-line utility for generating a bare-bones Vue application, which is known as the Vue CLI, or command-line interface. We can install the Vue CLI globally, as follows:

npm install -g @vue/cli

Here, we are using npm to install the Vue CLI, and making it available globally with the -g flag. Once it's installed, we can check the version of the Vue CLI as follows:

vue -V

Here, we are invoking the Vue CLI, which is simply called vue, and using the -V flag to retrieve the currently installed version, which at the time of writing returns:

@vue/cli 4.5.9

Here,...

A Vue application

In this section of the chapter, we will build a shopping cart application using the techniques that we have learned up until now with Vue. In our previous chapter, we built a product list and product details application using React, with the ability to specify how many of a particular item we would like to purchase.

This Vue application is intended to receive this information, and take over the display of a shopping cart. Our Vue application will need the ability to adjust the amount of a particular item we would like to purchase, as well as calculate the total cost (including tax and shipping) that a purchase would incur.

Application overview

An overview of the components we will build is shown in the following diagram:

Figure 13.7: Logical view of Vue components for the shopping cart application

Here, we start with the App.vue component, which will instantiate a collection of items in our shopping cart, and store it as a local state property...

Summary

In this chapter, we have explored the Vue JavaScript framework, and built a shopping cart application using it. We set up a Vue development environment, and then explored the structure of a Vue application that uses props and state to manage data between parent and child components. We then discussed DOM events, and how components can communicate by emitting custom events. To round out the first section of this chapter, we discussed computed properties, conditional template elements, and loops.

In the second section of this chapter, we built a shopping cart application using Vue, and broke down the application into various components. In the final chapter of this book, we will combine the Angular application that we have built with the React product view application, and then the Vue shopping cart application, to see how we can build applications using micro front-ends.