Estou com um problema ao usar Vue Router com TypeScript, recebendo o seguinte erro:
ERROR in src/roteador/index.ts:1:68
TS2307: Cannot find module 'vue-router' or its corresponding type declarations.
O erro acontece nesta importação:
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
Tentei resolver com ajuda de IA para entender onde poderia estar o problema, e uma das sugestões foi remover o uso do RouteRecordRaw (tipagem das rotas). O código recomendado pelo professor era assim:
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Tarefas from '../views/Tarefas.vue'
const rotas: RouteRecordRaw[] = [{
path: '/',
name: 'Tarefas',
component: Tarefas
}]
const roteador = createRouter({
history: createWebHashHistory(),
routes: rotas
})
export default roteador;
Além de remover a tipagem, foi sugerido no arquivo shims-vue.d.ts, adicionar o declare module 'vue-router';
/* eslint-disable */
declare module 'vue-router';
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
Pelo que entendi, a linha declare module 'vue-router' força o TypeScript a aceitar o módulo, mas acaba desativando a tipagem dele, então não parece ser a melhor prática e provavelmente só deveria ser usada como último recurso.
Foi a única forma que encontrei para fazer funcionar, mas fiquei na dúvida se esse é realmente o caminho correto ou se existe uma solução mais adequada para esse erro.
