2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

nuxtプロジェクトでサブディレクトリにtsconfig.jsを配置した時のimportエラーを解消する

Posted at

##動作環境
エディタ:VScode
nuxt.js2系 + typescript

##現象
プロジェクトのサブディレクトリにnuxtアプリケーションを作成。
コンポーネントをimportで読み込もうとするとエラーになる。

sample.vue
<script lang="ts">
import ButtonMedium from '@/components/ui/ButtonMedium.vue';

export default {
 //
};

エラー内容

Cannot find module '@/components/ui/ButtonMedium.vue' or its corresponding type declarations.Vetur(2307)

##原因
VScodeのVeturが原因でした。
デフォルトの設定では、tsconfig.jsがルートディレクトリに存在していないと、Veturがtsconfig.jsを読み込むことができず、パス解決ができません。

##解決方法
vetur.config.jsでrootの設定を変更してあげればOKでした。

###nuxtプロジェクトのディレクトリ構成

nuxtProject
├── application //nuxtアプリケーション
├── docker
├── docker-compose.yml
└── vetur.config.js

###vetur.config.jsの設定

vetur.config.js

/** @type {import('vls').VeturConfig} */
module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "vetur.experimental.templateInterpolationService": true
  },
  // **optional** default: `[{ root: './' }]`
  // support monorepos
  projects: [
    {
      // **required**
      // Where is your project?
      // It is relative to `vetur.config.js`.
      root: './application/', //ここをnuxtアプリケーションのルートを指定
      // **optional** default: `'package.json'`
      // Where is `package.json` in the project?
      // We use it to determine the version of vue.
      // It is relative to root property.
      package: './package.json',
      // **optional**
      // Where is TypeScript config file in the project?
      // It is relative to root property.
      tsconfig: './tsconfig.json',
      // **optional** default: `'./.vscode/vetur/snippets'`
      // Where is vetur custom snippets folders?
      snippetFolder: './.vscode/vetur/snippets',
      // **optional** default: `[]`
      // Register globally Vue component glob.
      // If you set it, you can get completion by that components.
      // It is relative to root property.
      // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
      globalComponents: [
      ]
    }
  ]
}

以上。

参考
https://zukucode.com/2021/02/vscode-vetur-subdirectory.html

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?