The generate Property

  • Type: Object

Configure the generation of your universal web application to a static web application.

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

When launching nuxt generate or calling nuxt.generate(), nuxt.js will use the configuration defined in the generate property.

dir

  • Type: String
  • Default: 'dist'

Directory name created by nuxt generate.

interval

  • Type: Number
  • Default: 0

Interval between 2 render to avoid flooding the API calls made to a potential API from the web application.

minify

  • Type: Object
  • Default:
minify: {
  collapseBooleanAttributes: true,
  collapseWhitespace: true,
  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: true,
  trimCustomFragments: true,
  useShortDoctype: true
}

You can change the default configuration of html-minifier used by nuxt.js to minify html files created during generate process.

routes

  • Type: Array

Dynamic routes are ignored by the generate command.

Example:

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

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.

We add routes for /users/:id in nuxt.config.js:

module.exports = {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

Then when we launch 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

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)

Function which returns a Promise

nuxt.config.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
        })
      })      
    }
  }
}

Function with a callback

nuxt.config.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
        })
        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 with by modifying the code above to this:

nuxt.config.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
          }
        })
      })
    }
  }
}

Now we can access the payload from /users/_id.vue like so:

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

Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !