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:
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:
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 addtarget='_blank'to external linksinternalUrls: Array of regexes that, when found inhrefattributes, get treated as internal links.internalHosts: Array of host names that, when found inhrefattributes, get treated as internal links. These are checked afterinternalUrls.externalPaths: Array of regexes that, when found inhrefattributes, 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 ofsmart-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. hrefs that begin with a slash, like <a href='/path/to/something'> 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.
<smart-link to='https://www.bukwild.com'>Bukwild</smart-link>
Notes
- This currently only parses on
bind, meaning if the contents for the element change later, newatags won't be processed.
0 Aug 14, 2022
91 Nov 24, 2022
56 Nov 6, 2022
0 Oct 28, 2021
9 Oct 5, 2022
17 Jul 30, 2020
0 Mar 26, 2021
12 Feb 21, 2022
57 Dec 1, 2022
3 Sep 10, 2021
46 Dec 10, 2022
547 Jan 4, 2023
108 Dec 27, 2022
10 May 31, 2022
10 Dec 7, 2022
4.6k Dec 30, 2022
15 Aug 27, 2022
202 Nov 2, 2022
54 Oct 24, 2022