Nuxt 3.10

v3.10はv3.9に続いてすぐにリリースされましたが、新機能と修正が満載です。主なハイライトをご紹介します。

✨ 実験的な共有 asyncData プリレンダリング時

ルートをプリレンダリングする場合、同じデータを何度も再取得してしまう可能性があります。Nuxt 2では、一度フェッチしてすべてのページでアクセスできる「ペイロード」を作成できました（もちろん、Nuxt 3でも手動で実行できます - この記事を参照）。

#24894により、サイトのプリレンダリング時に自動的にこれを行うことができるようになりました。useAsyncData と useFetch の呼び出しは重複排除され、サイトのレンダリング間でキャッシュされます。

export defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})

🆔 SSRセーフなアクセス可能な一意のID作成

SSRセーフな一意のIDを生成するための useId コンポーザブルを提供するようになりました（#23368）。これにより、アプリでよりアクセスしやすいインターフェースを作成できます。例えば

<script setup>
const emailId = useId()
const passwordId = useId()
</script>

<template>
  <form>
    <label :for="emailId">Email</label>
    <input
      :id="emailId"
      name="email"
      type="email"
    >
    <label :for="passwordId">Password</label>
    <input
      :id="passwordId"
      name="password"
      type="password"
    >
  </form>
</template>

✍️ app/router.options の拡張

モジュール作成者が独自の router.options ファイルを挿入できるようになりました（#24922）。新しい pages:routerOptions フックを使用すると、モジュール作成者はカスタム scrollBehavior を追加したり、ルートのランタイム拡張を追加したりできます。

クライアントサイド Node.js サポート

非Node環境にデプロイする際にサーバー上でNitroを介して既に実行しているのと同様に、主要なNode.js組み込み関数のポリフィルを（実験的に）サポートするようになりました（#25028）。

つまり、クライアントサイドコード内で、Node組み込み関数（node: およびnodeインポートがサポートされています）から直接インポートできます。ただし、バンドルサイズが不必要に増加しないように、グローバルに何も挿入されません。必要に応じてインポートできます。

import { Buffer } from 'node:buffer'
import process from 'node:process'

または、たとえばNuxtプラグイン内に独自のポリフィルを提供します。

import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

これは、適切なブラウザサポートのないライブラリを使用しているユーザーにとって、作業を容易にするはずです。ただし、バンドルが不必要に増加するリスクがあるため、可能な限り**他の選択肢を選択することを強くお勧めします。**

🍪 より良いクッキーのリアクティビティ

CookieStoreの使用を選択できるようになりました。ブラウザのサポートがある場合、クッキーが更新されたとき（#25198）に、BroadcastChannelの代わりにこれを使用してuseCookie 値をリアクティブに更新します。

これには、リクエストの実行後などに、クッキーの値を手動で更新できる新しいコンポーザブル refreshCookie も付属しています。

🏥 アンチパターンの検出

このリリースでは、潜在的なバグとパフォーマンスの問題を検出するための一連の機能も提供しています。

• サーバーで setInterval が使用されている場合、エラーがスローされるようになりました（#25259）。
• データフェッチコンポーザブルが誤って使用されている場合（#25071）、たとえばプラグインまたはセットアップコンテキストの外部で使用されている場合、警告が表示されます（開発時のみ）。
• <NuxtPage /> を使用していないが、vue-router 統合が有効になっている場合、警告が表示されます（開発時のみ）（#25490）。（<RouterView /> は単独で使用しないでください。）

🧂 詳細なビュートランジションのサポート

definePageMeta を使用して、ページごとにビュートランジションのサポートを制御できるようになりました（#25264）。

最初に実験的なビュートランジションのサポートを有効にする必要があります

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    // you can disable them globally if necessary (they are enabled by default)
    viewTransition: false
  }
})

そして、詳細にオプトイン/アウトできます

<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

最後に、ユーザーのブラウザが prefers-reduced-motion: reduce に一致する場合、Nuxtはビュートランジションを適用しません（#22292）。 viewTransition: 'always' を設定できます。その後、ユーザーの好みに配慮するのはあなた次第です。

🏗️ ビルド時のルートメタデータ

definePageMeta で定義されたルーティングメタデータにビルド時にアクセスできるようになり、モジュールとフックがこれらの値を変更できるようになりました（#25210）。

export default defineNuxtConfig({
  experimental: {
    scanPageMeta: true
  }
})

これを試して、どのように機能するかをお知らせください。今後のリリースでパフォーマンスを向上させ、これをデフォルトで有効にして、@nuxtjs/i18n などのモジュールが definePageMeta で設定されたルーティングオプションとのより深い統合を提供できるようにしたいと考えています。

📦 バンドラーモジュール解決

#24837により、TypeScript bundler 解決を選択できるようになりました。これは、Nuxtプロジェクトでモジュールのサブパスインポートを解決する実際の方法に、より近いものになるはずです。

「バンドラー」モジュール解決はVueによって推奨され、Viteによって推奨されていますが、残念ながら package.json に正しいエントリがないパッケージがまだたくさんあります。

これの一環として、エコシステム全体で85のPRを開いてデフォルトの切り替えをテストし、いくつかの問題を特定して修正しました。

この動作をオフにする必要がある場合は、オフにすることができます。ただし、ライブラリまたはモジュールのリポジトリで問題を提起することをご検討ください（お気軽にタグ付けしてください）。そうすれば、ソースで解決できます。

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})

✅ アップグレード

いつものように、アップグレードの推奨事項は、以下を実行することです。

npx nuxi upgrade --force

これにより、ロックファイルも更新され、Nuxtが依存している他の依存関係、特にunjsエコシステムからの更新が確実に取得されます。

完全なリリースノート

ここまで読んでいただきありがとうございます！新しいリリースをお楽しみいただければ幸いです。フィードバックや問題があれば、お知らせください。

ハッピーNuxting ✨