Vue.js 3 is the latest version of Vue which was re-written from scratch with TypeScript by the Vue team. Vue 3 is available for use in production at the current time so you can use the new version to learn about its new features. Now that Vue 3 is released, developers need to upgrade from Vue 2 as it provides many new features that are super handy when building readable and maintainable components, and better ways to structure Vue applications.
Creating a Vue 3 App with Vue CLI v4.5+
We’ll be taking a look at some of these features in this tutorial. At the end of this tutorial, you will understand:. The provide / inject pair and how to use it. Teleport and how to use it.
Vue 3 Shopping List Tutorial: Composition API and Reactive State
Fragments and how to start using them. The changes made to the Global Vue API and the introduction of the createApp method. The changes made to the Events API and the removal of $on, $off, and $once.
You no longer can use $refs to access DOM elements.
Vue 3 component props. We'll also show you how to develop apps using the current version of Vue 3, we'll particularly focus on the new features including components and props.
You'll see how you can pass data from a parent component down to a deeply nested child component using the provide / inject pair.
We'll also look at how we can reposition and transfer components from one point in our app to another using Teleport and how to use the multi-root node component.
How to Install Vue 3?
Finally, we learn about the changes made to the Events API and Global API including createApp, $on, $off, and $once. Throughout this tutorial sections, you will learn how to use Vue 3 and the Composition API to build your web application examples.
- We'll also learn about the ref() function and how to create reactive state using the reactive() function in Vue 3, which can be used to define reactive variables, and then we'll learn about the setup() method introduced as a part of the Composition API added in Vue 3 as an alternative to the Options API.
- If you have already used Vue 2 $refs and wonder how to use $refs inside the new setup() method.
You'll learn how to use the new ref() function as an alternative for static and dynamic HTML element references.
The Composition API allows you to write and organize components in a Vue 3 application following a reactive approach.
- The Vue Composition API will help you to build a more scalable application.
- We’ll be learning how to create a shopping list application with Vue 3 and the Vue Composition API.
- In this section, we'll see a summary of the new features coming with Vue 3.
Vue 3 is the new version of Vue.js that was re-written from scratch using TypeScript. Evan You, the creator of Vue, announced it back in 2018 at Vue.js London. According to Evan You, Vue 3 will be faster, smaller, more maintainable, and easier to target native development. In more details, these are some of the new features of Vue 3:.
Class-based components and ES2015 classes,. Fragments, which allow you to have components with multiple root nodes,.
TelePort, which allows you to render content outside of Vue’s mount element,.
The Composition API, which is similar to React Hooks, a new syntax that allows you to use functions for organizing your code by feature not operation, .
TypeScript support, Vue 3 is built-in TypeScript and allows you to optionally use TS for development,.
Virtual DOM rewrite for faster performance,. Slots Generation optimization (separate rendering for parent & child components),. Static props hoisting,.
Hooks API (experimental),. Time Slicing Support (experimental), . provide / inject, etc.
Like most modern web development libraries and frameworks, Vue adopts a component-based approach to build apps where components are the building blocks of the application.
A component controls a patch of the user interface and interacts with the other components in the application. We'll learn how to scaffold a new Vue 3 project using the latest version of Vue CLI and create a Vue 3 component. Props are necessary for any Vue application as they alow you to pass data between components.
Props are simply attributes that we need to register on a component to pass data from a parent component to its children. Since props let us share data between components, it allows you to organize your Vue apps and components in a modular way.
In Vue 3, we can access props inside components in a different way than Vue 2. In Vue 2, a component’s props are simply part of the this object and can be accessed by using this.propName.
However with the introduction of the setup() method in Vue 3 components, this does not contain the properties that it used to contain in Vue 2.
So how do we use Vue 3 props without this? Fortunately for us, it's easy! The setup method accepts two arguments:. context, which is an object that contains specific properties that used to be found on this. props, which is an object that contains the component’s props.
This props object is what we need to use to access our props.
All we need to do is props.propName – without the this variable:.
In Vue 2, it was not possible to isolate some functionalities to one instance of your app (if you have more than one instance in your app) without it affecting other apps because they are all mounted on Vue.
In this code, you can't, for example, have the Vue Directive associated with app1 and the Mixin with app2 but instead, they’re both available in the two apps.
Vue 3 provides a new Global API to solve this type of problems, called createApp.
This method returns a new instance of a Vue app.
Now, all APIs such as components, mixins, directives, and use, that mutate Vue are available within separate app instances and each instance of your Vue app can have functionalities that are unique to them without affecting other existing apps.
Step 2 — Creating a New Vue 3 Project
We can rewrite the previous code as follows:. You can also add functionalities that you want to share among all your apps using a factory function. In this example, we'll learn about the setup() method in Vue 3.
Vue 3 introduced the composition api as an alternative to the options api in Vue 2 for writing components.
A Vue 3 component needs to have a setup() function which is a part the Composition API. This function will be executed before creating the component object. As a side effect, this, that refers to the component itself, is not available in the setup() function.
Step 2 -- Installing the Vue 3 Router
In the body of the setup() function, you can declare the data properties, computed methods, watch methods, and any required JS methods needed by the component. It will then return an object containing all the public methods and data properties which you can then access from the component's template.
In this section, we'll learn about the ref() function in Vue 3. In Vue 3, you can use the ref() function to define a reactive variable.
Ref is used to declare reactive variables from primitive types such as:.
Now, let's consider this Vue 3 component:. The ref() function takes a value and returns a reactive and mutable ref object.
You can access or mutate the value of the ref object using the .value property but that's only inside the setup() method.
In the corresponding template, you can use the name of the variable as usual i.e productName in our case.
Why don't you need to use the productName.value property in the template:.
Simply because When a ref is returned as a property on the rendering context (i.e from the setup() method) in the template, it gets unwraped to the original primitive value.
In Vue 2, we used props for passing data – such as string, arrays, objects, and so on – from a parent component directly to its children component.
But in many cases, we also need to pass data from the parent component to a deeply nested child component which is, not so appropriate, to do with props since we'll have to pass data to many intermediate components that don't actually need this data.
Developers resorted to more advanced patterns such as Vuex Store and Event Hub, to avoid passing data through the deeply nested components.
Thanks to the new Vue 3, we can now pass data efficiently using the new Provide and inject pair.
We can use provide as a function or an object to make data available from a parent component to any of its nested component.
In some cases, where we need to create Vue components and define them in one part of our application but they are actually intended to be displayed in another part of our application. Think for example of a modal or a popup which need to cover the whole view port. Thanks to Vue 3 Teleport, we don't need to use CSS’s position property anymore for implementing this type of requirements.
Teleport is a new feature that makes it easy to display a component outside its default position i.e the #app container where Vue apps are usually wrapped.
You can, for example, use Teleport to display a header component outside the #app div.
Please note that you can only Teleport to elements that exist outside of the Vue DOM.
You need to provide two props to the Teleport component:. to: In this prop, you can pass a class name, an id, an element or a data-* attribute. We can also make this value dynamic by passing a :to prop as opposed to to and change the Teleport element dynamically. :disabled: In this prop, we pass a Boolean value and can be used to toggle the Teleport feature on an element or component.
This can be useful for dynamically changing the position of an element.
One of the issues developers have always faced with Vue 2, was adding multiple root elements in the template of components and as a workaround, they wrap all elements in a parent element.
And there you have it!
While this is not a big issue, there are cases where you want to render a component without a container that wraps the root elements. With Vue 3, we have a new feature called Fragments that enables developers to add multiple elements as roots in the template.
In Vue 2, developers used the events API for passing data between components that don’t share a parent/child relationship ( along the Vuex Store) via Event Bus. This is how you can easily do that. First, you need to create an eventBus.js file with the following code:.