8

In Nuxt, we can use router-link as well as nuxt-link. What is the advantage of using nuxt-link over router-link?

<nuxt-link to="/about">About</nuxt-link>

instead of

<router-link to="/about">About</router-link>
Nilanshu Jaiswal
  • 1,583
  • 3
  • 23
  • 34

1 Answers1

14

According to Nuxt Docs, two important points:

This component (<nuxt-link>) is used to provide navigations between page components and enhance performances with smart prefetching.

In fact, <nuxt-link> extends <router-link>. That means it takes the same properties and can be used in the same manner.

After that we can read about smart prefetching:

Nuxt.js will automagically prefetch the code-splitted pages linked with when visible in the viewport by default. This hugely improves the end user performances.

Based on that I think you are simply looking at better performance with <nuxt-link>.

Jakub A Suplicki
  • 4,586
  • 1
  • 23
  • 31
  • 2
    For anyone interested: According to [this article](https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/), `If you’re using Vue CLI 3 every lazily loaded resource is prefetched by default!` – phil294 Oct 31 '20 at 21:13
  • 5
    Bad if you want to share your base components between a Nuxt and a non-nuxt project – Marian Klühspies Dec 27 '21 at 08:08