Nuxt 3.4・Nuxtブログ

🪄 View Transitions APIサポート

https://nuxt-view-transitions.surge.shでデモ、StackBlitzでソースコードを確認できます。

Chromiumベースのブラウザでは、新しいWebプラットフォームAPIであるView Transitions APIが利用可能になっています。これは、ネイティブブラウザのトランジションのためのエキサイティングな新機能であり、異なるページ上の関連のない要素間のトランジションなども可能です。

Nuxtは現在、実験的な実装を提供しており、v3.4リリースサイクル中に積極的に開発されます。関連するPRで既知の問題を確認してください。

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

✨ ペイロードの機能強化

Nuxtがペイロードを処理する方法について、重要な変更（実験的なフラグの下）をマージしました。ペイロードは、サーバーサイドレンダリングを行う際にサーバーからクライアントにデータを送信し、ハイドレーションフェーズでの二重データフェッチを回避するために使用されます。

nuxt.config.ts

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

この新しいオプションを有効にすると、正規表現、日付、MapとSet、BigInt、NuxtError、そしてref、reactive、shallowRef、shallowReactiveのようなVue固有のオブジェクトなど、さまざまなリッチなJS型がすぐにサポートされるようになります。

テストスイートで例を確認できます。

これはすべて、Rich-Harris/devalue#58のおかげです。長らくNuxtは、エラーやPOJO以外のオブジェクトのシリアライズに関する問題のため、devalueの独自のフォークを使用していましたが、現在はオリジナルに戻りました。

新しいオブジェクト構文のNuxtプラグインを使用して、独自のカスタム型を登録することもできます。

plugins/custom-payload-type.ts

export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

詳細についてはこちらを参照してください。

注記：これはNuxtアプリのペイロード、つまりuseState内に格納されているデータ、useAsyncDataから返されたデータ、またはnuxtApp.payloadを介して手動で注入されたデータのみに影響します。$fetchまたはuseFetchを介してNitroサーバールートから取得されたデータには影響しません。ただし、これは私がさらに調査したい分野の一つです。

予備テストでは、大きなJSONペイロードを持つ最小限のアプリで、サーバーの応答時間が合計で25％高速化されることが示されていますが、独自のテストを実行し、結果を共有していただければ幸いです。

前述のように、この機能はフラグの背後にマージされているため、広くテストし、新しいアプローチに関するフィードバックを収集できます。最も重要な潜在的な変更点は、ペイロードがwindow.__NUXT__ですぐには利用できなくなることです。代わりに、Nuxtアプリを初期化してペイロードを解析する必要があるため、__NUXT__にアクセスするコードは、プラグイン内またはNuxtアプリのライフサイクルの後で実行する必要があります。プロジェクトで問題が発生する可能性がある場合、または問題が発生した場合は、お気軽に問題を報告してください。

🎁 オブジェクト構文のNuxtプラグイン

プラグインの順序をより細かく制御し、フックの登録を容易にするため、オブジェクト構文のNuxtプラグインをサポートするようになりました。

plugins/my-plugin.ts

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // or 'post'
  async setup (nuxtApp) {
    // this is the equivalent of a normal functional plugin
  },
  hooks: {
    // You can directly register Nuxt app hooks here
    'app:created'() {
      const nuxtApp = useNuxtApp()
      //
    }
  }
})

将来的には、Nuxtプラグインで渡されるメタデータに基づいてビルドの最適化を有効にする予定です。

🛠️ Devtoolsの設定が容易になりました

nuxt.configファイルでdevtools: trueを設定するだけで、プロジェクトでNuxt DevToolsを簡単に有効にできます。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: true
})

まだインストールされていない場合は、Nuxtによってローカルインストールが促されます。つまり、グローバルにNuxt DevToolsを有効にする必要がなくなりました。

注記：DevToolsはまだ実験段階であり、積極的に開発中であるため、予期しない動作が発生する可能性があります。問題が発生した場合は、https://github.com/nuxt/devtoolsに直接報告してください🙏

📚 レイヤーの改善

レイヤー内で~/~~/@/@@エイリアスの変換をサポートするようになりました。つまり、レイヤー内でインポートする際に相対パスを使用する必要がなくなりました。

これにより、特別な記述をすることなく、「通常の」Nuxtプロジェクトをレイヤーとして使用することがはるかに容易になります。

🧸 コンテキスト変換の改善

definePageMetaとdefineNuxtComponentの特定のキーを変換するようになりました。これにより、Nuxtインスタンスが見つからないという問題が少なくなるはずです。これには、Options APIを使用している場合でも、asyncDataとsetup関数内のawaitの後でNuxtインスタンスにアクセスするためのサポートが含まれます。また、非同期関数を使用する場合にmiddlewareとvalidateをdefineNuxtRouteMiddlewareでラップする必要がなくなりました。

♻️ エコシステムの更新

いつものように、このリリースでは、新しいConsola v3とNitropack v2.3.3（まもなく新しいマイナーバージョンがリリースされる予定です）を含む、アップストリームの改善が取り込まれています。

🚨 「破壊的な修正」

このマイナーリリースでは、クリーンアップも行いました。

以前は、x-nuxt-no-ssrヘッダー（非公開）を渡してSPAレンダリングを強制することができました。この動作はデフォルトで無効にしましたが、experimental.respectNoSSRHeaderをtrueに設定することで元に戻すことができます。または、サーバーでevent.context.nuxt.noSSRを設定してSPAレンダリングを強制することもできます。
（非推奨の）#headエイリアスを削除し、（非推奨の）@vueuse/headの動作に対するポリフィルもデフォルトで無効にしました。（experimental.polyfillVueUseHeadで有効にできます。）
（非推奨の）experimental.viteNodeオプションを削除しました。vite.devBundlerで設定できます。
publicキーなしでパブリックランタイム設定にアクセスすることを非推奨にしました。これはNuxt 2との互換性のための非公開の対応策であり、v3.5で完全に削除する予定です。
vue-routerとの統合におけるバグを修正するために、わずかに異なるパスマッチング構文を生成するようになりました。生成された正確なパスに依存していた場合は、https://github.com/nuxt/nuxt/pull/19902で詳細を確認してください。

✅ アップグレード

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

npx nuxi upgrade --force

これにより、lockfileも更新され、Nuxtが依存する他の依存関係（特にunjsエコシステム内）の更新が確実に取り込まれます。

← ブログに戻る

Nuxt 3.5

Nuxt 3.5.0がリリースされました。Vue 3.3、新しいデフォルト、インタラクティブなサーバーコンポーネント、型付きページ、環境設定などが追加されています。

Nuxt DevToolsのご紹介

Nuxtで開発者エクスペリエンスを向上させ、これまで以上にアプリを深く理解しましょう。