Skip to content
Permalink
Browse files
feat: support <nuxt-link>'s prefetch property (closes #5125) (#5355)
* Adding prefetch property to links

* Update common-props.json

* Update header.vue

* Update README.md

* Update avatar.js

* Update link.js

* Update pagination-nav.js

* Update README.md

Co-authored-by: Enrique González <enrique.gonzalez@speakingathome.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
  • Loading branch information
3 people committed May 12, 2020
1 parent 41680ba commit b9416cb3824d680e297347af61a934b1536224de
Showing 6 changed files with 337 additions and 345 deletions.
@@ -230,6 +230,9 @@
"event": {
"description": "router-link prop: Specify the event that triggers the link. In most cases you should leave this as the default"
},
"prefetch": {
"description": "nuxt-link prop: 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. Setting 'prefetch' to 'true' or 'false' will overwrite the default value of 'router.prefetchLinks'"
},
"noPrefetch": {
"description": "nuxt-link prop: 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. Setting 'no-prefetch' will disabled this feature for the specific link"
}
@@ -155,19 +155,18 @@ render a [`<nuxt-link>`](https://nuxtjs.org/api/components-nuxt-link) sub compon
`<router-link>`. `<nuxt-link>` supports all of the above router link props, plus the following
additional Nuxt.js specific props.

### `no-prefetch`
### `prefetch`

- type: `boolean`
- default: `false`
- availability: Nuxt.js 2.4.0+
- default: `undefined`
- availability: Nuxt.js 2.10.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. Setting `no-prefetch` will
disabled this feature for the specific link.
the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to
`true` or `false` will overwrite the default value of `router.prefetchLinks` configured in the
`nuxt.config.js` configuration file.

**Note:** If you have prefetching disabled in your `nuxt.config.js` configuration
(`router: { prefetchLinks: false}`), or are using a version of Nuxt.js `< 2.4.0`, then this prop
will have no effect.
**Note:** If you have are using a version of Nuxt.js `< 2.10.0`, then this prop will have no effect.

Prefetching support requires
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
@@ -187,3 +186,17 @@ export default {
}
}
```

### `no-prefetch`

- type: `boolean`
- default: `false`
- availability: Nuxt.js 2.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. Setting `no-prefetch` will
disabled this feature for the specific link.

**Note:** If you have prefetching disabled in your `nuxt.config.js` configuration
(`router: { prefetchLinks: false }`), or are using a version of Nuxt.js `< 2.4.0`, then this prop
will have no effect.

0 comments on commit b9416cb

Please sign in to comment.