機能
新しい可能性を開くために、Nuxtのオプション機能を有効または無効にします。
Nuxtの一部の機能は、オプトイン方式で利用可能、または必要に応じて無効にできます。
機能
inlineStyles
HTMLレンダリング時にスタイルをインライン化します。これは現在、Viteを使用する場合のみ利用可能です。
Vueコンポーネントのパスを受け取り、そのコンポーネントのスタイルをインライン化するかどうかを示すブール値を返す関数も渡すことができます。
nuxt.config.ts
export default defineNuxtConfig({
features: {
inlineStyles: true // or a function to determine inlining
}
})
noScripts
NuxtスクリプトとJSリソースヒントのレンダリングを無効にします。routeRules
内で詳細に設定することもできます。
nuxt.config.ts
export default defineNuxtConfig({
features: {
noScripts: true
}
})
future
将来(メジャーバージョンアップの可能性あり)のフレームワークバージョンでデフォルトになる新しい機能を早期にオプトインするためのfuture
名前空間もあります。
compatibilityVersion
この設定オプションは、Nuxt v3.12以降で使用できます。
これにより、Nuxtの機能またはフラグへの早期アクセスが可能になります。
compatibilityVersion
を4
に設定すると、Nuxt v4の動作をオプトインするようにNuxt設定全体でデフォルトが変更されますが、テスト時にNuxt v3の動作を詳細に再度有効にすることができます(例を参照)。その場合は、問題を報告して、Nuxtまたはエコシステムで対処できるようにしてください。
export default defineNuxtConfig({
future: {
compatibilityVersion: 4,
},
// To re-enable _all_ Nuxt v3 behaviour, set the following options:
srcDir: '.',
dir: {
app: 'app'
},
experimental: {
scanPageMeta: 'after-resolve',
sharedPrerenderData: false,
compileTemplate: true,
resetAsyncDataToUndefined: true,
templateUtils: true,
relativeWatchPaths: true,
normalizeComponentNames: false
defaults: {
useAsyncData: {
deep: true
}
}
},
unhead: {
renderSSRHeadOptions: {
omitLineBreaks: false
}
}
})
typescriptBundlerResolution
これにより、TypeScriptの「バンドラー」モジュール解決モードが有効になります。これは、NuxtやViteなどのフレームワークでは推奨される設定です。
exports
を使用する最新のライブラリを使用する場合、型サポートが向上します。
nuxt.config.ts
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: true
}
})