DEV Community

loading...

Nuxt link prefetch

eulier profile image Eulier Gonzalez ・1 min read

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

Discussion (0)

pic
Editor guide