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.

<template>
  <futurelink></futurelink>
</template>

<script>
  import Futurelink from 'vue-futurelink';

  export {
    components: {
      Futurelink
    }
  };
</script>

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:

<template>
  <futurelink v-on:preload="handlePreload"></futurelink>
</template>

<script>
  import Futurelink from 'vue-futurelink';

  export {
    methods: {
      handlePreload(path, route) {
          console.info(`Preloading ${path}`, route);
      },
    },
    components: {
      Futurelink
    }
  };
</script>

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:

import Futurelink from 'vue-futurelink/src/Futurelink';

Note: doing this requires that your build system is using vue-loader so it can compile the Vue SFC.

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:

{
  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 option is disabled.

{
  path: '/process-intensive-route',
  // ...
  meta: {
    preload: (path, route) => startFetchingOtherResources(route),
  },
},

License

Released under the MIT license.