router

なんて言うんだろ、感覚的にはURLとかパスとかそういうものの設定をする部分です。 公式の説明はココ。

v2の頃はこんな↓感じで、trailingSlash(パスの末尾に/を付けるか)とベースURLの設定をしていました。

export default {
  router: {
    trailingSlash: true,
    base: isDev ? '/' : path,
  },
}

これはたぶん削除？されたのかな？ 少なくとも同じ場所にはないです。 ベースURLの方はどこかにありそうだけどどこだろ。

近いものだと後で出てくる「site」があります。。 公式のプロパティじゃないので移動と呼んでいいか分からず、このままではNuxt自体はたぶん動作していません。 siteプロパティを利用しているサイトマップモジュールとかがここの挙動に従います。

従来のtrailingSlashに近い動作をさせたい場合は次の記事を。

build

公式はココで、過去に使ったことあるのはこんな↓感じです。

export default {
  build: {
    //CSSを分ける設定だったような？
    splitChunks: {
      layouts: true,
      pages: true,
      commons: true,
    },
    //gridのautoprefixer
    postcss: {
      preset: {
        autoprefixer: { grid: 'autoplace' }
      }
    },
    extend(config, { isDev, isClient, isServer }) {
      //fsやnetでエラーが出る対策や
      //JavaScriptObfuscatorをかませる処理
    },
  },
}

splitChunksは結局イラネって判断したんだったか、今は使ってないです。 初期も初期の頃に頭を悩ませてたどり着いた部分だったはず。

postcssはnuxt.configにpostcssという項目が出来たので、たぶん移動？

extendはどこへ行ったのか不明。 少なくともbuildにはなくなっていて、逆に別のプロパティにextendもなさそう。 JavaScriptObfuscatorを使うプロジェクトがまだ移行出来ていないのでそこで悩みそう。

hooks

これまたよく分かってないですが、Nuxtがビルドしていく過程で処理を割り込ませる方法だと思います。 公式はココ。

自分ではAmpOptimizerに処理させる部分でしか書いたことがなくて、Nuxt3での動作はこの記事を。

フック自体がかなりv2の頃からは変わっていて、AMP用にCSSの処理をしたかったんですが、少なくとも今の僕にはできなくなっていました。 フック一覧はこの記事を。

dev時のフックしか調べていないので、generate時のフックとか、書き出したHTMLを後から処理すればAMPのCSS問題は解決しそう。

serverMiddleware

さらによく分かっていないシリーズです。 公式はココでいいのかしら。

v2の頃はサーバプログラム(fsなどが使える)として、本体で使うJSONファイルをデータベースやCSVから書き出すのに使っていました。 ですがこれはおそらくNuxt3では「server」フォルダへ移動していて、middlewareじゃないと思われます。 これはv2時代の僕の理解がおかしくて、おかしい状態でもNuxtが動いていたという理解…でいいのかしら。

Nuxt3でのmiddlewareはルートに関する処理に限定されているようで、middlewareフォルダに入れてdefineNuxtRouteMiddlewareという型で定義しないといけないみたい。 自動インポート対応。

trailingSlashの処理でリダイレクトさせるのに使いました。

また、上記serverの方の処理はアクセスするパスが「/api/to-json/」みたいな内容だった場合、serverフォルダにapiフォルダを作ってその中に「to-json.ts」を作る、みたいな形でいいみたいです。 型はdefineEventHandler？ まだapiを使う処理を移植できていないのでまたその時に。 公式を見ればたぶん大丈夫そう。

devtools

Nuxt3で初期設定のnuxt.config.tsに唯一設定されている項目です。 公式はたぶんココ。

こいつ何してんのかよく分からなくて、自分が状況のデバッグはだいたいconsole.logでやってて、もしかするとその辺が楽にできる開発ツールなのかもしれませんが、現状では内容がよく分からんのと、起動時にこんな↓メッセージがでるんですよね。

 WARN  Slow module @nuxt/devtools took 14157.73ms to setup.

なので自分はオフにしてます。

site

標準のプロパティじゃないんですが、nuxt-site-configというモジュールで追加されているようです。

こんな↓感じで設定されていることが多いです。

export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
    name: 'Awesome Site',
    description: 'Welcome to my awesome site!',
    defaultLocale: 'en',
  }
})

いろんなモジュールがコイツに依存しているらしく、何度か見かけました。 このモジュールを単品で利用というよりは、依存しているモジュールを使うならついでに自分も使う、みたいな感じでしょうか。 最初標準のオプションなのかと思ってました。

コンポーザブルのuseSiteConfig()でscriptから中身にアクセスできます。

srcDir

Nuxt2のころにあったのかは不明ですが、pagesとかcomponentsとか、実際に動かすプログラムを指定したフォルダに隔離できるみたいです。 何が隔離されるのかは公式を見てください。

基本的な設定とかインストール部分だけがルートに残って、プロジェクトの内容が隔離されるのでめちゃくちゃ便利ですね。

vite

Nuxt2にはなかったものだと思います。 ViteというWebPackみたい？なビルド用のプログラム？に関する設定をする部分だと思われます。 公式はココ。

ここでCSSの出力に関する設定できないかしらとちょこちょこ調べたんですが詳細は分かっておらず。 現段階ではこの↓ようにSCSSの変数設定部分を読み込むのにだけ使っています。

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "./css/_var.scss" as *;`,
        },
      },
    },
  },
})

postcss

上でもちょっと書きましたが、v2の頃のbuildプロパティ内のpostcssが移動したみたい？です。 公式はココ。

僕はgridのautoprefixerでしか使ってなくて、v3でもautoprefixerの項目があるので同じように使えそう？ エラーは出なかったですが動作確認はまだ出来ていません。

imports

コンポーザブルの自動インポートに関する設定のようです。 公式はココ。

コンポーザブルというのはグローバルに変数や関数、オブジェクトを導入する仕組みのようです。

dirsで読み込むフォルダを配列で指定できます。

export default defineNuxtConfig({
  imports: {
    dirs: [
      '~/composables1',
      '~/composables2',
    ],
  },
})

componentsみたいにいきなり配列はダメで、ちゃんとdirs以下に指定しないとダメでした。

experimental

名前的に実験段階の項目？ 公式はココ。

今のところtrailingSlashの設定にだけ使っています。

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        trailingSlash: 'append',
      }
    }
  },
})

experimentalってことは、安定動作が確認できたら設定場所が移動したり名前が変わったりするのかもしれない。