Skip to content

Latest commit

 

History

History
106 lines (72 loc) · 2.06 KB

README.md

File metadata and controls

106 lines (72 loc) · 2.06 KB
Raw

vue3-router-prefetch

NPM version NPM downloads

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

Usage

You need to use this plugin after vue-router:

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

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

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

Register component name

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,
})