功能
啟用或停用可選的 Nuxt 功能以解鎖新的可能性。
Nuxt 的某些功能是以選擇加入的方式提供,或是可以根據您的需求停用。
功能
inlineStyles
在渲染 HTML 時內聯樣式。目前僅在使用 Vite 時可用。
您也可以傳遞一個函數,該函數接收 Vue 元件的路徑,並返回一個布林值,指示是否要內聯該元件的樣式。
nuxt.config.ts
export default defineNuxtConfig({
features: {
inlineStyles: false // 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 4 行為的 layer 中定義相容性版本。在 Nuxt 4 發佈後,這將不再是必要的。
這使您可以提前存取 Nuxt 功能或標誌。
將 compatibilityVersion
設定為 4
會在整個 Nuxt 配置中更改預設值,以選擇加入 Nuxt v4 行為,但您可以在測試時精細地重新啟用 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
}
}
},
features: {
inlineStyles: true
},
unhead: {
renderSSRHeadOptions: {
omitLineBreaks: false
}
}
})
typescriptBundlerResolution
這會為 TypeScript 啟用「Bundler」模組解析模式,這是 Nuxt 和 Vite 等框架的建議設定。
它在使用具有 exports
的現代程式庫時,可改善類型支援。
請參閱 原始 TypeScript pull request。
nuxt.config.ts
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: true
}
})