Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/callumacrae/vue-futurelink
Preload links about to be clicked with futurelink.
https://github.com/callumacrae/vue-futurelink
Last synced: 20 days ago
JSON representation
Preload links about to be clicked with futurelink.
- Host: GitHub
- URL: https://github.com/callumacrae/vue-futurelink
- Owner: callumacrae
- Created: 2017-06-07T14:30:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:08:25.000Z (about 2 years ago)
- Last Synced: 2024-12-17T05:29:32.173Z (23 days ago)
- Language: Vue
- Size: 1.06 MB
- Stars: 36
- Watchers: 8
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-futurelink
> A vue component to preload links about to be clicked with [futurelink].
## Installation
```
$ npm install --save-dev vue-futurelink
```
## Usage
Just load the component and output it into the page, and it will do the rest: it will set up the mouse tracking, hook into vue-router, and output a hidden element to the page. Relies on vue-router.
```html
import Futurelink from 'vue-futurelink';
export {
components: {
Futurelink
}
};
```
I put it below the footer, but in theory it should work anywhere on the page.
When a page is preloaded, a `preload` event is fired:
```html
import Futurelink from 'vue-futurelink';
export {
methods: {
handlePreload(path, route) {
console.info(`Preloading ${path}`, route);
},
},
components: {
Futurelink
}
};
```
## Source vs. Dist
By default, the `main` entry points to the compiled and minified version
of the Vue component. This is typically fine. However, in certain cases,
perhaps using a PR or forked version of this package, you may need to
import the source Vue component directly from the package. To do this,
just append the import with the path to the Vue component:
```js
import Futurelink from 'vue-futurelink/src/Futurelink';
```
> Note: doing this requires that your build system is using
[vue-loader](https://github.com/vuejs/vue-loader) so it can compile the
Vue [SFC](https://github.com/vuejs/vue-loader/blob/master/docs/spec.md).
## route.meta.preload
In some cases, actionable routes shouldn't be preloaded (i.e. `/logout`).
You can explicitly set the `preload` meta property of a route to
`false` to prevent it from being preloaded:
```js
{
path: '/logout',
// ...
meta: {
preload: false,
},
},
```
In other cases, routes that can be resource intensive may need more
complex handling to preload additional resources not typically
associated with just mounting a vue component.
You can also supply the `preload` meta property with a callback
function. This callback is passed two parameters:
- `path` - (string) The link href value (stripped of any router base path).
- `route` - (Route) The matched route object.
To prevent the route from being preloaded, the return value of the
callback must explicitly return `false`. Optionally, a `Promise` may
be returned that can ultimately be resolved to a boolean.
> Note: Any errors or rejections encountered during the callback are intentionally
> caught as preloading is meant to be a passive and non-blocking feature.
> These errors will only be logged to the console if the
> [Vue.config.silent](https://vuejs.org/v2/api/#silent) option is disabled.
```js
{
path: '/process-intensive-route',
// ...
meta: {
preload: (path, route) => startFetchingOtherResources(route),
},
},
```
## License
Released under the MIT license.
[futurelink]: https://github.com/SamKnows/futurelink