Zenn
株式会社ROBONの技術ブログPublicationへの投稿
⛰

さっそくNuxt4

荒木 岳夫
に公開
Vue.js
ESLint
Vuetify
Nuxt 3
Vitest
tech

はじめに

まずは、こちら。
https://nuxt.com/blog/roadmap-v4

数か月前に、「いまさらNuxt3」を書いていたものとしては、「さっそくNuxt4」を書かないわけにはいきません。
https://zenn.dev/robon/articles/2932b0bbb8d251
https://zenn.dev/robon/articles/bbf2d1a0fe0225
https://zenn.dev/robon/articles/a7b7f3fba60baf
https://zenn.dev/robon/articles/68de21417b97b5

やってみた

突然のことなので、お題は「いまさらNuxt3」の最終形態を Nuxt4 で動かす。にします。
突然のことと言えば、長嶋監督。ご冥福をお祈りいたします。

いまさらNuxt3 の最終形態

こちらです。
https://github.com/take0a/nuxt4/tree/main/nuxt3

さっそくNuxt4 の実験体

上のをコピって、記事の感じでコミットログを残していきます。
https://github.com/take0a/nuxt4/tree/main/alpha.1

まずは、動かす

数か月ほこりをかぶっているのと、gitignore されてるものがあるので、当時の Nuxt3 で動かします。上のリポジトリ nuxt3 の方を clone した人は、alpha.1 ではない名前でやれば再現でき（ると思い）ます。

$ cp -r nuxt3 alpha.1
$ cd alpha.1
$ pnpm install

動かす前に、nuxt-auth-utils が入っているので、Google の OAuth クライアントの設定を入れておきます。再現したい人は、過去記事のように、どれかの OAuth 設定をするか、さらに巻き戻してください。

NUXT_SESSION_PASSWORD=xxxxxxxxxxxxxxxxxxxxx
# Google OAuth
NUXT_OAUTH_GOOGLE_CLIENT_ID=yyyyyyyyyyyyyyyyyyyyy.apps.googleusercontent.com
NUXT_OAUTH_GOOGLE_CLIENT_SECRET=zzzzzzzzzzzzzzzzzzzzzzz

で、動かす。

$ pnpm dev

> nuxt-app@ dev /home/ec2-user/work/nuxt4/alpha.1
> nuxt dev

Nuxt 3.15.4 with Nitro 2.10.4
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v1.7.0)

✔ Vite client built in 40ms
✔ Vite server built in 543ms
✔ Nuxt Nitro server built in 2283 ms
ℹ Vite client warmed up in 2ms
ℹ Vite server warmed up in 1688ms

当たり前ですが、動きます。Nuxt 3.15.4 with Nitro 2.10.4 でした。
ここで、DevTools も見ておくと、4 になったときの変化がわかります。（動くネタバレか）

どうやって Nuxt4 にするか？

よくわからなかったので、以下に従うことにします。ま、まだ alpha.1 なので、自分でたどり着いた人だけ自己責任なのかもしれません。
https://nuxt.com/docs/getting-started/upgrade

Latest release

$ pnpm nuxt upgrade
ℹ Package manager: pnpm 10.4.1
ℹ Current Nuxt version: 3.15.4

✔ Would you like to dedupe your lockfile (recommended) or recreate node_modules and pnpm-lock.yaml? This can fix problems with hoisted dependency versions and
ensure you have the most up-to-date dependencies.
dedupe lockfile
ℹ Try deduping dependencies...
 WARN  2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Already up to date
Progress: resolved 963, reused 862, downloaded 1, added 30, done

> nuxt-app@ postinstall /home/ec2-user/work/nuxt4/alpha.1
> nuxt prepare

✔ Types generated in .nuxt

dependencies:
- vue 3.5.13
+ vue 3.5.16
- vue-router 4.5.0
+ vue-router 4.5.1
ℹ Installing latest stable Nuxt 3 release...
 WARN  3 deprecated subdependencies found: glob@8.1.0, inflight@1.0.6, node-domexception@1.0.0
Packages: +307 -14
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------
Progress: resolved 1189, reused 1003, downloaded 8, added 307, done

dependencies:
- nuxt 3.15.4
+ nuxt 3.17.5

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: esbuild.                                                          │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

Done in 5.6s using pnpm v10.4.1
ℹ Cleaning up generated Nuxt files and caches...
ℹ Upgraded Nuxt version: 3.17.5
✔ Successfully upgraded Nuxt from 3.15.4 to 3.17.5
ℹ Changelog: https://github.com/nuxt/nuxt/compare/v3.15.4...v3.17.5

となって、Nuxt も Vue もバージョンが上がりました。一応、pnpm dev で動作確認しておきます。

Migrating Using Codemods

自動でマイグレーションしてくれるようなので、のっかります。

$ pnpm dlx codemod@latest nuxt/4/migration-recipe
Error: Cannot find module '../build/Release/keytar.node'
Require stack:
- /home/ec2-user/.cache/pnpm/dlx/747533e990ddc10e468c18cacd01365e2cd03bfee0a0b5d330124179b5ed57b9/197352d93f6-7f3d/node_modules/.pnpm/keytar@7.9.0/node_modules/keytar/lib/keytar.js 

Codemod CLI uses "keytar" to store your credentials securely. 
Please make sure you have "libsecret" installed on your system. 
Depending on your distribution, you will need to run the following command 
Debian/Ubuntu: sudo apt-get install libsecret-1-dev 
Fedora: sudo dnf install libsecret 
Arch Linux: sudo pacman -S libsecret 

If you were not able to install the necessary package or CLI was not able to detect the installation please reach out to us at our Community Slack channel. 
You can still use the CLI with file-based replacement that will store your credentials at your home directory.
✔ Successfully fetched "nuxt/4/migration-recipe" from local cache.
? Press Enter to run the selected codemods in order. You can deselect anything you don’t want. 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.
╭─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                             │
│                                                                                             │
│      Codemod: nuxt/4/absolute-watch-path@1.0.3                                              │
│      Target: /home/ec2-user/work/nuxt4/alpha.1                                              │
│                                                                                             │
│      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/**/*.*                                                                        │
│                                                                                             │
│      Running in 4 threads                                                                   │
│      File formatting disabled                                                               │
│                                                                                             │
│                                                                                             │
╰─────────────────────────────────────────────────────────────────────────────────────────────╯
Execution progress | ████████████████████████████████████████ | 100% || 27/27 files || Current: .output/public/_nuxt/DIu83scC.js
╭─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                             │
│                                                                                             │
│      Codemod: nuxt/4/default-data-error-value@1.0.3                                         │
│      Target: /home/ec2-user/work/nuxt4/alpha.1                                              │
│                                                                                             │
│      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/**/*.*                                                                        │
│                                                                                             │
│      Running in 4 threads                                                                   │
│      File formatting disabled                                                               │
│                                                                                             │
│                                                                                             │
╰─────────────────────────────────────────────────────────────────────────────────────────────╯
Execution progress | ████████████████████████████████████████ | 100% || 27/27 files || Current: .output/public/_nuxt/DIu83scC.js
╭─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                             │
│                                                                                             │
│      Codemod: nuxt/4/deprecated-dedupe-value@1.0.2                                          │
│      Target: /home/ec2-user/work/nuxt4/alpha.1                                              │
│                                                                                             │
│      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/**/*.*                                                                        │
│                                                                                             │
│      Running in 4 threads                                                                   │
│      File formatting disabled                                                               │
│                                                                                             │
│                                                                                             │
╰─────────────────────────────────────────────────────────────────────────────────────────────╯
Execution progress | ████████████████████████████████████████ | 100% || 27/27 files || Current: .output/public/_nuxt/DIu83scC.js
╭─────────────────────────────────────────────────────╮
│                                                     │
│                                                     │
│      Codemod: nuxt/4/file-structure@1.0.1           │
│      Target: /home/ec2-user/work/nuxt4/alpha.1      │
│                                                     │
│                                                     │
╰─────────────────────────────────────────────────────╯
Creating directory /home/ec2-user/work/nuxt4/alpha.1/app
Moving /home/ec2-user/work/nuxt4/alpha.1/composables/useSnackbar.ts to /home/ec2-user/work/nuxt4/alpha.1/app/composables/useSnackbar.ts
FILE /home/ec2-user/work/nuxt4/alpha.1/eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs'
import withNuxt from '.nuxt/eslint.config.mjs'

Moving /home/ec2-user/work/nuxt4/alpha.1/layouts/default.vue to /home/ec2-user/work/nuxt4/alpha.1/app/layouts/default.vue
Moving /home/ec2-user/work/nuxt4/alpha.1/middleware/auth.ts to /home/ec2-user/work/nuxt4/alpha.1/app/middleware/auth.ts
Moving /home/ec2-user/work/nuxt4/alpha.1/pages/index.vue to /home/ec2-user/work/nuxt4/alpha.1/app/pages/index.vue
Moving /home/ec2-user/work/nuxt4/alpha.1/pages/customer/new.vue to /home/ec2-user/work/nuxt4/alpha.1/app/pages/customer/new.vue
Moving /home/ec2-user/work/nuxt4/alpha.1/app.vue to /home/ec2-user/work/nuxt4/alpha.1/app/app.vue
╭─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                             │
│                                                                                             │
│      Codemod: nuxt/4/shallow-function-reactivity@1.0.3                                      │
│      Target: /home/ec2-user/work/nuxt4/alpha.1                                              │
│                                                                                             │
│      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/**/*.*                                                                        │
│                                                                                             │
│      Running in 4 threads                                                                   │
│      File formatting disabled                                                               │
│                                                                                             │
│                                                                                             │
╰─────────────────────────────────────────────────────────────────────────────────────────────╯
Execution progress | ████████████████████████████████████████ | 100% || 27/27 files || Current: .output/public/_nuxt/DIu83scC.js
╭─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                             │
│                                                                                             │
│      Codemod: nuxt/4/template-compilation-changes@1.0.4                                     │
│      Target: /home/ec2-user/work/nuxt4/alpha.1                                              │
│                                                                                             │
│      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/**/*.*                                                                        │
│                                                                                             │
│      Running in 4 threads                                                                   │
│      File formatting disabled                                                               │
│                                                                                             │
│                                                                                             │
╰─────────────────────────────────────────────────────────────────────────────────────────────╯
Execution progress | ████████████████████████████████████████ | 100% || 27/27 files || Current: .output/public/_nuxt/DIu83scC.js

No changes were made during the codemod run.

冒頭、なんか叱られてますが、リポジトリの外を見ているようですし、一旦、見なかったことにして進めます。（そういうやつは、ずっと見なかったことにするんですが）

で、これをやると、以下のものを app/ の下へお引越ししてくれます。

  • composables/
  • layouts/
  • middleware/
  • pages/
  • app.vue

うーん。えい！

ま、こうすれば、そりゃ上がるよな。という感じです。

$ pnpm up nuxt@v4.0.0-alpha.1
 WARN  4 deprecated subdependencies found: @types/parse-path@7.1.0, glob@8.1.0, inflight@1.0.6, node-domexception@1.0.0
Packages: +63 -2
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
Progress: resolved 1252, reused 1049, downloaded 1, added 63, done

dependencies:
- nuxt 3.17.5
+ nuxt 4.0.0-alpha.1

Done in 5.4s using pnpm v10.4.1

で、動けー

$ pnpm dev

> nuxt-app@ dev /home/ec2-user/work/nuxt4/alpha.1
> nuxt dev

Nuxt 4.0.0-alpha.1 with Nitro 2.11.12
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v2.4.1)

ℹ Running with compatibility version 3
ℹ Re-optimizing dependencies because lockfile has changed
✔ Vite client built in 43ms
✔ Vite server built in 59ms
✔ Nuxt Nitro server built in 1521ms
ℹ Vite client warmed up in 9ms
ℹ Vite server warmed up in 39ms

しょぼん。でも、4.0.0-alpha.1 だね。

Opting in to Nuxt 4

これが必要です。

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },

動いた！

ですが、カラーパレットやＺ軸方向の重ね合わせなど、振る舞いが変わった？おかしい？箇所があるようです。中の皆様に期待しております。

おわりに

「いまさらNuxt3」では、いつの記事を書いてるの？な感じでしたが、認証や部品化など、多くのアプリで必要になる情報が無いなぁということで記事にしました。
今回は、リリース翌日（現地時間の 6/2 のようですが、日本時間では 6/3 だったので）に「さっそくNuxt4」が出せてよかったです。

GitHubで編集を提案
株式会社ROBONの技術ブログ
株式会社ROBONの技術ブログPublication

わたしたちの社名は「全ての業務にロボットをオン（実装）する」ことに由来します。また、「IT技術で全てのお客様の生産性を飛躍的に向上させる」ことを経営理念としています。 ROBONとROBONで活躍するエンジニアの描く未来にご期待ください。

Discussion