Vue Routing Issue: onData executes after page render

[jemmyk]

Description

Summary

Hi Rom:

When using Vike with Vue Router integration, the +onData.ts hook executes after the page component (Home.vue) is rendered.

With Vike’s built-in router, the order is correct:

1 +onData.ts
2 Home.vue

But with Vue Router, the execution order becomes:

2 Home.vue <-- incorrect
1 +onData.ts <-- runs too late

This causes the page to render before data and store initialization are ready.

---

Expected Behavior

+onData.ts should run before the page renders, just like it does with Vike's built-in router.

---

Steps to Reproduce

The code modification described below has been published: https://github.com/jemmyk/vike-vue-router

1. Start from Vike's minimal example

2. Integrate Vue Router following Vike docs

3. Add console logs in:

   • pages/+onData.ts
   • pages/+Home.vue and pages/+About.vue

4. Navigate client-side to the page

Observed order:
+Home.vue ❌
+onData.ts ❌

Expected:
+onData.ts ✔
+Home.vue ✔

---

Request

Is this intended?
If not, could Vike ensure onData runs before rendering when using Vue Router as well?
Alternatively, is there anything we can do to work around this issue for now?

Thanks!

[brillout]

What is it you're trying to achieve?

[jemmyk]

What I'm trying to achieve is:

On client-side navigation, I need +onData to run before the page component is rendered.

Reason:
I use onData to populate a Pinia store.
If the page renders first (before onData runs), the store is still empty and the page renders with missing data or even throws errors.

With Vike’s built-in router, the execution order is:

1. +onData
2. +Page.vue ✔ (correct — the page receives ready data)

But with the Vue Router integration, the order becomes:

1. +Page.vue ❌ (store is not ready)
2. +onData

This causes incorrect rendering on client-side navigation.

---

Additional context

Originally, before using Vike, we updated our store inside beforeEnter of router.addRoute.
After adopting Vike, we moved this logic into +onData to follow Vike’s recommended architecture.
However, because onData runs too late when using Vue Router, the page renders with incomplete data.

We don’t want to continue relying on beforeEnter, for several reasons:

1. Even though our app currently depends on Vue Router, we want our code structure to be fully aligned with Vike’s conventions, especially using +onData for data loading.
2. We plan to eventually remove Vue Router, so avoiding router-specific logic is important.
3. It’s unclear whether beforeEnter works reliably with SSR or if it introduces inconsistencies between server and client.

---

What we hope to achieve

If +onData can run before +Page.vue — the same as with Vike’s built-in router — that would fully solve the problem.

If this is not possible with the Vue Router integration, we would like to understand the recommended approach.
Should we duplicate the logic — use +onData for the first (SSR) render and beforeEnter for client-side navigation?
Is this the expected design pattern when combining Vike with Vue Router?

[brillout]

use +onData for the first (SSR) render and beforeEnter for client-side navigation?

That actually seems like a valid approach.

Client-side navigation is done entirely by Vue Router, right? Since Vike isn't involved at all, no Vike hook is called (so +onData is also not called). Thus, the Vue Router <-> Pinia integration is independent of Vike.

One thing I've been considering is to develop an AI prompt to facilitate migration from Vue Router to Vike's router. I wonder if the AI prompt can be designed so that it would enable you to do the migration very quickly. I feel like it's possible, but it would need to be tested. I'm happy to assist.

Keep me updated. I went ahead a linked this discussion at https://vike.dev/vue-router.

[jemmyk]

I’m not able to make this work with beforeEnter.
As shown in the screenshot

1. I removed the +data.ts file (to simulate client-side navigation, with the data logic moved to beforeEnter)
2. I added an artificial delay (sleep or fetch data) inside the beforeEnter function
3. I triggered navigation from / to /about by clicking the 'About' link for the first time

The browser URL does not update.

If this issue with Vue Router cannot be resolved, it could significantly affect the migration of existing Vue projects. I believe this issue is worth investigating.

[brillout]

This seems more like a Vue Router question than a Vike one? I ain't sure what Vike could do here to help?

[jemmyk]

I’ve replied to this issue #2894.

Once Vue Router (with Vike) is working reliably on its own, we can then continue the discussion about its integration with Vike.