Vue.js 3 Tutorial with Example: Components, Props & Composition API

Vue.js 3 is the latest version of Vue which was re-written from scratch with TypeScript by the Vue team.

Vue 3 New Features

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

Vue 3 installation and setup

Rather than installing Vue 3 directly, let's clone the project vue-next-webpack-preview which will give us a minimal Webpack setup including Vue 3.

$ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
$ cd vue3-experiment
$ npm i

Once that's cloned and the NPM modules are installed, all we need to do is remove the boilerplate files and create a fresh main.js file so we can create our Vue 3 app from scratch.

$ rm -rf src/*
$ touch src/main.js

Now we'll run the dev server:

$ npm run dev

Vue 3 Composition API

One of the greatest features in Vue 3's release is Vue's new Composition API. The objective of the Composition API, which is inspired by React Hooks, is to simplify your components, improving the readability and organization of your code, and make it simpler to reuse code all through your application.

Ref and Reactive

Ref is used to declare reactive variables from primitive types such as:

String
Number
BigInt
Boolean
Symbol
Null
Undefined

watchEffect and watch

In Vue3, in addition to the watch method, there’s a new watchEffect method to track a reactive dependency and run a method when it runs.

Multiple v-model for custom components

The v-model directive is one of the few directives that come with Vue.js. This directive allows for two-way data binding.

Vue 3 Teleport

Teleporting is a new feature in Vue.js 3.0, inspired by React Portals. The Teleport component permits us to specify template HTML that we can send to another part of the DOM.

Vue 3 Suspense and Lazy Load Components

Lazy loading components are a simple method to improve the user experience of the application particularly if your code pack is large or if users are on slow internet connections.