{"id":42256,"library":"vite-webp-avif-generator-plugin","title":"Vite WebP & AVIF Generator Plugin","description":"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.","status":"active","version":"2.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/gkarev/vite-webp-avif-generator-plugin","tags":["javascript","vite","vite-plugin","webp","avif","image","image-conversion","image-optimizer","sharp","typescript"],"install":[{"cmd":"npm install vite-webp-avif-generator-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vite-webp-avif-generator-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-webp-avif-generator-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, plugin only works within Vite","package":"vite","optional":false},{"reason":"image conversion engine","package":"sharp","optional":false},{"reason":"file watching","package":"chokidar","optional":false}],"imports":[{"note":"Plugin ships ESM only; CommonJS require will fail.","wrong":"const convertImages = require('vite-webp-avif-generator-plugin')","symbol":"convertImages","correct":"import convertImages from 'vite-webp-avif-generator-plugin'"},{"note":"TypeScript users should import this type with 'import type' to avoid runtime side effects.","wrong":"import { ConvertImagesOptions } from 'vite-webp-avif-generator-plugin'","symbol":"ConvertImagesOptions","correct":"import type { ConvertImagesOptions } from 'vite-webp-avif-generator-plugin'"},{"note":"The package has a default export, not a named export 'convertImages'.","wrong":"import { convertImages } from 'vite-webp-avif-generator-plugin'","symbol":"default export","correct":"import convertImages from 'vite-webp-avif-generator-plugin'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport convertImages from 'vite-webp-avif-generator-plugin'\n\nexport default defineConfig({\n  plugins: [convertImages({\n    folders: ['src/assets/img', 'public/img'],\n    exclude: ['public/img/generated'],\n    enableAvif: true,\n  })],\n})","lang":"javascript","description":"Shows minimal plugin setup with custom watched folders and exclusion, enabling AVIF conversion."},"warnings":[{"fix":"Upgrade Node.js to >=20.19.0 or pin to Vite 6.x and lower Node requirement accordingly.","message":"Node.js 20.19+ required for Vite 7.x-8.x","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use different image optimization for production builds (e.g., vite-plugin-imagemin).","message":"Plugin does not work in build mode; only dev server","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use absolute paths or ensure correct relative references; see README path resolution section.","message":"Relative paths are resolved from Vite root; paths starting with publicDir name resolved from parent of publicDir","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade to latest plugin version or lock sharp and chokidar accordingly.","message":"Older Vite 4.x support with Node <20 may cause sharp/chokidar compatibility issues","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Do not rely on exclude for generated files; the plugin already handles it.","message":"Exclude option does not automatically exclude generated .webp/.avif files; plugin skips them by extension check","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'2.2.1':22 '4':25 '8':27 'addit':42 'automat':9 'avif':3,15,52,68 'chokidar':44,58 'convers':11,39,72 'current':20 'depend':61 'dev':17 'differenti':35 'exist':47 'file':41 'generat':4 'imag':10,69,71,74 'image-convers':70 'image-optim':73 'javascript':62 'key':34 'nuxt':30 'optim':75 'parallel':54 'peer':60 'plugin':5,7,66 'real':37 'real-tim':36 'requir':55 'run':49 'runtim':19 'server':18 'setup':31 'sharp':56,76 'skip':46 'srcdir':33 'support':23 'target':48 'time':38 'typescript':77 'version':21 'via':43 'vite':1,6,24,63,65 'vite-plugin':64 'watcher':45 'webp':2,13,50,67 'x':26,28","created_at":"2026-06-04T18:56:22.663787+00:00","updated_at":"2026-06-04T18:56:22.663787+00:00","problems":[{"fix":"npm install -D sharp","cause":"sharp is a required peer dependency not installed","error":"Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'sharp'"},{"fix":"The plugin already uses apply: 'serve' internally; ensure not to override apply in config.","cause":"Plugin applied during build","error":"Error: The plugin only works in serve mode. Use 'apply: \"serve\"'"},{"fix":"import convertImages from 'vite-webp-avif-generator-plugin' (no braces)","cause":"Default import mistakenly used as named import","error":"TypeError: convertImages is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/gkarev/vite-webp-avif-generator-plugin#readme","github":"https://github.com/gkarev/vite-webp-avif-generator-plugin","docs":null,"changelog":null,"pypi":null,"npm":"vite-webp-avif-generator-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}