<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.
Click this button to have a project example using hyper-link
:
Download the package:
npm install @muxumuxu/hyper-link
Import the component inside the main.js
file:
import HyperLink from '@muxumuxu/hyper-link'
Vue.component('hyper-link', HyperLink)
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 }]
}
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 providedhref
value (absolute, relative...).
Name | Type | Required | Default |
---|---|---|---|
href |
String | Yes | - |
target |
String | No | _self |
rel |
String | No | - |
☝️
target
andrel
attributes are automatically set respectively to_blank
andnoopener
in case of external links. It can be overriden by setting the chosen value.
You are welcome to contribute to hyper-link
to find bugs or to submit new features. Please follow these steps:
git clone https://github.com/muxumuxu/hyper-link.git
npm install
npm run serve
Visit http://localhost:8080.
You can submit a pull-request here. Provide enough information so the reviewing process will be easier.
- Increment the version of the package in the
package.json
file. - Build the bundle:
npm run build-bundle
. - Publish the package:
npm publish --access public
.
We help startups and established companies to invent, build, and launch their next product or venture.