One component to link them all 🔗

Overview

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

Issues
Owner
Developmint GbR
An experienced German software agency building customer-tailored apps, websites and offering Nuxt.js consulting
Developmint GbR
Smart Phone recommender

Mobile phones have become extensions of ourselves, and living without them is almost unimaginable. Work and home life have also merged, with the office always at one’s fingertips. More and more we rely on the keen intelligence that our mobile phones provide, not only for work but also for family time, networking and entertainment.

null 3 May 27, 2021
Quant-UX standalone

Vue-Low-Code Vue-Low-Code is an open-source project that turns Figma and Quant-UX designs into fully functional VUE applications. By ensuring that the

Klaus Schaefers 121 Jul 27, 2021
Customisable rating system for Vue.js 2

Vue-rate-it - Extensible Rating Component for Vue.js 2 Vue-rate-it is an extensible, highly customisable rating system for Vue.js 2. It includes four

Craig Humphreys 92 Jul 18, 2021
A fully working, most feature-rich Vue.js terminal emulator

vue-command A fully working, most feature-rich Vue.js terminal emulator. See the demo and check the demo source code. Features Parses arguments with g

Julian Claus 158 Jun 29, 2021
A repository to bootstrap Figma low code projects

Figma-Low-Code Figma-Low-Code is an OpenSource project, that allows to use Figma designs directly in VUE.js applications. The low code approach reduce

Klaus Schaefers 418 Jul 23, 2021
A Vuetify ready Vue.js autosuggest component for the Google Places API.

Vuetify Google Autocomplete A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API. Versions Latest Beta: 2.0.0-beta.8 Late

Madimetja Shika 93 Jan 28, 2021
↔️ ↕️ 🔄 Vue.js wrapper for Moveable

Vue Moveable A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable. Moveable Drag

Max Lyashuk 874 Jul 26, 2021
Vue component that simulates a user typing, selecting, and erasing text.

Vue component that simulates a user typing, selecting, and erasing text. Play with vue-typer in this interactive demo. Getting Started Usage Props tex

null 711 Jul 20, 2021
A sample of career ladders I use for my organization, open sourced for anyone.

A sample of career ladders I use for my organization, open sourced for anyone.

Sarah Drasner 531 Jul 26, 2021
Matteo Bruni 2.1k Jul 26, 2021
ColdStart Coding Challenge

Welcome to the ?? ColdStart coding challenge ?? ! In this series you will use your cloud development skills to help our penguin siblings start up their ice cream parlor and delivery service ?? .

ColdStart Challenge 36 Jul 2, 2021
A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.

vue-beautiful-chat vue-beautiful-chat provides an intercom-like chat window that can be included easily in any project for free. It provides no messag

Matteo Merola 1.1k Jul 24, 2021
petite-vue is an alternative distribution of Vue optimized for progressive enhancement.

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework.

vuejs 3.6k Jul 25, 2021