Vue3 Example

Posted on  by admin

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.

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

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.

Vue 3 Shopping List Tutorial: Composition API and Reactive State

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.

Up Next

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

Methods

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.

Warp-up

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.

Wrap-up

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.

Conclusion

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.

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.

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.

Step 3 -- Importing our Vue 3 Router

It will then return an object containing all the public methods and data properties which you can then access from the component's template.

Attribute Binding

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.

List Rendering

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

Share This Article

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.

Dynamic CSS

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.

How to Install Vue 3?

Thanks to the new Vue 3, we can now pass data efficiently using the new Provide and inject pair.

  • getAll()
  • deleteAll()
  • findByTitle()

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.

Step 3 — Creating a Vue 3 Component for Shopping List

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.

  • get()
  • update()
  • delete()

You can, for example, use Teleport to display a header component outside the #app div.

Step 2 -- Installing the Vue 3 Router

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.

Using $refs to Access DOM

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

Step 1 — Installing Vue CLI 4

This is how you can easily do that. First, you need to create an eventBus.js file with the following code:. Next, you need to import this file in main.js to make it globally available in your app:.

Now, you can emit events and listen for emitted events like this;. With Vue 3, you can't do this anymore because $on, $off, and $once are all removed but $emit is still available because it's needed by children component to emit events to their parent components.

You can use provide / inject or any of the recommended third-party libraries instead of the events API.

When using the Vue 3 Composition API via the setup() method, you no longer can use this.$refs, instead, we can use the new ref() function as follows:.

Since Vue 3 is released, you can start by learning it instead of Vue 2 because many new APIs are introduced or updated, most of the fundamental concepts and patterns of Vue 2 will still be available in Vue 3.

Step 2 — Creating a New Vue 3 Project

Vue.js 3 itself is quite sol­id, and the first-par­ty pack­ages such as Vue Router are updated by the Vue team but for third par­ty pack­ages, they may take sometime for get­ting updat­ed for Vue 3.

So using Vue 3 now depends on how much you rely on those third par­ty packages.

This is what you'll learn by following this tutorial:. Installing Vue 3,. Creating a new Vue 3 app.

Working with state. Creating a template. Working with the Composition API. We can install Vue 3 and create a new project using two methods or more, let's see how.

Last Touches

Let's get started by installing Vue 3 using git and npm.

Head over to a new command-line interface and run the following commands:.

After installing the dependencies from npm, let's proceed by removing the boilerplate files and create a new main.js file where we can bootstrap our Vue 3 app:.