The <NuxtLink> component should be used for all internal links. Wheras external links require an <a> equivalent.

All links to the pages within your site you should use <NuxtLink>.

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

prefetchLinks

Nuxt automatically includes smart prefetching. That means it detects when a link is visible, either in the viewport or when scrolling and prefetches the JavaScript for those pages so that they are ready when the user clicks the link. Nuxt only loads the resources when the browser isn't busy and skips prefetching if your connection is offline or if you only have 2g connection.

Disable prefetching for specific links

However sometimes you may want to disable prefetching on some links if your page has a lot of JavaScript or you have a lot of different pages that would be prefetched or you have a lot of third party scripts that need to be loaded. To disable the prefetching on a specific link, you can use the no-prefetch prop. Since Nuxt v2.10.0, you can also use the prefetch prop set to false

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

Disable prefetching globally

To disable the prefetching on all links, set the prefetchLinks to false:

nuxt.config.js
export default {
  router: {
    prefetchLinks: false
  }
}

Since Nuxt v2.10.0, if you have set prefetchLinks to false but you want to prefetch a specific link, you can use the prefetch prop:

<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>