`<NuxtLink>`

Smart link component with client-side routing and automatic prefetching.

Since Nuxt 3.0 Spec ↗

Syntax

<NuxtLink to="/path">Text</NuxtLink>

Parameters

Name	Type	Required	Description
`to`	`string \| RouteLocationRaw`	Yes	Internal route or external URL to navigate to.
`prefetch`	`boolean`	No	Whether to prefetch the linked route (default: on viewport for internal links).

Returns

Component — Renders an <a> with router behavior.

Examples

<template>
  <NuxtLink to="/about">About</NuxtLink>
  <NuxtLink :to="{ name: 'post', params: { id: 1 } }">Post</NuxtLink>
</template>

<template>
  <NuxtLink
    to="https://example.com"
    target="_blank"
    rel="noopener"
  >
    External
  </NuxtLink>
</template>

<template>
  <NuxtLink to="/heavy" :prefetch="false">No prefetch</NuxtLink>
  <NuxtLink to="/news" prefetch-on="interaction">News</NuxtLink>
</template>

Notes

Internal links use client-side navigation and are prefetched when they enter the viewport (configurable via `prefetch`/`prefetchOn`). External URLs automatically render a plain `<a>`. Supports `activeClass`/`exactActiveClass` for styling the active route.