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 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. 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, new a tags won't be processed.