DEV Community

Eulier Gonzalez
Eulier Gonzalez

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
toniengelhardt profile image
Toni Engelhardt

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

Collapse
 
c_b_d profile image
Carlota Dias

I have the same question