特性

启用或禁用可选的 Nuxt 特性以解锁新可能性。

一些 Nuxt 的特性是基于自愿选择的,或者可以根据您的需求禁用。

features

inlineStyles

在渲染 HTML 时内联样式。当前仅在使用 Vite 时可用。

您还可以传递一个接收 Vue 组件路径并返回布尔值的函数,以指示是否对该组件的样式进行内联。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: false // 或一个函数来决定内联
  }
})

noScripts

禁用渲染 Nuxt 脚本和 JS 资源提示。也可以在 routeRules 中进行细粒度配置。

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

future

还有一个 future 命名空间,用于提前选择未来(可能是主版本)版本中将成为默认的新特性。

compatibilityVersion

此配置选项在 Nuxt v3.12+ 中可用。请注意,目前您需要在每个选择 Nuxt 4 行为的层中定义兼容性版本。在 Nuxt 4 发布后,这将不再需要。

这使您可以提前访问 Nuxt 特性或标志。

compatibilityVersion 设置为 4 会更改 Nuxt 配置中的默认值,以选择 Nuxt v4 行为,但在测试时您可以细粒度地重新启用 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 拉取请求

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