v-tokyo #21 の話を聞いて、Nuxt4 へ移行してみようと思ったら、できなかったので準備だけした話
はじめに
v-tokyo #21 で聞いた Nuxt4 への以降の話が結構面白かったので、移行してみる。
現行環境
package.json
"nuxt": "^3.10.3",
"vite": "5.1.4",
"vue": "^3.4.3",
移行手順
こちらを参考にマイグレーションを進める。
あれ？？ まだリリースされてないのか
Nuxt 4 is planned to be released on or before June 14 (though obviously this is dependent on having enough time after Nitro's major release to be properly tested in the community, so be aware that this is not an exact date).
Until then, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12+.
PRは上がっている
compatibilityVersion をセット
nuxt.config.ts
export default defineNuxtConfig({
future: {
compatibilityVersion: 4,
},
// To re-enable _all_ Nuxt v3 behavior, set the following options:
// srcDir: '.',
// dir: {
// app: 'app'
// },
// experimental: {
// sharedPrerenderData: false,
// compileTemplate: true,
// resetAsyncDataToUndefined: true,
// templateUtils: true,
// relativeWatchPaths: true,
// defaults: {
// useAsyncData: {
// deep: true
// }
// }
// },
// unhead: {
// renderSSRHeadOptions: {
// omitLineBreaks: false
// }
// }
})
Nuxt3 を3.12以上に
v3.12 以上が必要とのことなので、最新のNuxt3にする。
npx nuxi upgrade
package.json(npx nuxi upgrade後)
"nuxt": "^3.12.4",
run dev して nuxt.config を更新
(run dev compatibilityDateを聞かれる)
✔ Do you want to update your nuxt.config to set compatibilityDate: '2024-08-18'?
Yes
✔ Compatibility date set to 2024-08-18 in nuxt.config.ts 9:57:47 AM
ℹ nuxt.config.ts updated. Restarting Nuxt...
尋ねられたので、Yes で更新。
compatibilityDate
原文
Specify a compatibility date for your app.
This is used to control the behavior of presets in Nitro, Nuxt Image and other modules that may change behavior without a major version bump. We plan to improve the tooling around this feature in the future.
要するにアプリの互換性日付を指定する機能。特に指定しなくても良いが、固定しておいた方が後々トラブルがないかも
Codemod
npx codemod@latest nuxt/4/migration-recipe
wattanx さんの記事のnuxt/4/shallow-function-reactivity はこちらから選択するみたいです。
そのほかの選択肢
- nuxt/4/absolute-watch-path
- nuxt/4/default-data-error-value
- nuxt/4/deprecated-dedupe-value
- nuxt/4/file-structure
- v3からv4 にディレクトリ構造に変更してくれる
- nuxt/4/template-compilation-changes
実行ログ
% npx codemod@latest nuxt/4/migration-recipe
Need to install the following packages:
codemod@0.13.7
Ok to proceed? (y) y
✔ Successfully downloaded "nuxt/4/migration-recipe" from the registry.
? Select the codemods you would like to run. Codemods will be executed in order. nuxt/4/absolute-watch-path, nuxt/4/default-data-error-value, nuxt/4/deprecated-dedupe-value, nuxt/4/file-structure,
nuxt/4/shallow-function-reactivity, nuxt/4/template-compilation-changes
✔ Successfully fetched recipe codemods.
? Current git state contains uncommitted changes. Proceed anyway? Yes
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ │
│ Codemod: nuxt/4/absolute-watch-path@1.0.3 │
│ Target: /Volumes/Extreme Pro/market/frontend │
│ │
│ Using paths provided by codemod settings │
│ Included patterns: **/*.js, **/*.jsx, **/*.ts, **/*.tsx, **/*.vue │
│ Patterns excluded by default: **/*.d.ts, **/node_modules/**/*.*, **/.next/**/*.*, │
│ **/dist/**/*.*, **/build/**/*.*, **/.git/**/*.*, │
│ **/.svn/**/*.*, **/.hg/**/*.*, **/.bzr/**/*.*, │
│ **/_darcs/**/*.*, **/_MTN/**/*.*, **/_FOSSIL_, **/.fslckout, │
│ **/.view/**/*.* │
│ Patterns excluded from gitignore: **/node_modules, **/*.log*, **/.nuxt, **/.nitro, **/.cache, │
│ **/.output, **/.env, **/dist, **/.idea, **/.data, │
│ **/lint/*.xml, **/.yarn/*, **/!.yarn/cache, │
│ **/!.yarn/patches, **/!.yarn/plugins, **/!.yarn/releases, │
│ **/!.yarn/sdks, **/!.yarn/versions │
│ │
│ Running in 4 threads │
│ File formatting disabled │
│ │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────╯
Execution progress | ████████████████████████████████████████ | 100% || 262/262 files || Current: storybook-static/assets/DocsRenderer-3PUGWF3O-90442d51.js
Execution progress | ████████████████████████████████████████ | 100% || 262/262 files || Current: public/storybook-static/vendors~main.d6ea56a1c8b964085fc4.manager.bundle.js
Execution progress | ████████████████████████████████████████ | 100% || 262/262 files || Current: public/storybook-static/vendors~main.d6ea56a1c8b964085fc4.manager.bundle.js
Execution progress | ████████████████████████████████████████ | 100% || 262/262 files || Current: storybook-static/storybook/storybook-static/vendors~main.d6ea56a1c8b964085fc4.manager.bundle.js
Execution progress | ████████████████████████████████████████ | 100% || 262/262 files || Current: storybook-static/storybook-static/assets/iframe-f5211697.js
Codemod 後に
srcDir など色々変更している人は、対応が必要なようなので、こちらを参考に
Nuxt4が来たら
npx nuxi upgrade
Done! となって終わるはず
おわりに
サクッと終わりました。Nuxt4 は怖くない！
Discussion