Nuxt Generate with multiple dynamic route categories

Question

I'm using Nuxt.js and am using my nuxt.config.js file to generate my dynamic page routes as static pages.

I am using a static products.json file locally rather than an API located in my static folder. I can now generate a list of dynamic routes statically

nuxt.config.js file

import servers from './static/servers.json'

const dedicatedServers = () => {
        return new Promise(resolve => {
            resolve(servers.dedicatedServers.map(server => `/products/dedicated-servers/${server.id}`))
        })
    }

 generate: {
    routes: dedicatedServers
}

How can I now add more product categories to my generate object?

I've tried to add an array but it does not work on the routes:

generate:{routes:[dedicatedServers,cloud-servers]}//does not work

I Have now tried to make a new method and return this but this does not work either.

nuxt.config.js - Does not work

import servers from './static/servers.json'

const dynamicRoutes = async() => {
    let dedicatedServers = () => {
        return new Promise(resolve => {
            resolve(servers.dedicatedServers.map(server => `/products/dedicated-servers/${server.id}`))
        })
    }
    const cloudServers = () => {
        return new Promise(resolve => {
            resolve(servers.cloudServers.map(server => `/products/cloud-servers/${server.id}`))
        })
    }
    const routes = dedicatedServers;
    return routes;
}


    generate: {
        routes: dynamicRoutes
}

ottz0 ottz0 · Accepted Answer · 2020-04-29T04:58:18

I managed to create multiple categories by returning the promise from the generate object in which I mapped over each category in a variable.

generate: {
    routes: function () {
        let dedicatedServers = servers.dedicatedServers.map(server => `/products/dedicated-servers/${server.id}`)
        let cloudServers = servers.cloudServers.map(server => `/products/cloud-servers/${server.id}`)
        return Promise.all([dedicatedServers, cloudServers]).then(values => {
            return values.join().split(',');
        })
    }
}

Nuxt Generate with multiple dynamic route categories

1 Answers