実験的機能
Nuxtの実験的機能は、Nuxt設定ファイルで有効にできます。
内部的には、Nuxtはこれらの実験的機能を定義するために@nuxt/schemaを使用しています。APIドキュメントまたはソースコードを参照して、詳細情報をご覧ください。
asyncContext
ネストされたコンポーザブル内、Nuxt内、Nitro内でネイティブ非同期コンテキストにアクセスできるようにします。これにより、非同期コンポーザブル内でコンポーザブルを使用し、Nuxtインスタンスは使用できませんエラーが発生する可能性を減らすことができます。
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
asyncEntry
Vueバンドルの非同期エントリポイントの生成を有効にし、モジュールフェデレーションのサポートを支援します。
export default defineNuxtConfig({
experimental: {
asyncEntry: true
}
})
externalVue
ビルド時にvue、@vue/*、vue-routerを外部化します。
デフォルトで有効になっています。
export default defineNuxtConfig({
experimental: {
externalVue: true
}
})
treeshakeClientOnly
クライアント専用コンポーネントの内容をサーバーバンドルからツリーシェイクします。
デフォルトで有効になっています。
export default defineNuxtConfig({
experimental: {
treeshakeClientOnly: true
}
})
emitRouteChunkError
vite/webpackチャンクの読み込みエラーが発生した場合、app:chunkErrorフックを発行します。デフォルトの動作は、チャンクの読み込みに失敗した場合、新しいルートへのナビゲーション時に新しいルートをリロードすることです。
これを'automatic-immediate'に設定すると、Nuxtはナビゲーションを待たずに現在のルートをすぐにリロードします。これは、ナビゲーションによってトリガーされないチャンクエラー（例：Nuxtアプリが遅延読み込みコンポーネントを読み込めなかった場合）に役立ちます。この動作の潜在的な欠点は、不要なリロード（例：アプリがエラーの原因となったチャンクを必要としない場合）です。
これをfalseに設定して自動処理を無効にしたり、manualに設定してチャンクエラーを手動で処理したりできます。
export default defineNuxtConfig({
experimental: {
emitRouteChunkError: 'automatic' // or 'automatic-immediate', 'manual' or false
}
})
restoreState
チャンクエラーまたは手動によるreloadNuxtApp()呼び出し後のページのリロード時に、sessionStorageからNuxtアプリの状態を復元できるようにします。
ハイドレーションエラーを回避するために、Vueアプリがマウントされた後でのみ適用されるため、初回読み込み時にちらつきが発生する可能性があります。
useStateに明示的なキーを提供することを検討してください。export default defineNuxtConfig({
experimental: {
restoreState: true
}
})
inlineRouteRules
defineRouteRulesを使用して、ページレベルでルートルールを定義します。
export default defineNuxtConfig({
experimental: {
inlineRouteRules: true
}
})
ページのpathに基づいて、一致するルートルールが作成されます。
renderJsonPayloads
複雑な型の再構築をサポートするJSONペイロードのレンダリングを許可します。
デフォルトで有効になっています。
export default defineNuxtConfig({
experimental: {
renderJsonPayloads: true
}
})
noVueServer
Nitro内のVueサーバーレンダラエンドポイントを無効にします。
export default defineNuxtConfig({
experimental: {
noVueServer: true
}
})
payloadExtraction
nuxt generateで生成されたページのペイロードの抽出を有効にします。
export default defineNuxtConfig({
experimental: {
payloadExtraction: true
}
})
clientFallback
SSRにエラーがある場合にクライアントでコンテンツをレンダリングするための実験的な<NuxtClientFallback>コンポーネントを有効にします。
export default defineNuxtConfig({
experimental: {
clientFallback: true
}
})
crossOriginPrefetch
Speculation Rules APIを使用したクロスオリジンプリフェッチを有効にします。
export default defineNuxtConfig({
experimental: {
crossOriginPrefetch: true
}
})
viewTransition
クライアントサイドルーターとのView Transition API統合を有効にします。
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
writeEarlyHints
ノードサーバーを使用する際にアーリーヒントの書き込みを有効にします。
export default defineNuxtConfig({
experimental: {
writeEarlyHints: true
}
})
componentIslands
<NuxtIsland>と.island.vueファイルによる実験的なコンポーネントアイランドサポートを有効にします。
export default defineNuxtConfig({
experimental: {
componentIslands: true // false or 'local+remote'
}
})
configSchema
設定スキーマのサポートを有効にします。
デフォルトで有効になっています。
export default defineNuxtConfig({
experimental: {
configSchema: true
}
})
polyfillVueUseHead
古い@vueuse/head APIに依存するモジュール、プラグイン、またはユーザーコードのための互換性レイヤーを追加します。
export default defineNuxtConfig({
experimental: {
polyfillVueUseHead: false
}
})
respectNoSSRHeader
x-nuxt-no-ssrヘッダーを設定することで、Nuxt SSRレスポンスを無効にできるようにします。
export default defineNuxtConfig({
experimental: {
respectNoSSRHeader: false
}
})
localLayerAliases
レイヤー内の~、~~、@、@@エイリアスを、そのレイヤソースとルートディレクトリを考慮して解決します。
デフォルトで有効になっています。
export default defineNuxtConfig({
experimental: {
localLayerAliases: true
}
})
typedPages
unplugin-vue-routerを使用して、新しい実験的な型付きルーターを有効にします。
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
すぐに、navigateTo、<NuxtLink>、router.push()などを型付きで使用できます。
const route = useRoute('route-name')を使用することで、ページ内で型付きパラメーターを取得することもできます。
watcher
Nuxtの監視サービスとして使用される代替ウォッチャーを設定します。
Nuxtはデフォルトでchokidar-granularを使用しており、監視から除外されている最上位ディレクトリ（node_modulesや.gitなど）を無視します。
代わりにparcelに設定して@parcel/watcherを使用することもできます。これは、大規模なプロジェクトやWindowsプラットフォームでのパフォーマンスを向上させる可能性があります。
ソースディレクトリのすべてのファイルを監視するようにchokidarに設定することもできます。
export default defineNuxtConfig({
experimental: {
watcher: 'chokidar-granular' // 'chokidar' or 'parcel' are also options
}
})
sharedPrerenderData
この機能を有効にすると、プリレンダリングされたページ間でペイロードのデータが自動的に共有されます。useAsyncDataまたはuseFetchを使用して、異なるページで同じデータを取得するサイトをプリレンダリングする場合、パフォーマンスが大幅に向上する可能性があります。
export default defineNuxtConfig({
experimental: {
sharedPrerenderData: true
}
})
この機能を有効にする場合は、データの一意のキーが常に同じデータに解決されるようにすることが特に重要です。たとえば、特定のページに関連するデータを取得するためにuseAsyncDataを使用している場合、そのデータに一意に一致するキーを指定する必要があります。（useFetchはこれを自動的に行ってくれます。）
// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
const route = useRoute()
const { data } = await useAsyncData(async () => {
return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Instead, you should use a key that uniquely identifies the data fetched.
const { data } = await useAsyncData(route.params.slug, async () => {
return await $fetch(`/api/my-page/${route.params.slug}`)
})
clientNodeCompat
この機能により、Nuxtはunenvを使用して、クライアントビルドでNode.jsのインポートを自動的にポリフィルします。
Bufferのようなグローバル変数をブラウザで動作させるには、手動でインジェクトする必要があります。import { Buffer } from 'node:buffer'
globalThis.Buffer = globalThis.Buffer || Buffer
scanPageMeta
このオプションを使用すると、ビルド時にdefinePageMetaで定義された一部のルートメタデータ（具体的にはalias、name、path、redirect）をモジュールに公開できます。
これは、変数や条件付き代入ではなく、静的または文字列/配列でのみ機能します。詳細とコンテキストについては、元のissueを参照してください。
pages:extendですべてのルートが登録された後に、ページメタデータをスキャンすることも可能です。その後、別のフックであるpages:resolvedが呼び出されます。この動作を有効にするには、scanPageMeta: 'after-resolve'を設定します。
この機能がプロジェクトで問題を引き起こす場合は、無効にすることができます。
export default defineNuxtConfig({
experimental: {
scanPageMeta: false
}
})
cookieStore
CookieStoreのサポートを有効にして、Cookieの更新をリッスンし（ブラウザでサポートされている場合）、useCookieの参照値を更新します。
export default defineNuxtConfig({
experimental: {
cookieStore: true
}
})
buildCache
構成とソースファイルのハッシュに基づいて、Nuxtビルドアーティファクトをキャッシュします。
export default defineNuxtConfig({
experimental: {
buildCache: true
}
})
有効にすると、次のファイルの変更によって完全な再ビルドがトリガーされます。
.nuxtrc
.npmrc
package.json
package-lock.json
yarn.lock
pnpm-lock.yaml
tsconfig.json
bun.lockb
さらに、srcDir内のファイルの変更によって、Vueクライアント/サーバーバンドルの再ビルドがトリガーされます。Nitroは常に再ビルドされます（ただし、Nitroがキャッシュ可能なアーティファクトとそのハッシュを発表できるようにする作業が進められています）。
normalizeComponentNames
自動生成されたVueコンポーネント名が、コンポーネントの自動インポートに使用する完全なコンポーネント名と一致するようにします。
export default defineNuxtConfig({
experimental: {
normalizeComponentNames: true
}
})
デフォルトでは、手動で設定していない場合、Vueはコンポーネントのファイル名と一致するコンポーネント名を割り当てます。
├─ components/
├─── SomeFolder/
├───── MyComponent.vue
この場合、Vueに関してコンポーネント名はMyComponentになります。<KeepAlive>で使用する場合、またはVue DevToolsで識別する場合は、このコンポーネントを使用する必要があります。
しかし、自動インポートするには、SomeFolderMyComponentを使用する必要があります。
experimental.normalizeComponentNamesを設定することにより、これらの2つの値が一致し、Vueはコンポーネントの命名に関するNuxtのパターンと一致するコンポーネント名を生成します。