Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/developmint/vue-link
One component to link them all 🔗
https://github.com/developmint/vue-link
link linking links nuxt nuxtjs vue vue-components vue-plugin vuejs
Last synced: about 1 month ago
JSON representation
One component to link them all 🔗
- Host: GitHub
- URL: https://github.com/developmint/vue-link
- Owner: Developmint
- License: mit
- Created: 2018-05-09T11:59:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-14T09:12:22.000Z (7 months ago)
- Last Synced: 2024-04-14T10:15:31.272Z (7 months ago)
- Topics: link, linking, links, nuxt, nuxtjs, vue, vue-components, vue-plugin, vuejs
- Language: JavaScript
- Homepage:
- Size: 319 KB
- Stars: 63
- Watchers: 3
- Forks: 7
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# VueLink - One component to link them all!
> Lightweight wrapper component for external and vue-router links.
## :fire: Features
- **Tiny functional component**
- SSR-safe (works with Nuxt.js)
- Well tested and **documented**
- Compatible with Node 8.0+
- Vue (and vue-router) as the only dependencies
- Highly customizable
## :mag_right: Getting started
### :package: Through NPM
```
$ npm install vue-link
```
#### Synchronous import
```js
import VueLink from 'vue-link'
// or the slash-forcing variants
// import { VueLink, VueLinkAddSlash, VueLinkStripSlash } from 'vue-link'
export default {
components: {
VueLink
}
}
```
#### Async import
```js
export default {
components: {
VueLink: () => import('vue-link')
}
}
```
### :link::x: Using a CDN
Sorry! No CDN available for VueLink right now.
## :hammer_and_wrench: Usage
### Handling
Before going into detail, keep in mind that you can customize the component
as you can do it with a normal `` or ``/`` tag.
All props will be passed down to the internal implementation of `vue-link`
in case the link is not external.
### Link detection
If the passed link starts with `http`, it'll be treated as external link.
You can use the `external` prop to force treating it as external link as well.
### Prop overview
| Prop | External only? | Comment |
| --- | --- | --- |
| to | :x: | The target of the link. If not set, the link will not be bound (no "empty href")|
| rel |:white_check_mark:| Will be passed as `rel` attribute to the anchor tag|
|newTab |:white_check_mark:| If truthy, set `target` attribute to `_blank`|
|target |:white_check_mark:| Will be passed as `target` attribute to the anchor tag|
|slashes | Internal only! | Settings: `'strip'`, `'add'` or `false`(default). Will force slash endings to either strip or add trailing slashes to your url (`/a` -> `/a/` in `add` mode, vice-versa in `strip`. **Only for internal links**! Also, this will not take query strings into account. Please use `router-link`'s `query` option for them|
|external |:white_check_mark:| Force to treat the link as external link (use anchor instead of vue-router tag)|
### Types
With `v1.4.0` two extra components were introduced that reflect the `slashes` settings.
You can import them (like the normal `VueLink` component as named imports).
The `default` export of the package is still the normal `VueLink` component so no breaking changes
have been introduced.
Since `v1.6.0`, a dedicated `ForNuxt` export is available that'll use `NuxtLink` instead of `RouterLink` under the hood
`import { VueLink, VueLinkAddSlash, VueLinkStripSlash, ForNuxt } from '../lib'`
### Example usage
```js
This is the link text ;)
```
## :gear: Contributing
Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)
## :bookmark_tabs: License
[MIT License](./LICENSE.md) - Copyright (c) Developmint - Alexander Lichter