機能

オプションの Nuxt 機能を有効または無効にして、新たな可能性を解き放ちましょう。

Nuxt の一部の機能は、必要に応じてオプトインするか、無効にすることができます。

機能

devLogs

開発中にサーバーログをクライアントにストリームします。これらのログは、dev:ssr-logs フックで処理できます。

デフォルトでは、開発時（テストモードがアクティブでない場合）に有効になります。

silent に設定すると、ログはブラウザコンソールに出力されません。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    devLogs: true,
  },
})

inlineStyles

HTML をレンダリングする際にスタイルをインライン化します。これは現在 Vite を使用している場合にのみ利用できます。

Vue コンポーネントのパスを受け取り、そのコンポーネントのスタイルをインライン化するかどうかを示すブール値を返す関数を渡すこともできます。

デフォルトは (id) => id.includes('.vue') です。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: false, // or a function to determine inlining
  },
})

noScripts

Nuxt スクリプトと JavaScript リソースヒントのレンダリングをオフにします。routeRules 内で細かく設定することもできます。

routeRules 内でスクリプトをより細かく無効にすることもできます。

'production' または true に設定すると、JavaScript は本番モードでのみ無効になります。'all' に設定すると、JavaScript は開発モードと本番モードの両方で無効になります。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    noScripts: true, // or 'production' | 'all' | false
  },
})

future

また、将来の (おそらくメジャーな) フレームワークのバージョンでデフォルトになる新しい機能を早期にオプトインするための future 名前空間もあります。

compatibilityVersion

これにより、Nuxt の機能やフラグに早期にアクセスできます。

compatibilityVersion を 5 に設定すると、Nuxt v5 の動作にオプトインするために、Nuxt の設定全体でデフォルトが変更されます。

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 5,
  },
})

multiApp

これにより、実験的なマルチアプリサポートに早期にアクセスできます。トラッカーの問題 #21635で、Nuxt のマルチアプリサポートの進捗状況を確認できます。

nuxt.config.ts
export default defineNuxtConfig({
  future: {
    multiApp: true,
  },
})

typescriptBundlerResolution

これにより、TypeScript の「Bundler」モジュール解決モードが有効になります。これは Nuxt のようなフレームワークに推奨される設定であり、Vite.

exports を使用する最新のライブラリを使用する際のタイプサポートが向上します。

参照:オリジナルの TypeScript プルリクエスト.

false に設定すると、TypeScript のデフォルトであるレガシーな「Node」モードを使用できます。

nuxt.config.ts
export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false,
  },
})