Nuxt3でvueファイルが「Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?」となった時の対処法

このようなエラーメッセージが表示された場合の対処法

開発をしている際に、vueファイルに下記のメッセージエラーが表示されたときの対処方法について解説します。

Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

ディレクトリ構成

Nuxt3のディレクトリ構成は下記のようになっています。

└── Project/
    ├── .nuxt
    ├── .output
    ├── components/
    │   └── navbar/
    │       └── navbar.vue
    ├── node_modules
    └── pages/
        ├── adminUsers
        ├── generalUsers/
        │   └── registration/
        │       └── registration.vue
        ├── index.vue
        ├── public/
        │   ├── favicon.ico
        │   └── robots.txt
        ├── server/
        │   └── tsconfig.json
        ├── app.vue
        ├── nuxtconfig.ts/
        │   ├── package.json
        │   └── package-lock.json
        ├── README
        └── tsconfig.json

対処方法

解決方法は、tsconfig.jsonに下記のコードを追加します。

tsconfig.json

  "compilerOptions": {
    "moduleResolution": "node"
  }

全体のコードは、こちら↓

tsconfig.json

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "node"
  }
}