DEV Community

Wrapping nuxt-links to make your Vue.js components Nuxt.js agnostic.

Tyler Scott Williams on March 23, 2020

At work we've got a component library built in Vue.js. It's great because we can take the components our designers create, build them once, and the...
Read full post
Collapse
 
midblue profile image
Jasper Stephenson •

Maybe I'm wrong, but couldn't you skip all the 'nuxt' prop passing if you just:
a) check for this.$nuxt and
b) check for a starting slash on the 'to' prop?

i.e.

<nuxt-link v-if="isNuxtLink" :to="to"><slot></slot></nuxt-link>
<a v-else :href="to"><slot></slot></a>

...
props: ['to'],
computed: {
    isNuxtLink() {
        return this.$nuxt && this.to.substring(0,1) === '/'
    }
}
Collapse
 
ogdenstudios profile image
Tyler Scott Williams •

Oh yeah! That'll do it. I appreciate the feedback and I'll probably go ahead and use this. Thanks!