Diretório de Recursos

O diretório assets contém recursos ou ativos não compilados, como ficheiros .styl, .stylus ou .sass, .scss, imagens, ou tipos de letras (também conhecidos como fontes).

Imagens

Dentro dos nossos modelos de marcação .vue, se precisarmos vincular ao nosso diretório assets, usamos ~/assets/your_image.png com uma barra antes de assets:

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

Dentro dos nossos ficheiros .cssm se precisarmos de referenciar o nosso diretório assets, utilizamos ~assets/your_image.png (sem barra):

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

Quando trabalhamos com imagens dinâmicas, precisamos de utilizar a função require():

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

Estilos

A Nuxt permite-nos definir os ficheiros .css, módulos, e bibliotecas que queremos definir globalmente (incluídos em todas as páginas). No nuxt.config.js, podemos adicionar facilmente os nossos estilos utilizando a propriedade css:

export default {
  css: [
    // Carregar um módulo de Node.js diretamente
    // (neste caso, é um ficheiro `.scss` ou `.sass`).
    'bulma',
    // Ficheiro `.css` no projeto
    '~/assets/css/main.css',
    // Ficheiro `.scss` no projeto
    '~/assets/css/main.scss'
  ]
}

Sass

Caso queiramos utilizar a sass precisamos ter certeza de que instalamos os pacotes sass e sass-loader:

yarn add --dev sass sass-loader@10

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

A Nuxt deteta automaticamente o tipo de ficheiro pela sua extensão de ficheiro (.sass ou .scss) e utiliza o carregador do pré-processador correto para a Webpack. Continuaremos a ter de instalar o carregador necessário se precisarmos de os utilizar:

Tipos de Letra

Podemos utilizar tipos de letra (mais conhecidos como fontes) locais adicionando-os à nossa pasta de recursos (assets/). Uma vez adicionados, podemos acessá-los através do nosso .css utilizando a @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');
}

Recursos da Webpack

Por predefinição, a Nuxt usa a vue-loader, file-loader, e a url-loader da Webpack para servir os nossos recursos (também conhecidos como ativos). Também podemos usar o diretório estático (static/) para recursos (assets/) que não devem ser executados pela Webpack:

Webpack

A vue-loader processa os nossos ficheiros de estilo e modelos de marcação automaticamente com a css-loader e a compilara de modelos de marcação de hipertexto com extensão .vue. Neste processo de compilação, todos os endereços de localização de recurso de recursos como <img src="...">, background: url(...), e @import de folha de estilo são resolvidos como dependências do módulo:

Por exemplo, temos esta árvore de ficheiros:

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

Se usarmos url('~assets/image.png') no nosso ficheiro de folha de estilo, este será traduzido para require('~/assets/image.png').

Se referenciarmos esta imagem no nosso pages/index.vue:

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

Será compilada em:

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

Uma vez que .png não é um ficheiro de código .js, a Nuxt configura a Webpack para utilizar a file-loader e a url-loader para os tratar por nós.

Os vantagens estas carregadoras são:

• A file-loader permite-nos designar onde copiar e colocar o ficheiro de recurso, e como nomeá-lo usando baralhos de versão para melhorar o armazenamento transitório. Em produção. beneficiaremos de um armazenamento transitório de longo prazo por predefinição!
• A url-loader permite-nos inserir condicionalmente ficheiros como endereços de localização de recurso de dados de base64 se estes forem menores do que um determinado limite. Isto pode reduzir o número de pedidos do protocolo de hipertexto para ficheiros banais. Se um ficheiro for maior do que o limite, regressa automaticamente a file-loader.

Para estas duas carregadoras, a configuração predefinida é:

// 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 todos os ficheiros com menos de 1kb serão incluídos como endereço de localização de recurso de dados de base64. Caso contrário, a imagem e o tipo de letra serão copiados na sua pasta correspondente (no diretório .nuxt) com um nome contendo uma sequência baralhada de caracteres de versão para melhorar o armazenamento transitório.

Ao lançar a nossa aplicação com nuxt, o nosso modelo de marcação em pages/index.vue:

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

Será transformado em:

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

Se quisermos alterar as configurações do carregador, utilizamos a build.extend .

Pseudónimos

Por predefinição, o diretório de origem (srcDir) e o diretório raiz (rootDir) são os mesmos. Podemos usar o pseudónimo ~ para o diretório de origem. Ao invés de escrevermos caminhos relativos como ../assets/your_image.png, podemos usar ~/assets/your_image.png.

Ambas as opções permitem obter os mesmos resultados:

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

Recomendamos a utilização do ~ como um pseudónimo. O @ ainda é suportado, mas não funcionará em todos os casos, como com imagens de fundo no nosso ficheiro de folha de estilo (.css).

Podemos utilizar o pseudónimo de ~~ ou @@ para o diretório raiz.