Nuxt Image Module
npm install @nuxt/image
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
[![Volta][volta-src]][volta-href]
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
- drop-in replacement for the native element
- drop-in replacement for the native 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
Install @nuxt/image dependency to your project:
``sh`
npx nuxt module add image
Note: This branch is for Nuxt 3 compatible module. Checkout v0 branch for Nuxt 2 support. (Announcement)
- Clone this repository
- Enable Corepack using corepack enablepnpm install
- Install dependencies using pnpm dev:prepare
- Run to generate type stubs.pnpm dev` to start playground in development mode.
- Use
Published under the MIT License
[npm-version-src]: https://img.shields.io/npm/v/@nuxt/image/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxt/image/v/latest
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/image.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npm.chart.dev/@nuxt/image
[license-src]: https://img.shields.io/npm/l/@nuxt/image.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@nuxt/image
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com
[volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg
[volta-href]: https://volta.net/nuxt/image?utm_source=nuxt_image_readme