Why nuxt generate full static doesn't extract payload in some pages?

Question

In my NUXT project I created all my routes in a separate script and use it as a module in nuxt.config.

The routes are created in that form:

{
    path: `/route1-${myvar}/`,
    component: resolve(__dirname, '../pages/myPageComponent.vue'),
    meta: {
        data1: {
            ...someDataHere
        }
    }
}

and used as a module as you can see here:

const routes = () => {
    return [...allMyRoutesHere]
}

export default async function routerModule() {
    const dynamicsRoutes = await routes()
    this.options.router.extendRoutes = function(routes) {
        const routesToAdd = dynamicsRoutes
            .map(({
                path,
                component,
                meta
            }) => {
                return {
                    path,
                    component,
                    meta
                }
            })
        routesToAdd.forEach((route) => {
            routes.push(route)
        })
        routes.forEach((route) => {
            route.caseSensitive = true
        })
    }
}

The module is imported in my nuxt.config.js file

modules: [
    '~/modules/router.js'
]

All the pages are generated and they works, but when I try to generate my project full static adding target: 'static' sometimes the payload works and sometimes no. I figured out that work only the pages that are generated without setting the component. If in routes function above I return directly the path to a page that has same url and file name, e.g. "/test" -> "test.vue" the payload is returned without problem, but if I return a dynamic route e.g. {path: /my-route-${myvar}-dynamic/, component: resolve(__dirname, '../pages/myPageComponent.vue')} the payload is fetched but undefined in the asyncData function.

asyncData({
    route,
    payload,
    error
}) {
    try {
        const {
            meta = []
        } = route
        let dataHere = null
        if (payload) { // payload is undefined
            dataHere = payload
        } else {
            const dataHere = meta[0].data
        }
        return {
            dataHere
        }
    } catch (err) {
        error({
            statusCode: 404,
            message: 'Page not found'
        })
    }
}

I also tried to pass the function for routes generating in nuxt.config.js as you can see here without success.

generate: {
    routes: getDynamicRoutesFunction,
    crawler: false,
    fallback: true,
    interval: 20,
    concurrency: 200
}

Using this solution ALL the routes whit url different from page.vue name, during the generate are not created and my console is full of "This page could not be found".

I also tried to use the static version with the payload extractor found here but without success.

I didn't find a solution about this problem in the official guide and I tried to search a solution but I didn't fine anything useful, I found this and this but it doesn't work in my case. I don't know what to do for having a full static generated solution.

Why nuxt generate full static doesn't extract payload in some pages?

0 Answers0