Registry / web-framework / vite-plugin-list-directory-contents

vite-plugin-list-directory-contents

library1.4.5jsnpmunverified

A Vite plugin (v1.4.5) that generates a directory listing index page during development. Ideal for projects with multiple HTML entry points: it scans the base directory, filters common files (node_modules, .env, etc.), and injects the listing into a template using the {%DIRECTORY%} tag. Only active in serve mode; no-op on build. Minimal configuration: requires baseDir and optional filterList. Unlike general-purpose directory listing tools, it integrates seamlessly with Vite's dev server, allowing you to click through HTML files that are compiled on-the-fly. Maintained by Wes Bos, updated irregularly.

web-framework

npm install vite-plugin-list-directory-contents

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-LIST-D

vite-plugin-list-directory-contents

web-frameworkjavascriptv1.4.5

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.

directoryPlugin

✓ import { directoryPlugin } from 'vite-plugin-list-directory-contents'

✗ import directoryPlugin from 'vite-plugin-list-directory-contents'

Named export only; default import is not available.

plugin (via require)

✓ const { directoryPlugin } = require('vite-plugin-list-directory-contents')

✗ const directoryPlugin = require('vite-plugin-list-directory-contents')

CommonJS destructuring required; plugin is not a default export.

Config type

✓ import type { DirectoryPluginOptions } from 'vite-plugin-list-directory-contents'

TypeScript type for plugin options; useful for typed config.

Basic setup: import the plugin, pass baseDir, and use it in Vite config. The plugin will create an index.html with {%DIRECTORY%} tag.

// vite.config.ts import { defineConfig } from 'vite'; import { directoryPlugin } from 'vite-plugin-list-directory-contents'; export default defineConfig({ plugins: [ directoryPlugin({ baseDir: __dirname }), ], });

Debug

Known issues

gotchaPlugin only works in serve mode; it is a no-op during build.

fix

No fix needed; it's by design. If you need directory listing in production, consider other solutions.

affects: >=0.0.0

gotchaThe filterList default excludes many common files; custom filterList overrides defaults entirely.

fix

If you set a filterList, include all files you want to filter; defaults are not merged.

affects: >=1.0.0

gotchaThe plugin creates an index.html file in baseDir if it doesn't exist; this file is processed by Vite.

fix

Ensure you have no custom index.html you want to preserve, or modify the template carefully.

affects: >=0.0.0

gotchaSecurity: listing directory contents exposes file structure to local network; Vite's server.fs.deny still applies.

fix

Run only on trusted networks or use Vite's server.host to restrict access.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: directoryPlugin is not a function

Using default import instead of named import.

fix

Change to: import { directoryPlugin } from 'vite-plugin-list-directory-contents'

Error: The argument 'baseDir' is required

Missing baseDir in plugin options.

fix

Add baseDir: __dirname (or your desired path) to the plugin options.

Upgrade

Version history

1.4.5latest on npm

Audit

Dependencies

viterequiredpeer dependency; plugin only works with Vite dev server

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-list-directory-contents ↗