Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ivodolenc/nuxt-lazysizes

Lazysizes module for Nuxt 2.
https://github.com/ivodolenc/nuxt-lazysizes

lazy-loading lazyload lazysizes nuxt nuxt-lazysizes nuxt-module nuxtjs

Last synced: about 1 month ago
JSON representation

Lazysizes module for Nuxt 2.

Host: GitHub
URL: https://github.com/ivodolenc/nuxt-lazysizes
Owner: ivodolenc
License: mit
Created: 2020-10-31T21:59:59.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2023-05-15T18:30:24.000Z (over 1 year ago)
Last Synced: 2024-09-28T14:02:57.043Z (about 2 months ago)
Topics: lazy-loading, lazyload, lazysizes, nuxt, nuxt-lazysizes, nuxt-module, nuxtjs
Language: JavaScript
Homepage:
Size: 437 KB
Stars: 44
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

# Nuxt Lazysizes

Lazysizes module for Nuxt 2.

## Features

- Helps you integrate `lazysizes` loader
- Allows you to easily set options through the module
- Includes settings that can be used to extend the Nuxt build `loader`
- Boosts your lighthouse score and overall performance 🔥
- Provides a `lightweight`, `fast` and `reliable` solution
- Supports options to enable additional `plugins`
- `Zero-config` setup ready to go 🚀

## Quick Start

1. Install `nuxt-lazysizes` dependency to your project

```bash
$ yarn add -D nuxt-lazysizes # or npm i -D nuxt-lazysizes
```

2. Enable `nuxt-lazysizes` in the `buildModules` section

```js
// nuxt.config.js

export default {
buildModules: ['nuxt-lazysizes'],

lazySizes: {
/* Module Options */
}
}
```

That's it! Start developing your app!

## Examples

Here are some code examples

- [Basic](https://github.com/ivodolenc/nuxt-lazysizes/tree/master/examples/basic)
- [Advanced](https://github.com/ivodolenc/nuxt-lazysizes/tree/master/examples/advanced)
- [Plugins](https://github.com/ivodolenc/nuxt-lazysizes/tree/master/examples/plugins)

### Basic usage

Lazysizes does not need any configuration. Add the class `lazyload` to your images/iframes in combination with a `data-src` and/or `data-srcset` attribute.

```js
// nuxt.config.js

export default {
buildModules: ['nuxt-lazysizes']
}
```

```html

```

[More info](https://github.com/aFarkas/lazysizes#more-about-the-api)

### Advanced usage (optional)

By default, loading images from the `assets` folder won't work without extra settings because lazysizes uses custom attributes for lazyloading.

```html

```

✅ To fix this problem, the module provides `extendAssetUrls` option that can be used to extend the Nuxt build loader and define custom tags with new attributes:

```js
// nuxt.config.js

export default {
buildModules: ['nuxt-lazysizes'],

lazySizes: {
extendAssetUrls: {
img: ['src', 'srcset', 'data-src', 'data-srcset'],
source: ['src', 'srcset', 'data-src', 'data-srcset'],

// Example for a custom component
AppImage: ['source-md-url', 'image-url']
}
}
}
```

After defining the `extendAssetUrls` option, loading images from the `assets` folder will work as expected 👌

**Non-responsive example**

```html

```

**Responsive example**

```html

```

**Custom component example**

```html

```

### Extra plugins (optional)

The module also supports options to enable additional `plugins`, so you can easily extend and adjust lazysizes to your needs.

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
blurUp: true,
nativeLoading: true,
bgset: true
}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins)

## Module Options

Lazysizes automatically detects new elements with the class `lazyload` so you won't need to call or configure anything in most situations.

**Defaults**

```js
// nuxt.config.js

export default {
lazySizes: {
extendAssetUrls: undefined,
plugins: {
blurUp: false,
nativeLoading: false,
unveilhooks: false,
parentFit: false,
rias: false,
optimumx: false,
customMedia: false,
bgset: false
},

// LazySizes JS API
lazyClass: 'lazyload',
loadedClass: 'lazyloaded',
loadingClass: 'lazyloading',
preloadClass: 'lazypreload',
errorClass: 'lazyerror',
autosizesClass: 'lazyautosizes',
fastLoadedClass: 'ls-is-cached',
iframeLoadMode: 0,
srcAttr: 'data-src',
srcsetAttr: 'data-srcset',
sizesAttr: 'data-sizes',
minSize: 40,
customMedia: {},
init: true,
expFactor: 1.5,
hFac: 0.8,
loadMode: 2,
loadHidden: true,
ricTimeout: 0,
throttleDelay: 125
}
}
```

[More info](https://github.com/aFarkas/lazysizes#js-api)

### Blur-Up plugin

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
blurUp: true
},

// Default 'blurUp' settings
blurUpClass: 'ls-blur-up-img',
blurUpLoadingClass: 'ls-blur-up-is-loading',
blurUpInviewClass: 'ls-inview',
blurUpLoadedClass: 'ls-blur-up-loaded',
blurUpLoadedOriginalClass: 'ls-original-loaded'
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/blur-up)

### Native loading plugin

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
nativeLoading: true
},

// Default 'nativeLoading' settings
nativeLoading: {
setLoadingAttribute: false,
listenerMap: {
focus: 1,
mouseover: 1,
click: 1,
load: 1,
transitionend: 1,
animationend: 1,
scroll: 1,
resize: 1
},
disableListeners: undefined
}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading)

### Unveilhooks plugin (data-bg)

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
unveilhooks: true
}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks)

### Parent-fit plugin

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
parentFit: true
}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/parent-fit)

### Rias plugin

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
rias: true
},

// Rias defaults
rias: {
prefix: '',
postfix: '',
srcAttr: 'data-src',
absUrl: false,
modifyOptions: noop,
widthmap: {},
ratio: false,
traditionalRatio: false,
aspectratio: false,
widths: []
}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias)

### Optimumx plugin

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
optimumx: true
}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/optimumx)

### CustomMedia plugin

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
customMedia: true
},

customMedia: {}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/custommedia)

### Bgset plugin

- Default: `false`

```js
// nuxt.config.js

export default {
lazySizes: {
plugins: {
bgset: true
}
}
}
```

[More info](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset)

## License

**LazySizes**

[MIT License](https://github.com/aFarkas/lazysizes/blob/gh-pages/LICENSE)

**Nuxt LazySizes**

[MIT License](LICENSE)