components/nuxtlink

29 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

NuxtLink component purpose

NuxtLink is a drop-in replacement for both Vue Router's RouterLink component and HTML's <a> tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations including prefetching and default attributes.

NuxtLink RouterLink props

NuxtLink supports all Vue Router's RouterLink props when not using external: to (any URL or route location object), custom (whether NuxtLink should wrap its content in an <a> element), exactActiveClass (class for exact active links, defaults to 'router-link-exact-active'), activeClass (class for active links, defaults to 'router-link-active'), replace (replace history entry), ariaCurrentValue (aria-current attribute value for exact active links).

NuxtLink specific props

NuxtLink-specific props are: href (alias for to, ignored if to is used), noRel (if true, no rel attribute added to external link), external (forces link rendered as <a> tag instead of RouterLink), prefetch (when enabled prefetches middleware, layouts and payloads of links in viewport), prefetchOn (custom control of when to prefetch: 'interaction', 'visibility' (default), or object like {interaction: true, visibility: true}), noPrefetch (disables prefetching), prefetchedClass (class applied to prefetched links).

NuxtLink anchor props

NuxtLink anchor-related props are: target (target attribute value for the link), rel (rel attribute value; defaults to 'noopener noreferrer' for external links).

NuxtLink rel attribute defaults

A rel attribute of 'noopener noreferrer' is applied by default to links with a target attribute or to absolute links (starting with http://, https://, or //). The noopener attribute prevents a security bug in older browsers, and noreferrer improves privacy by not sending the Referer header to the linked site.

NuxtLink rel and noRel override

The rel prop can overwrite the default rel attribute on links. The noRel prop (when set to true) prevents the default rel attribute from being added to absolute links. noRel and rel cannot be used together; rel will be ignored if noRel is present.

NuxtLink external prop for static files and cross-app links

The external prop explicitly indicates that the link is external and forces NuxtLink to render as a standard HTML <a> tag, bypassing Vue Router's internal routing mechanism. This is needed for linking to static files in the /public directory (like PDFs or images) and for linking to different applications hosted on the same domain.

NuxtLink prefetch behavior

Nuxt automatically includes smart prefetching that detects when a link is visible in the viewport or when scrolling and prefetches JavaScript for those pages so they are ready when clicked. Nuxt only loads resources when the browser is not busy and skips prefetching if the connection is offline or on 2g connection.

NuxtLink custom prefetch triggers

The prefetchOn prop controls when to prefetch links. Possible values are: 'visibility' (prefetches when link becomes visible in viewport using Intersection Observer API, default), 'interaction' (prefetches when hovered or focused, listening for pointerenter and focus events). An object can be passed for full control: {interaction: true, visibility: true}. When both are enabled, the element will prefetch on either condition, which may result in unnecessary resource usage.

NuxtLink custom slot with prefetch

When using the custom prop, NuxtLink does not automatically attach prefetch handlers or classes. The custom slot provides prefetch, prefetched, and shouldPrefetch values that can be used to implement prefetch behavior manually. Example: <NuxtLink v-slot="{ href, navigate, prefetch, shouldPrefetch }" to="/about" custom><a :href="href" @click="navigate" @pointerenter="shouldPrefetch('interaction') && prefetch()" @focus="shouldPrefetch('interaction') && prefetch()">About page</a></NuxtLink>

Cross-origin prefetch configuration

To enable cross-origin prefetching using the Speculation Rules API, set experimental.crossOriginPrefetch to true in nuxt.config.

Disable prefetch globally configuration

To disable prefetching for all links globally, set experimental.defaults.nuxtLink.prefetch to false in nuxt.config.

defineNuxtLink function

defineNuxtLink creates a custom NuxtLink component with overridden defaults. It takes a NuxtLinkOptions object and returns a Component. The component is auto-imported by file name, so a file app/components/MyNuxtLink.ts creates a <MyNuxtLink /> component.

defineNuxtLink options signature

interface NuxtLinkOptions { componentName?: string; externalRelAttribute?: string; activeClass?: string; exactActiveClass?: string; trailingSlash?: 'append' | 'remove'; prefetch?: boolean; prefetchedClass?: string; prefetchOn?: Partial<{ visibility: boolean; interaction: boolean }>; }

defineNuxtLink option details

componentName: internal name shown in Vue DevTools, defaults to 'NuxtLink'. externalRelAttribute: default rel attribute for external links, defaults to 'noopener noreferrer', set to '' to disable. activeClass: default class for active links, defaults to 'router-link-active'. exactActiveClass: default class for exact active links, defaults to 'router-link-exact-active'. trailingSlash: 'append' or 'remove' to add or remove trailing slashes in href; ignored if unset or invalid. prefetch: whether to prefetch links by default, default true. prefetchedClass: default class for prefetched links, defaults to undefined. prefetchOn: granular control of prefetch strategies by default, defaults to { visibility: true }.

NuxtLink nuxt.config defaults override

Default NuxtLink behavior can be overwritten in nuxt.config via experimental.defaults.nuxtLink with options: componentName (default 'NuxtLink'), externalRelAttribute (default 'noopener noreferrer'), activeClass (default 'router-link-active'), exactActiveClass (default 'router-link-exact-active'), prefetchedClass (default undefined), trailingSlash (default undefined), prefetch (default true), prefetchOn (default { visibility: true }).

NuxtLink internal routing example

For internal routing: <NuxtLink to="/about">About page</NuxtLink> renders as <a href="/about">About page</a> with Vue Router and smart prefetching applied.

NuxtLink dynamic route params example

To pass params to dynamic routes: <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">Post 123</NuxtLink> renders as <a href="/posts/123">Post 123</a>.

NuxtLink external link example

For external links: <NuxtLink to="https://nuxtjs.org">Nuxt website</NuxtLink> renders as <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a>.

NuxtLink disable prefetch examples

To disable prefetch: <NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink> or <NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>

NuxtLink prefetchOn visibility example

<NuxtLink prefetch-on="visibility">This will prefetch when it becomes visible (default)</NuxtLink> prefetches when the link becomes visible in the viewport using the Intersection Observer API.

NuxtLink prefetchOn object example

<NuxtLink :prefetch-on="{ interaction: true }">This will prefetch when hovered or when it gains focus</NuxtLink> uses an object to configure prefetch triggers.

NuxtLink external static file example

<NuxtLink to="/example-report.pdf" external>Download Report</NuxtLink> links to a static file in /public directory using the external prop.

NuxtLink cross-app link example

<NuxtLink to="/another-app" external>Go to Another App</NuxtLink> links to a different application on the same domain using the external prop.

NuxtLink rel override example

<NuxtLink to="https://discord.nuxtjs.org" rel="noopener">Nuxt Discord</NuxtLink> overrides the default rel attribute to only include 'noopener'.

NuxtLink noRel example

<NuxtLink to="https://github.com/nuxt" no-rel>Nuxt GitHub</NuxtLink> prevents any rel attribute from being added to the external link.

NuxtLink rel with target example

<NuxtLink to="/about" target="_blank">About page</NuxtLink> renders as <a href="/about" target="_blank" rel="noopener noreferrer">About page</a> with default rel applied.

defineNuxtLink custom component example

export default defineNuxtLink({ componentName: 'MyNuxtLink' }) in app/components/MyNuxtLink.ts creates a custom link component auto-imported and usable as <MyNuxtLink />.

NuxtLink component for navigation

To navigate between pages of your app, you should use the <NuxtLink> component. This component is included with Nuxt and does not need to be imported. Example: <NuxtLink to="/">Home page</NuxtLink>

Give your agent this brain