What is the advantage of using nuxt-link over router-link?

Question

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>

Haynie

Answer 1

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>.

Radicalism

For anyone interested: According to this article, If you’re using Vue CLI 3 every lazily loaded resource is prefetched by default! – Neoclassicism

Bad if you want to share your base components between a Nuxt and a non-nuxt project – Annates