リリース·  

Nuxt 3.16

Nuxt 3.16がリリースされました。新機能とパフォーマンス改善が満載です。
Daniel Roe

ダニエル・ロー

@danielroe.dev

今回は盛りだくさんです！

⚡️ 新しいNuxtの始まり

Nuxtプロジェクトを始めるための新しいツール、create-nuxt にようこそ (パッケージ名を寄贈してくださった@devgarに感謝します)!

nuxi init の効率化されたバージョンで、サイズは6分の1、すべての依存関係がインライン化された単一ファイルとしてバンドルされており、可能な限り迅速にプロジェクトを開始できます。

新しいプロジェクトの開始はとても簡単です。

npm create nuxt

特別な感謝を@cmangに美しいASCIIアート. ❤️

Nuxt CLIの今後の方向性についてもっと知りたいですか？ロードマップをご覧ください。こちらインタラクティブなモジュールセレクターの計画も含まれています。.

🚀 Unhead v2

Nuxtの <head> 管理の基盤となるエンジンである unhead v2にアップグレードしました。このメジャーバージョンでは、非推奨の機能が削除され、コンテキストの動作が改善されています。

  • Nuxt 3ユーザー向けに、何も壊れないようにレガシー互換性ビルドを提供しています。
  • コンテキストの実装は、Nuxt自体を介してより直接的になりました。
// Nuxt now re-exports composables while properly resolving the context
export function useHead(input, options = {}) {
  const unhead = injectHead(options.nuxt)
  return head(input, { head: unhead, ...options })
}

アプリでUnheadを直接使用している場合は、次の点に注意してください。

  1. @unhead/vue からではなく、Nuxtの自動インポートまたは #app/composables/head からインポートしてください。
  2. @unhead/vue から直接インポートすると、非同期コンテキストが失われる可能性があります。

心配しないでください。Nuxt 3では後方互換性を維持しているため、ほとんどのユーザーは何も変更する必要はありません！

compatibilityVersion: 4 を選択している場合は、追加の変更についてアップグレードガイドをご確認ください。

🔧 Devtools v2へのアップグレード

Nuxt Devtoolsがv2にレベルアップしました（#30889)!

カスタムエディター選択、解決済み設定を検査するためのDiscovery.js（デバッグに最適）、スキーマジェネレーターの復活、そしてスリム化された依存関係などの新機能をお楽しみいただけます。

私たちのお気に入りの改善点の1つは、モジュールがNuxt設定をどのように変更するかを追跡できる機能です。これにより、内部で何が起こっているかをX線で見ることができます。

👉 詳細はNuxt DevToolsのリリースノート.

でご確認ください。

⚡️ パフォーマンス改善

  1. Vitest プロジェクトを使用すると、Nuxtの高速化を続けており、v3.16には多くの改善点があります。exsolve#31124モジュール解決用（）とunjsエコシステム（nitro、c12、pkg-typesなど）の残りの部分と合わせて、モジュール解決が劇的に高速化されます。
  2. よりスマートなモジュール解決パス（#31037） - 効率向上のために直接インポートを優先します。
  3. 重複するNitroエイリアス解決の排除（#31088） - ファイル処理の効率化
  4. 不要な解決ステップをスキップすることで loadNuxt を効率化 (#31176) - 起動の高速化
  5. Nuxtプラグインでの解析に oxc-parser を採用 (#30066)

これらの速度向上はすべて自動的に行われます。設定は不要です！

感謝を込めてCodSpeedとVitestベンチマークCIでこれらの改善を測定するために、本当に役立ちました。

いくつかの実例として、私の個人的なサイトroe.devv3.16では32%高速化され、nuxt.comは28%高速化されました。同様の結果が得られることを願っています！ ⚡️

🕰️ 遅延ハイドレーションのサポート

ネイティブの遅延/遅延ハイドレーションのサポート（#26468）をお届けできることを大変嬉しく思います！これにより、コンポーネントがいつハイドレートされるかを正確に制御でき、初期ロードパフォーマンスとインタラクティブまでの時間を改善できます。Vueの組み込みのハイドレーション戦略を活用しています。Vueドキュメントでご確認ください。.

<template>
  <!-- Hydrate when component becomes visible in viewport -->
  <LazyExpensiveComponent hydrate-on-visible />
  
  <!-- Hydrate when browser is idle -->
  <LazyHeavyComponent hydrate-on-idle />
  
  <!-- Hydrate on interaction (mouseover in this case) -->
  <LazyDropdown hydrate-on-interaction="mouseover" />
  
  <!-- Hydrate when media query matches -->
  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
  
  <!-- Hydrate after a specific delay in milliseconds -->
  <LazyFooter :hydrate-after="2000" />
</template>

@hydrated イベントでハイドレーションが発生したときにリッスンすることもできます。

<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />

遅延ハイドレーションの詳細については、コンポーネントのドキュメントをご覧ください。

🧩 高度なページ設定

Nuxtがページをスキャンするファイルを細かく調整できるようになりました（#31090）。これにより、プロジェクト構造をより細かく制御できます。

nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    // Filter specific files or directories
    pattern: ['**/*.vue'],
  }
})

🔍 強化されたデバッグ

debug オプションでのデバッグがより柔軟になりました！必要なデバッグログだけを有効にできます（#30578):

nuxt.config.ts
export default defineNuxtConfig({
  debug: {
    // Enable specific debugging features
    templates: true,
    modules: true,
    watchers: true,
    hooks: {
      client: true,
      server: true,
    },
    nitro: true,
    router: true,
    hydration: true,
  }
})

または、debug: true を使用して、これらのデバッグ機能をすべて有効にする簡単な方法もあります。

🎨 デコレーターのサポート

デコレーターファンの皆さん（どなたでも！）、実験的なサポートを追加しました（#27672）。すべての実験的機能と同様に、フィードバックは大歓迎です。

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    decorators: true
  }
})

function something (_method: () => unknown) {
  return () => 'decorated'
}

class SomeClass {
  @something
  public someMethod () {
    return 'initial'
  }
}

const value = new SomeClass().someMethod()
// returns 'decorated'

📛 名前付きレイヤーエイリアス

多くの要望がありましたが、ついに登場しました！自動スキャンされるローカルレイヤー（~~/layers ディレクトリから）が自動的にエイリアスを作成します。~~/layers/test レイヤーには #layers/test でアクセスできます（#30948）。設定は不要です。

他のレイヤーに名前付きエイリアスを設定したい場合は、レイヤー設定に名前を追加できます。

nuxt.config.ts
export default defineNuxtConfig({
  $meta: {
    name: 'example-layer',
  },
})

これにより、レイヤーを指すエイリアス #layers/example-layer が作成され、インポートがよりクリーンで直感的になります。

🧪 エラー処理の改善

エラーメッセージとソース追跡を大幅に改善しました（#31144):

  1. 正確なファイル位置情報を含む未定義の useAsyncData 呼び出しに対する警告の改善
  2. アイランドページのレンダリングエラー発生時にエラーページが正しく表示されるようになりました（#31081)

さらに、Nitroの美しいエラー処理（youch）を使用することで、スタックトレースをサポートし、より役立つエラーメッセージをターミナルで提供するようになりました。

また、Nitroは追加のNodeオプションを必要とせずにソースマップを自動的に適用し、エラーページをレンダリングする際に適切なセキュリティヘッダーを設定します。

📦 モジュール開発の改善

モジュール作成者向けに、addTypeTemplate を使用してNitroの型を拡張する機能を追加しました（#31079):

// Inside your Nuxt module
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        declare module 'nitropack' {
          interface NitroRouteConfig {
            myCustomOption?: boolean
          }
        }
      `
    }, { nitro: true })
  }
})

⚙️ Nitro v2.11へのアップグレード

Nitro v2.11にアップグレードしました。非常に多くの改善があり、この短いリリースノートではすべてを網羅しきれません。

👉 詳細はNitro v2.11.0のリリースノート.

でご確認ください。

📦 新しい unjs メジャーバージョン

  • このリリースには、unjsエコシステムからのいくつかのメジャーバージョンアップグレードが含まれており、ESMオンリーの配布によるパフォーマンス向上とバンドルサイズの縮小に重点を置いています。
  • unenvがv2にアップグレード（完全書き換え）
  • db0がv0.3にアップグレード（ESMオンリー、ネイティブnode:sql、改善）
  • ohashがv2にアップグレード（ESMオンリー、ネイティブnode:cryptoサポート、大幅に高速化）
  • untypedがv2にアップグレード（ESMオンリー、インストールサイズ縮小）
  • unimportがv4にアップグレード（改善）
  • c12がv3にアップグレード（ESMオンリー）
  • patheがv2にアップグレード（ESMオンリー）
  • cookie-esがv2にアップグレード（ESMオンリー）
  • esbuildがv0.25にアップグレード

✅ アップグレード

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

npx nuxi@latest upgrade --dedupe

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

完全なリリースノート

chokidarがv4にアップグレード

このリリースに参加してくださったすべての方々に心からの感謝を。❤️

Nuxt v3.16.0 の全リリースノートをお読みください。

← ブログに戻る
Nuxt on LinkedInBlueskyのNuxtNuxt on X