How to use router-link and exactActiveClass inside islands?

[mseele]

Description 📖

The router-link component is not resolved when used inside a Vue island.

What you see is the following error message in the console:

Failed to resolve component: router-link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

Screenshots 📷

[ElMassimo]

Failed to resolve component: router-link

This happens because the island does not include vue-router, which is a dependency you typically would not want when using islands, since it's meant for single-page applications and would increase the bundle size.

Use plain a tags when inside islands.

[mseele]

Hi Máximo,

thanks for your answer. The problem with plain a tags is that i lose the https://router.vuejs.org/api/#exact-active-class feature. This would be really nice and helpful.

Is there a way to have a client:none sfc inside a client:load sfc? That would be a solution for me, too.
Here I've created a small example that you know what i mean: https://stackblitz.com/edit/iles-jymhwz?file=src/components/LinkDemo.vue

[ElMassimo]

The problem with plain a tags is that i lose the exact-active-class feature

Without the routes, Vue Router wouldn't be able to detect whether that path exists (no matching route).

You can recreate that feature in a custom component by checking window.location, which should be a lot lighter than using Vue Router.

Is there a way to have a client:none sfc inside a client:load sfc?

Nesting hydration directives inside islands is not supported, and supporting something like client:none inside islands would require manipulating the Vue SFC code of the island and statically replace the "placeholder" of the component with the pre-rendered content. Seems like a very complex solution.

[ElMassimo]

@mseele Since vue-router would not be available in the production bundle, a workaround is to pass router-link to islands using slots:

<template>
  <ExampleIsland :data="data" client:load>
    <router-link to="/" exactActiveClass="text-red-500">Home</router-link>
  </ExampleIsland>
</template>

Have in mind that the content passed to islands using slots will be pre-rendered at build time as static HTML (no JS to hydrate it or re-render it), but in most cases that should be enough. You can also used named slots if needed.

[mseele]

@ElMassimo Thanks. I go with the named slots to have more static html and less js :)