Nuxt link prefetch

Since a month ago, i could afford Mastery Nuxt

Here they're explaining how attribute prefetch works in <nuxt-link> tag.

Nuxt use nuxt-link that allows to navigate in our webapp, one of the features about this, is by default prefetch the pages that are linked in the viewport.

If your app is already pretty busy on first pageview, like if you have a lot of javascript or network traffic, you may want to disable this feature. Don’t worry you have plenty options.

Locally disabling

If you want to disable prefetching for a given link just add no-prefetch on it.
i.e.

<nuxt-link :to="`/home/${home.objectID}`" no-prefetch>
  <home-card :home="home"/>
</nuxt-link>

Globally disabling

In the nuxt.config.js in add a property call router which is an object and add prefetchLinks to set it false, like this.

router: {
  prefetchLinks: false
}

Now you can pick and choose which links to prefetch, this is really handy when it comes to perfomance optimizations

Comments

[Toni Engelhardt]

Is there a way to do this in Nuxt 3? That setting doesn't exist anymore on the router property.

[Carlota Dias]

I have the same question