onBeforeRoute+vue-router disable <a> handling,

[hlpmenu]

Description

Im working on a nuxt-like setup using vike+vue+vue-router, but have ran into a small, but weird issue, that i cant find a solution for, and dident get a answer for on discord.

Setup

• Not using +page.vue
• All logic in renderer/
• Using vue-router
• No head, data, layout, etc

Routes

Custom implementation of file based routing, working just like Nuxt.
Ie:

• src/pages/index.vue > /
• src/pages/about.vue > /about
• src/pages/mypage/index.vue > /mypage
• src/pages/mypage/anotherpage/[...slug].vue > /mypage/anotherpage/:slug

Problem

Using

<a href="/about">About</a>

Will instantly init a new instance of the app, due to being caught by vikes href handling.

using:

<a href="/about" @click.prevent="router.push('/about')">About</a>

<!-- or -->
<RouterLink to="/about">About</RouterLink>

Ofc works, but as the normal workflow would be == non SPA navigation, having to add the external attr to it is not ideal.

Code

Simplified example of onBeforeRoute:

// Virtual module exports const Routes = [path, component,...] on compile time.
import Routes from 'virtual:routes';

function onBeforeRoute(pageContext) {
  if (Routes.find((r) => r.path === urlPathname)) {
    const Route = {/* Valid route obj for vue-router... */}
    return {
      pageContext: {
        match: true,
        pageProps: Route,
        // construct relevant pageContext
      },
  } else {
    // not found
  }
}
}

Dummy { route } +route.js:

const route = '/*';

export { route };

Simplified onRenderHtml:

import { renderToString, renderToNodeStream } from '@vue/server-renderer';
import { escapeInject, dangerouslySkipEscape } from 'vike/server';
import { createApp } from './app';

async function onRenderHtml(pageContext) {
  const { urlPathname, urlOriginal, pageProps  } = pageContext;


  const { app, router, pinia } = createApp(pageProps);

  // Push the URL into the router and waiting until it's ready
  router.push(urlOriginal);
  await router.isReady();
  
  // Render the app to HTML
   const appHtml = await renderToString(app);
 
    // Dehydrate Pinia state into the `pageContext`
  pageContext._piniaInitialState = pinia.state.value;

    //...
  const documentHtml = escapeInject`the html`;
 return {
    documentHtml,
    pageContext: {
      ...pageContext._piniaInitialState,
      pageProps,
      enableEagerStreaming: true, // placehodler

    },
  };
}

onRenderClient:

Similar to onRenderHtml, but client

app.js(createApp & createClientApp)

Basically just this with some client/ssr specific things within both:

  const app = createSSRApp(App); // or createApp, also test version w createVaporApp
  const pinia = createPinia();
  const router = createRouter(pageProps); // Pass pageContext to the router

// For clientside one :
  if (piniaState) {
    Object.assign(pinia.state.value, piniaState); // Merge state
  }

  app.use(router);
  app.use(pinia);

  return { app, router, pinia };

router.js

import { createMemoryHistory, createWebHistory, createRouter as _createRouter } from 'vue-router';
import Routes from 'virtual:routes'; // eslint-disable-line

export { createRouter, Routes };


/**
 * @function createRouter
 * @param {import('vike/types').PageContextServer} pageContext The page context
 * @returns {import('vue-router').Router} The Vue Router instance
 */
function createRouter(pageProps) {
  return _createRouter({
    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
    routes: Routes,
    props: (route) => ({ id: route.params.id, ...pageProps }), // Inject pageContext as props

  });
}

Rest is not relevant for this issue, but i will add it here, if needed.

[brillout]

Regarding Vue Router, see https://vike.dev/vue-router. In other words: why do you want to use Vue Router instead of Vike's built-in router?

Regarding customizing filesystem routing it's a non-goal because we believe convention is more important than frivolous preference. Feel free to disagree.

[hlpmenu]

You misunderstood a bit, the issue is not with those parts, its specifically the tag handeling i cant find any good references to in the docs,

Everything is working except if a tag is used, it creates a second init of the entire vue app