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
yarn add vue-router-prefetch
Usage
You need to use this plugin after vue-router:
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 <router-link> 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 <router-link>:
Vue.use(RouterPrefetch, {
componentName: 'QuickLink'
})
Now you can use it as <quick-link> 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 <router-link> are still available, additional props are listed below.
prefetch
- 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 <router-link>s:
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetch: false },
component: () => import('./async-page.vue')
}
]
})
It's also possible to turn of prefetching globally:
Vue.use(RouterPrefetch, {
prefetch: false
})
prefetchFiles
- 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:
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetchFiles: ['/foo.css'] },
component: () => import('./async-page.vue')
}
]
})
timeout
- Type:
number - Default:
2000(ms)
Timeout after which prefetching will occur.
Credits
Inspired by quicklink and nuxt-link.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - 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