Vue

Actualizar Vue.js a la versión 3

Carlos Eduardo Dias

• 6 min read
Actualizar Vue.js a la versión 3

La velocidad con la que surgen mejoras o nuevas tecnologías para el desarrollo de software acaba haciendo que los productos digitales ya en uso queden, en cierto modo, obsoletos.

Vue.js es un excelente framework open souce para frontend que brinda muchos beneficios para desarrollar software escalable, con una excelente reutilización de código y componenteización.

Como ocurre con cualquier proyecto de código abierto, cada mes se desarrollan nuevas funciones y actualizaciones, y la última versión principal, Vue.js 3, se lanzó oficialmente el 18 de septiembre de 2020.


¿Por qué es necesario actualizar Vue.js 2?

En esta nueva versión se han implementado nuevas herramientas muy interesantes como la Composition API, Fragment, Teleport y otras.

Además de tener acceso a las nuevas funciones de la nueva versión, el soporte para la versión 2 finalizará el 31 de diciembre de 2023.

Esto significa que aún será posible instalar la versión anterior a través de administradores de paquetes como Yarn. Sin embargo, ya no se publicarán nuevas funciones ni correcciones de bugs.

En este artículo entenderemos cómo es posible actualizar un proyecto desarrollado en Vue.js 2 a la versión 3.

Iniciando la migración

Creé un proyecto simple en Vue.js 2 para que pudiéramos usarlo como base para la actualización. Puedes encontrar el proyecto en este link.

Este proyecto es un administrador de tareas simple que almacena tareas en el almacenamiento local y permite al usuario definir el título, la descripción y el estado de la tarea.

Para ejecutar el proyecto, utiliza el comando yarn dev.

Migrar un proyecto de Vue.js a la versión 3 puede ser todo un desafío dependiendo de los paquetes que se utilicen en el proyecto. Ten en cuenta que si algún paquete entra en conflicto con las nuevas versiones instaladas, deberás investigar y analizar cómo solucionar el conflicto.

Después de clonar el proyecto, necesitaremos seguir un proceso para eliminar algunos paquetes y agregar/actualizar otros.

Actualizando dependencias

1) Actualiza vue-cli a la última versión. Para eso, ejecuta el comando:

vue upgrade

El resultado debe ser algo semejante a esto:


2) Para instalar la nueva versión de Vue.js, utiliza los siguientes comandos:

Después de ejecutar los siguientes comandos, se instalará la versión 3 de Vue.js, el compilador y el paquete auxiliar @vue-compat, que sirve como administrador de compatibilidad entre el código Vue.js 2 y Vue.js 3.

// Utilizando yarn

yarn add vue/compat@^3.1.0 vue/compiler-sfc@^3.1.0 vue@3.1

// Ou utilizando npm
npm install vue/compat@^3.1.0 vue/compiler-sfc@^3.1.0 vue@3.1

3) Para utilizar rutas, actualiza con:

yarn add -D vue-router@^4.2.4



4) Como la nueva versión utiliza otras versiones de paquetes para representar css, será necesario actualizarlos. Actualiza con este comando:

Estos paquetes son necesarios para interpretar CSS y compilar/renderizar templates.

yarn add -D css-loader@^6.8.1 style-loader@^3.3.3 vue-loader@^16.0.0 vue-style-loader@^4.1.3 vue-template-compiler@^2.7.14


5) También necesitamos actualizar el webpack y el eslint:

Para actualizar eslint, inserta:

yarn add -D eslint@^6.7.2 eslint-loader@^4.0.2 eslint-plugin-vue@^6.2.2


Para actualizar webpack:

yarn add -D webpack@^5.65.0 webpack-bundle-analyzer@^4.7.0 webpack-cli@^5.1.4 webpack-dev-server@^4.7.3



A partir de este momento, ya se han instalado todos los paquetes necesarios para la nueva versión. Solo falta configurar y modificar algunos archivos para utilizar las características de la nueva versión en los componentes.

Configurando el proyecto

Luego de actualizar los paquetes, es necesario crear un nuevo archivo llamado webpack.config.js el cual será el encargado de informar al compilador del proyecto que se debe utilizar @vue-compat en lugar de Vue como intérprete de los archivos del proyecto, por lo que Será posible mantener la compatibilidad entre el código antiguo y el nuevo.

Cree un archivo en la raíz del proyecto con el nombre webpack.config.js y el contenido:

const path = require('path');


// webpack.config.js

module.exports = {

  resolve: {

    alias: {

      'vue$': 'vue@compat'

    }

  },

  module: {

    rules: [

      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: {

          compilerOptions: {

            compatConfig: {

              MODE: 2

            }

          }

        }

      }

    ]

  }

}



Este archivo será responsable de definir el modo de compatibilidad con la versión 2~ de Vue.js.

Ahora es necesario incluir dentro del webpack.base.conf.js el siguiente apartado:

//outros imports

const { VueLoaderPlugin } = require('vue-loader');


++++


// Incluir esse trecho na seção resolve do vue-loader

options: {

          compilerOptions: {

            compatConfig: {

              MODE: 2

            }

          }

        }

++++


// Incluir na seção resolve este teste

{

  test: /\.(js|jsx)$/,

  exclude: /node_modules/,

  use: ['babel-loader', 'eslint-loader'], // Order matters

}


++++

// Na seção plugins adicionar esse trecho

new VueLoaderPlugin()




Puedes ver el archivo completo en este link.

Algunos parámetros utilizados por el archivo webpack.dev.conf.js ya no son compatibles con la nueva versión instalada de webpack, por lo que tendremos que eliminarlos:

// Remova as seguintes linhas do arquivo:

Raiz 

devtool: config.dev.devtool // Remover


Seção devServer

clientLogLevel: 'warning' // Remover


hot: true, // Substituir por liveReload: true

contentBase: false, // Remover


// Remover

overlay: config.dev.errorOverlay

      ? { warnings: false, errors: true }

      : false,

    publicPath: config.dev.assetsPublicPath,

    quiet: true, // necessary for FriendlyErrorsPlugin

    watchOptions: {

      poll: config.dev.poll,

    }


// Remover

new webpack.NamedModulesPlugin(),

new webpack.NoEmitOnErrorsPlugin(),


El archivo final quedará como en este link.

Ahora necesitamos cambiar el archivo main.js para que sea compatible con la versión 3 del framework.

Modifica el contenido de archivo main.js con lo siguiente:

import {createApp} from 'vue'

import App from './App'

import router from './router'


const app = createApp(App)

app.use(router)

app.mount('#app')


El próximo paso es alterar el archivo index.js para que sea compatible con la versión 3 de Vue.js.

Modifica el arquivo routes/index.js así:

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../pages/Home'


const routes = [

 { path: '/', component: Home }

]


const router = createRouter({

 history: createWebHistory(),

 routes

})


export default router



Conclusión

Ahora es posible ejecutar el proyecto usando el comando yarn dev.

En el branch vuejs3 del proyecto que encontrarás en este link se creó el componente TasksCounter.vue que puedes utilizar para probar las nuevas funcionalidades de Vue.js 3.

Algunas funcionalidades se descontinuaron en la nueva versión y son las llamadas breaking changes. Puedes verificarlas y realizar los ajustes correspondientes en el proyecto.

Esa tarea es desafiante debido a posibles conflictos con otros paquetes del proyecto. Deseo lo mejor en tu actualización.

¡Hasta luego!

💡
Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.