Vue.js 3 By Example

By John Au-Yeung
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Free Chapter
    Chapter 2: Building a Vue 3 Progressive Web App
About this book

With its huge ecosystem and wide adoption, Vue is one of the leading frameworks thanks to its ease of use when developing applications. However, it can get challenging for aspiring Vue.js developers to make sense of the ecosystem and build meaningful applications.

This book will help you understand how you can leverage Vue effectively to develop impressive apps quickly using its latest version – Vue 3.0.

The book takes an example-based approach to help you get to grips with the basics of Vue 3 and create a simple application by exploring features such as components and directives. You'll then enhance your app building skills by learning how to test the app with Jest and Vue Test Utils. As you advance, you'll understand how to write non-web apps with Vue 3, create cross-platform desktop apps with the Electron plugin, and build a multi-purpose mobile app with Vue and Ionic. You'll also be able to develop web apps with Vue 3 that interact well with GraphQL APIs. Finally, you'll build a chat app that performs real-time communication using Vue 3 and Laravel.

By the end of this Vue.js book, you'll have developed the skills you need to build real-world apps using Vue 3 by working through a range of projects.

Publication date:
April 2021


Chapter 1: Creating Your First Application in Vue 3

Vue 3 is the latest version of the popular Vue.js framework. It is focused on improving developer experience and speed. It is a component-based framework that lets us create modular, testable apps with ease. It includes concepts that are common to other frameworks such as props, transitions, event handling, templates, directives, data binding, and more. The main goal of this chapter is to get you started with developing your first Vue app. This chapter is focused on how to create components.

In this chapter, we will look at how to use Vue 3 to create simple apps from scratch. We will start by building the most basic apps and then move on to building more complex solutions in the next few chapters.

The major topics we will cover are as follows:

  • Understanding Vue as a framework
  • Setting up the Vue project
  • Vue 3 core features – components and built-in directives
  • Debugging with Vue.js Devtools

Technical requirements


Understanding Vue as a framework

As we mentioned in the introduction, there are concepts in Vue that are available from other frameworks. Directives manipulate the Document Object Model (DOM) just like in Angular.js and Angular. Templates render data like we do with Angular. It also has its own special syntax for data binding and adding directives.

Angular and React both have props that pass data between components. We can also loop through array and object entries to display items from lists. Also, like Angular, we can add plugins to a Vue project to extend its functionality.

Concepts that are exclusive to Vue.js include computed properties, which are component properties that are derived from other properties. Also, Vue components have watchers that let us watch for reactive data changes. Reactive data is data that is watched by Vue.js and actions are done automatically when reactive data changes.

As reactive data changes, other parts of a component and other components...


Setting up the Vue project with the Vue CLI and script tag

There are several ways to create Vue projects or to add script tags to our existing frontends. For prototyping or learning purposes, we can add the latest version of Vue 3 by adding the following code:

<script src=""></script>

This will always include the latest version of Vue in our app. If we use it in production, we should include the version number to avoid unexpected changes from newer versions breaking our app. The version number can replace the next word if we want to specify the version.

We can also install Vue by installing it as a package. To do that, we can run the following command:

npm install vue@next

This will install the latest version of Vue in our JavaScript project.

If we created a Vue project from scratch with an older version of the Vue CLI, then we can use the CLI to generate all the files and install all the packages for us. This is the...


Vue 3 core features – components and built-in directives

Now that we have created a basic Vue app with a Vue instance, we can look more closely at how to make it do more. Vue 3 is a component-based framework. Therefore, components are the core building blocks that are used to build full production - quality Vue 3 apps. Components are parts that can be combined to form a full app and are reusable. Vue 3 components have several parts, which include the template, the component option object, and the styles. The styles are the CSS styles that we apply to the rendered elements. The template is what is rendered on the browser's screen. It contains HTML code combined with JavaScript expressions to form the content that's rendered in the browser.

Templates get their data from the corresponding component option object. Also, the component templates can have directives that control how content is rendered and how to bind data from the template to a reactive property.



Debugging with Vue.js Devtools

Right now, there is no easy way to debug our app. All we can do is add console.log statements to our code to look at the values. With Vue.js Devtools, we can have more visibility in our app. Vue.js Devtools is a Chrome or Firefox extension that we can use to debug our Vue.js applications. It can be used on projects that are created with Vite or created from scratch by including the script tag for Vue 3. We can install the extension by searching for the Vue.js Devtools extension in the respective browser's app store.


The URL to install the Chrome version of Vue.js Devtools is at

The Firefox version of the add-on is at

Once we've installed it, we should see the Vue tab in the browser's development...



In this chapter, we learned that Vue 3 is a component-based framework, and we looked at the different parts of the component. One important part we covered was reactive properties. They are properties of the component that we can change to update all the parts of the app that reference the reactive property. These properties can be watched manually, and any value changes are also picked up automatically by Vue 3 so that any parts of the app that reference the reactive property are updated automatically. Components are composed in a way that they can be reused whenever possible.

We then moved on to understand the role of a template in every component. Templates are also a part of every component. They must all render something onto the screen. Templates can have HTML elements, other components, and directives that modify how the elements and components in the template are rendered. Templates can have JavaScript expressions in them so that we can do things such as react to...

About the Author
  • John Au-Yeung

    John Au-Yeung is a frontend developer who has extensive experience with the latest frontend technologies. He has an MSc in information technology and a BSc in mathematics. He is also a part-time blogger who writes about the latest frontend development technologies. In addition, he is an author of many self-published books about JavaScript programming. He has extensive experience with Vue and React and loves working with both. JavaScript programming is his focus and is what he does every day.

    Browse publications by this author
Vue.js 3 By Example
Unlock this book and the full library FREE for 7 days
Start now