Migrating from Vue 2 to Vue 3

5 min readDec 26, 2021


My experience and tips of upgrading Vue.js projects to Vue 3


This year I have migrated my projects to Vue 3 and now I am glad to share with you my experience of upgrading Vue 2 code.

This article will cover a couple of points you have to pay attention to while migrating projects to Vue 3.

Vue 3 has a list of breaking changes you have to deal with. I will cover here only some of them. Please check the official Vue.js Migration Guide for further details.

Vue.js: Migration from Vue 2 Guide

1. New app instance concept with createApp

Vue 3 has changed the way you create the app instance (A New Global API: createApp)

In Vue 2 we have used new Vue({}) to create a new instance of Vue

In Vue 3 you must use the createApp method to create a new app instance

I still don’t have any JavaScript Bundler in my projects and use a CDN build of Vue. In this case, the method createApp is exposed via the global Vue object:

Or we can just directly use the Vue.createApp()method like this

const app = Vue.createApp({})

You can use the same way of initializing for other Vue 3 methods including the Compositions API methods like ref, computed, watch and etc.

For example, like this:

Vue 3 Compositions API methods

2. Data is now always a function

Vue 2 has different ways of declaring data for the root instance and components.

The root instance has an object directly in the data property:

For Vue 2 components data must be a function:

Data Function in a Vue 2 Component

In Vue 3 data must be a function in the root component instance also:

3. The new way of…




Born, Learned, Studied, Coding…