nuxt logo

Tradução da Documentação (Não Oficial)

Recursos

Habilite ou desabilite recursos opcionais do Nuxt para desbloquear novas possibilidades.

Alguns recursos do Nuxt estão disponíveis de forma opcional ou podem ser desativados conforme suas necessidades.

features

inlineStyles

Incorpora estilos ao renderizar HTML. Isso está atualmente disponível apenas ao usar Vite.

Você também pode passar uma função que recebe o caminho de um componente Vue e retorna um booleano indicando se deve incorporar os estilos para esse componente.

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: false // ou uma função para determinar a incorporação
  }
})

noScripts

Desativa a renderização de scripts do Nuxt e dicas de recursos JS. Também pode ser configurado de forma granular dentro de routeRules.

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

future

Há também um namespace future para optar antecipadamente por novos recursos que se tornarão padrão em uma futura (possivelmente principal) versão do framework.

compatibilityVersion

Esta opção de configuração está disponível no Nuxt v3.12+. Por favor, note que, por enquanto, você precisa definir a versão de compatibilidade em cada camada que opta pelo comportamento do Nuxt 4. Isso não será necessário após o lançamento do Nuxt 4.

Isso permite acesso antecipado a recursos ou flags do Nuxt.

Definir compatibilityVersion para 4 altera os padrões em toda a sua configuração do Nuxt para optar pelo comportamento do Nuxt v4, mas você pode reativar granularmente o comportamento do Nuxt v3 ao testar (veja o exemplo). Por favor, registre problemas se for o caso, para que possamos abordá-los no Nuxt ou no ecossistema.

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // Para reativar _todo_ o comportamento do Nuxt v3, defina as seguintes opções:
  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

Isso habilita o modo de resolução de módulo 'Bundler' para TypeScript, que é a configuração recomendada para frameworks como Nuxt e Vite.

Isso melhora o suporte a tipos ao usar bibliotecas modernas com exports.

Veja o pull request original do TypeScript.

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