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' }
  }
})

<template>
  <div>
    <!-- Will be redirected to /about-us on client-side -->
    <NuxtLink to="/about">About</NuxtLink>
  </div>
</template>

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

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

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

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

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

🔗 NuxtLinkのデフォルト設定

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

現在、組み込みの <NuxtLink> のオプションを、nuxt.config.ts ファイルで直接カスタマイズできます (詳細は#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
      }
    }
  }
})

🔢 レイヤーの改善

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

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

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

Nuxtの main ブランチへのコミットはすべて、リリース前のテストを容易にするために、新しいリリースとして自動的にデプロイされます。これを「edge release channel」から「nightly release channel」に名称変更し、edge deploymentsとの混同を避けるようにしました。そしておそらくMicrosoft Edgeとも (ただし、それで誰かが混乱したという話は聞いていません！)

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

⚗️ Nitro v2.7

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

💪 型インポートの変更

Vueは、型インポートが明示的であることを要求します (これにより、Vueコンパイラはプロパティなどの型インポートを正しく最適化および解決できます)。詳細はコアVueの tsconfig.json.

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

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

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

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

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

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

✅ アップグレード

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

npx nuxi upgrade

完全なリリースノート

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

ハッピーNuxting ✨