A Deep Dive Into The Nuxt-Link Component

The Nuxt <nuxt-link> component is an essential part of any Nuxt application. It allows you to navigate across pages. It's built on top of the <router-link> component from Vue Router and adds some sweet new features.

<template>
  <div>
    <nuxt-link to="/">Home</nuxt-link>
    <nuxt-link :to="{ name: 'about' }">About</nuxt-link>
    <nuxt-link :to="'contact'">Contact</nuxt-link>
  </div>
</template>

Smart PreFetching

The biggest improvement <nuxt-link> has over <router-link> is smart prefetching. It uses the IntersectionObserver API to detect when a link is visible and if enabled, loads the corresponding page chunk into memory. This can be triggered by scrolling a link into view or even when a link is shown in a menu with a v-if or v-show! When you visit prefetched pages, your browser will already have the JS loaded so the page will load much faster.

Wicked Smart

Not only is <nuxt-link> smart about when to load a page chunk, it's also smart about how. It uses the RequestIdleCallback API (or polyfill) to only load resources when the browser isn't busy. It even skips prefetching if your connection is Offline or your effective connection type is 2g.

PreFetch Control

To control what links are prefetched, you have 4 options.

1. Use the no-prefetch property to exclude links from prefetch
2. Use the prefetch property to include links for prefetch
3. Set router.prefetchLinks = false in your nuxt.config.js file to disable prefetching globally (true is the default)
4. Use ="true/false" to include or exclude links from prefetch.

If you try to mark a link as ="true" after a page is loaded, prefetching will not execute.

These will not prefetch, even when router.prefetchLinks = true (default)
<nuxt-link to="/" no-prefetch>Will not pre-fetch</nuxt-link>
<nuxt-link to="/" :prefetch="false">Will not pre-fetch</nuxt-link>

These will prefetch, even when router.prefetchLinks = false
<nuxt-link to="/" prefetch>Will pre-fetch</nuxt-link>
<nuxt-link to="/" :prefetch="true">Will  pre-fetch</nuxt-link>

export default {
  router: {
    // turns off prefetching (since the default is true)
    prefetchLinks: false
  }
}

PreFetch Decorations Because YOLO

If you want to show a link has been prefetched, you can add classes to router.linkPrefetchedClass in your nuxt.config.js file.

export default {
  router: {
    linkPrefetchedClass: 'preloaded'
  }
}

So Prefetch All The Things, Right?

Yeah, no. There can be too much of a good thing. You may want to disable or trim back prefetching when;

• You have a lot of 3rd party JavaScript to load on first hit
• You have a lot of different pages that would be loaded
• Your pages contain a lot of JavaScript

Ok, Let's Wrap This Up

Well, there you have it folks. The humble, yet herculean <nuxt-link> component. It may look simple, but under the hood is a high powered machine working hard to connect your visitors to your pages in the quickest way possible.