This component is used to provide navigations between page components and enhance performances with smart prefetching.
<nuxt-link> component is an essential of Nuxt. It should be used to navigate through your application, similar to the
<router-link> component in a traditional Vue App. In fact,
<router-link>. That means it takes the same properties and can be used in the same manner. Read the Vue Router documentation for more information.
<template> <div> <h1>Home page</h1> <nuxt-link to="/about">About (internal link that belongs to the Nuxt App)</nuxt-link> <a href="https://nuxtjs.org">External Link to another page</a> </div> </template>
Added with Nuxt.js v2.4.0
To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. This feature is inspired by quicklink.js by Google Chrome Labs.
To disable the prefetching of the linked page, you can use the
<n-link to="/about" no-prefetch>About page not pre-fetched</n-link>
You can configure globally this behaviour with router.prefetchLinks.
prefetched-class prop is also available to customize the class added when the code splitted page has been prefetched. Make sure to set up this functionality globally with router.linkPrefetchedClass.
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!