Vue plugin that prefetches routes when the mouse approaches links for faster navigation
npm install v-proximity-prefetch



Boost your Vue app's perceived performance by prefetching routes when the mouse approaches links
- ð Smart Detection: Detects when the user's mouse approaches navigation links
- ⥠Automatic Prefetching: Preloads route components before the user clicks
- ð Enhanced UX: Reduces perceived loading times for smoother navigation
- ð Simple Integration: Two easy ways to integrate - Vue component or Vite plugin
- ð§ Highly Configurable: Customize threshold distance, prediction intervals, and more
- ðŠķ Lightweight: Minimal overhead with intelligent throttling
``bashnpm
npm install v-proximity-prefetch
Getting Started
There are two ways to use Vue Proximity Prefetch:
$3
This method gives you fine-grained control over which parts of your app use proximity prefetching.
#### 1. Register the Plugin in your Vue app:
`js
// main.ts or main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import { ProximityPrefetchPlugin } from 'v-proximity-prefetch'const app = createApp(App)
const router = createRouter({
history: createWebHistory(),
routes: [
// your routes...
]
})
app.use(router)
app.use(ProximityPrefetchPlugin) // register the plugin
app.mount('#app')
`#### 2. Use the Component in your template:
`vue
`$3
This method is simpler and doesn't require adding components to your app. Perfect for quick implementation.
`js
// vite.config.js or vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteProximityPrefetch } from 'v-proximity-prefetch'export default defineConfig({
plugins: [
vue(),
viteProximityPrefetch({
threshold: 200,
predictionInterval: 0,
maxPrefetch: 3,
automaticPrefetch: true // This enables automatic prefetching!
})
]
})
`Configuration Options
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
threshold | number | 200 | Distance in pixels at which prefetching triggers |
| predictionInterval | number | 0 | Interval in ms for checking link proximity (0 means reactive to mouse movements) |
| debug | boolean | false | Enable debug logging |$3
| Option | Type | Default | Description |
|--------|------|---------|-------------|
|
threshold | number | 200 | Distance in pixels at which prefetching triggers |
| predictionInterval | number | 0 | Interval in ms for checking link proximity |
| maxPrefetch | number | 3 | Maximum number of routes to prefetch at once |
| debug | boolean | false | Enable debug logging |
| automaticPrefetch | boolean | false | Enable automatic prefetching without the Vue component |$3
You can enable debug mode by setting the
PPF_DEBUG environment variable:`bash
PPF_DEBUG=true npm run build
`Or in the browser console:
`js
window.PPF_DEBUG = true
`When to Use Each Method
- Component Method: More control, prefetches both Vue Router components and routes
- Vite Plugin Method: Simpler implementation, uses browser's standard prefetching
Demo
Check out the live demo to see the performance difference!
Browser Support
Vue Proximity Prefetch works in all modern browsers that support
`.Contributions are welcome! Please see our Contributing Guide for details.
---
If you find this plugin useful, please â the GitHub repository and share it with other Vue developers!