O Nuxt utiliza dois diretórios para gerenciar assets como folhas de estilo, fontes ou imagens.

• O conteúdo do diretório public/ é servido na raiz do servidor como está.
• O diretório assets/ contém, por convenção, todos os assets que você deseja que a ferramenta de build (Vite ou webpack) processe.

Diretório Public

O diretório public/ é usado como um servidor público para assets estáticos disponíveis publicamente em uma URL definida da sua aplicação.

Você pode acessar um arquivo no diretório public/ a partir do código da sua aplicação ou de um navegador pela URL raiz /.

Exemplo

Por exemplo, referenciando um arquivo de imagem no diretório public/img/, disponível na URL estática /img/nuxt.png:

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

Diretório Assets

O Nuxt utiliza Vite (padrão) ou webpack para construir e empacotar sua aplicação. A principal função dessas ferramentas de build é processar arquivos JavaScript, mas elas podem ser estendidas através de plugins (para Vite) ou loaders (para webpack) para processar outros tipos de assets, como folhas de estilo, fontes ou SVGs. Esta etapa transforma o arquivo original, principalmente para fins de desempenho ou cache (como minificação de folhas de estilo ou invalidação de cache do navegador).

Por convenção, o Nuxt utiliza o diretório assets/ para armazenar esses arquivos, mas não há funcionalidade de varredura automática para este diretório, e você pode usar qualquer outro nome para ele.

No código da sua aplicação, você pode referenciar um arquivo localizado no diretório assets/ usando o caminho ~/assets/.

Exemplo

Por exemplo, referenciando um arquivo de imagem que será processado se uma ferramenta de build estiver configurada para lidar com esta extensão de arquivo:

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