Vite Plugin Asset Manager

1.0.6 verified Mon Apr 27 auth: no javascript

A Vite plugin providing a visual asset management interface during development. Scans and catalogs images, videos, audio, fonts, documents, and data files; shows import locations, detects duplicates via MD5 hashing, and allows filtering by size/type/date. Includes a draggable floating panel, keyboard shortcuts (Alt+Shift+A), real-time updates via SSE, and bulk operations (download ZIP, copy paths, delete). Ships TypeScript types. Current version 1.0.6 (March 2025). Requires Vite >=5.0.0 and Node >=22. Peer dependency on vite (not bundled). Regular releases; actively maintained.

Common errors

error Error: Cannot find module 'vite-plugin-asset-manager' ↓

cause Package not installed or CJS require used instead of ESM import.

fix

Run npm install vite-plugin-asset-manager -D and use import AssetManager from 'vite-plugin-asset-manager'.

error TypeError: AssetManager is not a function ↓

cause Default import not used; likely destructured incorrectly.

fix

Use import AssetManager from 'vite-plugin-asset-manager' (default export) not import { AssetManager }.

error Uncaught Error: Vite plugin 'vite-plugin-asset-manager' requires Vite >=5.0.0 ↓

cause Project uses an older Vite version.

fix

Update Vite to version 5 or newer.

error [vite] Internal server error: Cannot find module 'vite-plugin-asset-manager/next' ↓

cause Attempting to use Next.js integration without installing the correct subpath or from a non-Next.js project.

fix

Ensure you have the package installed and only import withAssetManager from 'vite-plugin-asset-manager/next' inside a Next.js configuration file.

Warnings

breaking Requires Node >=22 and Vite >=5.0.0. Older Node versions will fail to start. ↓

fix Update Node to v22+ and Vite to v5+.

gotcha The plugin injects a floating icon into your development HTML. It is not removed in production builds. ↓

fix In production, the plugin logic is stripped (Vite dev-only), but ensure you don't depend on the UI outside dev mode.

gotcha Asset scanning uses file system watchers; might cause high CPU on projects with thousands of assets. Use `exclude` option to ignore unnecessary directories. ↓

fix Add exclude patterns for node_modules, build output, etc.

Install

npm install vite-plugin-asset-manager

yarn add vite-plugin-asset-manager

pnpm add vite-plugin-asset-manager

Imports

AssetManager

wrong

const AssetManager = require('vite-plugin-asset-manager')

correct

import AssetManager from 'vite-plugin-asset-manager'

Default export. ESM only (package type module). CJS require will fail.

type AssetManagerOptions
```
import type { AssetManagerOptions } from 'vite-plugin-asset-manager'
```
Type import available; Options type exported from package.

withAssetManager

wrong

import { withAssetManager } from 'vite-plugin-asset-manager'

correct

import { withAssetManager } from 'vite-plugin-asset-manager/next'

Next.js wrapper exported from subpath; using main export will error.

Quickstart

Registers the AssetManager plugin in vite.config.ts with optional configuration for prefix, auto-inject, and exclusion patterns.

// vite.config.ts
import { defineConfig } from 'vite'
import AssetManager from 'vite-plugin-asset-manager'

export default defineConfig({
  plugins: [
    AssetManager({
      // Optional: customize prefix or disable auto-inject
      prefix: '/__assets__',
      autoInject: true,
      // Ignore certain file patterns
      exclude: ['**/*.map']
    })
  ],
})

// Access UI at /__asset_manager__/ or press Alt+Shift+A