Nuxtjs + lazysizes + aspect-ratio + blur-up

Demo

Codesandbox Demo

Features

• lazysizes as nuxt plugin
• Define Aspect Ratio for imagecontainers
• Supports lqip blur-up
• Supports webp with nuxt-optimizied-images

Install Project

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

$ yarn

$ yarn dev

Usage

<template>
  <div>
    <!-- blur up + optimizied image lazyload -->
    <LazyImage
        data-src="cat1.jpg"
        aspect-ratio="16:9"
        object-fit="cover"
        fetchMode="img"
    />

    <!-- srcset lazyload -->
    <LazyImage
        data-src="cat1.jpg"
        aspect-ratio="16:9"
        object-fit="cover"
        fetchMode="srcset"
    />

    <!-- simple image lazyload -->
    <LazyImage
        data-src="cat1.jpg"
        aspect-ratio="16:9"
        object-fit="cover"
    />
  </div>
</template>

Todo

• Better <LazyImage> API
• Create vue-plugin
• Create nuxt-module

Credits:

Credit to Alex: Minify, generate WebP and lazyload images in your Vue & Nuxt application

Other examples

Aspect Ratio + vanilla/lazyload