Still Tender From a Rough Update? Follow My Simple Vue 3 Recipe!

Why postpone an update or do a migration the hard way? Vue 3 is ready for production, and I’ll show you that migrating is as easy as preparing a simple dinner.

If you are still asking yourselves, “Why bother with Vue 3?” let me tell you a secret—Vue 3 was one of the most awaited releases of 2020, and through 2021 most of the popular Vue libraries have plans to migrate to it, too. It combines lots of new features, like a new simple setup introduced by the Composition API, brilliant full support for TypeScript, better performance, new reactivity, new bundling options with native ES Module imports through Vite and many other cool hidden gems.

I have just taken a leap of faith and updated the Kendo UI for Vue Getting Started application that is generated by the Kendo UI Template Wizard to Vue 3.0. As a part of this effort, I jotted down some helpful step-by-step notes that could help you speed up the migration process.

Let’s start with “package.json” updates, how to find out if the libraries or components that you use support Vue 3, and going through the router and component structure updates that are possible with Vue 3.

I won’t include TypeScript in this application, but will try to cover this topic in one of my next blog posts, so brace yourselves! All we need is a little sip of information before we go through some migration steps, and then we’ll be ready.

Step 1: Look at Your Recipe

When dealing with Vue applications, the “recipe” can be either the “package.json” file or the list of components and libraries that you need to use. Sometimes you might be uncertain about whether or not the components we need are already available for Vue 3—so I created a Vue2ToVue3 repository that lists all the packages with components from the “awesome-vue” repository, and checked off the ones that are already available for Vue 3. The rest are linked to an issue where the migration is logged, so we can easily check the availability of a desired logic.

In my case, I used Kendo Vue for UI, which is fully compatible with Vue 3. I also upgraded to the latest version (currently 2.1.5).

After that I needed to upgrade the versions of the Vue-related packages:

Step 2: Gather the Ingredients

In this step, I needed to find the starting point of the Vue application and to update the initialization according to Vue 3’s needs. The main change in the starting point of the application for Vue 3 is that we should import createApp method from vue and use it instead of the “new Vue” instance as it was in version 2. In my case, this logic was in the “src/main.js” file and here is how I changed it:

Step 3: Cook the Main Dish

In this step, we should update the code for the popular libraries that we use, like Vue Router and custom UI components or functions—in our case it’s Kendo UI for Vue and luckily it is working smoothly with Vue 3 version, too.

For the VueRouter usage, I had a “src/router/index.js” file where all the routing settings are, so I needed to use the new createWebHistory and createRoute functions that help us define our Vue 3 router:

Step 4: Taste Test

I searched my code for some other variable uses of “Vue” which were quite popular in the Vue 2 scenarios, like global-defining the components on the main Vue instance, that were not in the main definition or adding a property to a reactive object by using Vue.set.

In my application, I needed to change and replace them with Vue 3 syntax—the components can be simply moved to the component object literal, the “Vue.set” method could be replaced with a simple resetting of the desired property, while the emit function could be now imported from 'vue' and used in the setup function:

Step 5: The Special Sauce

This last step is optional, yet if you want to go the extra mile and prove that you are a master cook, you will want to take it: Switch to the new modern Composition API. If you are not familiar with it, this is the new supported syntax in Vue 3 components that provides huge flexibility options by giving you the ability to define all your logic in a setup function and easily extract reusable pieces of code.

In order to switch to it, I needed to include the setup function and define the methods, the data and the computed properties in it. It is not a difficult task at all; it’s a satisfying one.

Here below is a change of one of my components where we do the interactions with the Editing cells in the Grid component. The code below is shortened, yet you could check the actual code by using the Getting Started project from the Kendo UI Template Wizard:

That’s it! I hope you’re still awake and enjoy your meal! 😊

Now the project is using Vue 3 with code that is ready for 2021. You can download the VS Code extension and try it now! If your project contains more complicated code and cases, I recommend you also check out my “Tricky, Tricky—Hidden Migration Tips for Vue 3” blog post, or you can even reach out to me directly via twitter: @pa4oZdravkov.

Happy Vue coding!