<hyper-link> is a tiny Vuejs component which aims to simplify the use of <router-link> by providing a universal hypertext link helper. Developers don't need to worry about choosing either <a> or <router-link> anymore.

Demo

Click this button to have a project example using hyper-link:

Installation

Download the package:

npm install @muxumuxu/hyper-link

On a VueJS project

Import the component inside the main.js file:

import HyperLink from '@muxumuxu/hyper-link'

Vue.component('hyper-link', HyperLink)

With NuxtJS

Create a dedicated plugin in your app (~/plugins/hyper-link.js):

import Vue from "vue";
import HyperLink from "@muxumuxu/hyper-link";

Vue.component("hyper-link", HyperLink);

Import the plugin in nuxt.config.js by adding hyper-link to the plugins list:

module.exports = {
  plugins: [{ src: '~/plugins/hyper-link', ssr: false }]
}

Usage

As the component has been globally registered, you don't need to import it on every component file. Just use the tag as you would normally do:

<hyper-link href="/about">About us</hyper-link>
<hyper-link href="https://vuejs.org">Vue.js</hyper-link>

Renders to:

<router-link to="/about">About us</router-link>
<a href="https://vuejs.org" target="_blank" rel="noopener">Vue.js</a>

:eyes: As you can see, the output of the <hyper-link> tag is either a <a> tag or a <router-link> tag, depending on the type of provided href value (absolute, relative...).

Properties

|Name|Type |Required|Default| |-|-|-|-| |href|String|Yes|-| |target|String|No|_self| |rel|String|No|-|

:point_up: target and rel attributes are automatically set respectively to _blank and noopener in case of external links. It can be overriden by setting the chosen value.

Contribute

You are welcome to contribute to hyper-link to find bugs or to submit new features. Please follow these steps:

Download the project

git clone https://github.com/muxumuxu/hyper-link.git

Run the project locally

npm install
npm run serve

Visit http://localhost:8080.

Make a pull request

You can submit a pull-request here. Provide enough information so the reviewing process will be easier.

Deploy to npm

1. Increment the version of the package in the package.json file.
2. Build the bundle: npm run build-bundle.
3. Publish the package: npm publish --access public.

License

MIT

About Muxu.Muxu

We help startups and established companies to invent, build, and launch their next product or venture.