La propriété generate

Permet de configurer la génération de votre application web universelle en une application web statique.

• Type: Object

Lors de l'appel de nuxt.generate(), Nuxt va utiliser la configuration définie dans la propriété generate.

export default {
  generate: {
    ...
  }
}

cache

Introduit avec la v2.14.0

• Type: Object ou false

Cette option est utilisée par nuxt generate avec la cible statique pour éviter de re-build lorsque les fichiers traqués n'ont pas été modifiés.

Par défaut:

{
  ignore: [
    '.nuxt', // buildDir
    'static', // dir.static
    'dist', // generate.dir
    'node_modules',
    '.**/*',
    '.*',
    'README.md'
  ]
}

Si on veut éviter de re-build lors d'un changement du fichier de configuration, il faut l'ajouter à la liste au travers de l'option cache.ignore :

export default {
  generate: {
    cache: {
      ignore: ['renovate.json'] // ignore les changements appliqués à ce fichier
    }
  }
}

concurrency

• Type: Number
• Par défaut: 500

La génération des routes est concomitance, generate.concurrency spécifie le nombre de routes qui peuvent s'exécuter dans un seul thread.

crawler

• Type: boolean
• Par défaut: true

Depuis Nuxt v2.13, un crawler s'occupera de trouver et de générer toutes les routes dynamiques en passant en revue tous les liens relatifs. Si l'on veut désactiver cette fonctionnalité, il suffit de passer la valeur à false.

export default {
  generate: {
    crawler: false
  }
}

dir

• Type: String
• Par défault: 'dist'

Le nom du répertoire créé lors du build de l'application web en mode statique avec nuxt generate ou en mode SPA avec nuxt build.

devtools

• Type: boolean
• Par défault: false

Permet de configurer si l'on est autorisé ou pas à inspecter les vue-devtools .

Si c'est déjà activé dans le fichier nuxt.config.js ou ailleurs, les devtools seront activés, peu importe le flag.

exclude

• Type: Array
  • Items: String ou RegExp

exclude accepte un tableau de chaînes de caractères ou des expressions régulières et s'occupe d'éviter de générer les routes qui match. Les routes seront toujours accessibles lorsque generate.fallback est utilisé.

En prenant cet exemple de structure :

-| pages/
---| index.vue
---| admin/
-----| about.vue
-----| index.vue

Par défaut, lors de l'exécution de nuxt generate, un fichier sera créé pour chaque route.

-| dist/
---| index.html
---| admin/
-----| about.html
-----| item.html

Lorsque dans ignore, on ajoute une expression régulière qui match toutes les routes, cela va empêcher la génération de ces routes.

export default {
  generate: {
    exclude: [
      /^\/admin/ // un chemin qui commence par /admin
    ]
  }
}

-| dist/
---| index.html

On peut aussi exclure une route spécifique en passant une chaîne de caractères :

export default {
  generate: {
    exclude: ['/ma-page-secrete']
  }
}

fallback

• Type: String ou Boolean
• Par défault: 200.html

export default {
  generate: {
    fallback: '404.html'
  }
}

Fournit le chemin du fallback au fichier HTML. Cela devrait être définit en tant que page d'erreur, pour que toutes les routes inconnues soient rendues via Nuxt. Si la valeur n'est pas spécifiée ou est false, le fallback sera 200.html. Si la valeur est à true, le fallback sera à 404.html. Si l'on fournit une chaîne de caractères, elle sera utilisée à la place.

Lorsque notre application est une SPA, il est plus idiomatique d'utiliser une 200.html vu que ce sera le seul fichier nécessaire car aucune autre route ne sera générée.

fallback: false

Lorsque l'on travaille avec des pages générées de manière statique, il est recommandé d'utiliser une 404.html en tant que page d'erreur et pour celles qui concordent avec les entrées dans excludes (autrement dit, les fichiers que l'on ne veut pas voir être générés en tant que pages statiques).

fallback: true

Cependant, Nuxt permet de configurer n'importe quelle page si vous ne souhaitez pas utiliser les classiques 200.html ou 404.html, il suffit d'ajouter la chaîne de caractères souhaitée et de penser à faire la redirection sur cette page. Ce n'est bien sûr pas nécessaire et le mieux reste encore de rediriger vers des pages 200.html/404.html.

fallback: 'pageDeFallback.html'

Note: De nombreux services (ex: Netlify) détectent une 404.html automatiquement. Si on est en charge de la configuration de notre propre serveur web, il faudra consulter la documentation pour trouver comment définir une page d'erreur (et la passer à 404.html).

interval

• Type: Number
• Par défault: 0

L'intervalle entre 2 cycles de render, utile pour éviter de spam une API avec les appels de notre application web.

minify

• Déprécié !
• Il faut utiliser build.html.minify à la place.

routes

• Type: Array

Exemple :

-| pages/
---| index.vue
---| users/
-----| _id.vue

Seule la route / sera générée par Nuxt.

Si l'on souhaite que Nuxt génère des routes avec des paramètres dynamiques, on a besoin de définir la propriété generate.routes à un tableau de routes dynamiques.

On ajoute les routes pour /users/:id :

export default {
  generate: {
    routes: ['/users/1', '/users/2', '/users/3']
  }
}

Ensuite on lance nuxt generate :

[nuxt] Generating...
[...]
nuxt:render Rendering url / +154ms
nuxt:render Rendering url /users/1 +12ms
nuxt:render Rendering url /users/2 +33ms
nuxt:render Rendering url /users/3 +7ms
nuxt:generate Generate file: /index.html +21ms
nuxt:generate Generate file: /users/1/index.html +31ms
nuxt:generate Generate file: /users/2/index.html +15ms
nuxt:generate Generate file: /users/3/index.html +23ms
nuxt:generate HTML Files generated in 7.6s +6ms
[nuxt] Generate done

Bien, mais que se passe-t-il si on a des paramètres dynamiques ?

1. On peut utiliser une fonction qui nous retournera une Promesse.
2. On peut utiliser une fonction avec un callback(erreur, parametres).

Fonction qui retourne une Promesse

import axios from 'axios'

export default {
  generate: {
    routes() {
      return axios.get('https://mon-api/users').then(res => {
        return res.data.map(user => {
          return '/users/' + user.id
        })
      })
    }
  }
}

Fonction avec un callback

import axios from 'axios'

export default {
  generate: {
    routes(callback) {
      axios
        .get('https://mon-api/users')
        .then(res => {
          const routes = res.data.map(user => {
            return '/users/' + user.id
          })
          callback(null, routes)
        })
        .catch(callback)
    }
  }
}

Accélérer la génération des routes dynamiques avec payload

Dans l'exemple précédent, nous utilisons user.id à partir du serveur pour générer les routes mais on jette le reste de la data. En général, on aura besoin de le récupérer de nouveau à l'intérieur de /users/_id.vue. Même si on peut faire cela, on aura certainement besoin de passer la valeur de generate.interval à queqlue chose comme 100 pour éviter de spam le serveur avec nos appels. Parce que cela va augmenter le temps que prend le script de génération, il serait préférable de passer l'objet user en entier dans le contexte de _id.vue. Nous pouvons faire cela en modifiant le code au dessus par :

import axios from 'axios'

export default {
  generate: {
    routes() {
      return axios.get('https://mon-api/users').then(res => {
        return res.data.map(user => {
          return {
            route: '/users/' + user.id,
            payload: user
          }
        })
      })
    }
  }
}

Nous pouvons maintenant accéder à payload à partir de /users/_id.vue commme ceci :

async asyncData ({ params, error, payload }) {
  if (payload) return { user: payload }
  else return { user: await backend.fetchUser(params.id) }
}

subFolders

• Type: Boolean
• Par défault: true

Par défaut, lorsqu'on lance un nuxt generate, Nuxt va créer un répertoire pour chaque route et servir un fichier index.html.

Exemple :

-| dist/
---| index.html
---| about/
-----| index.html
---| products/
-----| item/
-------| index.html

Lorsque l'on passe la valeur à false, les fichiers HTML seront générés d'après le chemin de la route :

export default {
  generate: {
    subFolders: false
  }
}

-| dist/
---| index.html
---| about.html
---| products/
-----| item.html