lazyload-vue

Vue Plugin for vanilla-lazyload

Build status:


features

- [x] Simple usage with ``v-lazy-src`
- [x] Accepts options `Vue.use(LazyloadVue, options)`
- [x] Multiple instances
- [x] Scrolling Panel
- [x] Multiple scrolling panels
- [ ] Responsive images - img tag with srcset / sizes
- [ ] Responsive images - picture tag
- [ ] Delay load
- [ ] Videos - Tag video
- [ ] Lazy Iframes
- [ ] Lazy Background images with `v-lazy-bg`

Install

yarn add lazyload-vue

Usage

`js
import LazyloadVue from 'lazyload-vue'

Vue.use(LazyloadVue)
`

Directive lazy-src example

`html

`

Directive lazy-container example

`html


`

Example with options

`js
import LazyloadVue from 'lazyload-vue'

Vue.use(LazyloadVue, {
instances: {
root: {
elements_selector: '.lazy-custom-root'
},
webp: {
elements_selector: '.lazy-webp'
to_webp: true
}
}
})
`

`html

``

Check options section on documentation: vanilla-lazyload

Development Setup

# Project setup

yarn install

# Compiles and hot-reloads for development

yarn start

# Compiles and minifies for production

yarn build

# Run your tests

yarn test

# Lints and fixes files

yarn lint

# Run your unit tests

yarn test:unit