Изучите Nuxt с коллекцией из 100+ советов!

Возможности

Включайте или отключайте дополнительные функции Nuxt, чтобы открыть новые возможности.

Некоторые функции Nuxt доступны по желанию или могут быть отключены в зависимости от ваших потребностей.

features

inlineStyles

Инлайнит стили при рендеринге HTML. В настоящее время это доступно только при использовании Vite.

Вы также можете передать функцию, которая получает путь к компоненту Vue и возвращает булево значение, указывающее, нужно ли инлайнить стили для этого компонента.

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: true // или функцию для определения необходимости инлайна стилей
  }
})

noScripts

Отключает рендеринг скриптов Nuxt и подсказок JS-ресурсов. Также может быть детально настроен в routeRules.

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

future

Также существует пространство имен future для раннего выбора новых возможностей, которые станут стандартными в будущей (возможно, основной) версии фреймворка.

compatibilityVersion

Эта опция конфигурации доступна в Nuxt v3.12+.

Это позволяет получить ранний доступ к функциям или флагам Nuxt.

Установка compatibilityVersion в 4 изменяет настройки по умолчанию во всей вашей конфигурации Nuxt, чтобы включить поведение Nuxt v4, но вы можете выборочно повторно включить поведение Nuxt v3 при тестировании (см. пример). Пожалуйста, пишите о проблемах, если они есть, чтобы мы могли решить их в Nuxt или экосистеме.

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // Чтобы снова включить все поведение Nuxt v3, установите следующие параметры:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    sharedPrerenderData: false,
    compileTemplate: true,
    resetAsyncDataToUndefined: true,
    templateUtils: true,
    relativeWatchPaths: true,
    normalizeComponentNames: false
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

typescriptBundlerResolution

Это включает режим разрешения модулей Bundler для TypeScript, что является рекомендуемой настройкой для таких фреймворков, как Nuxt и Vite.

Это улучшает поддержку типов при использовании современных библиотек с exports.

См. оригинальный TypeScript pull request.

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