DEV Community

loading...

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

ellis22 profile image Ellis Updated on ・2 min read

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')
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

Fragments

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

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

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

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide