Registry / web-framework / vite-plugin-html-template

vite-plugin-html-template

library1.2.2jsnpmunverified

Vite plugin for generating HTML entry files from templates, similar to html-webpack-plugin for webpack. Version 1.2.2 provides EJS/lodash.template syntax support, multi-page application (MPA) configuration via pagesDir and pages options, and works seamlessly with vite-plugin-mpa. It eliminates the need for manual index.html files per entry by virtualizing HTML. Ideal for migrating from webpack or using Vue CLI-like pages configuration in Vite projects. Ships TypeScript types and is actively maintained.

web-framework devops

npm install vite-plugin-html-template

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-HTML-T

vite-plugin-html-template

web-frameworkjavascriptv1.2.2

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.

default (htmlTemplate)

✓ import htmlTemplate from 'vite-plugin-html-template'

✗ const htmlTemplate = require('vite-plugin-html-template')

ESM-only; CommonJS require will throw. Use default import.

htmlTemplate (named)

✓ import { htmlTemplate } from 'vite-plugin-html-template'

✗ import { default as htmlTemplate } from 'vite-plugin-html-template'

The package also exports a named export 'htmlTemplate' identical to default. Both work.

defineConfig (Vite)

✓ import { defineConfig } from 'vite'

✗ import { defineConfig } from 'vite-plugin-html-template'

Common mistake: confusing Vite's defineConfig with the plugin's exports.

Shows MPA configuration with two pages and custom template data, using TypeScript in vite.config.ts.

import { defineConfig } from 'vite'; import htmlTemplate from 'vite-plugin-html-template'; export default defineConfig({ plugins: [ htmlTemplate({ pages: { index: { template: './public/index.html', title: 'Homepage' }, about: { template: './src/about/index.html', title: 'About Us' } }, data: { appName: 'My App' } }) ] });

Debug

Known issues

breakingVersion 1.x has different options structure compared to earlier 0.x. 'pagesDir' default was removed; 'pages' must be defined explicitly.

fix

Update vite.config.ts to provide a 'pages' object; see README options.

affects: >=1.0.0

deprecatedSupport for lodash template syntax is deprecated in favor of EJS; will be removed in 2.0.

fix

Switch to EJS syntax in HTML templates: use <%= title %> instead of {{ title }}.

affects: >=1.0.0 <2.0.0

gotchaThe plugin requires a valid HTML template file; missing or misconfigured template paths will result in build failure without clear error messages.

fix

Verify template paths are correct relative to project root, and that files exist.

affects: >=0.0.0

gotchaPlugin may conflict with other Vite plugins that modify HTML (e.g., vite-plugin-html) - order matters.

fix

Place htmlTemplate after other HTML-modifying plugins in the plugins array.

affects: >=0.0.0

Errors

Common errors & fixes

Error: ENOENT: no such file or directory, open 'public/index.html'

Default template path './public/index.html' not found.

fix

Ensure public/index.html exists or provide custom template path in options.

TypeError: Cannot read properties of undefined (reading 'template')

Missing or malformed 'pages' definition in configuration.

fix

Define at least one page with 'template' and 'title' keys. Example: pages: { main: { template: './index.html', title: 'App' } }

ReferenceError: title is not defined (in template)

Template uses EJS variable but 'data' does not include it.

fix

Pass missing variables via 'data' option: data: { title: 'My Page' }

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

viterequiredPeer dependency for plugin integration with Vite's build pipeline

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/IndexXuan/vite-plugin-html-template ↗

packagehttps://www.npmjs.com/package/vite-plugin-html-template ↗