Vue Component Development Kit

# Link

A Link-component with sensible defaults and Vue Router (opens new window) integration.

API

The Link-component has a dedicated API documentation.

# Installation

$ npm install @vue-cdk/link --save

Weak Dependencies

If you want to use @vue-cdk/link's Vue Router integration make sure to also install and properly configure Vue Router (opens new window).

# Rationale & Features

At first, a link-component might seem silly. However, there are things that you can do wrong – even with seemingly trivial things. @vue-cdk/link tries to make it easy to do the right things.

# Security Issues

Consider the following example:

<a href="https://example.org">
  Our Sponsor
</a>

This renders a native anchor-element and from a pure functionality perspective the link will work. Linking to external and potentially untrusted sites can be a security issue. One security issue that is relevant for the example above is called tabnabbing (opens new window).

There are also other side issues like a sub-optimal performance for external link that don't receive special are.

@vue-cdk/link fixes this by attaching special attributes to external links. The attributes that are attached to external links are:

Attribute Value
target _blank
rel noopener noreferrer

External links are automatically detected by @vue-cdk/link.

# Vue Router Integration

If you are using href then internal links will receive no special handling:

<CLink href="/my/other/page">
  My other Page
</CLink>

This will render a normal anchor-element without any special handling.

Link also has a to-prop. If set, then Link will render a RouterLink. This allows you to use the same component for internal–, external– and router–links:

<CLink to="/my/route">
  Router Link to /my/route
</CLink>

# Demo

Nothing special here – just two examples:

Show Code
 
<template>
  <CLink to="/internal-path/">/internal-path/</CLink>
</template>

<script>
import VueRouter from 'vue-router'

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/internal-path',
      component: {
        render(h) {
          return h('div', 'hrhr')
        },
      },
    },
  ],
})

export default {
  router,
}
</script>
Show Code
 
<template>
  <CLink href="https://example.org">External Link (example.org)</CLink>
</template>
Playground