O Nuxt é altamente flexível quando se trata de estilização. Escreva seus próprios estilos ou faça referência a folhas de estilo locais e externas. Você pode usar pré-processadores CSS, frameworks CSS, bibliotecas de UI e módulos Nuxt para estilizar sua aplicação.

Folhas de Estilo Locais

Se você estiver escrevendo folhas de estilo locais, o lugar natural para colocá-las é no diretório assets/.

Importando Dentro de Componentes

Você pode importar folhas de estilo diretamente em suas páginas, layouts e componentes. Você pode usar uma importação JavaScript ou uma declaração CSS @import.

<script>
// Use uma importação estática para compatibilidade com o lado do servidor
import '~/assets/css/first.css'

// Atenção: Importações dinâmicas não são compatíveis com o lado do servidor
import('~/assets/css/first.css')
</script>

<style>
@import url("~/assets/css/second.css");
</style>

A Propriedade CSS

Você também pode usar a propriedade css na configuração do Nuxt. O lugar natural para suas folhas de estilo é o diretório assets/. Você pode então referenciar seu caminho e o Nuxt irá incluí-lo em todas as páginas da sua aplicação.

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

Trabalhando com Fontes

Coloque seus arquivos de fontes locais no diretório ~/public/, por exemplo, em ~/public/fonts. Você pode então referenciá-los em suas folhas de estilo usando url().

@font-face {
  font-family: 'FarAwayGalaxy';
  src: url('/fonts/FarAwayGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Em seguida, referencie suas fontes pelo nome em suas folhas de estilo, páginas ou componentes:

<style>
h1 {
  font-family: 'FarAwayGalaxy', sans-serif;
}
</style>

Folhas de Estilo Distribuídas pelo NPM

Você também pode referenciar folhas de estilo que são distribuídas pelo npm. Vamos usar a popular biblioteca animate.css como exemplo.

npm install animate.css

Então você pode referenciá-la diretamente em suas páginas, layouts e componentes:

<script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>

O pacote também pode ser referenciado como uma string na propriedade css da sua configuração Nuxt.

export default defineNuxtConfig({
  css: ['animate.css']
})

Folhas de Estilo Externas

Você pode incluir folhas de estilo externas em sua aplicação adicionando um elemento link na seção head do seu arquivo nuxt.config. Você pode alcançar esse resultado usando diferentes métodos. Note que folhas de estilo locais também podem ser incluídas dessa forma.

Você pode manipular o head com a propriedade app.head da sua configuração Nuxt:

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
    }
  }
})

Adicionando Folhas de Estilo Dinamicamente

Você pode usar o composable useHead para definir dinamicamente um valor no seu head no seu código.

useHead({
  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})

O Nuxt usa unhead nos bastidores, e você pode se referir à documentação completa.

Modificando o Head Renderizado com um Plugin Nitro

Se você precisar de controle mais avançado, pode interceptar o HTML renderizado com um hook e modificar o head programaticamente.

Crie um plugin em ~/server/plugins/my-plugin.ts assim:

export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook('render:html', (html) => {
    html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
  })
})

Folhas de estilo externas são recursos que bloqueiam a renderização: elas devem ser carregadas e processadas antes que o navegador renderize a página. Páginas da web que contêm estilos desnecessariamente grandes demoram mais para renderizar. Você pode ler mais sobre isso em web.dev.

Usando Pré-processadores

Para usar um pré-processador como SCSS, Sass, Less ou Stylus, instale-o primeiro.

npm install -D sass

O lugar natural para escrever suas folhas de estilo é o diretório assets. Você pode então importar seus arquivos de origem no seu app.vue (ou arquivos de layouts) usando a sintaxe do seu pré-processador.

<style lang="scss">
@use "~/assets/scss/main.scss";
</style>

Alternativamente, você pode usar a propriedade css da sua configuração Nuxt.

export default defineNuxtConfig({
  css: ['~/assets/scss/main.scss']
})

Se você precisar injetar código em arquivos pré-processados, como um Sass partial com variáveis de cor, você pode fazer isso com as opções de pré-processadores do Vite.

Crie alguns partials no seu diretório assets:

$primary: #49240F;
$secondary: #E4A79D;

Então no seu nuxt.config:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

O Nuxt usa o Vite por padrão. Se você deseja usar o webpack em vez disso, consulte a documentação de cada loader de pré-processador aqui.

Trabalhadores de Pré-processadores (Experimental)

O Vite disponibilizou uma opção experimental que pode acelerar o uso de pré-processadores.

Você pode habilitar isso no seu nuxt.config:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorMaxWorkers: true // número de CPUs menos 1
    }
  }
})

Estilização de Componentes de Arquivo Único (SFC)

Uma das melhores coisas sobre o Vue e SFC é como ele lida naturalmente com a estilização. Você pode escrever diretamente código CSS ou de pré-processador no bloco de estilo do arquivo do seu componente, portanto, você terá uma experiência de desenvolvedor fantástica sem precisar usar algo como CSS-in-JS. No entanto, se você desejar usar CSS-in-JS, pode encontrar bibliotecas e módulos de terceiros que o suportam, como pinceau.

Você pode consultar a documentação do Vue para uma referência abrangente sobre estilização de componentes em SFC.

Vinculações de Classe e Estilo

Você pode aproveitar os recursos do Vue SFC para estilizar seus componentes com atributos de classe e estilo.

<script setup lang="ts">
const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>
</template>

Consulte a documentação do Vue para mais informações.

Estilos Dinâmicos com v-bind

Você pode referenciar variáveis e expressões JavaScript dentro de seus blocos de estilo com a função v-bind. A vinculação será dinâmica, o que significa que se o valor da variável mudar, o estilo será atualizado.

<script setup lang="ts">
const color = ref("red")
</script>

<template>
  <div class="text">hello</div>
</template>

<style>
.text {
  color: v-bind(color);
}
</style>

Estilos Escopados

O atributo scoped permite que você estilize componentes de forma isolada. Os estilos declarados com este atributo só se aplicarão a este componente.

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

Módulos CSS

Você pode usar Módulos CSS com o atributo module. Acesse-o com a variável $style injetada.

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

Suporte a Pré-processadores

Os blocos de estilo SFC suportam a sintaxe de pré-processadores. O Vite vem com suporte embutido para arquivos .scss, .sass, .less, .styl e .stylus sem configuração. Você só precisa instalá-los primeiro, e eles estarão disponíveis diretamente no SFC com o atributo lang.

<style lang="scss">
  /* Escreva scss aqui */
</style>

Você pode consultar a documentação CSS do Vite e a documentação do @vitejs/plugin-vue. Para usuários de webpack, consulte a documentação do vue loader.

Usando PostCSS

O Nuxt vem com postcss embutido. Você pode configurá-lo no seu arquivo nuxt.config.

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {},
      'postcss-custom-media': {}
    }
  }
})

Para um destaque de sintaxe adequado no SFC, você pode usar o atributo lang postcss.

<style lang="postcss">
  /* Escreva postcss aqui */
</style>

Por padrão, o Nuxt vem com os seguintes plugins já pré-configurados:

• postcss-import: Melhora a regra @import
• postcss-url: Transforma declarações url()
• autoprefixer: Adiciona automaticamente prefixos de fornecedores
• cssnano: Minificação e purga

Aproveitando Layouts para Múltiplos Estilos

Se você precisar estilizar diferentes partes da sua aplicação de forma completamente diferente, pode usar layouts. Use estilos diferentes para diferentes layouts.

<template>
  <div class="default-layout">
    <h1>Layout Padrão</h1>
    <slot />
  </div>
</template>

<style>
.default-layout {
  color: red;
}
</style>

Bibliotecas e Módulos de Terceiros

O Nuxt não é opinativo quando se trata de estilização e oferece uma ampla variedade de opções. Você pode usar qualquer ferramenta de estilização que desejar, como bibliotecas populares como UnoCSS ou Tailwind CSS.

A comunidade e a equipe do Nuxt desenvolveram muitos módulos Nuxt para facilitar a integração. Você pode descobri-los na seção de módulos do site. Aqui estão alguns módulos para ajudá-lo a começar:

• UnoCSS: Motor CSS atômico sob demanda instantâneo
• Tailwind CSS: Framework CSS orientado por utilitários
• Fontaine: Fallback de métricas de fontes
• Pinceau: Framework de estilização adaptável
• Nuxt UI: Uma Biblioteca de UI para Aplicações Web Modernas
• Panda CSS: Motor CSS-in-JS que gera CSS atômico no tempo de build

Os módulos Nuxt oferecem uma boa experiência de desenvolvedor desde o início, mas lembre-se de que se sua ferramenta favorita não tiver um módulo, isso não significa que você não pode usá-la com o Nuxt! Você pode configurá-la você mesmo para seu próprio projeto. Dependendo da ferramenta, você pode precisar usar um plugin Nuxt e/ou criar seu próprio módulo. Compartilhe-os com a comunidade se o fizer!

Carregar Webfonts Facilmente

Você pode usar o módulo Nuxt Google Fonts para carregar Google Fonts.

Se você estiver usando UnoCSS, observe que ele vem com um presets de fontes web para carregar convenientemente fontes de provedores comuns, incluindo Google Fonts e mais.

Avançado

Transições

O Nuxt vem com o mesmo elemento <Transition> que o Vue tem, e também tem suporte para a experimental API de Transições de Visualização.

Otimização Avançada de Fontes

Recomendamos usar Fontaine para reduzir seu CLS. Se você precisar de algo mais avançado, considere criar um módulo Nuxt para estender o processo de build ou o runtime do Nuxt.

Otimizações Avançadas de LCP

Você pode fazer o seguinte para acelerar o download de seus arquivos CSS globais:

• Use um CDN para que os arquivos estejam fisicamente mais próximos de seus usuários
• Comprimir seus ativos, idealmente usando Brotli
• Use HTTP2/HTTP3 para entrega
• Hospede seus ativos no mesmo domínio (não use um subdomínio diferente)

A maioria dessas coisas deve ser feita automaticamente se você estiver usando plataformas modernas como Cloudflare, Netlify ou Vercel. Você pode encontrar um guia de otimização de LCP em web.dev.

Se todo o seu CSS for incorporado pelo Nuxt, você pode (experimentalmente) parar completamente de referenciar arquivos CSS externos no seu HTML renderizado. Você pode conseguir isso com um hook, que pode ser colocado em um módulo ou no seu arquivo de configuração Nuxt.

export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // encontre a entrada do app, lista de css
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        // comece do final do array e vá até o início
        for (let i = css.length - 1; i >= 0; i--) {
          // se começar com 'entry', remova da lista
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})