vite-plugin-progress

0.0.7 verified Mon Apr 27 auth: no javascript

A Vite plugin that displays a customizable progress bar during the build process. Current stable version is 0.0.7. It wraps the node-progress library and supports options like format, width, color via picocolors, and more. It is designed for Vite developers who want visual feedback on build progress, similar to progress-bar-webpack-plugin but for Vite. The plugin is lightweight, supports TypeScript, and has a simple API. Release cadence is low; it is a stable utility with few updates.

Warnings

gotcha The `total` option does not correspond to actual file count; it sets the total ticks for the progress bar. Default total is 0, leading to no progress display. ↓

fix Set `total` explicitly (e.g., 200) or rely on internal counting (but may show no progress).

deprecated The `srcDir` option is deprecated and may be removed in future versions. ↓

fix Do not use `srcDir`; remove it from options.

gotcha During first build, `transforms` and `chunks` are not displayed. Progress may appear incomplete initially. ↓

fix No fix; this is expected behavior. Subsequent builds show full progress.

breaking Version 0.0.7 changed cache judgment logic; builds with caching may see unexpected behavior. ↓

fix Clear cache (`rm -rf node_modules/.vite`) if issues occur.

Install

npm install vite-plugin-progress

yarn add vite-plugin-progress

pnpm add vite-plugin-progress

Imports

default

wrong

const progress = require('vite-plugin-progress')

correct

import progress from 'vite-plugin-progress'

ESM-only; CommonJS require is not supported.

Types
wrong
```
import { ProgressOptions } from 'vite-plugin-progress'
```
correct
```
import type { ProgressOptions } from 'vite-plugin-progress'
```
Type import is safe; value import will cause runtime error because ProgressOptions is not exported as a value.

Plugin

wrong

import { progress } from 'vite-plugin-progress'

correct

import progress from 'vite-plugin-progress' 
 export default { plugins: [progress()] }

progress is a default export, not a named export.

Quickstart

Shows how to add the plugin with custom options to a Vite config.

// vite.config.ts
import progress from 'vite-plugin-progress'

export default {
  plugins: [
    progress({
      format: 'building [:bar] :percent',
      total: 200,
      width: 60,
      complete: '=',
      incomplete: ''
    })
  ]
}