0
Help us understand the problem. What are the problem?

posted at

updated at

[備忘録]NUXT3でrootDirを変更する際の注意

Nuxt3のrc版が出たので、色々と備忘録を残していこうと思います。

ルートディレクトリを変更

Nuxtではデフォルトでルート直下に各ディレクトリを配置するようになっているため、src下をデフォルトのディレクトリとする場合にnuxt.config.tsrootDirを設定します

参考:https://v3.nuxtjs.org/api/configuration/nuxt.config#rootdir

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    rootDir: "src"
})

これで、srcディレクトリがルートディレクトリとして認識されるようになり、src下にコードを移動してビルドが通るようになります。

問題:VSCodeが組み込み関数を認識しない

ただ、VSCodeでVue3やNuxt3の組み込み関数(CompositionAPI等)が見つけられない状態となります。

image.png

原因

結論から言うと、tsconfig.jsonでextendsしているjsonファイルが見つけられないために発生しています。

tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json",
}

rootDirを変更したことで.nuxtディレクトリ(自動生成される)の出力位置も変わっていました。

↓rootDir変更後のディレクトリ構造

image.png

解決法

extendsのパスをrootDirに合わせて変更します。

tsconfig.json
{
  // nuxt.config.tsのrootDirに合わせる
  "extends": "./src/.nuxt/tsconfig.json",
}

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?