Migrating to Vue 3

Hi, I'm Adam Jarre with vue Mastery, the ultimate learning resource for vue developers. And in this talk, we're going to walk through what it looks like to use the migration build to upgrade a vue 2 app to vue 3. So what exactly is the vue 3 migration build? Essentially, it's 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, we're going to 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 we've made those changes to upgrade it into vue 3 with the help of the migration build. So 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 vue 3 compliant. All right, so now that we've seen the app that we're upgrading, what does the migration workflow look like? It's basically a 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 vue 2 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 builds 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 vue upgrade in our terminal. Next we'll 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 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. So 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 heading.vue component. Notice how we're using the functional attribute here. That is no longer supported in vue 3. 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 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. It just had a handful of errors and warnings and was pretty quick to fix. In your case, in the real world, there's going to 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've created a cheat sheet. It lists 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 vumastery.com. So with all of that, I hope you feel more confident and prepared to upgrade your vue 2 apps to vue 3.

Thanks for watching.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.