One component to link them all πŸ”—
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test test: pin VTU Jan 20, 2019
.babelrc feat: initial release May 9, 2018
.eslintrc.js chore: use @nuxtjs/eslint-config Oct 18, 2018
.gitignore feat: initial release May 9, 2018
.travis.yml build: switch to yarn Oct 17, 2018
CHANGELOG.md chore(release): 1.6.1 Jan 20, 2019
CONTRIBUTING.md docs: add information about conventional commit guidelines in CONTRIB… May 14, 2018
LICENSE.md feat: initial release May 9, 2018
README.md docs: reflect ForNuxt feature Jan 20, 2019
commitlint.config.js
package.json chore(release): 1.6.1 Jan 20, 2019
renovate.json Update renovate.json Oct 18, 2018
yarn.lock test: pin VTU Jan 20, 2019

README.md

VueLink - One component to link them all!

Build Status Code coverage Downloads Version License We use Conventional Commits Thanks badge

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