Learn Nuxt with a Collection of 100+ Tips!

image
image

Optimised images for Nuxt, with progressive processing, lazy-loading, real-time resizes and providers support.

nuxt-image-social-card

npm versionnpm downloadsLicenseNuxtVolta

Nuxt Image

Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.

Features

  • <nuxt-img> drop-in replacement for the native <img> element
  • <nuxt-picture> drop-in replacement for the native <picture> element.
  • Built-in image resizer and transformer with unjs/ipx
  • Support 20+ providers
  • Generate responsive sizes
  • Optimize using modern formats such as webp and avif
  • ... and more

Nuxt 2

Note: This branch is for Nuxt 3 compatible module. Checkout v0 branch for Nuxt 2 support. (Announcement)

Contributing

  • Clone this repository
  • Enable Corepack using corepack enable
  • Install dependencies using pnpm install
  • Run pnpm dev:prepare to generate type stubs.
  • Use pnpm dev to start playground in development mode.

📑 License

Published under the MIT License