The code for this chapter is located at https://github.com/PacktPublishing/-Vue.js-3-By-Example/tree/master/Chapter01.

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...

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="https://unpkg.com/vue@next"></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...

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.

Components...

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.

Important:

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.

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...