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>