Vue2 To Vue3

Posted on  by admin

As we know, the official release of Vue 3 was on September 18, 2020, it’s been almost a year, and I think it’s time to move on to it.

Buuuut… it’s not that simple. At the moment, not all plugins are adapted to Vue 3, so you have to look for replacements.

  1. I tried it and you know, it didn’t work.
  2. But to our great luck, there is a plugin that has the same API as Vue 3.
  3. It was kindly provided by the developers themselves to soften the transition from version 2 to version 3.

The plugin is called @vue/composition-api. Today we will talk about it. Important: This article is an introductory one with which I plan to start a series of articles on VUE 3.

So, today I will show you just a few simple examples that will help whet your appetite and smoothly start your transition to the new version of Vue.

Let’s get started! First, we need to update the packages. To do this, open a terminal and use the command:. But note that you must have Vue CLI and Node.js installed. After running the command, you should see a list of packages that need to be updated. If the packages are updated, the message below will appear.

Install the Vue Composition api plugin. After that, create a file in the scr folder where @vue/composition-api will be initialized.

Experience your Vue apps exactly how a user does

Let’s call it installCompositionApi.js and add the code. This file must be imported into the main.js file, and the import function must be placed first in order for the scripts to initialize properly.

This concludes the installation of @vue/composition-api. The library is available globally and can be used in any of the files. The next step is to start rewriting the existing code.

Adding to-dos

I would start with the Vuex store. Let’s take one of the files, for example, the module responsible for the list of articles. You have to agree it’s pretty wordy. We have to write an additional layer in the form of mutations, actions to write data asynchronously. We delete everything without remorse and add this code:.

The number of lines is reduced, and that is already good. Let’s sort it out. The first line imports the method ref. It adds reactivity for any variable. ref takes an argument and returns it wrapped in an object with the property value, which can then be used to access or change the value of the reactive variable.

Installing @vue/composition-api

In the code above, ref has been added for the articles variable, it is now reactive and has additional properties. Then we see a function that gets all articles by API and writes them into the articles variable.

But please note that it writes them to the reactive value property. If it doesn’t, the value won’t change. Our updated store works in exactly the same way and is even much simpler. The only question that remains is whether Vuex is needed now? Automated tests in a Vue project: how to test entire pages and individual components, mock server requests, and run it all in Docker. After updating the code in our store, let’s rewrite the component that is responsible for displaying the articles.

Introduction

The component so far looks like this:. Here we see the good old Vue 2 syntax. Let’s rewrite it to the new one, and we should get it like this:. Let me tell you right away: in @vue/composition-api and therefore in Vue 3, “this” is no longer available. You must use context instead. I’ll talk about it a bit later. Let’s take apart the new rewritten component.

Conclusion

At the beginning of the . The arrival of Vue3 has brought us many surprise changes, but because Vue3 has many compatibility problems with Vue2 at the Api level, it cannot achieve a smooth upgrade.

So we use gogocode this code conversion tool according to v3 migration guide, use it Operating AST, developed a set of Vue2 upgrade tool.

Biggest changes on Vue 3

Use this tool to quickly upgrade your Vue2 code to Vue3.

This set of tools is very simple to use, just need to execute simple commands.

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

Fetching to-dos

Install the latest gogocode-cli globally.

Jump to the Vue project path that needs to be upgraded in the terminal.

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

If you need to upgrade the vue code in the src path, execute the following command:​. Note: -s is followed by the directory/file name of the original file, and -o is followed by the output directory/file name. If the two are the same, the conversion plugin will overwrite your code. Please make a backup before this operation. The new Vue3 code will be written to the src-out directory after the conversion operation is completed. In addition to upgrading the source code, we also need to upgrade Vue3 related dependencies, which can also be done automatically. Jump to the Vue project path to be upgraded in the terminal and execute the following command:. This command will help you upgrade the Vue/Vuex/Vue-router/Vue compilation tools in package.json to the version compatible with Vue3.

You can complete the installation of Vue3 related dependencies​. Note: If you are using an old version of vue-cli to generate a project, you need to upgrade vue-cli yourself to ensure that the Vue3 project can be built successfully, please refer to: [What did the vue-cli2 project upgrade to vue-cli4 do] (https://blog.liuyunzhuge.com/2019/12/19/vue-cli2%E7%9A%84%E9%A1%B9%E7%9B%AE%E5%8D%87%E7%BA%A7 %E5%88%B0vue-cli4%E5%81%9A%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BA%8B%E6%83%85/), Migrating from v3.

Dependency upgrade

We automate our tools as much as possible, but there are some issues that require your attention. Since Vue3 global object becomes createApp() created. The conversion tool passes the createApp() return object to window.$vueApp.

What needs attention

At this point, the user needs to move the window.$vueApp = Vue.createApp(App) block to the front of the code that calls window.$vueApp.

Avoid situations where window.$vueApp is undefined.

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

Some component libraries that depend on Vue2 development have also released Vue3 versions, and their APIs have undergone some changes, which requires you to manually upgrade. The reason for the error is that the parseComponent function in vue-template-compiler was deleted after the vue upgrade.

solve this problem:.

You need to confirm whether vue-template-compiler in package.json has been replaced with @vue/compiler-sfc, otherwise you need to replace it, and then reinstall the dependencies.

If this error is still reported, you need to check whether the third-party dependencies referenced by the project have a Vue2 version, and if so, you need to update to a version that supports Vue3.

🔗Ready to Upgrade?

In addition, because it is a static code conversion, there may be some unexpected ways of writing in your code, which may cause confusion in the conversion.

Please do manual comparison and testing after the conversion!

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

Issues found to convert can be submitted to us.​. For other project upgrades, please refer to the official Vue link. Modified1 year, 4 months ago.

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

Migration Strategy

I would like to upgrade my project to vue3. This is a symfony application using vue as independent components on the front side. I have never done a major upgrade before and not too sure what the best procedure would be ? Should I uninstall vue2 then install vue3 ?

should I just install vue3 ? should I just modify my package.json directly ? 127127 bronze badges. 1,41122 gold badges1818 silver badges3838 bronze badges. 1818 silver badges3838 bronze badges.

According to migration guide.

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.

Enabling compat mode

INFOWe are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.