Nuxt utiliza dos directorios para manejar assets como hojas de estilo, fuentes o imágenes.

• El contenido del directorio public/ se sirve en la raíz del servidor tal cual.
• El directorio assets/ contiene, por convención, todos los assets que deseas que la herramienta de construcción (Vite o webpack) procese.

Directorio Público

El directorio public/ se utiliza como un servidor público para assets estáticos disponibles públicamente en una URL definida de tu aplicación.

Puedes obtener un archivo en el directorio public/ desde el código de tu aplicación o desde un navegador mediante la URL raíz /.

Ejemplo

Por ejemplo, referenciando un archivo de imagen en el directorio public/img/, disponible en la URL estática /img/nuxt.png:

<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt" />
</template>

Directorio de Assets

Nuxt utiliza Vite (por defecto) o webpack para construir y empaquetar tu aplicación. La función principal de estas herramientas de construcción es procesar archivos JavaScript, pero pueden extenderse a través de plugins (para Vite) o loaders (para webpack) para procesar otros tipos de assets, como hojas de estilo, fuentes o SVGs. Este paso transforma el archivo original, principalmente por razones de rendimiento o caché (como la minificación de hojas de estilo o la invalidación de caché del navegador).

Por convención, Nuxt utiliza el directorio assets/ para almacenar estos archivos, pero no hay una funcionalidad de escaneo automático para este directorio, y puedes usar cualquier otro nombre para él.

En el código de tu aplicación, puedes referenciar un archivo ubicado en el directorio assets/ usando la ruta ~/assets/.

Ejemplo

Por ejemplo, referenciando un archivo de imagen que será procesado si una herramienta de construcción está configurada para manejar esta extensión de archivo:

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
</template>