透過 100 多個技巧的集合學習 Nuxt!

功能

啟用或停用可選的 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
  }
})