Support other `router-link` compatible components

[ion1]

Gridsome has a g-link component, equivalent to nuxt-link. As of now, BootstrapVue has built-in support for nuxt-link; it would be nice to have support for g-link as well.

Rather than having to detect and support every Vue-based framework, maybe it would be reasonable to have the ability to configure BootstrapVue to use a specified router-link-compatible component. I apologize if this already exists and I missed it.

Thank you!

[jacobmllr95]

@tmorehouse Interesting idea but I don't think we can solve this by simply adding a tag or link-tag prop to each component that uses <b-link>. A global configuration option would be the better choice her, but we currently don't have something like that.

[tmorehouse]

Although we would need to find a way to add props dynamically (if Gridsome adds any new ones). Currently the Gridsome docs only show 4 props for their g-link component (all of which are standard router-link props). And there is no mention of a injected object in the VMs for detection of Gridsome presence (like Nuxt.js` does)

It might be best to wait until Gridsome reaches a more stable/mature release before determining the best approach. The current use of router-link in BootstrapVue will work with Gridsome (minus any of the link prefetching features).

[eddybrando]

If you want to leverage the Gridsome linking features tho, you can quickly create a simple NavItem.vue component in the meantime, like this:

<template>
  <li class="nav-item">
    <g-link active-class class="nav-link" exact-active-class="active" target="_self" :to="to">
      <slot/>
    </g-link>
  </li>
</template>

<script>
export default {
  name: 'NavItem',
  props: { to: { required: true, type: String } },
};
</script>

[tmorehouse]

If gridsome exposed a Vue.protototype injection (i.e. so that this.$gridsome exists on all component VM instances), we could auto detect that the app is running under gridsome and change the use of router-link to g-link

[eddybrando]

If gridsome exposed a Vue.protototype injection (i.e. so that this.$gridsome exists on all component VM instances), we could auto detect that the app is running under gridsome and change the use of router-link to g-link

Sounds like feature request time 😬.

Would you do the honours or should I, @tmorehouse? I believe you could explain it better than me.