Nuxt es altamente flexible cuando se trata de estilización. Escribe tus propios estilos o referencia hojas de estilo locales y externas. Puedes usar preprocesadores de CSS, frameworks de CSS, bibliotecas de UI y módulos de Nuxt para estilizar tu aplicación.

Hojas de Estilo Locales

Si estás escribiendo hojas de estilo locales, el lugar natural para colocarlas es el directorio assets/.

Importación Dentro de Componentes

Puedes importar hojas de estilo directamente en tus páginas, diseños y componentes. Puedes usar una importación de JavaScript o una declaración @import de CSS.

<script>
// Usa una importación estática para la compatibilidad del lado del servidor
import '~/assets/css/first.css'

// Precaución: Las importaciones dinámicas no son compatibles con el lado del servidor
import('~/assets/css/first.css')
</script>

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

La Propiedad CSS

También puedes usar la propiedad css en la configuración de Nuxt. El lugar natural para tus hojas de estilo es el directorio assets/. Luego puedes referenciar su ruta y Nuxt la incluirá en todas las páginas de tu aplicación.

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

Trabajando Con Fuentes

Coloca tus archivos de fuentes locales en tu directorio ~/public/, por ejemplo en ~/public/fonts. Luego puedes referenciarlas en tus hojas 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;
}

Luego referencia tus fuentes por nombre en tus hojas de estilo, páginas o componentes:

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

Hojas de Estilo Distribuidas a Través de NPM

También puedes referenciar hojas de estilo que se distribuyen a través de npm. Usemos la popular biblioteca animate.css como ejemplo.

npm install animate.css

Luego puedes referenciarla directamente en tus páginas, diseños y componentes:

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

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

El paquete también puede ser referenciado como una cadena en la propiedad css de tu configuración de Nuxt.

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

Hojas de Estilo Externas

Puedes incluir hojas de estilo externas en tu aplicación agregando un elemento de enlace en la sección head de tu archivo de configuración de nuxt. Puedes lograr este resultado usando diferentes métodos. Ten en cuenta que las hojas de estilo locales también pueden ser incluidas de esta manera.

Puedes manipular el head con la propiedad app.head de tu configuración de Nuxt:

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

Agregando Hojas de Estilo Dinámicamente

Puedes usar el composable useHead para establecer dinámicamente un valor en tu head en tu código.

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

Nuxt usa unhead bajo el capó, y puedes referirte a su documentación completa.

Modificando el Head Renderizado Con Un Plugin Nitro

Si necesitas un control más avanzado, puedes interceptar el HTML renderizado con un hook y modificar el head programáticamente.

Crea un plugin en ~/server/plugins/my-plugin.ts así:

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">')
  })
})

Las hojas de estilo externas son recursos que bloquean el renderizado: deben ser cargadas y procesadas antes de que el navegador renderice la página. Las páginas web que contienen estilos innecesariamente grandes tardan más en renderizarse. Puedes leer más sobre esto en web.dev.

Usando Preprocesadores

Para usar un preprocesador como SCSS, Sass, Less o Stylus, instálalo primero.

npm install -D sass

El lugar natural para escribir tus hojas de estilo es el directorio assets. Luego puedes importar tus archivos fuente en tu app.vue (o archivos de diseños) usando la sintaxis de tu preprocesador.

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

Alternativamente, puedes usar la propiedad css de tu configuración de Nuxt.

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

Si necesitas inyectar código en archivos preprocesados, como un parcial de Sass con variables de color, puedes hacerlo con las opciones de preprocesadores de Vite.

Crea algunos parciales en tu directorio assets:

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

Luego en tu nuxt.config:

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

Nuxt usa Vite por defecto. Si deseas usar webpack en su lugar, consulta la documentación de cada cargador de preprocesador.

Trabajadores de Preprocesadores (Experimental)

Vite ha puesto a disposición una opción experimental que puede acelerar el uso de preprocesadores.

Puedes habilitar esto en tu nuxt.config:

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

Estilización de Componentes de Archivo Único (SFC)

Una de las mejores cosas de Vue y SFC es lo bien que maneja naturalmente la estilización. Puedes escribir directamente código CSS o de preprocesador en el bloque de estilo de tu archivo de componentes, por lo tanto tendrás una experiencia de desarrollador fantástica sin tener que usar algo como CSS-in-JS. Sin embargo, si deseas usar CSS-in-JS, puedes encontrar bibliotecas y módulos de terceros que lo soportan, como pinceau.

Puedes referirte a la documentación de Vue para una referencia completa sobre la estilización de componentes en SFC.

Enlaces de Clase y Estilo

Puedes aprovechar las características de Vue SFC para estilizar tus componentes con atributos de clase y 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>

Consulta la documentación de Vue para obtener más información.

Estilos Dinámicos Con v-bind

Puedes referenciar variables y expresiones de JavaScript dentro de tus bloques de estilo con la función v-bind. La vinculación será dinámica, lo que significa que si el valor de la variable cambia, el estilo se actualizará.

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

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

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

Estilos Aislados

El atributo scoped te permite estilizar componentes en aislamiento. Los estilos declarados con este atributo solo se aplicarán a este componente.

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

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

Módulos CSS

Puedes usar Módulos CSS con el atributo module. Accede a él con la variable $style inyectada.

<template>
  <p :class="$style.red">Esto debería ser rojo</p>
</template>

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

Soporte de Preprocesadores

Los bloques de estilo SFC soportan la sintaxis de preprocesadores. Vite viene con soporte incorporado para archivos .scss, .sass, .less, .styl y .stylus sin configuración. Solo necesitas instalarlos primero, y estarán disponibles directamente en SFC con el atributo lang.

<style lang="scss">
  /* Escribe scss aquí */
</style>

Puedes referirte a la documentación de CSS de Vite y a la documentación de @vitejs/plugin-vue. Para usuarios de webpack, consulta la documentación del cargador de vue.

Usando PostCSS

Nuxt viene con postcss incorporado. Puedes configurarlo en tu archivo nuxt.config.

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

Para un resaltado de sintaxis adecuado en SFC, puedes usar el atributo lang de postcss.

<style lang="postcss">
  /* Escribe postcss aquí */
</style>

Por defecto, Nuxt viene con los siguientes plugins ya preconfigurados:

• postcss-import: Mejora la regla @import
• postcss-url: Transforma declaraciones url()
• autoprefixer: Agrega automáticamente prefijos de proveedor
• cssnano: Minificación y purga

Aprovechando Diseños Para Múltiples Estilos

Si necesitas estilizar diferentes partes de tu aplicación de manera completamente diferente, puedes usar diseños. Usa diferentes estilos para diferentes diseños.

<template>
  <div class="default-layout">
    <h1>Diseño Predeterminado</h1>
    <slot />
  </div>
</template>

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

Bibliotecas y Módulos de Terceros

Nuxt no tiene una opinión estricta cuando se trata de estilización y te proporciona una amplia variedad de opciones. Puedes usar cualquier herramienta de estilización que desees, como bibliotecas populares como UnoCSS o Tailwind CSS.

La comunidad y el equipo de Nuxt han desarrollado muchos módulos de Nuxt para facilitar la integración. Puedes descubrirlos en la sección de módulos del sitio web. Aquí hay algunos módulos para ayudarte a comenzar:

• UnoCSS: Motor de CSS atómico instantáneo bajo demanda
• Tailwind CSS: Framework de CSS orientado a utilidades
• Fontaine: Métrica de fuente de respaldo
• Pinceau: Framework de estilización adaptable
• Nuxt UI: Una biblioteca de UI para aplicaciones web modernas
• Panda CSS: Motor CSS-in-JS que genera CSS atómico en tiempo de compilación

Los módulos de Nuxt te proporcionan una buena experiencia de desarrollador desde el principio, pero recuerda que si tu herramienta favorita no tiene un módulo, ¡no significa que no puedas usarla con Nuxt! Puedes configurarla tú mismo para tu propio proyecto. Dependiendo de la herramienta, es posible que necesites usar un plugin de Nuxt y/o crear tu propio módulo. ¡Compártelos con la comunidad si lo haces!

Cargar Webfonts Fácilmente

Puedes usar el módulo de Google Fonts de Nuxt para cargar Google Fonts.

Si estás usando UnoCSS, ten en cuenta que viene con un preset de fuentes web para cargar convenientemente fuentes de proveedores comunes, incluidos Google Fonts y más.

Avanzado

Transiciones

Nuxt viene con el mismo elemento <Transition> que tiene Vue, y también tiene soporte para la experimental API de Transiciones de Vista.

Optimización Avanzada de Fuentes

Recomendamos usar Fontaine para reducir tu CLS. Si necesitas algo más avanzado, considera crear un módulo de Nuxt para extender el proceso de compilación o el tiempo de ejecución de Nuxt.

Optimización Avanzada de LCP

Puedes hacer lo siguiente para acelerar la descarga de tus archivos CSS globales:

• Usa un CDN para que los archivos estén físicamente más cerca de tus usuarios
• Comprime tus activos, idealmente usando Brotli
• Usa HTTP2/HTTP3 para la entrega
• Aloja tus activos en el mismo dominio (no uses un subdominio diferente)

La mayoría de estas cosas deberían hacerse automáticamente si estás usando plataformas modernas como Cloudflare, Netlify o Vercel. Puedes encontrar una guía de optimización de LCP en web.dev.

Si todo tu CSS está incluido por Nuxt, puedes (experimentalmente) detener completamente que los archivos CSS externos sean referenciados en tu HTML renderizado. Puedes lograrlo con un hook, que puedes colocar en un módulo, o en tu archivo de configuración de Nuxt.

export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // encuentra la entrada de la aplicación, lista de css
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        // comienza desde el final del array y ve hacia el principio
        for (let i = css.length - 1; i >= 0; i--) {
          // si comienza con 'entry', elimínalo de la lista
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})