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

If you're using Vue 2, you should install vue-router-prefetch@1 instead.

Usage

You need to use this plugin after vue-router:

import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import RouterPrefetch from 'vue-router-prefetch'

const app = createApp()
const router = createRouter()
app.use(router)
app.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>:

app.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:

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

It's also possible to turn of prefetching globally:

app.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:

createRouter({
  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