NavLink since v0.4.0 themeable

A link component. Will register a click handler and will - on click and based on the href property - either

  • let the browser scroll to the target component on the same page,
  • let the browser navigate to an external page, or
  • use vue router to navigate to the application internal target page.

If the href prop contains a link to a domain that is not equal to the current domain - subdomains count as the same domain -

  • an additional icon is added to the link text to visualize it's an external link,
  • the browser will be instructed to open the link in a new page, and
  • the attributes noreferrer and noopener get added to prevent leakage of sensitive information.

The component can be visualized as a button, if necessary.

Preview

Example

<template>
    <NavLink href="#pricing">Go to pricing</NavLink>
</template>

<script setup>
import { NavLink } from '@discue/ui-components'
</script>
Improve this page
Last Updated:
Contributors: Stefan Pfaffel