Migrando a Vue 3

Rate this content
Bookmark

Migrar tu aplicación Vue 2 a Vue 3 no tiene por qué ser doloroso. Esta masterclass te guiará a través del proceso.

5 min
21 Oct, 2021

Video Summary and Transcription

Esta masterclass se centra en el proceso de migración de aplicaciones generadas por Vue CLI a Vue 3. Proporciona instrucciones paso a paso sobre cómo eliminar Vue 2, solucionar errores y advertencias, y desinstalar la versión de migración. La masterclass también menciona una hoja de trucos de Vue 2 a Vue 3 disponible como guía completa. Además, la masterclass presenta una versión especial de migración a Vue 3 para ejecutar aplicaciones existentes en el modo de vista dos, proporcionando advertencias y un entorno seguro para las actualizaciones de código.

Available in English

1. Introducción a React y la migración

Short description:

Bienvenidos de nuevo a la charla sobre el trabajo con APIs reescritas para React. Hemos creado una versión especial de migración a la vista tres que permite ejecutar aplicaciones existentes en el modo vista dos. Proporciona advertencias sobre características obsoletas y un entorno seguro para las actualizaciones de código. Utilizaremos una aplicación de muestra para demostrar el proceso de migración. Vamos a instalarla.

Entonces, bienvenidos de nuevo. Y bienvenidos de nuevo a la charla, ¿cómo se llama? ¿Qué aplicaciones se pueden ejecutar en React? No se puede ejecutar un tiempo de ejecución en React. Y hoy estamos aquí para hablar sobre el trabajo con APIs que han sido reescritas para que tus aplicaciones web se ajusten y para tu experiencia de programación.

Y antes de empezar, echemos un vistazo a algunas de las características que hemos creado y puesto a tu disposición dentro de React. Así que aquí tienes algunas de las características que hemos creado en nuestra demostración. La primera es esencialmente la versión de migración a la vista tres. Es una versión especial de la vista tres que te permite ejecutar tu aplicación existente en el modo vista dos. Te proporciona advertencias útiles sobre características obsoletas y ofrece un entorno seguro para actualizar tu código de forma incremental.

Para practicar y ver cómo se utiliza la versión de migración, vamos a utilizar una sencilla aplicación de muestra. Puedes acceder al repositorio clonando este enlace aquí, y veremos cómo realizamos esos cambios para actualizarlo a la vista tres con la ayuda de la versión de migración.

Antes de empezar, echemos un vistazo a esa aplicación de muestra en el navegador. Como puedes ver, es muy sencilla. Solo tienes que pulsar ese botón de `pop` y se quitará el número de la parte inferior de la lista. Para hacer este proceso de migración más realista, hemos añadido algunas características obsoletas a esta aplicación de demostración, que tendremos que actualizar para que sea compatible con la vista tres. Ahora que hemos visto la aplicación que vamos a actualizar, ¿cuál es el proceso de cuatro pasos? La instalas, corriges los errores, corriges las advertencias y luego la desinstalas.

2. Actualización de una aplicación generada por Vue CLI a Vue 3

Short description:

Para actualizar una aplicación generada por Vue CLI a Vue 3, ejecuta VueUpgrade en la terminal. Elimina Vue 2 y el compilador de plantillas de Vue, instala las dependencias y crea un archivo vue.config. Corrige los errores eliminando el atributo funcional y las props. Soluciona las advertencias importando create app y agregando la opción deep. Desinstala la versión de migración y elimina el archivo de configuración. Descarga la hoja de trucos de Vue 2 a Vue 3 en vmastery.com para obtener una guía completa.

Así que vamos a instalarlo. Dado que muchas personas utilizan Vue CLI para crear sus aplicaciones Vue2, voy a mostrar cómo actualizar una aplicación generada por Vue CLI. Si estás utilizando Vite u otro sistema de compilación, puedes consultar el README en el repositorio de la versión de migración en GitHub. Pero siguiendo con Vue CLI, debemos asegurarnos de tener la versión más reciente instalada. Por lo tanto, debemos ejecutar VueUpgrade en nuestra terminal.

Necesitaremos utilizar JSON para instalar Vue 3, la propia versión de migración y el compilador para componentes de un solo archivo. Observa cómo también debemos eliminar Vue 2 y el compilador de plantillas de Vue. A continuación, podemos instalar las dependencias y hay un paso más para hacer que la versión de migración funcione. Debemos crear un archivo vue.config para configurar algunas opciones del compilador. Puedes encontrar este archivo de configuración en la rama Ending de nuestro código de demostración, y también quiero informarte de que tenemos una serie de blogs completos sobre esta versión de migración. Puedes encontrar todo este contenido, todo este código, en vuemastery.com/blog.

Con eso fuera del camino, ahora podemos ejecutar nuestra aplicación, pero verás que nos encontramos con un error. En realidad, esto es una buena señal. Está demostrando que la versión de migración está haciendo su trabajo y nos está informando que hay algo incorrecto en nuestro código, algo obsoleto. Esto nos lleva al siguiente paso en nuestro flujo de trabajo de migración, donde corregimos los errores. La fuente de este error proviene de la API predeterminada de nuestra aplicación de muestra. Para solucionarlo y hacer que sea compatible con Vue 3, vamos a eliminar el atributo funcional y también eliminar las props. Ahora el error debería haber desaparecido. Pero es posible que notes que todavía tenemos algunas advertencias en la consola. Una se refiere al montaje global, otra al renderizado de funciones y otra al array de observación. Así que pasemos a nuestro tercer paso, donde solucionamos esas advertencias. Podemos eliminar dos de esas advertencias importando y utilizando create app para inicializar nuestra aplicación. Ahora, si actualizas la aplicación en el navegador, verás una nueva advertencia. Para solucionar este último problema, solo necesitamos agregar la opción deep aquí, como se indica en la advertencia. Ahora que hemos solucionado nuestros errores y advertencias, podemos pasar al último paso, donde desinstalamos la versión de migración del package JSON y eliminamos el archivo de configuración. Ahora podemos ejecutar npm install y servir nuestra aplicación Vue 3 recién actualizada. Por supuesto, la aplicación de demostración que acabamos de recorrer fue bastante sencilla. Solo tenía algunos errores y advertencias y fue rápido de solucionar. En tu caso, en el mundo real, te encontrarás con muchas situaciones diferentes, errores, advertencias y obsolescencias que son únicas para tu caso de uso. Para facilitar la actualización de tus propias aplicaciones, creamos una hoja de trucos que enumera todas las características de Vue 2 que son incompatibles con Vue 3 y que te darán esos errores. Y te guía a través de todas las características que fueron reemplazadas, eliminadas y renombradas en Vue 3. Puedes descargar la hoja de trucos de forma gratuita en vmastery.com. Con todo esto, espero que te sientas más seguro y preparado para actualizar tus aplicaciones Vue 2 a Vue 3. Gracias por ver.

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.