Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support other router-link compatible components #2627

Closed
ion1 opened this issue Feb 18, 2019 · 5 comments · Fixed by #5358
Closed

Support other router-link compatible components #2627

ion1 opened this issue Feb 18, 2019 · 5 comments · Fixed by #5358

Comments

@ion1
Copy link

ion1 commented Feb 18, 2019

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
Copy link
Member

jacobmllr95 commented Feb 18, 2019

@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
Copy link
Member

tmorehouse commented Feb 18, 2019

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).

@jacobmllr95 jacobmllr95 changed the title Support other router-link-compatible components Support other router-link compatible components Apr 9, 2019
@eddybrando
Copy link
Contributor

eddybrando commented Apr 23, 2019

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
Copy link
Member

tmorehouse commented Apr 23, 2019

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
Copy link
Contributor

eddybrando commented Apr 23, 2019

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.

@tmorehouse tmorehouse reopened this May 13, 2020
@stale stale bot removed the Status: Stale label May 13, 2020
jacobmllr95 added a commit that referenced this issue May 14, 2020
…<g-link>` (closes #2627) (#5358)

* feat(b-link): add support 3rd party router links such as Gridsome's `<g-link>`

* Update link.js

* Update router.js

* Update link.js

* Update router.js

* Update link.js

* Update link.spec.js

* Update link.spec.js

* Update link.spec.js

* Update link.spec.js

* Update router.js

* Update router.js

* Update link.spec.js

* Update link.spec.js

* Update common-props.json

* Update link.js

* Update link.js

* Update common-props.json

* Update README.md

* Update README.md

* Update avatar.js

* Update common-props.json

* Update README.md

* Update README.md

* Update README.md

* Update common-props.json

* Update package.json

* Update common-props.json

* Update package.json

* Update README.md

* Update avatar.js

* Update README.md

* Merge remote-tracking branch 'origin/dev' into blink-gridsome

* Make sure to always omit `<b-link>`'s `event` prop for other components

* Add `routerComponentName` to global config

* Update pagination-nav.js

* Update pagination-nav.js

* Omit `routerTag` for all other components

* Unify link detection in other components

* Update common-props.json

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants