README.md

vue-router-prefetch

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

Features

• Prefetch links that are only 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, addtional props are listed below.

prefetch

• Type: boolean
• Default: true

Whether to prefetch the matched route component.

prefetchFiles

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

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

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