https://github.com/dvelasquez/vue-link-pre
A simple plugin that adds <link rel="preload"> and <link rel="prefetch"> to a vue application
https://github.com/dvelasquez/vue-link-pre
performance plugin prefetch preload vue
Last synced: 4 months ago
JSON representation
A simple plugin that adds <link rel="preload"> and <link rel="prefetch"> to a vue application
- Host: GitHub
- URL: https://github.com/dvelasquez/vue-link-pre
- Owner: dvelasquez
- Created: 2020-01-18T21:56:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T02:16:37.000Z (almost 3 years ago)
- Last Synced: 2025-10-11T19:30:00.500Z (8 months ago)
- Topics: performance, plugin, prefetch, preload, vue
- Language: TypeScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This is a forked project from https://github.com/shershen08/vue-preload
Tool for [Vue.js SSR apps](https://vuejs.org/v2/guide/ssr.html) that include other resources that may be handy to preload to improve performance.
## Install
```sh
npm install vue-link-pre --save
yarn add vue-link-pre
```
## Usage
```js
import VueLinkPre from 'vue-link-pre'
Vue.use(VueLinkPre)
// dynamically add single item
// by default the type 'script' is assigned
// and the rel="preload"
Vue.addPreLink('https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js')
// add multiple items at once
Vue.preGroup({
script: [
'https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js',
],
style: ['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap-reboot.min.css'],
image: ['https://www.google.nl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'],
}, 'prefetch')
```
## API
**Vue.addPreLink(link, elementRef)**
Preload single resource. You can provide type ('image'|'script'|'font'|'etc') and a elementRef ('preload'|'prefetch')
**Vue.preloadGroup(resourceMap)**
Preload group of resources of multiple types. The map keys are limited to valid preload asset types:
script, style, image, media, document, font.
Also, you can define if is a preload or a prefetch.
## Other details
This library adds an id using `vue-link-pre${hash}` of the url to preload, to avoid duplicating the element in the DOM.
## See also
- [smashingmagazine.com Preload: What Is It Good For? By Yoav Weiss](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)
- [current browser support for