A atualização para o Vue 2.7 representa um marco importante para aplicações legadas. Esta versão traz nativamente recursos do Vue 3, como a Composition API e o suporte a <script setup>, sem a necessiadde de migrar toda a arquitetura para o ecossistema Vue 3 imediatamente. Além disso, facilita a introdução progressiva de TypeScript no código-fonte.

Ajustes nas Dependências

Para iniciar a transição, é necessário atualizar o núcleo do framework e ajustar as ferramentas de build. Uma mudança fundamental é a remoção do vue-template-compiler, cujas funções foram integradas ao próprio pacote do Vue na versão 2.7.

// Alterações recomendadas no package.json
{
  "dependencies": {
    "vue": "^2.7.10",
    "vue-demi": "^0.13.11" // Auxilia na compatibilidade entre versões
  },
  "devDependencies": {
    "vue-loader": "^15.10.0", 
    "eslint-plugin-vue": "^9.0.0" // Necessário para reconhecer a sintaxe setup
  }
}

Refatoração do Vuex com Composition API

Em versões anteriores, era comum o uso extensivo de mapState e mapActions dentro de methods e computed. Com o Vue 2.7, podemos acessar o store de forma mais direta dentro do ciclo de vida da Composition API.

import { computed } from 'vue';
import store from '@/store';

export default {
  setup() {
    // Acesso reativo ao estado
    const userData = computed(() => store.state.user.profile);
    
    // Execução de ações e mutações
    const updateProfile = (payload) => store.dispatch('user/updateProfile', payload);
    const logout = () => store.commit('user/CLEAR_SESSION');

    return {
      userData,
      updateProfile,
      logout
    };
  }
};

Integração com TypeScript

Para adicionar tipagem estática ao projeto, é preciso configurar o compilador e o carregador do Webpack para interpretar arquivos .ts e blocos de script tipados dentro de arquivos .vue.

1. Instalação de pacotes auxiliares

npm install typescript@4.8.4 ts-loader@~5.0.0 @vue/cli-plugin-typescript -D

2. Configuração do tsconfig.json

Este arquivo define como o TypeScript deve processar o código e resolver os caminhos do projeto:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowJs": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

3. Ajuste no Webpack

É necessário informar ao Webpack como lidar com a extensão TypeScript, garantindo que o ts-loader processe corretamente os arquivos SFC (Single File Components):

// webpack.config.js ou configuração do vue.config.js
module.exports = {
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: { 
          appendTsSuffixTo: [/\.vue$/] 
        },
        exclude: /node_modules/
      }
    ]
  }
};

Configuração do Linter para TS

Se o projeto utiliza ESLint, a análise estática pode falhar ao encontrar sintaxe TypeScript dentro de arquivos Vue. Para resolver isso, deve-se alterar o parser no arquivo .eslintrc.js:

module.exports = {
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ]
};

Ao concluir essas etapas, o ambiente estará pronto para utilizar os hooks do Vue 2.7 e usufruir dos benefícios de produtividade da nova API de composição, mantendo a estabilidade da base de código legada.