vue-router-prefetch

  

Please consider donating to this project's author, EGOIST, to show your ❤️ and support.

Features

- Prefetch links when they are visible in viewport.
- You don't need to change your code base to make it work.
- Tiny-size.

Install

``bash
yarn add vue-router-prefetch
`

Usage

You need to use this plugin after vue-router:

`js
import Vue from 'vue'
import Router from 'vue-router'
import RouterPrefetch from 'vue-router-prefetch'

Vue.use(Router)
Vue.use(RouterPrefetch)
`

Then you can use without any changes, when this component is visible in viewport, it will automatically prefetch the (async) route component.

Check out the live demo.

You can also register it as a new component instead of overriding :

`js
Vue.use(RouterPrefetch, {
componentName: 'QuickLink'
})
`

Now you can use it as in your app.

Browser Support

- Without polyfills: Chrome, Firefox, Edge, Opera, Android Browser, Samsung Internet.
- With Intersection Observer polyfill ~6KB gzipped/minified: Safari, IE11

Props

All props of are still available, additional props are listed below.

$3

- Type: boolean
- Default: true

Whether to prefetch the matched route component.

You can also set meta.prefetch on vue-router's route object to disable prefetching this route for all s:

`js
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetch: false },
component: () => import('./async-page.vue')
}
]
})
`

It's also possible to turn of prefetching globally:

`js
Vue.use(RouterPrefetch, {
prefetch: false
})
`

$3

- Type: string[]
- Examples: ['/foo.css']

A list of additional files to prefetch. By default we only prefetch the route component.

You can also set meta.prefetchFiles on vue-router's route object, it will be merged with the prop value:

`js
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetchFiles: ['/foo.css'] },
component: () => import('./async-page.vue')
}
]
})
`

$3

- Type: number
- Default: 2000 (ms)

Timeout after which prefetching will occur.

Credits

Inspired by quicklink and nuxt-link.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature`
5. Submit a pull request :D

Author

vue-router-prefetch © EGOIST, Released under the MIT License.

Authored and maintained by EGOIST with help from contributors (list).

> Website · GitHub @EGOIST · Twitter @\_egoistlily