Conflicting payloads for dynamic Index Routes

[alidcast]

I'd like to pass a payload to non-dynamic routes, so that they can have access to all the data passed to dynamics. For example, it'd be useful for abstracting away content navigation, as you can pass the main root, all it's content's permalinks and titles as a payload.

However, trying to do this with the index route causes problems.

This directory setup doesn't work:

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

While this setup works:

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

The problem is that with the index routes, when you generate them, the routes are not prefixed by their base path.

Approach A:

routes: [
    { name: '/', payload: allData }
  { name: 'installation', payload: slugData }
]

Approach B:

routes: [
  { name: '/', payload: allData }
  { name: 'index/installation', payload: slugData }
]

While approach A generates the index routes with their intended permalink path, the payload of the base non-dynamic index root conflicts, as they are all treated as top level dynamic routes.

Approach B does not conflict, but you have to access the route at index/dynamicPath, which defeats the purpose.

It'd be extremely useful to pass payloads to non-dynamic routes. For this to work with index routes, however, the index prefix needs to be treated differently.

[alidcast]

Another problem in doing this is that the payload does not persist. So if you pass a payload to guide and then got to guide/:slug, then guide's payload doesn't is undefined and only the nested dynamic route receives a payload.

[Atinux]

Hi @alidcastano

payload is only used for nuxt generate to avoid making API call for example when rendering the HTML

Can you create a reproduction for the payload approach with different routes @alidcastano ?

[alidcast]

Yeah, I've been using the payload to pass the content's data to pages for the static server build, since requesting the data from serverMiddleware doesn't work in that scenario.

Here's are two examples: https://github.com/nuxt-community/nuxtent/tree/master/examples/payload-example

1. You can see the regular problem if you do:

cd examples/other-example
npm install
IS_STATIC=true npm run generate

Then click on a link and refresh the page. The navigation links disappear.

2. You can see the more specific index route problem if you do:

cd examples/index-example
npm install
IS_STATIC=true npm run generate

You'll see that for index routes it doesn't even generate since there are conflicts with the template / payload of the parent index route and that of its nested children, which seem to be all treated as top level dynamic routes.

---

I understand that it was mainly used for making API calls, but then what would you suggest to use for this scenario? The goal is to incorporate Nuxtent as much into Nuxt as possible, so instead of creating my own route components, I'm just trying to pass the data to them on the static server build so that Nuxt can do the rest.

[alidcast]

Also, isServer still runs on npm run generate so I had to use IS_STATIC as env variable (https://github.com/nuxt-community/nuxtent/blob/master/lib/plugin.js#L45) so that I could distinguish between static and dynamic server builds.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.