Developmint / vue-link

One component to link them all 🔗

VueLink - One component to link them all!

Lightweight wrapper component for external and vue-router links.

🔥 Features

• Tiny functional component
• SSR-safe (works with Nuxt.js)
• Well tested and documented
• Compatible with Node 8.0+
• Vue (and vue-router) as the only dependencies
• Highly customizable

🔎 Getting started

📦 Through NPM

$ npm install vue-link

Synchronous import

import VueLink from 'vue-link'
// or the slash-forcing variants
// import { VueLink, VueLinkAddSlash, VueLinkStripSlash } from 'vue-link'

export default {
  components: {
    VueLink
  }
}

Async import

export default {
  components: {
    VueLink: () => import('vue-link')
  }
}

🔗❌ Using a CDN

Sorry! No CDN available for VueLink right now.

🛠️ Usage

Handling

Before going into detail, keep in mind that you can customize the component as you can do it with a normal <a> or <router-link>/<nuxt-link> tag.

All props will be passed down to the internal implementation of vue-link in case the link is not external.

Link detection

If the passed link starts with http, it'll be treated as external link. You can use the external prop to force treating it as external link as well.

Prop overview

Prop	External only?	Comment
to	❌	The target of the link. If not set, the link will not be bound (no "empty href")
rel	✅	Will be passed as rel attribute to the anchor tag
newTab	✅	If truthy, set target attribute to _blank
target	✅	Will be passed as target attribute to the anchor tag
slashes	Internal only!	Settings: 'strip', 'add' or false(default). Will force slash endings to either strip or add trailing slashes to your url (/a -> /a/ in add mode, vice-versa in strip. Only for internal links! Also, this will not take query strings into account. Please use router-link's query option for them
external	✅	Force to treat the link as external link (use anchor instead of vue-router tag)

Types

With v1.4.0 two extra components were introduced that reflect the slashes settings. You can import them (like the normal VueLink component as named imports). The default export of the package is still the normal VueLink component so no breaking changes have been introduced.

Since v1.6.0, a dedicated ForNuxt export is available that'll use NuxtLink instead of RouterLink under the hood

import { VueLink, VueLinkAddSlash, VueLinkStripSlash, ForNuxt } from '../lib'

Example usage

 <vue-link
          :to="`/feed.xml`"
          :external="true"
          :new-tab="true"
          class="block mt-4 lg:inline-block lg:mt-0 w-6 h-6 mr-6 no-underline">
    This is the link text ;)
</vue-link>

⚙️ Contributing

Please see our CONTRIBUTING.md

📑 License

MIT License - Copyright (c) Developmint - Alexander Lichter