nuxt.config

Par défaut, Nuxt est configuré de sorte à pouvoir couvrir la plupart des cas. Cette configuration peut être écrasée grâce au fichier nuxt.config.js.

nuxt.config.js

alias

Cette option vous permet de définir des alias qui seront disponibles dans votre JavaScript et CSS.

import { resolve } from 'path'

export default {
  alias: {
    'style': resolve(__dirname, './assets/style')
  }
}

build

Cette option permet de configurer différents paramètres lors de l'étape de build, cela inclus les loaders, les noms de fichiers, la configuration Webpack ainsi que la transpilation.

export default {
  build: {
    /*
     ** On peut personnaliser la configuration de Webpack ici
     */
    extend(config, ctx) {}
  }
}

css

Cette option permet de définir les fichiers CSS, les modules et les librairies que l'on veut inclure globalement (sur chaque page).

export default {
  css: ['~/assets/css/main.css', '~/assets/css/animations.scss']
}

On peut omettre l'extension pour les fichiers CSS/SCSS/Postcss/Less/Stylus/... listés dans le tableau css du fichier nuxt.config.js.

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

En omettant l'extension, cela nous permet de ne pas avoir à renommer le fichier si jamais on décide de le passer du CSS au SASS.

dev

Cette option permet de définir le mode development ou production de Nuxt (utile lorsque l'on veut utiliser Nuxt de façon programmatique).

export default {
  dev: process.env.NODE_ENV !== 'production'
}

env

Cette option permet de définir des variables d'environment qui seront disponibles côté client mais aussi serveur.

export default {
  env: {
    baseUrl: process.env.BASE_URL
  }
}

runtimeConfig

La configuration d'exécution a une prise en charge intégrée de dotenv pour une meilleure sécurité et un développement plus rapide. La configuration d'exécution est ajoutée au payload Nuxt, il n'est donc pas nécessaire de reconstruire afin de mettre à jour la configuration d'exécution lorsque vous travaillez en développement ou avec un rendu côté serveur ou des applications côté client uniquement. (Pour les sites statiques, vous devrez toujours régénérer votre site pour voir les changements.)

.env support

Si vous avez un fichier .env dans le répertoire racine de votre projet, il sera automatiquement chargé dans process.env et accessible dans votre nuxt.config/serverMiddleware et tout autre fichier qu'ils importent.

Vous pouvez personnaliser le chemin en utilisant --dotenv <file> ou désactiver complètement avec --dotenv false. Par exemple, vous pouvez spécifier un fichier ".env" différent dans les environnements de production, de transfert ou de développement.

publicRuntimeConfig

• doit contenir toutes les variables env qui sont publiques car elles seront exposées sur le frontend. Cela pourrait inclure une référence à votre URL publique par exemple.
• est disponible en utilisant $config à la fois sur le serveur et le client.

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'https://v2.nuxt.com'
  }
}

privateRuntimeConfig

• doit contenir toutes les variables d'environnement qui sont privées et qui ne doivent pas être exposées sur le frontend. Cela pourrait inclure une référence à vos jetons secrets API par exemple.
• n'est disponible que sur le serveur utilisant le même $config (il remplace publicRuntimeConfig)

export default {
  privateRuntimeConfig: {
    apiSecret: process.env.API_SECRET
  }
}

Utilisation de vos valeurs de configuration:

Vous pouvez ensuite accéder à ces valeurs n'importe où en utilisant le contexte dans vos pages, magasin, composants et plugins en utilisant this.$config ou context.$config.

<script>
  asyncData ({ $config: { baseURL } }) {
    const posts = await fetch(`${baseURL}/posts`)
      .then(res => res.json())
  }
</script>

Dans vos modèles, vous pouvez accéder à vos runtimeConfigs directement en utilisant $config.*

<template>
  <p>Votre url est: {{ $config.baseURL}}</p>
</template>

generate

Cette option permet de définir les paramètres pour chaque route dynamique de l'application, ces derniers seront transformés en fichiers HTML par Nuxt.

export default {
  generate: {
    dir: 'gh_pages', // gh_pages/ au lieu de dist/
    subFolders: false // les fichiers HTML sont générés en fonction du chemin de la route
  }
}

head

export default {
    head: {
    title: 'mon titre',
    meta: [
      { charset: 'utf-8' },
            .....
        ]
    }
}

Cette option permet de définir toutes les balises méta par défaut pour l'application.

loading

Cette option permet de personnaliser le composant de chargement que Nuxt utilise par défaut.

export default {
  loading: {
    color: '#fff'
  }
}

modules

Cette option permet d'ajouter des modules Nuxt au projet.

export default {
  modules: ['@nuxtjs/axios']
}

modulesDir

Cette propriété est utilisée pour définir les répertoires des modules afin de déterminer le chemin de résolution. Par ex: le resolveLoading, nodeExternals et postcss de Webpack. Le chemin de la configuration est relatif par rapport à options.rootDir (par défaut: process.cwd()).

export default {
  modulesDir: ['../../node_modules']
}

Adapter cet emplacement peut être nécessaire si le projet est organisé en tant que workspace Yarn avec un mono-repo.

plugins

Cette option permet de définir les plugins JavaScript qui devraient s'exécuter avant l'instanciation de l'application Vue.js principale.

export default {
  plugins: ['~/plugins/url-helpers.js']
}

router

Avec l'option router, on peut écraser la configuration de Nuxt par défaut pour le routeur de Vue.js.

export default {
  router: {
    linkExactActiveClass: 'text-primary'
  }
}

server

Cette option permet de configurer des variables de connexion pour l'instance du serveur de l'application Nuxt.

import path from 'path'
import fs from 'fs'

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

srcDir

Cette option permet de définir le répertoire source de l'application Nuxt.

export default {
  srcDir: 'client/'
}

Exemple de la structure du projet de l'application Nuxt avec le répertoire client:

**-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| client/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/**

dir

Cette option permet de définir des noms personnalisés pour les répertoires de l'application Nuxt.

export default {
  pages: 'views' // Nuxt va chercher les pages dans le répertoire views/ et non pages/
}

pageTransition

Cette option permet de définir les propriétés par défaut pour les transitions de page.

export default {
  pageTransition: 'page'
}

Autres fichiers de configuration

Outre le fichier nuxt.config.js, il peut y avoir d'autres fichiers de configuration à la racine du projet, tels que .eslintrc , prettier.config.json ou .gitignore . Ces derniers sont utilisés pour configurer des outils tels que le linter, le formateur de code ou votre repository Git, ils sont donc décorrélés du fichier nuxt.config.js.

.gitignore

Dans le fichier .gitignore, il faudra ajouter les entrées qui suivent afin qu'elles soient ignorées du système de contrôle de version. node_modules où tous les modules sont installés. Le répertoire nuxt qui est créé lorsque l'on lance les commandes dev ou build. Le répertoire dist qui est créé lorsque l'on lance la commande generate.

node_modules .nuxt dist

Et maintenant ?