assets

Le répertoire assets contient les ressources comme des fichiers Stylus, du SASS, des images ou des polices de caractères.

Images:

À l'intérieur de nos templates vue, si nous avons besoin de faire un lien vers notre répertoire assets (ressources), il faut utiliser ~/assets/notre_image.png (avec un slash avant les assets).

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

À l'intérieur de nos fichiers CSS, si nous avons besoin de faire un lien vers notre répertoire assets (ressources), il faut utiliser ~/assets/banniere.svg (sans le slash).

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

Si l'on travaille avec des images dynamiques, on aura besoin d'utiliser require.

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

Styles:

Nuxt nous permet de définir les fichiers/modules/librairies CSS que nous souhaitons utiliser de manière globale (dans chaque page). Dans le fichier de config nuxt.config.js, on peut spécifier cela grâce à la propriété css:

export default {
  css: [
    // charge un module Node.js directement (ici un fichier SASS)
    'bulma',
    // un fichier CSS dans le projet
    '~/assets/css/main.css',
    // un fichier SCSS dans le projet
    '~/assets/css/main.scss'
  ]
}

Sass

yarn add --dev sass sass-loader@10

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

Nuxt va automatiquement deviner le type de fichier grâce à son extension et utiliser le loader webpack approprié pour le pré-processeur. Nous aurons cependant besoin d'installer le loader requis si nous avons besoin de l'utiliser.

Fonts:

On peut utiliser des polices de caractères locales en les ajoutant dans le répertoire des ressources. Une fois ajoutées, on peut y avoir accès dans notre CSS en utilisant @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');
}

Ressources de Webpack

Par défaut, Nuxt utilise les vue-loader, file-loader et url-loader de Webpack pour délivrer les ressources. On peut aussi utiliser le répertoire statique pour les ressources, ce dernier ne doit cependant pas passer par Webpack.

Webpack

Le compilateur de templates de Vue s'occupe de process le style (avec css-loader) et les fichiers de templates (grâce à vue-loader ). Durant ce processus, toutes les URL des ressources telles que <img src="...">, background: url(...) et les @import CSS sont résolues en tant que dépendances de modules.

Par exemple, avec cette arborescence de fichiers:

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

Si dans notre CSS, on utilise url('~assets/image.png'), ceci sera traduit en require('~/assets/image.png').

Si on référence cette image dans notre fichier pages/index.vue:

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

Ce sera compilé en:

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

Parce que .png n'est pas un fichier JavaScript, Nuxt s'occupe tout seul de demander à Webpack d'utiliser file-loader et url-loader pour s'occuper de ce format.

Les bénéfices de ces loaders sont les suivants:

file-loader s'occupe de définir où copier et placer la ressource, ainsi que comment la nommer en utilisant des hash pour une meilleure mise en cache. En production, on pourra bénéficier d'une mise en cache sur le long terme par défaut !

url-loader permet de transformer un fichier en une seule ligne de data URL encodé en base-64 s'il est en dessous d'un certain seuil. Ceci permet de réduire le nombre de requêtes HTTP pour des fichiers anodins. Si la taille du fichier est plus grosse que le seuil fixé, il va utiliser file-loader en solution de repli.

Pour ces deux loaders, la configuration par défaut est la suivante:

// 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]'
    }
  }]
}

Ce qui veut dire que n'importe quel fichier en dessous de 1 Ko sera mis sur une seule ligne de data URL encodé en base-64. Autrement, l'image/police de caractères sera copiée dans le répertoire correspondant (à l'intérieur du répertoire .nuxt) avec un nom comprenant le hash d'une version pour une meilleure mise en cache.

Lorsqu'on lancera l'application nuxt avec un template tel que pages/index.vue:

<template>
  <img src="@/assets/notre_image.png" />
</template>

Cela sera transformé en:

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

Si on souhaite changer la configuration d'un des loaders, on trouvera plus de détails à la page de build.extend .

Les Alias

Par défaut le répertoire des sources (srcDir) et le répertoire racine (rootDir) sont les mêmes. On peut utiliser l'alias ~ pour le répertoire des sources. Au lieu d'écrire des chemins relatifs tels que ../assets/notre_image.png, on peut écrire ~/assets/notre_image.png à la place.

Les deux donneront le même résultat.

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

Nous recommandons l'usage de ~ en tant qu'alias. @ est toujours supporté mais il ne marchera pas dans certains cas tel que les images de background dans le CSS.

On peut utiliser ~~ ou @@ pour le répertoire racine.