nuxt-lazysizes

KO | EN

gitlite — search

#llm #go #golang #android #machine-learning #linux #nodejs #windows #awesome #cli #awesome-list #mcp #ios #open-source

(★ 42)

Lazysizes module for Nuxt 2.

nuxt-lazysizes 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
<img data-src="/media/image.jpg" class="lazyload" />
```

[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

<img :data-src="require('~/assets/media/image.jpg')" class="lazyload" />
```

✅ 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
<img data-src="~/assets/media/image.jpg" class="lazyload" />
```

**Responsive example**

```html
<figure>
  <picture>
    <source
      data-srcset="~/assets/media/image-md.jpg"
      media="(min-width:700px)"
    />

<img data-src="~/assets/media/image.jpg" class="lazyload" />
  </picture>
</figure>
```

**Custom component example**

```html
<AppImage
  source-md-url="~/assets/media/image-md.jpg"
  image-url="~/assets/media/image.jpg"
/>
```

### 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)

Copyright (c) Alexander Farkas

**Nuxt LazySizes**

[MIT License](LICENSE)

Copyright (c) Ivo Dolenc

nuxt-lazysizes

nuxt-lazysizes 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

nuxt-lazysizes

nuxt-lazysizes 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README