Registry / web-framework / vite-plugin-vue-images

vite-plugin-vue-images

library0.6.1jsnpmunverified

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.

web-framework

npm install vite-plugin-vue-images

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-IM

vite-plugin-vue-images

web-frameworkjavascriptv0.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

ViteImages (default)

✓ import ViteImages from 'vite-plugin-vue-images'

✗ const ViteImages = require('vite-plugin-vue-images')

ESM-only; CommonJS require will fail.

Options (type)

✓ import type { Options } from 'vite-plugin-vue-images'

✗ import { Options } from 'vite-plugin-vue-images'

Type-only import; avoid runtime value import.

ViteImages in vite.config.ts

✓ import ViteImages from 'vite-plugin-vue-images' export default defineConfig({ plugins: [Vue(), ViteImages()] })

✗ import ViteImages from 'vite-plugin-vue-images' export default defineConfig({ plugins: [Vue(), ViteImages({ dirs: 'src/assets/img' })] }) // Wrong: dirs must be an array

dirs option must be array of strings.

Configure the plugin in vite.config.ts and use images in Vue templates without explicit imports.

// vite.config.js import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import ViteImages from 'vite-plugin-vue-images' export default defineConfig({ plugins: [ Vue(), ViteImages({ dirs: ['src/assets/img'], extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'] }) ] }) // Any Vue component can now use images directly: // <template> // <img :src="MyImage" /> // </template> // where src/assets/img/my_image.jpg becomes MyImage

Debug

Known issues

breakingOnly works with Vite 2 and Vue 3; incompatible with Vite 3+ or Vue 2.

fix

Upgrade to a Vite 2 project or use an alternative plugin for Vite 3+.

affects: >=0.0.0

gotchaVariables (props, data) will be clobbered in templates if they conflict with image names.

fix

Avoid naming Vue component data or props with the same PascalCase name as image files.

affects: >=0.0.0

gotchaOnly works with v-bind:src or :src; not with normal src="Image1".

fix

Always use :src for image references in templates.

affects: >=0.0.0

gotchaDuplicate image names across directories are not supported; last one wins.

fix

Ensure unique file names across all configured image directories.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-plugin-vue-images'

Package not installed or incorrect import path.

fix

Run 'npm install -D vite-plugin-vue-images' and import as 'import ViteImages from "vite-plugin-vue-images"'.

If you are using Vite 3+, this plugin is not compatible.

Plugin only supports Vite 2.

fix

Switch to Vite 2 project or use an alternative image auto-import plugin.

Uncaught (in promise) ReferenceError: ImageName is not defined

Image variable not auto-imported due to incorrect dirs configuration or extension not supported.

fix

Verify the image file is in one of the dirs, has an allowed extension, and the name matches after PascalCase conversion.

Upgrade

Version history

0.6.1latest on npm

Audit

Dependencies

viterequiredVite plugin system dependency; requires Vite 2.x only.

vuerequiredRequires Vue 3 for template transformation support.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/sampullman/vite-plugin-vue-images ↗

packagehttps://www.npmjs.com/package/vite-plugin-vue-images ↗