{"id":22917,"library":"vite-plugin-vue-images","title":"vite-plugin-vue-images","description":"Auto-import images into Vue templates for Vite projects, eliminating manual imports for Vite 2 + Vue 3. Version 0.6.1 is current, with a maintenance-level release cadence. Unlike manual imports, this plugin resolves images from configured directories and transforms template references into automatically imported variables. Key differentiator: convention-based image discovery with PascalCase naming and subdirectory prefix support. Limited to Vite 2 and Vue 3; no longer actively developed.","status":"maintenance","version":"0.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/sampullman/vite-plugin-vue-images","tags":["javascript","vite","vue","images","plugin","development","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-images","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-images","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-images","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vite plugin system dependency; requires Vite 2.x only.","package":"vite","optional":false},{"reason":"Requires Vue 3 for template transformation support.","package":"vue","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will fail.","wrong":"const ViteImages = require('vite-plugin-vue-images')","symbol":"ViteImages (default)","correct":"import ViteImages from 'vite-plugin-vue-images'"},{"note":"Type-only import; avoid runtime value import.","wrong":"import { Options } from 'vite-plugin-vue-images'","symbol":"Options (type)","correct":"import type { Options } from 'vite-plugin-vue-images'"},{"note":"dirs option must be array of strings.","wrong":"import ViteImages from 'vite-plugin-vue-images'\nexport default defineConfig({ plugins: [Vue(), ViteImages({ dirs: 'src/assets/img' })] })\n// Wrong: dirs must be an array","symbol":"ViteImages in vite.config.ts","correct":"import ViteImages from 'vite-plugin-vue-images'\nexport default defineConfig({ plugins: [Vue(), ViteImages()] })"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport ViteImages from 'vite-plugin-vue-images'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    ViteImages({\n      dirs: ['src/assets/img'],\n      extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp']\n    })\n  ]\n})\n\n// Any Vue component can now use images directly:\n// <template>\n//   <img :src=\"MyImage\" />\n// </template>\n// where src/assets/img/my_image.jpg becomes MyImage","lang":"typescript","description":"Configure the plugin in vite.config.ts and use images in Vue templates without explicit imports."},"warnings":[{"fix":"Upgrade to a Vite 2 project or use an alternative plugin for Vite 3+.","message":"Only works with Vite 2 and Vue 3; incompatible with Vite 3+ or Vue 2.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Avoid naming Vue component data or props with the same PascalCase name as image files.","message":"Variables (props, data) will be clobbered in templates if they conflict with image names.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always use :src for image references in templates.","message":"Only works with v-bind:src or :src; not with normal src=\"Image1\".","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure unique file names across all configured image directories.","message":"Duplicate image names across directories are not supported; last one wins.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D vite-plugin-vue-images' and import as 'import ViteImages from \"vite-plugin-vue-images\"'.","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'vite-plugin-vue-images'"},{"fix":"Switch to Vite 2 project or use an alternative image auto-import plugin.","cause":"Plugin only supports Vite 2.","error":"If you are using Vite 3+, this plugin is not compatible."},{"fix":"Verify the image file is in one of the dirs, has an allowed extension, and the name matches after PascalCase conversion.","cause":"Image variable not auto-imported due to incorrect dirs configuration or extension not supported.","error":"Uncaught (in promise) ReferenceError: ImageName is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}