vue.jsroutesnuxt.jsnuxt-link

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


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>

Solution

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