Vue.js 3 was released and it’s bringing a bunch of new and exciting features whilst being mostly backward compatible.
You can learn about all changes in the official migration guide.
But in the above video, I will walk you through all key changes, what they mean for you and you must (or may) adjust your Vue 2 code!
There are a couple of main changes/ features which you should be aware of:
- Vue instances/ apps are created differently (read more, watch video)
data
must now always be a method (read more, watch video)Vue.component(...)
etc. becomesapp.comonent(...)
(read more, watch video)v-enter
becomesv-enter-from
(watch video)- The Vue Router setup changed (watch video)
- Same for Vuex (watch video)
- New Features: Fragments & Teleport (watch video)
- Optional New Feature: You can use the new Composition API (view separate tutorial)
You can learn all about Vue 3 from the ground up - including advanced concepts and new features like the brand-new Composition API - in-depth with my Vue - The Complete Guide Course.
I will very soon release a full Vue 3 update (completely re-record the course). You get this update for free (+ the existing course) if you are enrolled!
Vue - The Complete Guide
Learn VueJS from A - Z with this best-selling, 5* rated complete course!
Use Nuxt.js to get the most out of Vue!
Nuxt.js builds up on Vue.js and makes building (server-side rendered) Vue apps easier than ever before!
# Creating Vue Apps
With Vue 2, you created Vue instances like this:
new Vue({
el: '#app',
});
When using Vue 3, this syntax will no longer work!
Instead, you would write this:
Vue.createApp({}).mount('#app');
Creating Vue instances via new Vue()
was replaced by calling the new createApp()
method which is exposed on the Vue object.
Connecting the Vue instance to the DOM is no longer done via el
inside your options object, instead you use mount('app')
to tell Vue which part of your HTML code should be controlled by this Vue instance/ app.
That is almost all though - except for the data
change (see next point), everything works as you know it. You can still add methods
, computed
etc. to your Vue instance config object.
# data has to be a Method
In Vue 2, you could use the data
property in the instance options object to set the data that can be used in the template of your Vue instance.
For example, your code could’ve looked like this:
new Vue({
el: '#app',
data: {
message: 'Hello from Vue 2!',
},
});
With Vue 3, you must write this code instead:
Vue.createApp({
data() {
return {
message: 'Hello from Vue 2!',
};
},
}).mount('#app');
data
must now always be a function/ method!
In Vue 2, that was only required when defining data
in components. In root Vue instances, you were allowed to pass a simple object as a value to data
.
With Vue 3, that changed and you now always need a data
method.
Besides that, data
works exactly as you know it though. You can output data with interpolation, bind it with v-bind
and manipulate it as needed.
# Registering Components & More
Components, directives and (third-party) plugins are now registered differently.
Instead of
Vue.use('my-component', { ... });
it’s now:
app.use('my-component', { ... });
where app
is your Vue app created with createApp()
.
# Optional: The Composition API
The biggest feature (besides a lot of behind-the-scenes changes of course!) is the brand-new Composition API.
I got a separate tutorial which gets you started with the Composition API.
Important!
The new Composition API is 100% optional! You don’t have to use it, you can stick to the old Options API which you already know from Vue 2.
# What Else?
These are the biggest changes you should be aware of.
The already mentioned official migration guide lists all changes, so you might want to go through that as well of course.