NuxtLink & Prefetching

NuxtLink is Nuxt’s enhanced anchor tag. It renders a real <a> for accessibility, intercepts the click for client-side navigation, prefetches the destination, and adds active classes for free.

Basic Usage

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/blog">Blog</NuxtLink>
    <NuxtLink to="/about">About</NuxtLink>
  </nav>
</template>

Clicks navigate without a full page reload. The matching link gets the class router-link-active, and the exact match gets router-link-exact-active — style them in CSS.

Smart Prefetch

By default, NuxtLink prefetches the destination’s JavaScript bundle when the link enters the viewport. Navigation then feels instant. Disable per-link when needed:

<template>
  <NuxtLink to="/heavy-report" prefetch="false">
    Yearly report
  </NuxtLink>
</template>

You can also disable globally in nuxt.config.ts:

export default defineNuxtConfig({
  experimental: { defaults: { nuxtLink: { prefetch: false } } },
})

External Links

For links that leave your site, pass external — Nuxt skips client routing and just navigates the browser:

<template>
  <NuxtLink to="https://vuejs.org" external target="_blank">
    Vue docs
  </NuxtLink>
</template>

Styling the Active State

<template>
  <NuxtLink
    to="/blog"
    active-class="text-emerald-500"
    exact-active-class="font-bold"
  >
    Blog
  </NuxtLink>
</template>

Active styling, prefetch, and SPA navigation in one component — and it falls back gracefully to a normal anchor when JS is off.