Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-router-prefetch
Prefetch links when they are visible in viewport.
https://github.com/egoist/vue-router-prefetch
prefetch quicklink vue vue-router
Last synced: about 2 months ago
JSON representation
Prefetch links when they are visible in viewport.
- Host: GitHub
- URL: https://github.com/egoist/vue-router-prefetch
- Owner: egoist
- License: mit
- Created: 2019-01-23T07:04:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T01:26:13.000Z (almost 2 years ago)
- Last Synced: 2024-07-11T02:03:42.448Z (2 months ago)
- Topics: prefetch, quicklink, vue, vue-router
- Language: JavaScript
- Homepage:
- Size: 1.55 MB
- Stars: 384
- Watchers: 4
- Forks: 17
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-router-prefetch
[](https://npmjs.com/package/vue-router-prefetch) [](https://npmjs.com/package/vue-router-prefetch) [](https://circleci.com/gh/egoist/vue-router-prefetch/tree/master)
**Please consider [donating](https://www.patreon.com/egoist) to this project's author, [EGOIST](#author), to show your ❤️ and support.**
## Features
- Prefetch links when they are visible in viewport.
- You don't need to change your code base to make it work.
- Tiny-size.
## Install
```bash
yarn add vue-router-prefetch
```
If you're using Vue 2, you should install `vue-router-prefetch@1` instead.
## Usage
You need to use this plugin after `vue-router`:
```js
import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import RouterPrefetch from 'vue-router-prefetch'
const app = createApp()
const router = createRouter()
app.use(router)
app.use(RouterPrefetch)
```
Then you can use `` without any changes, when this component is visible in viewport, it will automatically prefetch the (async) route component.
**Check out the [live demo](https://stackblitz.com/edit/vue-nr9q5u).**
You can also register it as a new component instead of overriding ``:
```js
app.use(RouterPrefetch, {
componentName: 'QuickLink'
})
```
Now you can use it as `` in your app.
## Browser Support
- Without polyfills: Chrome, Firefox, Edge, Opera, Android Browser, Samsung Internet.
- With [Intersection Observer polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) ~6KB gzipped/minified: Safari, IE11
## Props
All [props](https://router.vuejs.org/api/#router-link-props) of `` are still available, 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 ``s:
```js
createRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetch: false },
component: () => import('./async-page.vue')
}
]
})
```
It's also possible to turn of prefetching globally:
```js
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:
```js
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.
## Credits
Inspired by [quicklink](https://github.com/GoogleChromeLabs/quicklink) and [`nuxt-link`](https://github.com/nuxt/nuxt.js/pull/4574/).
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**vue-router-prefetch** © EGOIST, Released under the [MIT](./LICENSE) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-router-prefetch/contributors)).
> [Website](https://egoist.sh) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)