From d94300a9a4623ec8911bd8e33c33e8469de8e178 Mon Sep 17 00:00:00 2001 From: qm3ster Date: Sun, 26 Aug 2018 01:56:55 +0300 Subject: [PATCH] Update API/generate Also added Russian --- de/api/configuration-generate.md | 68 +- en/api/configuration-generate.md | 62 +- es/api/configuration-generate.md | 131 ++- fr/api/configuration-generate.md | 80 +- id/api/configuration-generate.md | 61 +- ja/api/configuration-generate.md | 163 +++- ko/api/configuration-generate.md | 253 +++++- pt-BR/api/configuration-generate.md | 135 ++- ru/api/configuration-generate.md | 220 ++++- zh/api/configuration-generate.md | 1284 ++++++++++++++++++++++++++- 10 files changed, 2145 insertions(+), 312 deletions(-) diff --git a/de/api/configuration-generate.md b/de/api/configuration-generate.md index 3f8afe339..8ad9d7d29 100644 --- a/de/api/configuration-generate.md +++ b/de/api/configuration-generate.md @@ -1,5 +1,5 @@ --- -title: "API: The generate Property" +title: 'API: The generate Property' description: Configure the generation of your universal web application to a static web application. --- @@ -30,7 +30,7 @@ The path to the SPA fallback. This file can be used when doing deploys of genera - Type: `Number` - Default: `0` -Interval between 2 render to avoid flooding the API calls made to a potential API from the web application. +Interval between two render cycles to avoid flooding a potential API with API calls from the web application. ## minify @@ -60,7 +60,7 @@ minify: { } ``` -You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by Nuxt.js to minify HTML files created during generate process. +You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by Nuxt.js to minify HTML files created during generation. ## routes @@ -86,11 +86,7 @@ We add routes for `/users/:id` in `nuxt.config.js`: ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` @@ -126,14 +122,10 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id - }) - }) - } + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) } } ``` @@ -147,23 +139,21 @@ const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) }) - callback(null, routes) - }) - .catch(callback) - } + .catch(callback) } } ``` ### Speeding up dynamic route generation with `payload` -In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that with by modifying the code above to this: +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: `nuxt.config.js` @@ -172,17 +162,13 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return { - route: '/users/' + user.id, - payload: user - } - }) - }) - } + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) } } ``` @@ -190,10 +176,10 @@ module.exports = { Now we can access the `payload` from `/users/_id.vue` like so: ```js -async asyncData ({ params, error, payload }) { - if (payload) return { user: payload } - else return { user: await backend.fetchUser(params.id) } -} +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } ``` ## subFolders diff --git a/en/api/configuration-generate.md b/en/api/configuration-generate.md index d6002dd20..8ad9d7d29 100644 --- a/en/api/configuration-generate.md +++ b/en/api/configuration-generate.md @@ -1,5 +1,5 @@ --- -title: "API: The generate Property" +title: 'API: The generate Property' description: Configure the generation of your universal web application to a static web application. --- @@ -86,11 +86,7 @@ We add routes for `/users/:id` in `nuxt.config.js`: ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` @@ -126,14 +122,10 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id - }) - }) - } + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) } } ``` @@ -147,16 +139,14 @@ const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) }) - callback(null, routes) - }) - .catch(callback) - } + .catch(callback) } } ``` @@ -172,17 +162,13 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return { - route: '/users/' + user.id, - payload: user - } - }) - }) - } + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) } } ``` @@ -190,10 +176,10 @@ module.exports = { Now we can access the `payload` from `/users/_id.vue` like so: ```js -async asyncData ({ params, error, payload }) { - if (payload) return { user: payload } - else return { user: await backend.fetchUser(params.id) } -} +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } ``` ## subFolders diff --git a/es/api/configuration-generate.md b/es/api/configuration-generate.md index 159ac0db7..8ad9d7d29 100644 --- a/es/api/configuration-generate.md +++ b/es/api/configuration-generate.md @@ -1,5 +1,5 @@ --- -title: "API: The generate Property" +title: 'API: The generate Property' description: Configure the generation of your universal web application to a static web application. --- @@ -9,7 +9,7 @@ description: Configure the generation of your universal web application to a sta > Configure the generation of your universal web application to a static web application. -When launching `nuxt generate` or calling `nuxt.generate()`, nuxt.js will use the configuration defined in the `generate` property. +When launching `nuxt generate` or calling `nuxt.generate()`, Nuxt.js will use the configuration defined in the `generate` property. ## dir @@ -18,12 +18,19 @@ When launching `nuxt generate` or calling `nuxt.generate()`, nuxt.js will use th Directory name created by `nuxt generate`. +## fallback + +- Type: `String` or `Boolean` +- Default: `'200.html'` + +The path to the SPA fallback. This file can be used when doing deploys of generated sites to static hosting. It falls back to `mode: 'spa'` when a route isn't generated. + ## interval - Type: `Number` - Default: `0` -Interval between 2 render to avoid flooding the API calls made to a potential API from the web application. +Interval between two render cycles to avoid flooding a potential API with API calls from the web application. ## minify @@ -53,13 +60,13 @@ minify: { } ``` -You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by nuxt.js to minify html files created during generate process. +You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by Nuxt.js to minify HTML files created during generation. ## routes - Type: `Array` -[Dynamic routes](/guide/routing#dynamic-routes) are ignored by the generate command. +[Dynamic routes](/guide/routing#dynamic-routes) are ignored by the `generate` command. Example: @@ -70,24 +77,22 @@ Example: -----| _id.vue ``` -Only the route `/` will be generated by nuxt.js. +Only the route `/` will be generated by Nuxt.js. -If you want nuxt.js to generate routes with dynamic params, you need to set an array of dynamic routes. +If you want Nuxt.js to generate routes with dynamic params, you need to set an array of dynamic routes. We add routes for `/users/:id` in `nuxt.config.js`: + ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` Then when we launch `nuxt generate`: + ```bash [nuxt] Generating... [...] @@ -104,25 +109,23 @@ nuxt:generate HTML Files generated in 7.6s +6ms ``` Great, but what if we have **dynamic params**? -1. Use a `Function` which returns a `Promise` -2. Use a `Function` with a `callback(err, params)` + +1. Use a `Function` which returns a `Promise`. +2. Use a `Function` with a `callback(err, params)`. ### Function which returns a Promise `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id - }) - }) - } + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) } } ``` @@ -130,46 +133,42 @@ module.exports = { ### Function with a callback `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) }) - callback(null, routes) - }) - .catch(callback) - } + .catch(callback) } } ``` ### Speeding up dynamic route generation with `payload` -In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that with by modifying the code above to this: +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return { - route: '/users/' + user.id, - payload: user - } - }) - }) - } + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) } } ``` @@ -177,8 +176,46 @@ module.exports = { Now we can access the `payload` from `/users/_id.vue` like so: ```js -async asyncData ({ params, error, payload }) { - if (payload) return { user: payload } - else return { user: await backend.fetchUser(params.id) } -} +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } ``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + +_Note: this option could be useful using [Netlify](https://netlify.com) or any static hosting using HTML fallbacks._ + +## concurrency + +- Type: `Number` +- Default: `500` + +The generation of routes are concurrent, `generate.concurrency` specifies the amount of routes that run in one thread. diff --git a/fr/api/configuration-generate.md b/fr/api/configuration-generate.md index d1d316687..d36836d60 100644 --- a/fr/api/configuration-generate.md +++ b/fr/api/configuration-generate.md @@ -1,11 +1,11 @@ --- -title: "API : La propriété generate" +title: 'API: La propriété generate' description: Configure la génération de votre application web universelle vers une application web statique. --- # La propriété generate -- Type : `Object` +- Type: `Object` > Configure la génération de votre application web universelle vers une application web statique. @@ -13,8 +13,8 @@ Quand vous lancez `nuxt generate` ou appelez `nuxt.generate()`, Nuxt.js utiliser ## dir -- Type : `String` -- Par défaut : `'dist'` +- Type: `String` +- Par défaut: `'dist'` Nom du répertoire créé par `nuxt generate`. @@ -27,15 +27,15 @@ The path to the SPA fallback. This file can be used when doing deploys of genera ## interval -- Type : `Number` -- Par défaut : `0` +- Type: `Number` +- Par défaut: `0` Interval entre 2 rendus pour éviter d'inonder les appels d'API effectués par une API potentielle de l'application web. ## minify -- Type : `Object` -- Par défaut : +- Type: `Object` +- Par défaut: ```js minify: { @@ -64,11 +64,11 @@ Vous pouvez changer la configuration par défaut de [html-minifier](https://gith ## routes -- Type : `Array` +- Type: `Array` Les [routes dynamiques](/guide/routing#routes-dynamiques) sont ignorées par la commande `generate`. -Exemple : +Exemple: ```bash -| pages/ @@ -126,16 +126,12 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://mon-api/utilisateurs') - .then((res) => { - return res.data.map((user) => { - return '/utilisateurs/' + user.id - }) - }) + routes: () => + axios + .get('https://mon-api/utilisateurs') + .then(res => res.data.map(user => '/utilisateurs/' + user.id)) } } -} ``` ### Fonction avec une fonction de rappel @@ -147,23 +143,21 @@ const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://mon-api/utilisateurs') - .then((res) => { - var routes = res.data.map((user) => { - return '/utilisateurs/' + user.id - }) + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) callback(null, routes) }) .catch(callback) } } -} ``` ### Augmenter la vitesse de génération d'une route dynamique avec `payload` -Dans l'exemple ci-dessus, nous avons utilisé `user.id` depuis le serveur pour générer les routes mais jeter le reste des données. Typiquement, nous avons besoin de les récupérer de nouveau depuis `/utilisateurs/_id.vue`. Pendant que nous faisons cela, nous allons probablement avoir besoin de définir `generate.interval` avec quelque chose comme `100` pour ne pas inonder le serveur avec des appels. Parce que cela va augmenter le temps de génération du script, il serait préférable de passer avec l'objet `user` le contexte dans `_id.vue`. Nous pouvons faire cela en modifiant le code ci-dessus pour celui-ci : +Dans l'exemple ci-dessus, nous avons utilisé `user.id` depuis le serveur pour générer les routes mais jeter le reste des données. Typiquement, nous avons besoin de les récupérer de nouveau depuis `/utilisateurs/_id.vue`. Pendant que nous faisons cela, nous allons probablement avoir besoin de définir `generate.interval` avec quelque chose comme `100` pour ne pas inonder le serveur avec des appels. Parce que cela va augmenter le temps de génération du script, il serait préférable de passer avec l'objet `user` le contexte dans `_id.vue`. Nous pouvons faire cela en modifiant le code ci-dessus pour celui-ci: `nuxt.config.js` @@ -172,38 +166,34 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://mon-api/utilisateurs') - .then((res) => { - return res.data.map((user) => { - return { + routes: () => + axios.get('https://mon-api/utilisateurs').then(res => + res.data.map(user => ({ route: '/utilisateurs/' + user.id, payload: user - } - }) - }) - } + })) + ) } } ``` -Maintenant nous pouvons accéder à `payload` depuis `/utilisateurs/_id.vue` comme ceci : +Maintenant nous pouvons accéder à `payload` depuis `/utilisateurs/_id.vue` comme ceci: ```js -async asyncData ({ params, error, payload }) { - if (payload) return { user: payload } - else return { user: await backend.fetchUser(params.id) } -} +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } ``` ## subFolders -- Type : `Boolean` -- Par défaut : `true` +- Type: `Boolean` +- Par défaut: `true` Par défaut, lancer `nuxt generate` va créer un répertoire pour chaque route et servir un fichier `index.html` file. -Exemple : +Exemple: ```bash -| dist/ @@ -215,7 +205,7 @@ Exemple : -------| index.html ``` -Quand il est mis à `false`, les fichier HTML seront générés en accord avec les chemins de routes : +Quand il est mis à `false`, les fichier HTML seront générés en accord avec les chemins de routes: ```bash -| dist/ @@ -225,7 +215,7 @@ Quand il est mis à `false`, les fichier HTML seront générés en accord avec l -----| item.html ``` -_Note : cette option peut être utile en utilisant [Netlify](https://netlify.com) ou n'importe quel hébergement utilisant des alternatives HTML._ +_Note: cette option peut être utile en utilisant [Netlify](https://netlify.com) ou n'importe quel hébergement utilisant des alternatives HTML._ ## concurrence diff --git a/id/api/configuration-generate.md b/id/api/configuration-generate.md index e560509d3..8359e8039 100644 --- a/id/api/configuration-generate.md +++ b/id/api/configuration-generate.md @@ -86,11 +86,7 @@ Kita tambahkan rute untuk `/users/:id` di dalam file `nuxt.config.js`: ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` @@ -126,19 +122,15 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id - }) - }) + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) } } -} ``` -### Function dengan menggunakan callback +### Function with a callback `nuxt.config.js` @@ -147,18 +139,16 @@ const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id - }) + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) callback(null, routes) }) .catch(callback) } } -} ``` ### Mempercepat proses generate dynamic route menggunakan `payload` @@ -172,17 +162,13 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ route: '/users/' + user.id, payload: user - } - }) - }) - } + })) + ) } } ``` @@ -190,10 +176,10 @@ module.exports = { Sekarang kita bisa mengakses `payload` dari `/users/_id.vue` seperti ini: ```js -async asyncData ({ params, error, payload }) { - if (payload) return { user: payload } - else return { user: await backend.fetchUser(params.id) } -} +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } ``` ## subFolders @@ -226,3 +212,10 @@ Ketika di-set menjadi false, file-file HTML akan di-generate berdasarkan path pa ``` *Catatan: cara ini akan lebih bermanfaat ketika kita menggunakan [Netlify](https://netlify.com) atau hosting statis menggunakan HTML fallbacks.* + +## concurrency + +- Type: `Number` +- Default: `500` + +The generation of routes are concurrent, `generate.concurrency` specifies the amount of routes that run in one thread. diff --git a/ja/api/configuration-generate.md b/ja/api/configuration-generate.md index 6b2b2647f..4dc9ae9b2 100644 --- a/ja/api/configuration-generate.md +++ b/ja/api/configuration-generate.md @@ -18,6 +18,13 @@ description: ユニバーサルなウェブアプリケーションから静的 `nuxt generate` で作成されるディレクトリ名です。 +## fallback + +- Type: `String` or `Boolean` +- Default: `'200.html'` + +The path to the SPA fallback. This file can be used when doing deploys of generated sites to static hosting. It falls back to `mode: 'spa'` when a route isn't generated. + ## interval - 型: `数値` @@ -79,11 +86,7 @@ generate コマンドでは [動的なルーティング](/guide/routing#動的 ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` @@ -119,14 +122,10 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id - }) - }) - } + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) } } ``` @@ -140,16 +139,142 @@ const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id - }) + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) callback(null, routes) }) .catch(callback) } } +``` + + + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } } ``` +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + +_Note: this option could be useful using [Netlify](https://netlify.com) or any static hosting using HTML fallbacks._ + +## concurrency + +- Type: `Number` +- Default: `500` + +The generation of routes are concurrent, `generate.concurrency` specifies the amount of routes that run in one thread. diff --git a/ko/api/configuration-generate.md b/ko/api/configuration-generate.md index 711dc1cbe..bfd0505c5 100644 --- a/ko/api/configuration-generate.md +++ b/ko/api/configuration-generate.md @@ -18,6 +18,20 @@ description: 범용 웹 어플리케이션의 생성을 정적 웹 어플리케 `nuxt generate`에 의해 폴더명이 만들어집니다. +## fallback + +- Type: `String` or `Boolean` +- Default: `'200.html'` + +The path to the SPA fallback. This file can be used when doing deploys of generated sites to static hosting. It falls back to `mode: 'spa'` when a route isn't generated. + +## interval + +- Type: `Number` +- Default: `0` + +Interval between two render cycles to avoid flooding a potential API with API calls from the web application. + ## minify - 타입: `Object` @@ -72,11 +86,7 @@ nuxt.js는 `/`경로만 생성합니다. ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` @@ -109,36 +119,241 @@ const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id - }) - }) + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) } } -} ``` ### 콜백을 사용하는 함수 `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id - }) + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) +} + } +``` + + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) +} +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` callback(null, routes) }) .catch(callback) } } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) +} +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + callback(null, routes) + }) + .catch(callback) + } } ``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + +_Note: this option could be useful using [Netlify](https://netlify.com) or any static hosting using HTML fallbacks._ + +## concurrency + +- Type: `Number` +- Default: `500` + +The generation of routes are concurrent, `generate.concurrency` specifies the amount of routes that run in one thread. diff --git a/pt-BR/api/configuration-generate.md b/pt-BR/api/configuration-generate.md index 1088318e9..8ad9d7d29 100644 --- a/pt-BR/api/configuration-generate.md +++ b/pt-BR/api/configuration-generate.md @@ -1,5 +1,5 @@ --- -title: "API: The generate Property" +title: 'API: The generate Property' description: Configure the generation of your universal web application to a static web application. --- @@ -9,7 +9,7 @@ description: Configure the generation of your universal web application to a sta > Configure the generation of your universal web application to a static web application. -When launching `nuxt generate` or calling `nuxt.generate()`, nuxt.js will use the configuration defined in the `generate` property. +When launching `nuxt generate` or calling `nuxt.generate()`, Nuxt.js will use the configuration defined in the `generate` property. ## dir @@ -18,12 +18,19 @@ When launching `nuxt generate` or calling `nuxt.generate()`, nuxt.js will use th Directory name created by `nuxt generate`. +## fallback + +- Type: `String` or `Boolean` +- Default: `'200.html'` + +The path to the SPA fallback. This file can be used when doing deploys of generated sites to static hosting. It falls back to `mode: 'spa'` when a route isn't generated. + ## interval - Type: `Number` - Default: `0` -Interval between 2 render to avoid flooding the API calls made to a potential API from the web application. +Interval between two render cycles to avoid flooding a potential API with API calls from the web application. ## minify @@ -33,7 +40,7 @@ Interval between 2 render to avoid flooding the API calls made to a potential AP ```js minify: { collapseBooleanAttributes: true, - collapseWhitespace: true, + collapseWhitespace: false, decodeEntities: true, minifyCSS: true, minifyJS: true, @@ -47,19 +54,19 @@ minify: { removeStyleLinkTypeAttributes: false, removeTagWhitespace: false, sortAttributes: true, - sortClassName: true, + sortClassName: false, trimCustomFragments: true, useShortDoctype: true } ``` -You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by nuxt.js to minify html files created during generate process. +You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by Nuxt.js to minify HTML files created during generation. ## routes - Type: `Array` -[Dynamic routes](/guide/routing#dynamic-routes) are ignored by the generate command. +[Dynamic routes](/guide/routing#dynamic-routes) are ignored by the `generate` command. Example: @@ -70,24 +77,22 @@ Example: -----| _id.vue ``` -Only the route `/` will be generated by nuxt.js. +Only the route `/` will be generated by Nuxt.js. -If you want nuxt.js to generate routes with dynamic params, you need to set an array of dynamic routes. +If you want Nuxt.js to generate routes with dynamic params, you need to set an array of dynamic routes. We add routes for `/users/:id` in `nuxt.config.js`: + ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` Then when we launch `nuxt generate`: + ```bash [nuxt] Generating... [...] @@ -104,25 +109,23 @@ nuxt:generate HTML Files generated in 7.6s +6ms ``` Great, but what if we have **dynamic params**? -1. Use a `Function` which returns a `Promise` -2. Use a `Function` with a `callback(err, params)` + +1. Use a `Function` which returns a `Promise`. +2. Use a `Function` with a `callback(err, params)`. ### Function which returns a Promise `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id - }) - }) - } + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) } } ``` @@ -130,46 +133,42 @@ module.exports = { ### Function with a callback `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) }) - callback(null, routes) - }) - .catch(callback) - } + .catch(callback) } } ``` ### Speeding up dynamic route generation with `payload` -In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that with by modifying the code above to this: +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return { - route: '/users/' + user.id, - payload: user - } - }) - }) - } + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) } } ``` @@ -177,8 +176,46 @@ module.exports = { Now we can access the `payload` from `/users/_id.vue` like so: ```js -async asyncData ({ params, error, payload }) { - if (payload) return { user: payload } - else return { user: await backend.fetchUser(params.id) } -} +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } ``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + +_Note: this option could be useful using [Netlify](https://netlify.com) or any static hosting using HTML fallbacks._ + +## concurrency + +- Type: `Number` +- Default: `500` + +The generation of routes are concurrent, `generate.concurrency` specifies the amount of routes that run in one thread. diff --git a/ru/api/configuration-generate.md b/ru/api/configuration-generate.md index 88e13b8c5..47c850770 100644 --- a/ru/api/configuration-generate.md +++ b/ru/api/configuration-generate.md @@ -1,7 +1,221 @@ --- -title: Configuration GENERATE +title: 'API: свойство `generate`' +описание: Настройте генерацию статического веб-приложение из универсального веб-приложения. --- -# Generate +# Свойство generate -> Документация скоро будет +- Тип: `Object` + +> Настройте генерацию статического веб-приложение из универсального веб-приложения. + +При запуске `nuxt generate` или вызове `nuxt.generate()`, Nuxt.js будет использовать конфигурацию, определенную в свойстве `generate`. + +## dir + +- Тип: `String` +- По умолчанию: `'dist'` + +Имя папки создаваемой `nuxt generate`. + +## fallback + +- Тип: `String` или `Boolean` +- По умолчанию: `'200.html'` + +Путь к SPA fallback. Этот файл можно использовать при развертывании сайтов на статическом хостинге. Он возвращается к режиму «spa», когда маршрут не сгенерирован. + +## interval + +- Тип: `Number` +- По умолчанию: `0` + +Интервал между двумя циклами рендеринга, чтобы избежать убийства API вызовами из веб-приложения. + +## minify + +- Тип: `Object` +- По умолчанию: + +```js +minify: { + collapseBooleanAttributes: true, + collapseWhitespace: false, + decodeEntities: true, + minifyCSS: true, + minifyJS: true, + processConditionalComments: true, + removeAttributeQuotes: false, + removeComments: false, + removeEmptyAttributes: true, + removeOptionalTags: true, + removeRedundantAttributes: true, + removeScriptTypeAttributes: false, + removeStyleLinkTypeAttributes: false, + removeTagWhitespace: false, + sortAttributes: true, + sortClassName: false, + trimCustomFragments: true, + useShortDocТип: true +} +``` + +Вы можете изменить конфигурацию [html-minifier](https://github.com/kangax/html-minifier), используемую Nuxt.js для минимизации HTML-файлов, созданных во время генерации. + +## routes + +- Тип: `Array` + +[Dynamic routes](/guide/routing#dynamic-routes) игнорируются командой `generate`. + +Example: + +```bash +-| pages/ +---| index.vue +---| users/ +-----| _id.vue +``` + +Nuxt.js сгенерирует только маршрут `/`. + +Если вы хотите, чтобы Nuxt.js генерировал маршруты с динамическими параметрами, вам необходимо подать Array динамических маршрутов. + +Добавляем маршруты для `/users/:id` в `nuxt.config.js`: + +```js +module.exports = { + generate: { + routes: ['/users/1', '/users/2', '/users/3'] + } +} +``` + +Затем, когда мы запускаем `nuxt generate`: + +```bash +[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 +``` + +Отлично, но что, если у нас есть **динамические параметры**? + +1. Подайте `Function`, который возвращает `Promise`. +2. Подайте `Function` который принимает первым аргументом `callback(err, params)`. + +### Функция, которая возвращает Promise + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) + } +} +``` + +### Функция с обратным вызовом + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } +} +``` + +### Ускорение создания динамических маршрутов с помощью `payload` + +В приведенном выше примере мы используем `user.id` с сервера для генерации маршрутов, но отбрасываем остальную часть данных. Обычно, нам нужно получить данные заново снова изнутри страницы-компонента `/users/_id.vue`. Хотя мы могли-бы это сделать, нам, вероятно, прийдется установить `generate.interval` на что-то вроде `100`, чтобы не зжечь API-сервер до тла. Поскольку это увеличит время генерации, было бы веселее передать весь доступный объект `user` в контекст `_id.vue`. Мы делаем это, модифицируя приведенный выше код: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + +Теперь мы можем наслаждаться обьектом `payload` внутри `/users /_id.vue` следующим образом: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Тип: `Boolean` +- По умолчанию: `true` + +По умолчанию запуск `nuxt generate` будет создавать для каждого маршрута по папке с `index.html`. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +Если установлено значение false, в соответствии с путем маршрута генерируются HTML файлы: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + +_Примечание: этот параметр может быть полезен для развертываний на [Netlify](https://netlify.com) или другого статический хостинг, использущий HTML fallbacks._ + +## concurrency + +- Тип: `Number` +- По умолчанию: `500` + +Генерация маршрутов является параллельной, `generate.concurrency` указывает количество маршрутов, которые запускаются в одном куске. diff --git a/zh/api/configuration-generate.md b/zh/api/configuration-generate.md index fd55d5e75..7cb6ddb41 100644 --- a/zh/api/configuration-generate.md +++ b/zh/api/configuration-generate.md @@ -1,5 +1,5 @@ --- -title: "API: generate 属性配置" +title: 'API: generate 属性配置' description: 配置 Nuxt.js 应用生成静态站点的具体方式。 --- @@ -18,6 +18,21 @@ description: 配置 Nuxt.js 应用生成静态站点的具体方式。 `nuxt generate` 生成的目录名称。 + +## fallback + +- Type: `String` or `Boolean` +- Default: `'200.html'` + +The path to the SPA fallback. This file can be used when doing deploys of generated sites to static hosting. It falls back to `mode: 'spa'` when a route isn't generated. + +## interval + +- Type: `Number` +- Default: `0` + +Interval between two render cycles to avoid flooding a potential API with API calls from the web application. + ## minify - 类型: `Object` @@ -70,11 +85,7 @@ Nuxt.js 在生成静态文件时使用 [html-minifier](https://github.com/kangax ```js module.exports = { generate: { - routes: [ - '/users/1', - '/users/2', - '/users/3' - ] + routes: ['/users/1', '/users/2', '/users/3'] } } ``` @@ -102,41 +113,1280 @@ nuxt:generate HTML Files generated in 7.6s +6ms ### 返回一个 Promise 对象的函数 `nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios + .get('https://my-api/users') + .then(res => res.data.map(user => '/users/' + user.id)) + } + } +``` + +### 参数是一个 Node 风格的回调函数 + +`nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function () { - return axios.get('https://my-api/users') - .then((res) => { - return res.data.map((user) => { - return '/users/' + user.id + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) }) + .catch(callback) + } +} +``` + + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) }) + .catch(callback) } } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } } +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } ``` -### 参数是一个 Node 风格的回调函数 +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } +} +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: `nuxt.config.js` + ```js const axios = require('axios') module.exports = { generate: { - routes: function (callback) { - axios.get('https://my-api/users') - .then((res) => { - var routes = res.data.map((user) => { - return '/users/' + user.id + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) }) + .catch(callback) + } +} +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) callback(null, routes) }) .catch(callback) } } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) +} } ``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) +} +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } +} +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } +} +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } +} +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) +} +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } +} +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } + } +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + routes: callback => + axios + .get('https://my-api/users') + .then(res => { + const routes = res.data.map(user => '/users/' + user.id) + callback(null, routes) + }) + .catch(callback) + } +} +``` + +### Speeding up dynamic route generation with `payload` + +In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this: + +`nuxt.config.js` + +```js +const axios = require('axios') + +module.exports = { + generate: { + routes: () => + axios.get('https://my-api/users').then(res => + res.data.map(user => ({ + route: '/users/' + user.id, + payload: user + })) + ) + } +} +``` + +Now we can access the `payload` from `/users/_id.vue` like so: + +```js +asyncData: async ({ params, error, payload }) => + payload + ? { user: payload } + : { user: await backend.fetchUser(params.id) } +``` + +## subFolders + +- Type: `Boolean` +- Default: `true` + +By default, running `nuxt generate` will create a directory for each route & serve an `index.html` file. + +Example: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +When set to false, HTML files are generated according to the route path: + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` + +_Note: this option could be useful using [Netlify](https://netlify.com) or any static hosting using HTML fallbacks._ + +## concurrency + +- Type: `Number` +- Default: `500` + +The generation of routes are concurrent, `generate.concurrency` specifies the amount of routes that run in one thread.