Nuxt 4の開発が進んでいるようで楽しみです。Nuxt 3からNuxt 4へのマイグレーションガイドも公開されていましたので、アップグレードに備えて少し触ってみたいと思います。
Nuxt 4
アップグレードに関する情報は、すでに別の方が詳しく整理してくださっているのでそちらを見ていただくのが分かりやすいです。（参考リンク）
大きく変わる点の１つとして、ディレクトリ構造があります。従来プロジェクトルートにあった数々のディレクトリの大半は、appというディレクトリに集約されることになりました。nuxt.config.tsでディレクトリの融通は効くようになっているのでNuxt 3のディレクトリ構造で維持することもできそう？です。
今回はディレクトリ構造に焦点をあてて試してみます。
では、実際に触ってみます。Nuxt 3で以下のようなディレクトリ構造を持っているものとして進めます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
% tree -L 2 . ├── README.md ├── app.vue ├── node_modules │ ├── nuxt -> .pnpm/nuxt@3.13.1_@parcel+watcher@2.4.1_@types+node@22.5.4_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_gyumx2uughrkxfi3zhio7jcoaq/node_modules/nuxt │ ├── vue -> .pnpm/vue@3.5.3/node_modules/vue │ └── vue-router -> .pnpm/vue-router@4.4.3_vue@3.5.3/node_modules/vue-router ├── nuxt.config.ts ├── package.json ├── pnpm-lock.yaml ├── src │ ├── components │ ├── composables │ ├── layouts │ ├── pages │ ├── public │ ├── server │ └── utils └── tsconfig.json 13 directories, 6 files |
Nuxt 3の最新版を入れます。
|
1 2 3 4 5 |
% pnpm dlx nuxi@latest init nuxt4-test % cd nuxt4-test % mkdir src % mv app.vue public server src/ % (cd src; mkdir pages layouts utils components composables) |
簡単なコンテンツを準備します。
|
1 2 3 4 5 |
<template> <footer> <p>Footer</p> </footer> </template> |
|
1 2 3 4 5 6 |
<template> <div> <slot /> <Footer /> </div> </template> |
|
1 2 3 |
<template> <div>index</div> </template> |
|
1 2 3 4 5 6 |
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ compatibilityDate: "2024-04-03", devtools: { enabled: true }, srcDir: "src/", }); |
起動することを確認します。
|
1 |
% pnpm run dev |
続いてNuxt 4のディレクトリ構造に修正します。
まずnuxt.config.tsを以下のように修正します。Nuxt 3の挙動をそのまま継承させるためにexperimentalプロパティでいくつか設定をします。公式ドキュメントに載っている内容を引用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// https://nuxt.com/docs/api/configuration/nuxt-config import path from "node:path"; const BASE_DIR = "src"; const SRC_DIR = path.join(BASE_DIR, "app"); export default defineNuxtConfig({ compatibilityDate: "2024-04-03", future: { compatibilityVersion: 4, }, devtools: { enabled: true }, srcDir: SRC_DIR, serverDir: path.join(BASE_DIR, "server"), dir: { public: path.join(BASE_DIR, "public"), }, // 引用：https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4 // To re-enable _all_ Nuxt v3 behavior, set the following options: experimental: { sharedPrerenderData: false, compileTemplate: true, resetAsyncDataToUndefined: true, templateUtils: true, relativeWatchPaths: true, defaults: { useAsyncData: { deep: true, }, }, }, unhead: { renderSSRHeadOptions: { omitLineBreaks: false, }, }, }); |
注意点としては、serverやpublicディレクトリは、rootDirからの相対パスになることです。rootDirを指定していない場合、デフォルトでプロジェクトルートディレクトリになります。今回はsrcディレクトリの下に配置したいので、src/serverのような設定を加えています。
参考 https://nuxt.com/docs/getting-started/upgrade#new-directory-structure
続いて各種ディレクトリを移動させます。以下のような構造になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
% tree . ├── README.md ├── node_modules │ ├── nuxt -> .pnpm/nuxt@3.13.1_@parcel+watcher@2.4.1_@types+node@22.5.4_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_gyumx2uughrkxfi3zhio7jcoaq/node_modules/nuxt │ ├── vue -> .pnpm/vue@3.5.3/node_modules/vue │ └── vue-router -> .pnpm/vue-router@4.4.3_vue@3.5.3/node_modules/vue-router ├── nuxt.config.ts ├── package.json ├── pnpm-lock.yaml ├── src │ ├── app │ │ ├── app.vue │ │ ├── components │ │ │ └── Footer.vue │ │ ├── composables │ │ ├── layouts │ │ │ └── default.vue │ │ ├── pages │ │ │ └── index.vue │ │ └── utils │ │ └── util.ts │ ├── public │ │ ├── favicon.ico │ │ └── robots.txt │ └── server │ └── tsconfig.json └── tsconfig.json 14 directories, 13 files |
アプリケーションを起動してみます。compatibility version 4のログが出力されており設定が効いているようです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
% pnpm run dev > nuxt-app@ dev /Users/guest/workspace/nuxt/nuxt4-test > nuxt dev Nuxt 3.13.1 with Nitro 2.9.7 14:50:46 14:50:47 ➜ Local: http://localhost:3000/ ➜ Network: use --host to expose ➜ DevTools: press Shift + Option + D in the browser (v1.4.1) 14:50:47 ℹ Running with compatibility version 4 14:50:48 ✔ Vite client built in 17ms 14:50:48 ✔ Vite server built in 266ms 14:50:48 ✔ Nuxt Nitro server built in 313 ms nitro 14:50:48 ℹ Vite client warmed up in 1ms 14:50:48 ℹ Vite server warmed up in 358ms 14:50:49 |
http://localhost:3000 にアクセスすると無事コンテンツを表示できました。
いい感じですね！少しずつ最新機能が試せるようになっているので、アップグレード対応も少しずつ進められそうな気がします。モジュールなどを含めての動作確認はしていないので、依存している周辺システムの状況を見ながら移行準備しようと思います。
参考リンク
- https://qiita.com/hiranuma/items/6e11d0eac0daef695099
- https://nuxt.com/docs/getting-started/upgrade#migrating-to-nuxt-4
コメント