vite-plugin-html

3.2.2 verified Mon Apr 27 auth: no javascript

Vite plugin for minifying HTML and executing lodash.template syntax in index.html. Current version 3.2.2 works with Vite 2.0+. It allows dynamic HTML content via template placeholders, CSS/JS injection, and HTML minification. Unlike alternative HTML plugins (e.g., vite-plugin-html-minifier), it provides full lodash.template support. The plugin ships TypeScript types. Release cadence is irregular; breaking changes may occur between major versions.

Common errors

error TypeError: (0 , vite_plugin_html_1.default) is not a function ↓

cause Using default import in v3; default export is deprecated and may be undefined.

fix

Change import to: import { createHtmlPlugin } from 'vite-plugin-html'

error Error: Cannot find module 'vite-plugin-html' ↓

cause Package not installed or wrong version.

fix

Run: npm install vite-plugin-html --save-dev

error ERR_REQUIRE_ESM from CJS require() ↓

cause Using require() on an ESM-only package.

fix

Use import() or set type: 'module' in package.json.

Warnings

breaking v3: default export renamed to createHtmlPlugin; vitePluginHtml deprecated. ↓

fix Use import { createHtmlPlugin } from 'vite-plugin-html' instead.

breaking v2: changed plugin options shape; some options now nested under 'inject'. ↓

fix Review docs for v2 option changes; migrate inject scripts to 'inject' object.

deprecated v3 deprecated default export; will be removed in v4. ↓

fix Switch to named export createHtmlPlugin.

gotcha Plugin only processes index.html; other HTML files not affected. ↓

fix Use separate plugins or custom logic for multiple HTML files.

gotcha lodash.template syntax can be slow for large inject data; consider limiting. ↓

fix Preprocess data outside plugin or use simpler templating.

Install

npm install vite-plugin-html

yarn add vite-plugin-html

pnpm add vite-plugin-html

Imports

vitePluginHtml

wrong

const vitePluginHtml = require('vite-plugin-html')

correct

import { vitePluginHtml } from 'vite-plugin-html'

ESM-only; CommonJS require fails. Named export (not default).

createHtmlPlugin

wrong

import createHtmlPlugin from 'vite-plugin-html'

correct

import { createHtmlPlugin } from 'vite-plugin-html'

Function is exported as a named export. Default import is a different shape.

vitePluginHtml (default)
wrong
```
const { vitePluginHtml } = require('vite-plugin-html')
```
correct
```
import vitePluginHtml from 'vite-plugin-html'
```
Deprecated in v3. Use named import createHtmlPlugin. Default export may be removed in future.

Quickstart

Basic Vite config using createHtmlPlugin to minify HTML and inject data via lodash.template.

import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      template: 'index.html',
      inject: {
        data: {
          title: 'My App',
          injectScript: '<script src="/inject.js"></script>',
        },
      },
    }),
  ],
});