Saturn Vue 0300 Misfire Again After Coil Replacement

Vue.js team released Vue 3.0 in September 2020. This new version came with many new features, optimizations, only also comes with a few breaking changes.

In June 2021, Vue.js team released the Vue 3.ane version. This new release comes with @vue/compat (aka "the migration build"). Information technology allows to migrate big projects smoothly by running a Vue 2 codebase forth with Vue three changes.

Migrating to Vue three tin be an important task (depending on your projection's size). At Crisp, we recently migrated our app (250K lines of lawmaking) from Vue two.half-dozen to Vue 3.2 in about 2 weeks.

Nosotros prepared this migration by reading the official Vue Migration Tutorial, but nosotros discovered many dissimilar caveats while migrating our projection.

Nosotros felt information technology would be adept to share our learnings and so other companies can benefit from our feel. This article will tell you:

The major differences between Vue ii and Vue 3
Dilemmas we've encountered and how nosotros dealt with them
Our Vue.js migration strategy

Some background around Vue three

Created in 2013, Vue.js initial philosophy was to create a minimalistic alternative to AngularJS 1.

At the time, Angular was a beefy framework, with a ton of new features. Vue.js kickoff versions were like a mini-angular framework with Templating, Data Bounden, Filters and Directives.

Vue ii 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 one decided to move to Vue 2 considering they didn't like Angular 2: Vue ii was offer something every bit uncomplicated as AngularJS, but with amend performances.

Vue 3 was created with performances in heed. It's an evolution rather than a revolution. Almost new features and breaking changes have been released for performance reasons.

The internal reactivity arrangement has been reworked from the basis, and for this reason, IE eleven support has been dropped (which is non a huge loss 😂).

Finally, this new version is meant to be more than modular and introduces features similar the Composition API.

Biggest changes on Vue 3

Vue global API

The Vue global API has been deprecated. While it is yet supported with @vue/compat, reworking your app will be required in social club to fully back up Vue 3.

It ways it won't exist possible to use APIs like Vue.prepare or Vue.delete. As Vue three comes with a new reactivity system, using those APIs becomes useless.

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

Filters

Equally explained earlier, Vue.js has been created as an culling to Athwart one. It's why Filters were supported initially.

The biggest problem with Filters is operation: the filter part has to exist executed every-time information is updated. For this reason, filters back up has been dropped with Vue 3.

This ways it won't be possible to utilise stuff like {{ user.lastName | uppercase }} in Vue iii templates.

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

Vue & Plugins instantiation

Starting Vue three, your app and plugins are no longer instantiated globally. It means you can have multiple Vue apps within the aforementioned project.

Using Vue 2:

              import Vue from "vue";  new Vue({   router,   return: h => h(App) }).$mount("#app");

Using Vue 3:

              import { createApp, h } from "vue";  const app = createApp({   render: () => h(App) });  app.use(router);  app.mount("#app");

v-if + v-for

Using five-if conditions with v-for lists used to be possible with Vue two. For functioning reasons, this behavior has been disabled on Vue iii.

Starting Vue iii, you will take to apply computed list properties.

v-model

The v-model API changed a flake on Vue 3.

Showtime the belongings value has been renamed to modelValue

              <ChildComponent v-model="pageTitle" />

ChildComponent needs to be rewritten like this:

              props: {   modelValue: String // previously was `value: Cord` },  emits: ['update:modelValue'],  methods: {   changePageTitle(title) {     this.$emit('update:modelValue', championship)   } }

The absurd thing is that it'southward now possible having multiple v-model custom values along, for example v-model:valueA, v-model:valueB, etc.

$emit

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

As a replacement, we suggest using the Mitt library:

              mounted() {   this.eventbus = manus();    eventbus.on("fix", () = {     console.log("Event received");   });    eventbus.emit("gear up"); }

The same code using Vue 2 would be:

              mounted() {   this.$on("ready", () = {     console.log("Event received");   });    this.$emit("ready"); }

Information technology is still possible to emit events from components to their parents, even so, all upshot have to be alleged via the new emit option (it is very similar to the existing props pick).

For example, if your component has a @click holding, emitted usingthis.$emit("click"), you volition have to declare the "click" event in your component:

              props: {   name: {     type: Cord,     default: ""   }, },  emits: ["click"], // events have to be declared hither  information() {   render {     value: ""   } }

Migration Strategy

Our app is chosen Crisp. It is a big business messaging app used every day past 300K companies all around the world. Companies use Well-baked to answer to their customers using a Squad Inbox that centralizes chat, emails and many other channels.

Equally our current app is used past many different users, it is obviously important for us to not intermission anything. Thus, we as well needed to improve our software on a daily basis, so we can iterate on bugs and new features.

So we needed to have two different branches:

our main branch, for Vue ii.6, with our electric current release lifecycle
a vue3 branch, to work on the codebase migration to Vue 3

Additionally, we released every mean solar day a beta running our Vue 3 codebase, and backported almost everyday changes made on the Vue 2 branch into the Vue 3 one, to prevent from having headache once merging the Vue 3 codebase.

Finally, we chose not to rely on new Vue APIs such every bit the Composition API, and only migrate what's necessary. The reason backside this was to reduce the risk of introducing regressions.

Updating Vue Build Tools

Our app relies on Vue Cli (webpack). Once more, nosotros chose to not drift notwithstanding to Vite, preventing us from introducing new problems, as our build system is pretty circuitous.

Migrating Vue Cli to support Vue iii is pretty piece of cake.

You will have get-go to edit your parcel.json file in order to update Vue.js and its dependencies.

So we replace "vue": "^2.6.12" with "vue": "^three.ii.6".

Additionally, nosotros will have to utilise "@vue/compat": "^3.two.6" , allowing to smoothly drift the codebase from Vue 2 to Vue three.

We volition likewise have to upgrade "vue-template-compiler": "^2.vi.12" to "@vue/compiler-sfc": "^3.2.6".

At present, nosotros will have to update our vue.config.js file and edit the chainWebpack function. It will forcefulness all your existing libraries to utilise the @vue/compat bundle.

                              // Vue 2 > Vue three compatibility mode   config.resolve.alias.set("vue", "@vue/compat");    config.module     .rule("vue")     .utilize("vue-loader")     .loader("vue-loader")     .tap(options => {       // Vue 2 > Vue iii compatibility way       return {         ...options,         compilerOptions: {           compatConfig: {             // default everything to Vue ii behavior             MODE: two           }         }       };     });

Updating our master.js file

We now need to instantiate Vue like this:

              import { createApp, h, configureCompat } from "vue";  const app = createApp({   render: () => h(App) });  app.use(router); app.use(shop); // Initiate other plugins hither  configureCompat({   // default everything to Vue 2 beliefs   MODE: two });   app.mount("#app");

Updating Vue Router

We will have to use Vue Router latest version "vue-router": "4.0.eleven"

Using the latest Vue.js Router isn't much different. The primary divergence is that y'all will have to manually enable history mode using:

              import { createWebHistory, createRouter } from "vue-router";  var router = createRouter({   history: createWebHistory(),   routes: [     // all your routes   ] });

Migrating Filters

Our existing app relies a lot on filters (effectually 200 usages). The get-go matter was to discover how many filters we were using. As mod IDEs (VSCode, SublimeText) supports Regex search, we made a regex and then nosotros tin can find out all Vue filters usages in our templates: {{ (.*?)\|(.*?) }}

As Vue three completely drops Filters support, we tried to notice an elegant style to nonetheless use Filters. The solution was migrating Vue filters to custom Singletons Helpers.

For instance on Vue ii:

              Vue.filter("uppercase", function(string) {   render cord.toUpperCase(); });

Becomes on Vue 3:

              upper-case letter(string) {   return string.toUpperCase(); }  export { capital letter };

And then we globally instantiated the StringsFilter grade:

              import { capital letter } from "@/filters/strings";  app.config.globalProperties.$filters = {   majuscule: uppercase };

Finally, we can use our filter:

{{ firstName | capital letter }} becomes {{ $filters.uppercase(firstName) }}

Fix errors

As your migration process may progress, you volition spot errors in your browser'south console. Vue 3 Compatibility way comes with dissimilar logs helping yous to migrate your app to Vue 3.

Vue 3 compat mode comes with explicit warnings

Rather than trying to drift your app characteristic by feature or template by template, nosotros recommend migrating API past API.

For example, if you run into the WATCH_ARRAY deprecation discover in the logs, we recommend having a look to the migration guide provided in the logs.

Then, migrate step by step every sentinel array.

Once migrating all the watch arrays is washed, you can then turn off the compatibility mode for this feature:

              import { createApp, h, configureCompat } from "vue";  const app = createApp({   render: () => h(App) });  // Initiate all plugins hither  configureCompat({   // default everything to Vue 2 behavior   MODE: two,    // opt-in to Vue 3 behavior for non-compiler features   WATCH_ARRAY: fake });   app.mount("#app");

Updating Libraries

Vue 3 comes with the @vue/compat bundle, supporting both Vue 2 and Vue three libraries. However, the @vue/compat mode also comes with degraded performances.

Using the compatibility mode shall only be done while converting your app to Vue iii and all its libraries. Once all the projection and libraries take been converted, you can become rid of the compat mode.

And so we tin can achieve this, we volition have to migrate all libraries to Vue 3 compatible ones.

All official Vue libraries (Vuex, Vue Router) have been ported to Vue 3, while most popular packages already have Vue 3 compatible versions.

Effectually xx% of community libraries we utilize didn't have a Vue 3 version, so we cull to fork all libraries that haven't been ported to Vue 3 however, for instance vue-router-prefetch.

Porting a Vue 3 library is normally quite unproblematic and takes from 30 minutes to a half-solar day, depending on the library complexity.

In one case we are done migrating a library to back up Vue iii, we create a "pull request" to the original library, and so that others can do good from our piece of work.

Most Performances

Vue 3 comes with many different functioning improvements thanks to the new internal reactivity system. The Javascript heap size has been reduced from 20-30% in most cases and from 50% for some complex lists. For our messaging use-case, we saw big CPU improvements.

Our new Crisp app feels faster to utilize and lighter.

Conclusion

As nosotros are writing this commodity, we are deploying the new Crisp app in production. Migrating this app took the states around 2 weeks, being ii developers, most full-fourth dimension.

As a comparison, moving from Angular 1 to Vue ii took us effectually 9 months.

Switching from Vue 2 to Vue three is an important but non an impossible job. This new Vue version offers some not bad performance improvements.

To thank the Vue.js customs, we've started to contribute to the projection equally a aureate sponsor. As a company, we experience we have to empower open-source project to build a improve globe where software and environment tin can talk to each other.

vincentknines1992.blogspot.com

Source: https://crisp.chat/blog/vuejs-migration/