Upgrading your app to Vue 3

In Web Development

Upgrading your app to Vue 3 - read the full article about Vue Js update, Web Development and from Vue Mastery on Qualified.One
Vue Mastery
Youtube Blogger

- If you have a Vue 2 app that you wanna upgrade to Vue 3, this video is gonna show you what it looks like to use a migration build to make that upgrade.

Im gonna walk through the necessary steps of using the migration build so that by the end, you can apply that knowledge to your own app.

Now, of course your own app is gonna have require its own fixes with its own errors and warnings that you might experience.

So stay tuned to the end where theres a cheat sheet available for you with all of that at your fingertips.

So what exactly is the Vue 3 migration build? Essentially, its a special version of Vue 3, that allows you to run your existing app in Vue 2 mode.

It gives you helpful warnings about deprecated features, and provides a safe environment to incrementally update your code.

In order to get some practice and see what it looks like to use the migration build, were gonna use a simple sample application.

You can access the repo by cloning this link here, and we have a starting and ending branch so that you can see where we started in the Vue 2 version, and how weve made those changes to upgrade it in to Vue 3 with the help of the migration build.

So before we get started, lets take a look at that sample app in the browser.

As you can see, its very simple.

You just hit that pop button, and it pops off the number from the bottom of that list.

To make this migration process more realistic, weve built in some deprecated features into this demo app, which were gonna have to upgrade to make it Vue 3 compliant.

All right, so now that weve seen the app that were upgrading, what is the migration workflow look like? Its basically a four step process.

You install it, fix the errors, fix the warnings, then uninstall it.

So lets go ahead and install it.

Since a lot of people use the Vue CLI to create their Vue 2 apps, Im gonna be showing how to upgrade a Vue CLI generated app.

If youre using Vee or some other builds system, you can check out the read me on the migration builds GitHub.

But moving forward with the Vue CLI, were gonna want to make sure that we have the newest version of it installed.

So well wanna run vue upgrade in our terminal.

Next well modify package.json to install Vue 3, the migration build itself, and the compiler for single file components.

Notice how we also have to remove Vue 2 and the Vue template compiler.

Next, we can install the dependencies, and theres one more step to get the migration build working.

We have to create a vue.config file to set up some compiler options.

You can find this config file in the ending branch of our demo code.

And also, I wanna let you know, we have a full blog series about this migration build.

So any of this content, any of this code, you can find at VueMastery.com/blog.

Without that out of the way, we can now serve our app, but youll see were marked with an error.

This is actually a good sign.

Its proving that the migration build is doing its job, and letting us know that there is something wrong with our code, something deprecated.

This brings us to the next step in our migration build workflow, where we fix the errors.

The source of this error is from our sample apps, Heading.vue component.

Notice how were using the functional attribute here that is no longer supported in Vue 3.

To fix that and make this Vue 3 compliant, were gonna delete out the functional attribute, and remove the props. as well.

Now the error should be gone.

But you might notice that we still have some warnings in the console.

One is about global mount, and others about their render function, and another is about the watch array.

So lets move on to our third set, where we fix those warnings.

We can knock out two of those warnings by importing and using createApp to initialize our app.

Now, if you refresh the app in the browser, you should see one remaining warning.

To fix this final issue, we just need to add the deep option here as instructed by the warning.

Now that we fixed our errors and warnings, we can move on to the final step where we uninstall the migration build from the package.json, and delete out the config file.

Now we can go ahead and run npm install, and serve our newly upgraded Vue 3 app.

Of course, the demo app that we just walked through was pretty simple.

Just had a handful of errors and warnings, and it was pretty quick to fix.

In your case, in the real world, theres gonna be a lot of different situations, errors, warnings, and deprecations that are unique to your use case.

So to make it easier for you to upgrade your own apps, we created a cheat sheet to list out all the Vue 2 features that are incompatible with Vue 3, that are gonna give you those errors.

And it guides you through all those features that were replaced, removed, and renamed in Vue 3.

You can download the cheat sheet free at VueMastery.com.

So with all of that, I hope you feel more confident and prepared to upgrade your Vue 2 apps to Vue 3.

Again, feel free to check out the Vue Masterys blog, where we have two articles covering the migration build with all of what we discovered, and more written out step-by-step for you to follow.

And also check out our courses.

We have a bunch of Vue 3 content, including a Vue 3 Deep Dive taught by the creator of Vue Avenue.

Ill see you in the next one.

(upbeat music)

Vue Mastery: Upgrading your app to Vue 3 - Web Development