In this tutorial, we will explore the new features in Vue 3. Vue 3 provides developers with a better way to build Vue applications.

Vue 3 provides developers with an alternative and better way to build Vue applications. The introduction of the composition API and composition functions in Vue 3 has made code organization and reusability a breeze.

What to expect

In this tutorial, we will explore the new features in Vue 3. We will also refactor Brad Traversy‘s open-source Vue 2 application to Vue 3. In the process, you will learn how to use the new Vue 3 features, including the composition API and composition functions. Lastly, you will also learn how to use the new Vuex 4 in a Vue 3 application.

What is not covered

• Styling — We won’t cover the CSS properties used in this project in detail. Although it is available on the project repository for you
• Introduction to Vue 3 — This tutorial assumes familiarity with Vue 3’s composition API and reactivity fundamentals
• TypeScript — We won’t cover how Vue 3 works within TypeScript in the scope of this project

Prerequisites:

• Basic understanding of JavaScript and Vue.js will improve your experience in this tutorial
• If you would like to build along, install any code editor of your choice or get Visual Studio Code
• This tutorial assumes that you have a basic understanding of both Vue 2 and Vue 3
• This is not an introduction to Vue 3 tutorial. It will be most helpful to Vue 2 users with minimal understanding of Vue 3 looking to refactor Vue 2 projects to Vue 3

What’s wrong with Vue 2?

The inspirations for Vue 3 come from the existing limitations of Vue 2. Some of them are:

• Components become less readable and consequently less maintainable as they grow larger
• All available code reusability patterns in Vue 2 have unsolved bottlenecks
• Vue 2 has limited TypeScript support
• Find more reasons here

Say hi to Vue 3

Vue 3 aims to solve the existing limitations of Vue 2. With the composition API in Vue 3, you can organize component code based on logical concerns, as opposed to component options. This was problematic in Vue 2 as pieces of code could get spread out in multiple components options. This makes Vue 3 particularly simpler to read and maintain.

Getting started

Let’s start with the Vue 2 project created by Brad Traversy. The project is a todo application where you can perform some of the following actions:

• Add todos
• Delete todos
• Mark todos as completed
• Filter todos and
• Hide/show todos

Within the project, the todos are fetched from a Typicode API endpoint. All the actions performed on the data are happening on the backend. This is an interesting project that will be just right to expose how Vue 3 offers an alternative approach to building Vue applications.

#vue #javascript #web-development #programming #developer