https://github.com/aidalinfo/v-proximity-prefetch
v-proxmity-prefetch is a Vite plugin that improves perceived navigation speed by preloading route components when the user’s cursor gets near a link.
https://github.com/aidalinfo/v-proximity-prefetch
prefetch prerender router vue
Last synced: 6 months ago
JSON representation
v-proxmity-prefetch is a Vite plugin that improves perceived navigation speed by preloading route components when the user’s cursor gets near a link.
- Host: GitHub
- URL: https://github.com/aidalinfo/v-proximity-prefetch
- Owner: aidalinfo
- License: mit
- Created: 2025-04-06T14:42:29.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-04-07T07:36:48.000Z (10 months ago)
- Last Synced: 2025-06-20T02:44:57.325Z (7 months ago)
- Topics: prefetch, prerender, router, vue
- Language: Vue
- Homepage: https://aidalinfo.github.io/v-proximity-prefetch/
- Size: 148 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Proximity Prefetch
[](https://www.npmjs.com/package/v-proximity-prefetch)
[](https://github.com/aidalinfo/ppf-vue/blob/main/LICENSE)
[](https://www.npmjs.com/package/v-proximity-prefetch)
[](https://github.com/aidalinfo/ppf-vue)
Boost your Vue app's perceived performance by prefetching routes when the mouse approaches links
## Features
- 🔍 **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
## Installation
```bash
# npm
npm install v-proximity-prefetch
# yarn
yarn add v-proximity-prefetch
# pnpm
pnpm add v-proximity-prefetch
```
## Getting Started
There are two ways to use Vue Proximity Prefetch:
### Method 1: Using the Vue Component and Plugin
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
Home
About
Contact
import { ProximityPrefetch } from 'v-proximity-prefetch'
```
### Method 2: Using the Vite Plugin Only
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
### Component Props
| 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 checks only happen when the mouse moves) |
| `debug` | `boolean` | `false` | Enable debug logging |
### Vite Plugin Options
| Option | 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 checks only happen when the mouse moves) |
| `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 |
### Debug Mode
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](https://vue-proximity-prefetch-demo.netlify.app/) to see the performance difference!
## Browser Support
Vue Proximity Prefetch works in all modern browsers that support ``.
## Contributing
Contributions are welcome! Please see our [Contributing Guide](https://github.com/aidalinfo/ppf-vue/blob/main/packages/vue-proximity-prefetch/CONTRIBUTING.md) for details.
## License
[MIT](https://github.com/aidalinfo/ppf-vue/blob/main/LICENSE)
---
If you find this plugin useful, please ⭐ the [GitHub repository](https://github.com/aidalinfo/ppf-vue) and share it with other Vue developers!