https://github.com/shershen08/vue-preload
Plugin SSR Vue adding <link rel="preload" capabilities
https://github.com/shershen08/vue-preload
Last synced: 7 months ago
JSON representation
Plugin SSR Vue adding <link rel="preload" capabilities
- Host: GitHub
- URL: https://github.com/shershen08/vue-preload
- Owner: shershen08
- Created: 2017-09-29T15:18:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-07T10:28:26.000Z (over 7 years ago)
- Last Synced: 2025-03-30T14:51:13.568Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 33.2 KB
- Stars: 14
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-preload - Plugin SSR Vue adding `<link rel='preload' capabilities (Scaffold [🔝](#readme))
- awesome-vue-zh - Vue预加载
- awesome-vue - vue-preload ★9 - A plugin Vue for adding `<link rel="preload"` capabilities (Scaffold / Universal)
- awesome-vue - vue-preload - A plugin Vue for adding `<link rel="preload"` capabilities (Scaffold / Universal)
- awesome-vue - vue-preload - A plugin Vue for adding `<link rel="preload"` capabilities (Components & Libraries / Scaffold)
README
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.
## Demo
Using [vue-ssr-boilerplate](https://github.com/fenivana/vue-ssr-boilerplate)
## Install
```sh
npm install vue-link-preload --save
```
## Usage
```js
import Preload from 'vue-link-preload'
Vue.use(Preload)
// dynamically add single item
// by default the type 'script' is assigned
Vue.addPreloadLink('https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js')
// add multiple items at once
Vue.preloadGroup({
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'],
})
```
## API
**Vue.addPreloadLink(link,[ type])**
Preload single resource. You can provide type and optionaly a callback on when the resource is available.
**Vue.preloadGroup(resourseMap)**
Preload group of resources of multiple types. The map keys are limited to valid preload asset types:
script, style, image, media, document, font.
## 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