Nuxt 3.8

💻 CLIの改善

改めてお知らせしますが、現在、バージョン管理が分離された新しいNuxt CLIを使用しています。

✨ 組み込みの Nuxt DevTools

Nuxt DevTools v1.0.0 がリリースされ、Nuxt の直接の依存関係として出荷する準備が整ったと考えています。

📸 Nuxt Image の自動インストール

<NuxtImg> と <NuxtPicture> のファーストクラスの組み込みコンポーネント。

これらが初めて使用される際に、@nuxt/image が自動的にインストールされるようになりました (#23717)。

📂 レイアウトスキャンの深化

~/components と同様に、~/layouts 内のサブフォルダ内のレイアウトのスキャンをサポートするようになりました。

📊 アプリマニフェスト

組み込みのアプリマニフェストをサポートするようになりました（PR #21641を参照）。これは /_nuxt/builds/meta/<buildId>.json にマニフェストを生成します。

これにより、サイトが nuxt generate で生成された場合、**プリレンダリングされたルートのみ**にペイロードをロードできるようになり、コンソールでの 404 エラーを回避できます。

また、**クライアントサイドのルートルール**も有効になります。現在サポートされているのは redirect ルートルールのみです。これらは、クライアントサイドのナビゲーションを実行する際にリダイレクトするようになります。

export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})

🤝 スコープとコンテキストの改善

プラグインで実行される Nuxt コンポーザブルの 'スコープ' を定義するようになりました(#23667)。これにより、Vue onScopeDispose ライフサイクルメソッドを使用して、サイトから移動する前に同期的なクリーンアップを実行できます。

また、Vue Composition API 用に、**ネイティブな非同期コンテキスト**をサポートするようになりました (#23526)。ご存じない方のために説明すると、Node と Bun でネイティブの非同期コンテキストをサポートしており、experimental.asyncContext で有効にできます。

Nuxt instance unavailable に関する問題が発生した場合は、このオプションを有効にすると問題が解決する可能性があります。

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

🔗 NuxtLink のデフォルト

defineNuxtLink ユーティリティを使用して、独自の <NuxtLink> コンポーネントを定義できます。

現在、nuxt.config ファイルで直接、組み込みの <NuxtLink> のオプションをカスタマイズできます(#23724)。

たとえば、これにより、サイト全体で末尾のスラッシュの動作を強制できます。

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

⚡️ データフェッチの改善

useAsyncData と useFetch に関して、非常に重要な 2 つの新機能があります。

1. deep: false を設定して、これらのコンポーザブルから返される data オブジェクトの深いリアクティビティを防ぐことができるようになりました(#23600)。大規模な配列またはオブジェクトを返している場合は、パフォーマンスが向上するはずです。オブジェクトは再フェッチ時に更新されますが、data 内の深いプロパティを変更してもリアクティブエフェクトはトリガーされません。
2. getCachedData オプションを使用して、これらのコンポーザブルのカスタムキャッシュを処理できるようになりました(#20747)。

<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
  // this will not refetch if the key exists in the payload
  getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>

また、アプリ全体の方法でこれらのコンポーザブルの一部のデフォルト値を設定することもサポートしています(#23725)。

export default defineNuxtConfig({
  experimental: {
    defaults: {
      useAsyncData: {
        deep: false
      },
      useFetch: {
        retry: false,
        retryDelay: 100,
        retryStatusCodes: [500],
        timeout: 100
      }
    }
  }
})

🔢 レイヤーの改善

レイヤーの順序でより慎重にレイヤープラグイン(#22889 および #23148)とミドルウェア(#22925 および #23552)をロードするようになりました。常に独自のプラグインとミドルウェアが最後にロードされます。これは、レイヤーが挿入するユーティリティに依存できることを意味します。

そして、おそらく最も重要な変更の 1 つは、リモートレイヤーを使用している場合、これらのレイヤーを node_modules/ フォルダ内にクローンするようになったことです(#109)。これにより、レイヤーはプロジェクトの依存関係を使用できます。詳細については、c12 のリリースノートを参照してください。

😴 ナイトリーリリースチャネル

Nuxt の main ブランチへのすべてのコミットは、リリース前のテストを容易にするために、新しいリリースに自動的にデプロイされます。混乱を避けるために、これを「エッジリリースチャネル」から「ナイトリーリリースチャネル」に名前を変更しました。そしておそらく、Microsoft Edge とも (ただし、それで混乱したという人は聞いたことがありません!)。

• nuxt3 は nuxt-nightly になりました。
• nuxi-edge は nuxi-nightly になりました。
• @​nuxt/kit-edge は @​nuxt/kit-nightly になりました。
• ...など。

⚗️ Nitro v2.7

Nitro v2.7 がリリースされました。多くの改善とバグ修正が含まれています。

💪 型インポートの変更

Vue では、型インポートが明示的である必要があります（Vue コンパイラーが、props などの型インポートを正しく最適化および解決できるようにするため）。コア Vue の tsconfig.json を参照してください。

そのため、Nuxt プロジェクトでは verbatimModuleSyntax をデフォルトでオンにすることにしました。これにより、明示的な type インポートなしで型がインポートされると、型エラーがスローされます。これを解決するには、インポートを更新する必要があります。

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

また、Nuxt エコシステム内のモジュールで更新が必要なものも発生する可能性があります。それらのモジュールについては、問題をオープンしてください。モジュール作成者の方で、これに関して問題が発生した場合は、喜んでお手伝いします。私をタグ付けしていただければ、確認します。

何らかの理由で、プロジェクトでこの変更を元に戻す必要がある場合は、次の構成を設定できます。

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

ただし、Vue では最適な結果を得るためにこのオプションを設定する必要があるため、一時的にのみ行うことをお勧めします。

✅ アップグレード

通常どおり、アップグレードの推奨事項は以下を実行することです。

npx nuxi upgrade

完全なリリースノート

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

ハッピー Nuxting ✨