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.

In this Vue 3 tutorial, we’ll show you how to develop apps using the current version of Vue 3, we’ll particularly focus on the new features.

Throughout this tutorial sections, you will learn how to use Vue 3 and the Composition API and the router to build your web application examples. We’ll also learn about the ref() function in Vue 3. In Vue 3, you can use the ref() function to define a reactive variable and then we’ll learn about the setup() method in Vue 3.

The Composition API is introduced in Vue 3 as an alternative to the Options API. We’ll learn how to create reactive state using the reactive() function. We’ll be learning how to create a shopping list application with Vue 3 and the Vue Composition API.

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.

What’s Vue 3 and Its New Features

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.

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:

1. Class-based components and ES2015 classes,
2. Fragments, which allows you to have components with multiple root nodes,
3. Portals, which allows you to render content outside of Vue’s mount element,
4. 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,
5. TypeScript support, Vue 3 is built-in TypeScript and allows you to optionally use TS for development.
6. Modularity
7. Virtual DOM rewrite for faster performance
8. Slots Generation optimization (separate rendering for parent & child components)
9. Static props hoisting
10. Hooks API (experimental)
11. Time Slicing Support (experimental)

Do you Need to Learn Vue 2 or Vue 3 at this Time?

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.

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

Continue reading how to build a shopping app with Vue 3.