<router-link> on steroids πŸ”—
Branch: master
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.
public
src
tests
.babelrc
.dockerignore
.gitignore
Dockerfile
LICENSE.md
README.md
docker-compose.yml
package-lock.json
package.json
vue.config.js

README.md

hyper-link

<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:

hyper-link example on Codesandbox

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>

πŸ‘€ 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 -

☝️ 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

Muxu.Muxu logo

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