Migrating to Vue 3

Rate this content
Bookmark

Migrating your Vue 2 app over to Vue 3 doesn't have to be painful. This talk walks you through the process.

5 min
21 Oct, 2021

Video Summary and Transcription

This talk focuses on the migration process of upgrading Vue CLI-generated apps to Vue 3. It provides step-by-step instructions on removing Vue 2, fixing errors and warnings, and uninstalling the migration build. The talk also mentions a Vue 2 to Vue 3 cheat sheet available for a comprehensive guide. Additionally, the talk introduces a special view three migration build for running existing apps in view two mode, providing warnings and a safe environment for code updates.

Available in Español

1. Introduction to React and the Migration Build

Short description:

Welcome back to the talk on working with APIs rewritten for React. We've built a special view three migration build that allows running existing apps in view two mode. It provides warnings about deprecated features and a safe environment for code updates. We'll use a sample app to demonstrate the migration process. Let's install it.

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.

2. Upgrading Vue CLI-Generated App to Vue 3

Short description:

To upgrade a Vue CLI-generated app to Vue 3, run VueUpgrade in the terminal. Remove Vue 2 and the Vue template compiler, install dependencies, and create a vue.config file. Fix errors by removing the functional attribute and props. Fix warnings by importing create app and adding the deep option. Uninstall the migration build and delete the config file. Download the Vue 2 to Vue 3 cheat sheet at vmastery.com for a comprehensive guide.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.