Prefetch links when they are visible in viewport.
Branch: master
Clone or download


NPM version NPM downloads CircleCI

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


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


yarn add vue-router-prefetch


You need to use this plugin after vue-router:

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


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


All props of <router-link> are still available, additional props are listed below.


  • 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')


  • 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')


  • Type: number
  • Default: 2000 (ms)

Timeout after which prefetching will occur.


Inspired by quicklink and nuxt-link.


  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


vue-router-prefetch © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

Website · GitHub @EGOIST · Twitter @_egoistlily