## Demo

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

[](https://codesandbox.io/s/kml72y4v5o)

## Installation

Download the package:

```shell
npm install @muxumuxu/hyper-link
```

### On a VueJS project

Import the component inside the `main.js` file:

```js
import HyperLink from '@muxumuxu/hyper-link'

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

### With NuxtJS

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

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

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

```html
About us
Vue.js
```

Renders to:

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

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

### Run the project locally

```sh
npm install
npm run serve
```

Visit [http://localhost:8080](http://localhost:8080).

### Make a pull request

You can submit a pull-request [here](https://github.com/muxumuxu/hyper-link/pulls). 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](/license.md)

## About Muxu.Muxu

[](https://muxumuxu.com)