https://github.com/bkwld/vue-routing-anchor-parser
A Vue directive that parses child elements for internally linking anchor tags and binds their click events to use Vue Router's push().
https://github.com/bkwld/vue-routing-anchor-parser
directive nuxt router vue
Last synced: over 1 year ago
JSON representation
A Vue directive that parses child elements for internally linking anchor tags and binds their click events to use Vue Router's push().
- Host: GitHub
- URL: https://github.com/bkwld/vue-routing-anchor-parser
- Owner: BKWLD
- License: mit
- Created: 2018-04-24T16:38:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-19T20:03:53.000Z (over 1 year ago)
- Last Synced: 2025-03-24T01:12:33.913Z (over 1 year ago)
- Topics: directive, nuxt, router, vue
- Language: JavaScript
- Homepage:
- Size: 2.11 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-routing-anchor-parser
A Vue directive that parses child elements for internally linking anchor tags and binds their click events to use Vue Router's push().
## Install
`yarn add vue-routing-anchor-parser` or `npm install --save vue-routing-anchor-parser`
## Configure
#### Vue
In a your bootstrapping JS:
```js
parseAnchors = require('vue-routing-anchor-parser')
directive.settings({
addBlankToExternal: false,
internalUrls: [
/^https?:\/\/localhost:\d+/
/^https?:\/\/([\w\-]+\.)?netlify\.com/
/^https?:\/\/([\w\-]+\.)?bukwild\.com/
]
internalHosts: [
'localhost',
'example.com',
]
})
Vue.directive('parse-anchors', parseAnchors)
```
#### Nuxt
In `nuxt.config.js`:
```js
modules: [
'vue-routing-anchor-parser/nuxt/module',
],
anchorParser: {
addBlankToExternal: true,
internalUrls: [
/^https?:\/\/localhost:\d+/,
/^https?:\/\/([\w\-]+\.)?netlify\.com/,
/^https?:\/\/(www\.)?bukwild\.com/,
],
internalHosts: [
'localhost',
'bukwild.com',
],
externalPaths: [
/^\/react-landing-page/,
],
sameWindowUrls: [
/^https?:\/\/(shop\.)?bukwild\.com/,
],
disableSmartLinkRegistration: false,
}
```
#### Options
- `addBlankToExternal`: Set to true to add `target='_blank'` to external links
- `internalUrls`: Array of regexes that, when found in `href` attributes, get treated as internal links.
- `internalHosts`: Array of host names that, when found in `href` attributes, get treated as internal links. These are checked after `internalUrls`.
- `externalPaths`: Array of regexes that, when found in `href` attributes, get treated as external links. Useful for sections of your website that are not part of this Vue/Nuxt app.
- `sameWindowUrls`: Array of regexes that are checked when a URL is not internal. If there is a match, the URL opens in the same window rather opening a new window.
- `disableSmartLinkRegistration`: Set to true to prevent the auto registration of `smart-link`
## Usage
#### `v-parse-anchors` directive
Add `v-parse-anchors` wherever you want to parse child anchors for internal links and route clicks through Vue Router. `href`s that begin with a slash, like `` are treated as internal automatically. If an internal route can't be resolved by Vue Router, it falls back to a full page refresh (though never opens in a new window.)
#### `smart-link` component
The `smart-link` component conditionally renders a `nuxt-link` if an internal link or an `a` tag if not.
```html
Bukwild
```
## Notes
- This currently only parses on `bind`, meaning if the contents for the element change later, new `a` tags won't be processed.