リリース· 2024年1月30日

Nuxt 3.10

Nuxt 3.10がリリースされました。多数の機能と修正が含まれています。主なハイライトをいくつかご紹介します。

ダニエル・ロー

@danielroe.dev

v3.10はv3.9のすぐ後にリリースされましたが、多くの機能と修正が詰め込まれています。主なハイライトをいくつかご紹介します。

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

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

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

nuxt.config.ts

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

特に重要なのは、データのユニークキーが常に同じデータに解決されるようにすることです。たとえば、特定のページに関連するデータを取得するためにuseAsyncDataを使用している場合、そのデータに一意に一致するキーを提供する必要があります。（useFetchはこれを自動的に行います。）

Docs > Guide > Going Further > Experimental Features#sharedprerenderdataで詳細を確認してください。

🆔 SSRセーフなアクセス可能なユニークIDの作成

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

components/MyForm.vue

<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の追加や、ルートの実行時拡張などを行うことができます。

Docs > Guide > Going Further > Custom Routing#router Optionsで詳細を確認してください。

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

Node以外の環境にデプロイする際に、サーバー上でNitro経由ですでに行っているように、主要なNode.js組み込み（#25028）のポリフィルを（実験的に）サポートするようになりました。

つまり、クライアントサイドのコード内で、Nodeの組み込み（node:およびnodeインポートがサポートされます）から直接インポートできます。ただし、バンドルサイズを不必要に増やさないように、何もグローバルに注入されることはありません。必要な場所でインポートするか、

some-file.ts

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

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

plugins/node.client.ts

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

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

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

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

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

Docs > API > Utils > Refresh Cookieで詳細を確認してください。

🏥 アンチパターンの検出

このリリースでは、潜在的なバグやパフォーマンスの問題を検出するためのさまざまな機能も搭載されています。

サーバー上でsetIntervalが使用された場合、エラーをスローするようになりました（#25259).
プラグインやセットアップコンテキストの外でデータフェッチコンポーザブルが誤って使用された場合（#25071）、警告（開発環境のみ）が表示されます。
vue-routerインテグレーションが有効になっているにもかかわらず、<NuxtPage />を使用していない場合（#25490）、警告（開発環境のみ）が表示されます。（<RouterView />は単独で使用すべきではありません。）

🧂 粒度のあるビュー遷移のサポート

definePageMetaを使用して、ページごとにビュー遷移のサポートを制御できるようになりました（#25264).

まず実験的なビュー遷移サポートを有効にする必要があります

nuxt.config.ts

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

そして、粒度のあるオプトイン/オプトアウトが可能です

pages/index.vue

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

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

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

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

nuxt.config.ts

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

ぜひこれを試してみて、感想をお聞かせください。将来的にはパフォーマンスを改善し、この機能をデフォルトで有効にすることで、@nuxtjs/i18nなどのモジュールがdefinePageMetaで設定されたルーティングオプションとより深い統合を提供できるようになることを願っています。

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

で#24837、TypeScriptのbundler解決をオプトインしました。これにより、Nuxtプロジェクトでモジュールのサブパスインポートが実際に解決される方法に近くなります。

「Bundler」モジュール解決はVueによって推奨されGlobalComponentsViteによっても推奨されていますしかし残念ながら、まだ多くのパッケージがpackage.jsonに正しいエントリを持っていません。

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

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

nuxt.config.ts

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

✅ アップグレード

いつものように、アップグレードには以下を実行することをお勧めします。

npx nuxi upgrade --force

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

完全なリリースノート

Nuxt v3.10.0の完全なリリースノートを読む。

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

ハッピーNuxting ✨

← ブログに戻る