Registry / devops / vite-webp-avif-generator-plugin

vite-webp-avif-generator-plugin

library2.2.1jsnpmunverified

Vite plugin for automatic image conversion to WebP and AVIF during dev server runtime. Current version 2.2.1, supports Vite 4.x–8.x and Nuxt setups with srcDir. Key differentiator: real-time conversion on file addition via chokidar watchers, skips existing targets, runs WebP and AVIF in parallel. Requires sharp and chokidar as peer dependencies.

devops

npm install vite-webp-avif-generator-plugin

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-WEBP-AVIF-GEN

vite-webp-avif-generator-plugin

devopsjavascriptv2.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

convertImages

✓ import convertImages from 'vite-webp-avif-generator-plugin'

✗ const convertImages = require('vite-webp-avif-generator-plugin')

Plugin ships ESM only; CommonJS require will fail.

ConvertImagesOptions

✓ import type { ConvertImagesOptions } from 'vite-webp-avif-generator-plugin'

✗ import { ConvertImagesOptions } from 'vite-webp-avif-generator-plugin'

TypeScript users should import this type with 'import type' to avoid runtime side effects.

default export

✓ import convertImages from 'vite-webp-avif-generator-plugin'

✗ import { convertImages } from 'vite-webp-avif-generator-plugin'

The package has a default export, not a named export 'convertImages'.

Shows minimal plugin setup with custom watched folders and exclusion, enabling AVIF conversion.

// vite.config.js import { defineConfig } from 'vite' import convertImages from 'vite-webp-avif-generator-plugin' export default defineConfig({ plugins: [convertImages({ folders: ['src/assets/img', 'public/img'], exclude: ['public/img/generated'], enableAvif: true, })], })

Debug

Known issues

breakingNode.js 20.19+ required for Vite 7.x-8.x

fix

Upgrade Node.js to >=20.19.0 or pin to Vite 6.x and lower Node requirement accordingly.

affects: >=2.0.0

gotchaPlugin does not work in build mode; only dev server

fix

Use different image optimization for production builds (e.g., vite-plugin-imagemin).

affects: >=1.0.0

gotchaRelative paths are resolved from Vite root; paths starting with publicDir name resolved from parent of publicDir

fix

Use absolute paths or ensure correct relative references; see README path resolution section.

affects: >=2.0.0

deprecatedOlder Vite 4.x support with Node <20 may cause sharp/chokidar compatibility issues

fix

Upgrade to latest plugin version or lock sharp and chokidar accordingly.

affects: >=1.0.0 <2.0.0

gotchaExclude option does not automatically exclude generated .webp/.avif files; plugin skips them by extension check

fix

Do not rely on exclude for generated files; the plugin already handles it.

affects: >=1.0.0

Errors

Common errors & fixes

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'sharp'

sharp is a required peer dependency not installed

fix

npm install -D sharp

Error: The plugin only works in serve mode. Use 'apply: "serve"'

Plugin applied during build

fix

The plugin already uses apply: 'serve' internally; ensure not to override apply in config.

TypeError: convertImages is not a function

Default import mistakenly used as named import

fix

import convertImages from 'vite-webp-avif-generator-plugin' (no braces)

Upgrade

Version history

2.2.1latest on npm

Audit

Dependencies

viterequiredpeer dependency, plugin only works within Vite

sharprequiredimage conversion engine

chokidarrequiredfile watching

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/gkarev/vite-webp-avif-generator-plugin ↗

packagevite-webp-avif-generator-plugin ↗

homepagehttps://github.com/gkarev/vite-webp-avif-generator-plugin#readme ↗