Actualizar a Vue 3 en 3 pasos
Si aún no conoces que trae la nueva versión de Vue, ¡estás tardando! Publiqué un artículo en Octuweb donde puedes conocer las novedades y cambios que trae esta versión.
En esta story vamos a ver cómo podemos migrar nuestra aplicación en Vue 2 a la nueva versión.
El estado actual de las librerías del Package.json es:
Paso 1: Actualizar dependencias utilizando CLI
Instalar o actualizar el CLI:
npm install -g @vue/cliUna vez instalado/actualizado el CLI, hay que lanzar estos dos comandos en la carpeta de tu proyecto para actualizar las dependencias:
vue upgrade
vue add vue-nextPor lo que el Package.json anterior quedaría:
El plugin Vue Next no solo actualiza e instala las nuevas dependencias, sino que modifica el código para que sea compatible con la nueva versión, en mi caso se han modificado los ficheros:
.eslintrc.js
babel.config.js
package.json
main.jsPaso 2: Actualizar otras dependencias
El CLI no actualiza librerías complementarias como pueden ser VueRouter o VueI18n. Podemos actualizarlas a las últimas versiones compatibles con la versión 3 de Vue:
npm install vue-router@next
npm install vue-i18n@nextPaso 3: Modificaciones del código
Lo primero que vemos es que el fichero main.js de Vue ya no tiene una exportación predeterminada.
Ahora debemos importarnos el método createApp indicando el contenedor en el que se cargará. De esta forma, podemos añadir APIs (por ejemplo Vuex o Vue I18n) que se aplican únicamente sobre la instancia de la aplicación específica y no sobre toda la aplicación.
Vue Router
Router sigue el mismo cambio que lo comentado anteriormente: new Router pasa a ser createRouter. En la nueva versión, siempre debe definir el tipo de history. Puede elegir entre createWebHashHistory, createMemoryHistory y createWebHistory.
Vue i18n
De nuevo vemos el mismo patrón de cambio, new VueI18n pasa a ser createI18n.
Espero que te guste la breve guía. ¿Te animas a actualizar tu proyecto también? 👍
