A Vue plugin to prefetch the route components.
npm install vue-route-prefetch[![NPM version][npm-image]][npm-url] [![NPM Downloads][npm-download]][npm-url] [![License][license]][license-url] [![Minified Size][minified-size]][npm-url] [![Build Status][build-status]][github-actions]
> Note: This is a fork of vue-router-prefetch with only Vue 3 support. If you are using Vue 2, please consider the original vue-router-prefetch.
- Prefetch links when they are visible in viewport.
- Provide a composable for manually prefetch.
- Tiny-size.
``sh`
npm i vue-route-prefetch
Or
`sh`
pnpm i vue-route-prefetch
`sh`
yarn add vue-route-prefetch
You need to use this plugin after vue-router:
`js
import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import PrefetchPlugin from 'vue-route-prefetch'
const app = createApp()
const router = createRouter()
app.use(router).use(PrefetchPlugin)
`
Now you can replace your that needs to prefetch to . When this component is visible in viewport, it will automatically prefetch the (async) route component.
Check out the live demo.
You can also register the component with another name:
`js`
app.use(RouterPrefetch, {
componentName: 'QuickLink'
})
Now you can use it as in your app.
All props of are still available in , additional props are listed below.
- Type: booleantrue
- Default:
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 s:
`js`
createRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetch: false },
component: () => import('./async-page.vue')
}
]
})
It's also possible to turn of prefetching globally:
`js`
app.use(RouterPrefetch, {
prefetch: false
})
- Type: string[]['/foo.css']
- Examples:
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:
`js`
createRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetchFiles: ['/foo.css'] },
component: () => import('./async-page.vue')
}
]
})
- Type: number2000
- Default: (ms)
Timeout after which prefetching will occur.
You can prefetch manually by using usePrefetch.
Signature:
`TypeScript`
function usePrefetch(): {
prefetchRoute: (link: RouteLocationRaw) => void;
prefetchFiles: (files: string[]) => void;
}
`html`
It works on the browsers with the support of Intersection Observer API (See compatibility). Otherwise, you may need a polyfill.
Forked from vue-router-prefetch. Inspired by quicklink and nuxt-link`.
If you found it useful somehow, I would be grateful if you could leave a star in the project's GitHub repository.
Thank you.
[npm-url]: https://www.npmjs.com/package/vue-route-prefetch
[npm-image]: https://badge.fury.io/js/vue-route-prefetch.svg
[npm-download]: https://img.shields.io/npm/dw/vue-route-prefetch
[license]: https://img.shields.io/github/license/Clarkkkk/vue-route-prefetch
[license-url]: https://github.com/Clarkkkk/vue-route-prefetch/blob/main/LICENSE.md
[minified-size]: https://img.shields.io/bundlephobia/min/vue-route-prefetch
[build-status]: https://img.shields.io/github/actions/workflow/status/Clarkkkk/vue-route-prefetch/.github%2Fworkflows%2Fpublish.yml
[github-actions]: https://github.com/Clarkkkk/vue-route-prefetch/actions