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-prefetch

Or

pnpm i vue-route-prefetch

yarn add vue-route-prefetch

Usage

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.