vue3-router-prefetcher

Features

Get asynchronous resources ahead of time in the way you configure them.
You don't need to change your code to use this tool.

Install

yarn add vue3-router-prefetcher

Usage

You need to use this plugin after vue-router:

import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import Vue3RouterPrefetch from 'vue3-router-prefetcher'

const app = createApp()
const router = createRouter()
app.use(router)
app.use(Vue3RouterPrefetch)

Then you can use <router-link> without any changes, when this component is visible in viewport, it will automatically prefetch the (async) route component.

You can also register it as a new component instead of overriding <router-link>:

app.use(Vue3RouterPrefetch, {
  name: 'QuickLink',
})

Now you can use it as <quick-link> in your app.

Browser Support

Support situation

Props

All props of <router-link> are still available, additional props are listed below.

type

Type: 'view' | 'hover' | 'none'
Default: view

How to pull resources in advance. It can also be defined globally:

app.use(RouterPrefetch, {
  type: 'hover',
})

timeout

Type: number
Default: 0 (ms)

Timeout after which prefetching will occur. It can also be defined globally:

app.use(RouterPrefetch, {
  timeout: 100,
})

name

Type: string
Default: RouterLink

app.use(RouterPrefetch, {
  name: 'QuickLink',
})

forcedPull

Type: boolean
Default: false

When set to false, asynchronous resources are pulled when the browser is idle. It can also be defined globally:

app.use(RouterPrefetch, {
  forcedPull: true,
})