O diretório assets

O diretório assets contém recursos não compilados tais como ficheiros Stylus ou Sass, imagens, ou fontes.

As imagens

Dentro dos seus modelos vue, se você precisar ligar ao seu diretório assets, use ~/assets/your_image.png com uma barra antes do assets.

<template>
  <img src="~/assets/your_image.png" />
</template>

Dentro dos seus ficheiros css, se você precisar referenciar o seu diretório assets, use ~assets/your_image.png (sem uma barra).

background: url('~assets/banner.svg');

Quando estiveres trabalhando com imagens dinâmicas você precisará usar a função require()

<img :src="require(`~/assets/img/${image}.jpg`)" />

Os estilos

O Nuxt permite você definir ficheiros/módulos/bibliotecas CSS que você quiser definir globalmente (incluído dentro de cada página). Dentro do ficheiro nuxt.config.js você pode facilmente adicionar seus estilos usando a propriedade CSS.

export default {
  css: [
    // Carrega um módulo do Node.js diretamente (aqui está um ficheiro Sass)
    'bulma',
    // Ficheiro CSS dentro do projeto
    '~/assets/css/main.css',
    // Ficheiro SCSS dentro do projeto
    '~/assets/css/main.scss'
  ]
}

O Sass

No caso de você quiser usar sass certifique-se que você tem os pacotes sass e sass-loader instalado.

yarn add --dev sass sass-loader@10

npm install --save-dev sass sass-loader@10

O Nuxt irá automaticamente adivinhar o tipo de ficheiro pela sua extensão e usar o carregador do pré-processador adequado para o webpack. Você continuará a precisar instalar o carregador exigido se você precisar usar eles.

As fontes

Você pode usar fontes locais ao adicionar elas à sua pasta assets. Uma vez que eles têm sido adicionados você pode então acessar eles através do seu CSS usando o @font-face.

-| assets
----| fonts
------| DMSans-Regular.ttf
------| DMSans-Bold.ttf

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~assets/fonts/DMSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('~assets/fonts/DMSans-Bold.ttf') format('truetype');
}

Os recursos do webpack

Por padrão, o Nuxt usa o vue-loader do webpack, file-loader, e o url-loader para servir seus assets. Você também pode usar o diretório static para os recursos que não devem ser processados pelo webpack

Webpack

O vue-loader processa automaticamente seu estilo e ficheiros de modelos com o css-loader e o compilador de modelos do Vue. Neste processo de compilação, todas URLs do recurso tais como <img src="...">, background: url(...), e os @import do CSS são resolvidos como módulo de dependências.

Por exemplo, nós temos esta árvore de ficheiro:

-| assets/
----| image.png
-| pages/
----| index.vue

Se você usar url('~assets/image.png') dentro do seu CSS, ele será traduzido para require('~/assets/image.png').

Se você referenciar aquela imagem dentro do seu pages/index.vue:

<template>
  <img src="~/assets/image.png" />
</template>

Ela será compilada para:

createElement('img', { attrs: { src: require('~/assets/image.png') } })

Por .png não ser um ficheiro JavaScript, o Nuxt configura o webpack para usar file-loader e url-loader para manipular eles por você.

Os benefícios desses carregadores são:

O file-loader permite você designar onde copiar e colocar o ficheiro de recurso, e como nomear ele usando a versão com hash para um cacheamento melhor. Em produção, você tirará proveito de cacheamento de longo período por padrão!

O url-loader permite você condicionalmente embutir os ficheiros como URLs de dados em base64 se eles forem menores do que um determinado limite. Isto pode reduzir o número de requisições HTTP para ficheiros triviais.

Para estes dois carregadores, a configuração padrão é:

// https://github.com/nuxt/nuxt/blob/2.x-dev/packages/webpack/src/config/base.js#L382-L411
{
  test: /\.(png|jpe?g|gif|svg|webp|avif)$/i,
  use: [{
    loader: 'url-loader',
    options: {
      esModule: false,
      limit: 1000, // 1kB
      name: 'img/[name].[contenthash:7].[ext]'
    }
  }]
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
  use: [{
    loader: 'url-loader',
    options: {
       esModule: false,
       limit: 1000, // 1kB
       name: 'fonts/[name].[contenthash:7].[ext]'
    }
  }]
},
{
  test: /\.(webm|mp4|ogv)$/i,
  use: [{
    loader: 'file-loader',
    options: {
      esModule: false,
      name: 'videos/[name].[contenthash:7].[ext]'
    }
  }]
}

O que significa que cada ficheiro abaixo de 1kb será embutido como URL de dado na base64. Caso contrário, a imagem/fonte serão copiados para suas pastas correspondentes (dentro do diretório .nuxt) com o nome contendo a versão em hash para um cacheamento melhor.

Quando estiver lançando a sua aplicação com nuxt, o seu modelo dentro de pages/index.vue:

<template>
  <img src="~/assets/your_image.png" />
</template>

Será transformado em:

<img src="/_nuxt/img/your_image.0c61159.png" />

Se você quiser mudar as configurações do carregador, use o build.extend .

Os apelidos

Por padrão o diretório fonte (srcDir) e diretório raiz (rootDir) são o mesmo. Você pode usar o apelido ~ para o diretório fonte. Ao invés de escrever caminhos relativos como ../assets/your_image.png você pode usar ~/assets/your_image.png.

Ambos alcançarão os mesmos resultados.

<template>
  <div>
    <img src="../assets/your_image.png" />
    <img src="~/assets/your_image.png" />
  </div>
</template>

Nós recomendamos usar o ~ como um apelido. @ continua sendo suportado mas não funcionará em todos casos tais como com imagens de fundo dentro do seu css.

Você pode usar os apelidos ~~ ou @@ para o diretório raiz.