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

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