https://github.com/regenrek/nuxt-lazysizes-aspect-ratio-blur

Example with nuxtjs + lazysizes + aspect-ratio + blur-up
https://github.com/regenrek/nuxt-lazysizes-aspect-ratio-blur

Last synced: 24 days ago
JSON representation

Example with nuxtjs + lazysizes + aspect-ratio + blur-up

• Host: GitHub
• URL: https://github.com/regenrek/nuxt-lazysizes-aspect-ratio-blur
• Owner: regenrek
• Created: 2019-08-05T09:52:38.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T00:51:14.000Z (about 2 years ago)
• Last Synced: 2024-05-18T07:47:34.181Z (8 months ago)
• Language: Vue
• Homepage: https://codesandbox.io/s/github/regenrek/nuxt-lazysizes-aspect-ratio-blur
• Size: 1.83 MB
• Stars: 5
• Watchers: 3
• Forks: 3
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nuxtjs + lazysizes + aspect-ratio + blur-up

### Demo

[Codesandbox Demo](https://codesandbox.io/s/nuxtjs-lazysizes-aspect-ratio-blur-5e3rv)

### Features

- [lazysizes](https://github.com/aFarkas/lazysizes) as nuxt plugin

- Define [Aspect Ratio](https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/) for imagecontainers

- Supports lqip [blur-up](https://github.com/aFarkas/lazysizes#lqipblurry-image-placeholderblur-up-image-technique)

- Supports webp with [nuxt-optimizied-images](https://github.com/bazzite/nuxt-optimized-images)

### Install Project

```bash

$ git clone https://github.com/regenrek/nuxt-lazysizes-aspect-ratio-blur

$ yarn

$ yarn dev

```

### Usage

```html

  


    

    


    

    

    

    

  


```

### Todo

- Better `` API

- Create vue-plugin

- Create nuxt-module

### Credits:

Credit to [Alex](http://twitter.com/ignore_you): [Minify, generate WebP and lazyload images in your Vue & Nuxt application](https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm)

### Other examples

[Aspect Ratio + vanilla/lazyload](https://codepen.io/kkern/pen/LKmvjx)