Vuejs / TypeScript - Impossible de trouver le module './Components/navigation' ou ses déclarations de type correspondantes

Question

Lorsque je crée un script comme doctrice (lang = "TS"), je reçois une erreur indiquant

"Impossible de trouver le module './Components/navigation' ou ses déclarations de type correspondantes (Vetur 2307).".

Je me suis rendu compte que cela ne se produit que lorsque je fixe le langage de Lang sous TS, ce que j'ai besoin de construire mon Vue application.

app.vue

<template>
  <Navigation />
</template>

<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message

export default {
  name: 'app',
  components: {
    Navigation,
  }
}
</script>

Navigation.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link> 
    <router-link to="/categories">Categories</router-link> 
    <router-link to="/random">Random</router-link>
  </div>
  <router-view />
</template>

<script lang="ts">
export default {
  name: 'Navigation',
}
</script>

Answer 1

Dans le dossier src ajoutez le fichier shims-vue.d.ts Avec le contenu suivant:

Vue 2:

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

Vue 3:

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

et importer le composant avec son extension .vue:

 import Navigation from './components/Navigation.vue';

à la place de :

import Navigation from './components/Navigation';