機能
新しい可能性を開くために、Nuxtのオプション機能を有効または無効にします。
Nuxtのいくつかの機能は、オプトインベースで利用可能であり、必要に応じて無効にすることもできます。
features
inlineStyles
HTMLをレンダリングする際にスタイルをインライン化します。これは現在、Viteを使用している場合にのみ利用可能です。
Vueコンポーネントのパスを受け取り、そのコンポーネントのスタイルをインライン化するかどうかを示すブール値を返す関数を渡すこともできます。
export default defineNuxtConfig({
features: {
inlineStyles: false // またはインライン化を決定する関数
}
})
noScripts
NuxtスクリプトとJSリソースヒントのレンダリングを無効にします。routeRules
内で細かく設定することもできます。
export default defineNuxtConfig({
features: {
noScripts: true
}
})
future
将来の(おそらくメジャーな)バージョンでデフォルトになる新機能を早期にオプトインするためのfuture
名前空間もあります。
compatibilityVersion
この設定オプションはNuxt v3.12+で利用可能です。現在のところ、Nuxt 4の動作にオプトインする各レイヤーで互換性バージョンを定義する必要があります。Nuxt 4がリリースされた後は必要ありません。
これにより、Nuxtの機能やフラグへの早期アクセスが可能になります。
compatibilityVersion
を4
に設定すると、Nuxt v4の動作にオプトインするためにNuxt設定全体のデフォルトが変更されますが、テスト時にNuxt v3の動作を細かく再有効化することができます(例を参照)。その場合は問題を報告してください。Nuxtまたはエコシステムで対処します。
export default defineNuxtConfig({
future: {
compatibilityVersion: 4,
},
// _すべての_ Nuxt v3の動作を再有効化するには、次のオプションを設定します:
srcDir: '.',
dir: {
app: 'app'
},
experimental: {
scanPageMeta: 'after-resolve',
sharedPrerenderData: false,
compileTemplate: true,
resetAsyncDataToUndefined: true,
templateUtils: true,
relativeWatchPaths: true,
normalizeComponentNames: false
defaults: {
useAsyncData: {
deep: true
}
}
},
features: {
inlineStyles: true
},
unhead: {
renderSSRHeadOptions: {
omitLineBreaks: false
}
}
})
typescriptBundlerResolution
これは、TypeScriptの'Bundler'モジュール解決モードを有効にします。これは、NuxtやViteのようなフレームワークに推奨される設定です。
exports
を使用する現代的なライブラリを使用する際の型サポートを向上させます。
オリジナルのTypeScriptプルリクエストを参照してください。
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: true
}
})
※このページは Nuxt.js 公式ドキュメントの翻訳ページ(非公式)です。
公式ドキュメントの該当ページはこちら:
https://nuxt.com/docs/3.x/guide/going-further/features