Upgrade/Migrate your Vue 2.x projects to Vue 3.0

With the release of vue-next v3.0.0-beta.1 in April 2020, as of today, Vue has reached an official v3.0 release — One Piece. As a fellow Vue junkie, I am feeling the same excitement as any other frontend devs because of the new features and enhancements this would bring. However, that brings the question: “how to upgrade my existing Vue 2 projects to Vue 3?”.

Taking a look at the release notes, we see that Vue 3 brings changes to the core library as well as the Vue ecosystem:

We’ll be looking at how to scaffold Vue 3 projects based on existing Vue 2 code, and show deployable code than sandboxed tutorials out there. A brief outline here:

  • Setting up
  • Writing Components
  • Integrate vue-router (v4.x)
  • Integrate vuex (v4.x)

Setup Syntax

In Vue 2.x you would set up with the following:

We are using the global Vue object to create a Vue instance. Any change made to this Vue object will affect every Vue instance and component.

In Vue 3, a new function createApp is provided so now every configuration is scoped to a certain Vue application defined:

Back in Vue 2.x, if a third party library is modifying the Vue object, it creates unexpected changes (especially with global mixins) which would not be the case with Vue 3.

Additionally, you can use these methods in app: config, use, mixin, component, directive, mount, unmount, provide/inject. For more info, refer to the official docs: Application API.

Writing Components

In Vue 3, the component construction hasn’t changed much. Just that computed and watch are extracted out as functions. See below:

Both methods can now be imported and used as needed. Rather than having a function wrapper in Vue 2.x.

Integrate Vue Router (v4.x)

Edit the filesrc/router/index.js like below:

In Vue 3, initializing the router is not much different to Vue 2.x. Only that the function construction is taken over by the new createRouter .

To get the current route within a component, you can do the following:

Integrate Vuex (v4.x)

Edit the filesrc/store/index.js like below:

The syntax hasn’t changed much here. We added counter.val to the state and added a mutation to mutate counter.valsetCounterVal.

In the component, we can reference the vuex state using computed, and ctx.$store to access the mutation methods.

Like Vue 2.x, we would still use $store.commit to call the vuex mutation setCountVal.

Remember to return all the relevant functions or variables at the end of the component.

Summary

Apart from createApp, Vue Router and Vuex upgrades, we are also welcomed to the new Composition API. We can see Vue is going towards better APIs and simpler development workflow. The core Vue team has adopted many ideas from third party libraries and integrated them to the official framework.

We’ve only touched on the major API changes and improvements. To view the full list, do check out the Vue RFCs repo.

NodeJS | VueJS | Blockchain | Open Data

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store