Vue 3 - Breaking changes, New features & steps to Upgrade from Vue 2 to Vue 3

Vue 3 is here and everybody is searching for an approach to migrate and start using it as soon as possible. There are several new features yet additionally a lot of work done to improve performance and bundle size that makes this version a real candidate for the best client-side framework out there.

New syntax, deprecations, and some breaking changes may make your migration plan somewhat harder than anticipated. Let’s dive in and see what you should expect.

Mounting

The first thing that you will encounter is the difference in initializing your app.

In Vue 2:

import Vue from 'vue'
import App from './app.vue'

const app = new Vue({
  render: (h) => h(App),
}).$mount('#app')

In Vue 3:
In Vue 3 this is simplified with a more elegant syntax

import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");

Fragments

In Vue 2, multi-root components were not supported.

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Now in Vue 3, components now can have multiple root nodes.

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

Event Bus

$on, $once, and $off methods are removed from the Vue instance, so in Vue 3 it can’t be used to create an event bus. Vue docs recommend using mitt library.

Filters

In Vue 3 filters are removed! You can actually implement the same functionality in a small plugin but the fact that the pipe of the filter conflicts with the Javascript bitwise operator means that expressions with filters are not valid. That's why the recommendation is using a method instead.