Migrating to Vue 3

So, welcome back. And welcome back to the talk, which is called what? What applications can you run on React? You can't run a runtime on React. And we're here today to talk about working with APIs that have been rewritten for you to make your Web apps fit in and for your programming experience.

And before we get started, let's take a look at some of the features that we've built and made available for you to use within React. So, here's a couple of the features we've built in our demo. The first one essentially is the view three migration build. Essentially, it's a special version of view three that allows you to run your existing app in view two 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, we're going to use a simple sample application. You can access the repo by cloning this link here, and we can see how we made those changes to upgrade it into view three with the help of the migration build.

Before we get started, let's take a look at that sample app in the browser. As you can see, it's 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, we built in some deprecated features into this demo app, which we're going to have to upgrade to make it view three compliant. Now that we've seen the app that we're upgrading, what does the four-step process? You install it, fix the errors, fix the warnings, then uninstall it. So let's go ahead and install it.

Since a lot of people use the Vue CLI to create their Vue2 apps, I'm going to be showing how to upgrade a Vue CLI-generated app. If you're using Vite or some other build system, you can check out the README on the migration build's GitHub. But moving forward with the Vue CLI, we're going to want to make sure that we have the newest version of it installed. So we'll want to run VueUpgrade in our terminal.

We'll need to use 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 there's 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 want to let you know we have a full blog series about this migration build. You can find any of this content, any of this code, you can find at vuemastery.com slash blog.

With that out of the way, we can now serve our app, but you'll see we're met with an error. This is actually a good sign. It's 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 app's default API. To fix that and make this Vue 3 compliant, we're going to 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, another is about the render function, and another is about the watch array. So let's move on to our third step where we fix those warnings. We can knock out two of those warnings by importing and using create app to initialize our app. Now if you refresh the app in the browser, you'll see a new warning. To fix this final issue, we just need to add the deep option here as instructed by the warning. Now that we've 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. It just had a handful of errors and warnings and was pretty quick to fix. In your case, in the real world, you're going to see 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 going to 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 vmastery.com. So with all that, I hope you feel more confident and prepared to upgrade your Vue 2 apps to Vue 3.