egoist / vue-router-prefetch

Prefetch links when they are visible in viewport.

vue-router-prefetch

Please consider donating to this project's author, EGOIST, 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

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:

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 <router-link> without any changes, when this component is visible in viewport, it will automatically prefetch the (async) route component.

Check out the live demo.

You can also register it as a new component instead of overriding <router-link>:

app.use(RouterPrefetch, {
  componentName: 'QuickLink'
})

Now you can use it as <quick-link> in your app.

Browser Support

• Without polyfills: Chrome, Firefox, Edge, Opera, Android Browser, Samsung Internet.
• With Intersection Observer polyfill ~6KB gzipped/minified: Safari, IE11

Props

All props of <router-link> 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 <router-link>s:

createRouter({
  routes: [
    {
      path: '/some-async-page',
      meta: { prefetch: false },
      component: () => import('./async-page.vue')
    }
  ]
})

It's also possible to turn of prefetching globally:

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:

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 and nuxt-link.

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.
Authored and maintained by EGOIST with help from contributors (list).

Website · GitHub @EGOIST · Twitter @_egoistlily

vue-router-prefetch's Issues

You need to call Vue.use(VueRouter) before this plugin!

import Vue from 'vue';
import router from './routes';
import store from "./store";
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import RouterPrefetch from 'vue-router-prefetch';
Vue.use(RouterPrefetch);

This throws the error You need to call Vue.use(VueRouter) before this plugin!

Single File Components Use

Hi @egoist — thanks for your contributions to the Vue community <3

I'm just wondering whether this works with an app using Single File Components (with Vite)?

I've installed, however am running into the error:

[Vue warn]: Component is missing template or render function. 
  at <QuickLink to="/about" > 
  at <Menu> 
  at <App>

and

index.esm.js:181 Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

Keen to hear your thoughts!

Timeout example

Is the timeout option per route? I tried it with a 10 second timeout (10000ms) and it didn't seem to delay the loading of the route at all. I'd love to see a working example in the repo.

Vue 3 compatibility

Just wanted to ask if there are any plans to make vue-router-prefetch work on Vue 3.

Thank you very much!

The live demo doesn't work

https://stackblitz.com/edit/vue-nr9q5u?file=index.js

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <Anonymous>
<Root>

Cannot read property '_init' of undefined on a default vue CLI project with Typescript

Version: 1.5.1
Repo to reproduce: https://github.com/gijsroge/vue-router-prefetch-issue

This is a clean vue cli project with Typescript & Vue class component.

It seems to have an issue with booting the plugin right when you start the app. (see error below)

vue.runtime.esm.js?2b0e:5148 Uncaught TypeError: Cannot read property '_init' of undefined at Catalogue (vue.runtime.esm.js?2b0e:5148) at VueComponent.linkPrefetch (index.mjs?4f85:1) at eval (index.mjs?4f85:1) at Array.forEach (<anonymous>) at IntersectionObserver.u (index.mjs?4f85:1)

Add some tests

Add unit/e2e tests using Cypress.

---

IssueHunt Summary

egoist has been rewarded.

Backers (Total: $100.00)

• issuehunt ($100.00)

Submitted pull Requests

• #10 test: add cypress for e2e test

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Provide CommonJS modules

Version: 1.1.2

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/.../node_modules/vue-router-prefetch/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){var e="undefined"!=typeof window,t=e&&navigator.connection,n=e&&(!t||-1===(t.effectiveType||"").indexOf("2g")&&!t.saveData),r=e&&window.IntersectionObserver,o={};function i(e){return new Promise(function(t,n){var r=new XMLHttpRequest;r.open("GET",e,r.withCredentials=!0),r.addEventListener("load",function(){200===r.status?t():n()}),r.send()})}var s=function(t){if(e){var n=document.createElement("link");return n.relList&&n.relList.supports&&n.relList.supports(t)}}("prefetch")?function(e){return new Promise(function(t,n){var r=document.createElement("link");r.rel="prefetch",r.href=e,r.addEventListener("load",t),r.addEventListener("error",n),document.head.appendChild(r)})}:i;function c(e,t){if(n&&!o[e])return(t?function(e){return self.fetch?fetch(e,{credentials:"include"}):i(e)}:s)(e).then(function(){o[e]=!0})}export default f

    SyntaxError: Unexpected token export

Manual prefetching?

I have a custom <base-button /> that doesn't use router-link, but it does use $router.push(), is it possible to somehow bind this exact same functionality to something other than a router-link?

Prefetch on hover

This appears to be the only library that properly supports prefetching components in Vue, and it supports a heap of stuff out of the box (like additional files). It would be even better however, if it did prefetch on hover, rather than when the link is in the viewport. There is good reason for this, and the main one being that simply being in the viewport is not a good indicator of it ever being clicked or tapped (on mobile).

Being able to set quicklink to only work when it's hovered on (or better yet, when the mouse looks like it's going to that link), is much better.

Cheers :)

Fix example

const createPage = id => async () => {
console.log(fetching page ${id})
return {
data() {
return {
id: id
}
},
template: <div> <h1>page {{id}}</h1> <SiteNav /> </div>,
components: {
SiteNav
}
}
}

Prefetch addtional files

<router-link to="/foo" :prefetch-files="files">foo</router-link>

This will prefetch the route component for /foo and files which is an array of links to static files. We can reuse the prefetch function here: https://github.com/GoogleChromeLabs/quicklink/blob/master/src/prefetch.mjs