Loading pageContext when using Vue Router

[michaelhthomas]

When using Vue Router for client side routing, like in the example in this repo, it is currently not possible to fetch the page context for each page (assuming there is one onBeforeRoute function which generates different a different pageContext for each page). Would it be possible to export the getPageContext helper from the vite-plugin-ssr router and use that to update the page context on route change, or is there a better approach?

[brillout]

#414

[michaelhthomas]

Since I'm migrating a large existing app that depends heavily on Vue Router, I'd rather keep the routing setup more or less as is. I think rather than a deep integration with the vite-plugin-ssr client side router, all I need is to be able to have Vue Router fetch the correct pageContext on each route change. Should I just write something myself for this, since obviously fetching pageContext from json files isn't particularly complex, or would it be possible to have an api for just that?

Here's an example of what I'm looking for more or less:

router.beforeEach(async (to, from, next) => {
    const newPageContext = await getPageContext(to.path)
    await render(newPageContext)
    next()
})

[brillout]

If routing is done by Vue Router, then there is (obviously) nothing VPS can do here. Either Vue Router provides a hook for this (it probably does?) or you're out of luck.

[michaelhthomas]

It does, the code sample above is Vue Router code. The only part I need that isn't covered by VPS afaik is the getPageContext function in that example, which would take the given route and fetch the updated pageContext for the new page.

For now, I'm just fetching $route/index.pageContext.json and then updating the existing pageContext using Object.assign, but it feels a bit hacky so I was wondering if there's a better way.

[brillout]

I'm not sure what you mean but I'll think you'll need deep integration for that, aka onBeforeRoute()

…

On Wed, Jan 4, 2023 at 4:16 PM Michael Thomas ***@***.***> wrote: It does, the code sample above is Vue Router code. The only part I need that isn't covered by VPS afaik is the getPageContext function in that example, which would take the given route and fetch the updated pageContext for the new page. — Reply to this email directly, view it on GitHub <#587 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRR2FFNVQ4T3N7DSWXDWQWH6XANCNFSM6AAAAAATQI2LUI> . You are receiving this because you commented.Message ID: ***@***.*** com>

[michaelhthomas]

Here's a repo that shows what I'm trying to achieve. The approach taken in this repo appears to work fine, it just feels like a hack.
https://github.com/michaelhthomas/vite-plugin-ssr-repro
https://github.com/michaelhthomas/vite-plugin-ssr-repro/blob/main/renderer/_default.page.client.ts#L7

[brillout]

I didn't dig too much, but I'm thinking if you set clientRouting to true you may skip the need for manually fetching the JSON data. Although it seems like you already tried that.

[brillout]

FYI #568.

[brillout]

Curious: why do you want to use Vue Router in the first place? Why not only VPS's built-in router instead?