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
The code for this chapter is located at https://github.com/PacktPublishing/-Vue.js-3-By-Example/tree/master/Chapter01.
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:
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
Vue 3 core features – components and built-in directives
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 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd.
The Firefox version of the add-on is at https://addons.mozilla.org/en-CA/firefox/addon/vue-js-devtools/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search.
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.