Skip to content

egoist/vue-router-prefetch

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-router-prefetch

NPM version NPM downloads CircleCI

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