Vue.js

Atualizando o Vue.js para a versão 3

Carlos Eduardo Dias

• 6 min read
Atualizando o Vue.js para a versão 3

A rapidez com que aprimoramentos ou novas tecnologias surgem para o desenvolvimento de software acaba por tornar produtos digitais já em uso, de certa forma, obsoletos.

O Vue.js é um ótimo framework open source para o frontend que traz muitos benefícios para o desenvolvimento de um software escalável, com uma ótima reutilização de código e componentização.

Como em todo projeto open source, novas funcionalidades e atualizações são desenvolvidas todos os meses, e a última grande versão, Vue.js 3, foi oficialmente liberada no dia 18 de setembro de 2020.


Mas porque é necessário atualizar o Vue.js 2?

Nesta nova versão, foram implementadas novas ferramentas muito interessantes, como a Composition API, o Fragment, Teleport e outros.

Além de ter acesso às novas funcionalidades da nova versão, o suporte à versão 2 será encerrado dia 31 de dezembro de 2023.

Isso significa que ainda será possível instalar a versão antiga através dos gerenciadores de pacote como yarn, porém, não serão mais lançadas novas funcionalidades ou correções de bugs.

Neste artigo, vamos entender como é possível atualizar um projeto desenvolvido em Vue.js 2 para a versão 3.

Iniciando a migração

Criei um projeto simples em Vue.js 2 para podermos utilizar como base para a atualização, você pode encontrar o projeto neste link.

Esse projeto é um gerenciador de tarefas simples que armazena as tarefas no local storage e permite que o usuário defina um título, uma descrição e o status da tarefa.

Para rodar o projeto, utilize o comando yarn dev.

A migração de um projeto Vue.js para a versão 3 pode ser bem desafiadora dependendo dos pacotes em uso no projeto, tenha em mente que se algum pacote entrar em conflito com as novas versões instaladas, será necessário pesquisar e analisar como corrigir o conflito.

Após clonar o projeto, vamos precisar seguir um processo para remover alguns pacotes e adicionar/atualizar outros.

Atualizando dependências

1) Atualizar o vue-cli para a última versão. Para isso, rode o comando:

vue upgrade

O resultado deve ser algo semelhante à mensagem abaixo:


2) Para instalar a nova versão do Vue.js, utilize os comandos abaixo:

Após rodar os comandos abaixo, serão instaladas a versão 3 do Vue.js, o compilador e o pacote auxiliar @vue-compat que serve como um gerenciador de compatibilidade entre o código Vue.js 2 e 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 que seja possível utilizar o routes, atualize utilizando o comando:

yarn add -D vue-router@^4.2.4



4) Como a nova versão utiliza outras versões de pacotes para renderizar css, será necessário atualizá-los, atualize utilizando o comando abaixo:

Estes pacotes são necessários para interpretar css e 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) Precisamos também atualizar o webpack e o eslint:

Para atualizar o eslint, rodar o comando:

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


Para atualizar o webpack, rodar o comando:

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 desse ponto, todos os pacotes necessários para a nova versão foram instalados, basta agora configurar e modificar alguns arquivos para que seja possível utilizar as funcionalidades da nova versão nos componentes.

Configurando o projeto

Após atualizar os pacotes, é necessário criar um novo arquivo chamado webpack.config.js que será responsável por informar ao compilador do projeto que deve ser utilizado o @vue-compat ao invés do Vue como interpretador dos arquivos do projeto, dessa forma, será possível manter a compatibilidade entre o código antigo e o novo.

Crie um arquivo na raiz do projeto com o nome de webpack.config.js e o conteúdo:

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 arquivo será responsável por definir o modo de compatibilidade com a versão 2~ do Vue.js.

Agora é preciso incluir dentro do webpack.base.conf.js, o seguinte trecho:

//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()




O arquivo completo atualizado você pode verificar neste link.

Alguns parâmetros em uso pelo arquivo webpack.dev.conf.js não são mais compatíveis com a nova versão instalada do webpack, por isso, precisaremos removê-los:

// 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(),


O arquivo final deverá ficar como neste link.

Agora precisamos alterar o arquivo main.js para ficar compatível com a versão 3 do framework.

Altere o conteúdo do arquivo main.js para o seguinte:

import {createApp} from 'vue'

import App from './App'

import router from './router'


const app = createApp(App)

app.use(router)

app.mount('#app')


O próximo passo é alterar o arquivo index.js para que seja compatível com a versão 3 do Vue.js.

Altere o arquivo routes/index.js para o seguinte conteúdo:

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



Conclusão

Agora já é possível rodar o projeto utilizando o comando yarn dev.

No branch vuejs3 do projeto que você encontra neste link foi criado o componente TasksCounter.vue que você pode utilizar para testar as novas funcionalidades do Vue.js 3.

Algumas funcionalidades foram descontinuadas na nova versão e são as chamadas breaking changes. Você pode verificar elas e realizar os devidos ajustes no projeto.

Essa tarefa é desafiadora por conta de possíveis conflitos com outros pacotes do projeto, não existe em enviar a sua dificuldade e tentarei auxiliar quando possível.

Sugestões e comentários construtivos são bem vindos.

Obrigado e até a próxima!

💡
As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.