👏

Nuxt4が正式リリースされた👀

2025/07/16に公開

今日（7/16）の朝にNuxt4がStableリリースされました！
https://nuxt.com/blog/v4

ディレクトリ構造の変更（後方互換性あり）

フロント側のコードがapp/に格納されるようになりました。利点として、

特にWin/Linux環境において、FileSystem Watcherが初回起動時に.gitとnode_modulesをスキャンしなくなることによる高速化
server/（サーバー）とそれ以外（ハイドレーション）の異なるコンテクストをIDEが識別しやすくする： a big first step なのでまだ未完っぽい🍊

before

my-nuxt-app/
├─ components/
├─ layouts/
├─ pages/
├─ app.vue
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts

after

my-nuxt-app/
├─ app/
│  ├─ components/
│  ├─ pages/
│  ├─ layouts/
│  └─ app.vue
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts

実際にどのように二つの利点が実現されているか見てみます。まずはNuxt3から

Nuxt3のtsconfig

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

/.nuxt/tsconfig.jsonの中身

/.nuxt/tsconfig.json

  "include": [
    "../**/*",
    "../.config/nuxt.*",
    "./nuxt.d.ts",
    "../node_modules/@nuxtjs/tailwindcss/runtime",
    "../node_modules/@nuxtjs/tailwindcss/dist/runtime",
    "../node_modules/@pinia/nuxt/runtime",
    "../node_modules/@pinia/nuxt/dist/runtime",
    "../node_modules/@nuxt/devtools/runtime",
    "../node_modules/@nuxt/devtools/dist/runtime",
    "../node_modules/@nuxt/telemetry/runtime",
    "../node_modules/@nuxt/telemetry/dist/runtime",
    ".."
  ],
  "exclude": [
    "../dist",
    "../.data",
    "../node_modules",
    "../node_modules/nuxt/node_modules",
    "../node_modules/@nuxtjs/tailwindcss/node_modules",
    "../node_modules/@pinia/nuxt/node_modules",
    "../node_modules/@nuxt/devtools/node_modules",
    "../node_modules/@nuxt/telemetry/node_modules",
    "../node_modules/@nuxtjs/tailwindcss/runtime/server",
    "../node_modules/@nuxtjs/tailwindcss/dist/runtime/server",
    "../node_modules/@pinia/nuxt/runtime/server",
    "../node_modules/@pinia/nuxt/dist/runtime/server",
    "../node_modules/@nuxt/devtools/runtime/server",
    "../node_modules/@nuxt/devtools/dist/runtime/server",
    "../node_modules/@nuxt/telemetry/runtime/server",
    "../node_modules/@nuxt/telemetry/dist/runtime/server",
    "../.output"
  ]

"../**/*", がincludeされてからnode_modulesなどがexcludeされています。

次にNuxt4

Nuxt4のtsconfig

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}

このように関心毎にtsの型を分けるような実装となっています。includeされているのは "../app/**/*",のように対応する各ディレクトリの中身のみとなっているため、FS Watcherの高速化に繋がっています。

IDEのコンテクスト理解についてはまだ開発中っぽいです。

多分この段階でエラーが出てくるようになる

app.vueの見た目が変わった（ダークモードの場合）

Zennっぽい

useFetchとuseAsyncDataが、キーが同じ場合refをシェアするように（v3の途中から実装済み）

キーが同じ場合、dataやerrorといったrefがシェアされるようになりました。
このモックAPIを使った実例
https://jsonplaceholder.typicode.com/

app.vue

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
    <Test />
  </div>
</template>

<script setup lang="ts">
const { data: posts } = useAsyncData('test', () => $fetch('https://jsonplaceholder.typicode.com/posts'), { server: false })
</script>

test.vue

<template>
  <div>
    <h1>Test</h1>
  </div>
</template>

<script setup lang="ts">
const { data: users } = useAsyncData('test', () => $fetch('https://jsonplaceholder.typicode.com/users'), { server: false })
console.log('users', users.value)
</script>