Skip to content

A Vue directive that parses child elements for internally linking anchor tags and binds their click events to use Vue Router's push().

License

Notifications You must be signed in to change notification settings

BKWLD/vue-routing-anchor-parser

Repository files navigation

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.

About

A Vue directive that parses child elements for internally linking anchor tags and binds their click events to use Vue Router's push().

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •