Vue 2 To Vue 3

Posted on  by admin

Harish Kumar路路 884 Views . The Vue.js 3 core has formally released on 18 September 2020 馃帀 馃コ. It means the Vue 3 core is now stable.

But there's a phased release process that will be finished before the end of 2020 when other official frameworks sub-projects will reach to stable status.

  1. Here are the Vue 3 docs, alongside a migration guide that includes what has changed.
  2. The Vue 3 code base is highly compatible with Vue 2.
  3. So, you shouldn't need to change the code to move to the new version.

Or, you didn't need to re-learn everything from scratch. But instead, opt into new features. In this article, I'll walk you through the relevant breaking changes and new features.

So, let鈥檚 dive in:. Migration to Vue 3. Before start migrating, first you should read the official migration guide. And modify the application code base according to the breaking changes.

In the below video, you can see how can migrate your existing Vue 2 app to Vue 3. Vue app initialization. The first thing that you will experience is the distinction in initializing the Vue app. In Vue 2, you need to utilize Vue constructor with a render function and the $mount method like this:.

In Vue 3, that simplified with a more elegant syntax structure. Event Bus is deprecated.

What is the difference between Vue 2 and Vue 3?

Do you love the idea of the Event Bus in Vue? If yes, this may disappoint you.

Vue has officially removed $on, $off and $once methods from the instance completely. Vue instances no longer implement the event emitter interface. That means you cannot implement the Event bus in vue3.

What we'll cover in this article

If you want to use the Event Bus pattern in your application, then you can use an external library implementing the event emitter interface, for example, mitt or tiny-emitter. Filters is deprecated. In 2.x, developers could utilize filters so as to apply basic content formatting.

In 3.x, filters are eliminated and not at this point supported. Instead, suggested using method calls or computed properties. Composition API. One of the most noteworthy changes is that new API that will allow for a function-based way of writing your component, inspired by React Hooks.

Enabling compat mode

Vue 3 will still support Options API, so if you don't want to use composition API, you can always use the traditional methods used in Vue 2. Example of Composition API:.

Fragments (Multiple root elements in template). In Vue 2, multi-root components were not supported. The solution was to enclose your code in a wrapper element. In Vue 3, now components can have multiple root nodes. That allows us to remove wrapper elements and composing cleaner markup. A not all that common issue, however exceptionally hard to comprehend is having part of your segment mounted in a different position in DOM than the Vue component hierarchy.

Project repo

A typical scenario for this is making a full-screen modal component. In most cases, you'd need the modal's logic to live inside the component. However, the positioning of the modal gets hard to solve through CSS, or requires an adjustment in component creation. This can now effortlessly accomplished with the utilization of the teleport feature.

Biggest changes on Vue 3

You can still interact and pass props to it like being inside the component! Please login or create new account to add your comment. Vue.js team released Vue 3.0 in September 2020.

This new version came with many new features, optimizations, but also comes with a few breaking changes.In June 2021, Vue.js team released the Vue 3.1 version.

Rewriting the component

This new release comes with @vue/compat (aka "the migration build").

It allows to migrate large projects smoothly by running a Vue 2 codebase along with Vue 3 changes.

FileChange
eslintrc.jsfor some Vue 3 eslint settings
package.jsonthis upgraded Vue to 3.0.0 beta.1 and Vuex to 4.0.0-alpha.1. It made me wonder why the alpha and betas, of course. I had to manually add @vue/compiler-sfc , not sure why. But when I tried building the app, it complained about this being missing. How did I know this? I generated a new Vue 3 app and saw it there. Maybe I missed this in my existing app.
_src/main.jsThe createApp API replaces the new Vue({ ... }) API
_src/store/index.jsThe Vuex.createStore API replaced the Vue.use(Vuex) API

What is Vue.js?

Migrating to Vue 3 can be an important task (depending on your project's size).

At Crisp, we recently migrated our app (250K lines of code) from Vue 2.6 to Vue 3.2 in about 2 weeks.We prepared this migration by reading the official Vue Migration Tutorial, but we discovered many different caveats while migrating our project.We felt it would be good to share our learnings so other companies can benefit from our experience.

FileChange
eslintrc.jsSSome extends settings changed. But instead of adding the new ones, I ended up with 2 extends arrays. So I had to manually fix this.
package.jsonSeveral typescript packages were added

This article will tell you:. The major differences between Vue 2 and Vue 3. Dilemmas we've encountered and how we dealt with them. Our Vue.js migration strategy. Created in 2013, Vue.js initial philosophy was to create a minimalistic alternative to AngularJS 1. At the time, Angular was a bulky framework, with a ton of new features. Vue.js first versions were like a mini-angular framework with Templating, Data Binding, Filters and Directives. Vue 2 was then released in 2o16 (almost at the same time as Angular 2), and offered a great alternative to AngularJS. In fact, many developers using Angular 1 decided to move to Vue 2 because they didn't like Angular 2: Vue 2 was offering something as simple as AngularJS, but with better performances.

Vue 3 was created with performances in mind. It's an evolution rather than a revolution. Most new features and breaking changes have been released for performance reasons. The internal reactivity system has been reworked from the ground, and for this reason, IE 11 support has been dropped (which is not a huge loss 馃槀).Finally, this new version is meant to be more modular and introduces features like the Composition API.

Migration Strategy

The Vue global API has been deprecated. While it is still supported with @vue/compat, reworking your app will be required in order to fully support Vue 3.It means it won't be possible to use APIs like Vue.set or Vue.delete.

Vue v3.x Overview

As Vue 3 comes with a new reactivity system, using those APIs becomes useless.

Instead of using Vue.set(object, key, value) you will have to directly use object[key] = value.Same goes for Vue.delete(object, key), which can be replaced with delete object[key].

FileChange
package.jsonA few router packages were added and modified. The vue router bumped up to 4.0.0-0
_src/main.tsThe createApp API extended to include use(router)
_src/router.tsThe createRouter API replaced the old Vue.use(Router) API. It also added the createWebHistory API which replaces the mode: history technique

As explained earlier, Vue.js has been created as an alternative to Angular 1. It's why Filters were supported initially. The biggest problem with Filters is performance: the filter function has to be executed every-time data is updated.

For this reason, filters support has been dropped with Vue 3.This means it won't be possible to use stuff like {{ user.lastName | uppercase }} in Vue 3 templates.

Instead, you will have to use computed properties like {{ uppercasedLastName }} or methods like {{uppercase(lastName)}}.

Starting Vue 3, your app and plugins are no longer instantiated globally.

What you need to follow along with this article

It means you can have multiple Vue apps within the same project.

Using v-if conditions with v-for lists used to be possible with Vue 2.

FileChange
package.jsonA few Vuex packages were added and modified. The vuex version bumped up to 4.0.0-0

For performance reasons, this behavior has been disabled on Vue 3.Starting Vue 3, you will have to use computed list properties.

FileChange
src/store/index.tsI swapped to the new crateStore API. Similar to the other API changes for Vue and the Vue Router

Reactivity in Vue 3 with ref

The v-model API changed a bit on Vue 3.First the property value has been renamed to modelValue. ChildComponent needs to be rewritten like this:. The cool thing is that it's now possible having multiple v-model custom values along, for example v-model:valueA, v-model:valueB, etc.

In Vue 2, it was possible to use a Vue instance to create a global EventBus with vm.$on and vm.$off. Starting Vue 3, it's not possible to do so anymore, as vm.$on and vm.$off were removed from the Vue instance.

As a replacement, we suggest using the Mitt library:.

SettingWhy
'max-classes-per-file': 'off',When I create models I often do this one per file. But in my project I had a bunch of small 5 lines of code classes and it was easier to maintain those in a single file.
'no-useless-constructor': 'off',Some of my models have empty constructors. However, they have initialization parameters that allow me to call them to create a new instance and set properties like this new Hero(1, 'John',)
'no-empty-function': 'off',Same issue as the empty constructor above.
'@typescript-eslint/no-useless-constructor': 'error',Same issue as the empty constructor above.
'import/prefer-default-export': 'off',I don't prefer default exports.
'no-use-before-define': 'off',I often put function definitions where I want them in a file. basically i use hoisting to my advantage for readability. So I turn this off in most projects.
'@typescript-eslint/no-unused-vars': ['error'],If I didn't add this, then every time I imported a type/class/interface and used it as a type, eslint complained.

Setting up the project

The same code using Vue 2 would be:. It is still possible to emit events from components to their parents, however, all event have to be declared via the new emit option (it is very similar to the existing props option). For instance, if your component has a @click property, emitted using this.$emit("click"), you will have to declare the "click" event in your component:.