vite-multiple-assets

2.2.6 verified Mon Apr 27 auth: no javascript

Vite plugin that allows multiple public directories for assets, extending Vite's single publicDir limitation. Current stable version 2.2.6 with TypeScript definitions, released as needed. Key differentiator: configure multiple asset directories (e.g., shared assets across projects) without copying files. Depends on mime-types and Vite >=2.9.6.

Common errors

error Error: The plugin 'vite-multiple-assets' requires Vite version >=2.9.6. ↓

cause Using an older version of Vite (e.g., 2.8.x).

fix

Upgrade Vite: npm install vite@latest

error Cannot find module 'mime-types' ↓

cause Missing peer dependency mime-types.

fix

npm install mime-types

error TypeError: viteMultipleAssets is not a function ↓

cause Using CommonJS require instead of ESM import.

fix

Change to import statement or use dynamic import: const { viteMultipleAssets } = await import('vite-multiple-assets');

error [vite-multiple-assets] Directory 'xxx' does not exist ↓

cause The specified directory path is invalid or does not exist.

fix

Check the directory path and ensure it exists.

Warnings

breaking In v2.x, the plugin requires Vite >=2.9.6. Using older Vite versions causes build failures. ↓

fix Upgrade Vite to ^2.9.6 or later.

breaking The default export (viteMultipleAssets) is the recommended way. Named export is also available but may be removed in future. ↓

fix Use default import: import viteMultipleAssets from 'vite-multiple-assets'.

breaking Symlinks support was added in v2.2.0. Directories containing symlinks may behave unexpectedly in earlier versions. ↓

fix Upgrade to v2.2.0 or later.

breaking CSS assets from multiple directories are correctly handled only from v2.2.2 onwards. Older versions may fail to transform CSS asset URLs correctly. ↓

fix Upgrade to v2.2.2 or later.

gotcha The 'resolve' option (boolean) when false prevents the plugin from prefixing asset URLs with directory name. Assets may conflict if filenames duplicate. ↓

fix Ensure unique filenames across directories or set resolve: true.

gotcha The plugin does not automatically watch directories for changes unless watch: true is explicitly set. Missing watch option can cause stale assets in dev. ↓

fix Set watch: true for directories that change frequently.

Install

npm install vite-multiple-assets

yarn add vite-multiple-assets

pnpm add vite-multiple-assets

Imports

viteMultipleAssets

wrong

const viteMultipleAssets = require('vite-multiple-assets')

correct

import { viteMultipleAssets } from 'vite-multiple-assets'

ESM-only; CommonJS require does not work.

default

import viteMultipleAssets from 'vite-multiple-assets'

Default import is available and preferred.

ViteMultipleAssetsOptions

import type { ViteMultipleAssetsOptions } from 'vite-multiple-assets'

Type import for TypeScript users.

Quickstart

Configures multiple public asset directories in Vite, including options for path resolution and file watching.

// vite.config.js
import { defineConfig } from 'vite';
import viteMultipleAssets from 'vite-multiple-assets';

export default defineConfig({
  plugins: [
    viteMultipleAssets([
      'public', // default public directory
      { dir: 'shared-assets', resolve: true },
      { dir: 'custom-assets', resolve: false, watch: true },
    ])
  ]
});

// Assets in 'shared-assets/' are served at /shared-assets/ prefix (if resolve: true)
// Assets in 'custom-assets/' are served at root without prefix (if resolve: false)
// This example shows how to add multiple asset directories with options.