vite-html-plugin

0.1.4 verified Mon Apr 27 auth: no javascript maintenance

A Vite plugin for processing HTML templates with EJS-like syntax, similar to html-webpack-plugin. Current stable version is 0.1.4 (last commit 2022). Provides a configureHtml() function to inject JS/CSS into HTML and supports EJS interpolation. Vite-native alternative to html-webpack-plugin with minimal configuration. Active development but limited documentation and test coverage.

Common errors

error Error: [vite-html-plugin] The 'template' option is required ↓

cause Missing template option in configureHtml()

fix

Add template: 'path/to/template.html' to configureHtml() options

error TypeError: Cannot read properties of undefined (reading 'ejs') ↓

cause Accessing options.inject without providing inject object

fix

Provide inject object: inject: { data: {}, ejs: true }

error Module not found: Error: Can't resolve 'vite-html-plugin' ↓

cause Package not installed or using wrong import path

fix

Install: npm install vite-html-plugin@0.1.4

Warnings

breaking v1.0.0 (backup) is unstable; use v0.1.4 for production ↓

fix Pin version to 0.1.4: npm install vite-html-plugin@0.1.4

gotcha Plugin does not support HMR for HTML template changes; requires full reload ↓

fix No fix; use alternative plugin or full reload on template edits

deprecated options.inject.ejs is optional but defaults to false; set to true to enable EJS rendering ↓

fix Explicitly set inject: { ejs: true } in configureHtml() options

Install

npm install vite-html-plugin

yarn add vite-html-plugin

pnpm add vite-html-plugin

Imports

configureHtml

wrong

const { configureHtml } = require('vite-html-plugin')

correct

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

ESM-only; does not support CommonJS require()

default

wrong

import { default as viteHtmlPlugin } from 'vite-html-plugin'

correct

import viteHtmlPlugin from 'vite-html-plugin'

Default export is an object with configureHtml; named export preferred

type Plugin

wrong

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

correct

import { type Plugin } from 'vite'

Plugin type is from Vite, not this package

Quickstart

Shows basic usage: configureHtml plugin with EJS template, script entry injection, and custom data.

// vite.config.ts
import { defineConfig } from 'vite';
import { configureHtml } from 'vite-html-plugin';

export default defineConfig({
  plugins: [
    configureHtml({
      entry: '/src/main.ts', // script entry
      template: 'index.html', // HTML template
      inject: {
        data: { title: 'My App' },
        ejs: true
      }
    })
  ]
});

// index.html (template)
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <div id="app"></div>
  <!-- script injected by plugin -->
</body>
</html>