💭

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

2022/11/04に公開

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を適用できるようになる。

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

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

nuxt.config.ts

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

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

nuxt.config.ts

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

srcDirでソースディレクトリの変更を行うことができました。
rootDir:

srcDir :

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

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

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

Discussion