Nuxt Image

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

• 📖  Read Documentation
• 👾  Playground

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

Installation

Install @nuxt/image dependency to your project:

npx nuxt module add image

Nuxt 2

Note: This branch is for Nuxt 3, 4 and 5 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