💭

Nuxt3の環境構築で詰まった部分(PagesDir、nuxt.config.ts)

2022/11/04に公開約1,400字

Nuxt3ではディレクトリ構成がかなりNuxt2と比べてシンプルでした。
Nuxt2に似た構成でやりたいなということでsrcディレクトリを作って以下にPagesディレクトリなどを作ってアプリ作ろうとしていました。
Nuxt3を訳も分からず触ったため何点か詰まった部分があったので備忘録として書きます。

Pagesディレクトリを作ってファイルを作るだけじゃ反映されない

Nuxt2で勝手にPagesディレクトリの下にあればルーティングされていたので脳死でPagesディレクトリを作ったが反映されなかった。
pagesディレクトリを使う際は、初期にあるapp.vueファイルに

./app.vue(公式よりそのまま引用)
<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

真ん中の<NuxtPage/>を入れることでPagesディレクトリを読み込んで、使えるようになる。
<NuxtLayout>はこのままだとlayoutsディレクトリのdefault.vueを適用できるようになる。
https://v3.nuxtjs.org/guide/directory-structure/app
https://v3.nuxtjs.org/guide/directory-structure/layouts

srcディレクトリ下にコードを置くのにはconfigでの設定がいる。

Pagesディレクトリに書いても全く反映されないので、なにがおかしいのか分からなかったのですが、まず以下の記事を見てとりあえず解決しました。原因はsrcを勝手に作ってそこにコードを置いて行ったので当たり前ですがnuxt.config.tsでルートディレクトリを変更する設定がいりました。

nuxt.config.ts
export default defineNuxtConfig({
    ...
    rootDir: "src/"
})

https://qiita.com/teracy164/items/97f35b1550cd2080197b
ただconfigファイルたちはルートディレクトリの下にあって欲しいなと思っていたところ、以下で設定できそうなことがわかりました。

nuxt.config.ts
export default defineNuxtConfig({
    ...
    srcDir: "src/"
})

srcDirでソースディレクトリの変更を行うことができました。
rootDir:
https://v3.nuxtjs.org/api/configuration/nuxt-config#rootdir
srcDir :
https://v3.nuxtjs.org/api/configuration/nuxt-config#srcdir

う~ん、見返すと大した疑問ではなかったですが、少しだけNuxt3を理解できたような気がします。
間違い等あれば、教えていただけるとありがたいです。

Discussion

ログインするとコメントできます