Clarkkkk
vue-route-prefetch
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.
Features
- Prefetch links when they are visible in viewport.
- Provide a composable for manually prefetch.
- Tiny-size.
Install
npm i vue-route-prefetchOr
pnpm i vue-route-prefetchyarn add vue-route-prefetchUsage
You need to use this plugin after vue-router:
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 <RouterLink> that needs to prefetch to <PrefetchLink>. 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:
app.use(RouterPrefetch, {
componentName: 'QuickLink'
})Now you can use it as <quick-link> in your app.
Props
All props of <RouterLink> are still available in <PrefetchLink>, 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.
Manully prefetch
You can prefetch manually by using usePrefetch.
Signature:
function usePrefetch(): {
prefetchRoute: (link: RouteLocationRaw) => void;
prefetchFiles: (files: string[]) => void;
}<script setup>
import { useRouter } from 'vue-router'
import { usePrefetch } from 'vue-route-prefetch'
const router = useRouter()
const { prefetchRoute, prefetchFiles } = usePrefetch()
</script>
<template>
<div>
<button @mouseenter="prefetchRoute('/details')" @click="router.push('/details')">
See details
</button>
<button @mouseenter="prefetchFiles('/theme.css')">
Switch theme
</button>
</div>
</template>Browser Support
It works on the browsers with the support of Intersection Observer API (See compatibility). Otherwise, you may need a polyfill.
Credits
Forked from vue-router-prefetch. Inspired by quicklink and nuxt-link.
Acknowledgment
If you found it useful somehow, I would be grateful if you could leave a star in the project's GitHub repository.
Thank you.