{"id":22693,"library":"vite-plugin-html-template","title":"vite-plugin-html-template","description":"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.","status":"active","version":"1.2.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/IndexXuan/vite-plugin-html-template","tags":["javascript","vite-plugin","html","html-template","virtual-html","typescript"],"install":[{"cmd":"npm install vite-plugin-html-template","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-html-template","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-html-template","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for plugin integration with Vite's build pipeline","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will throw. Use default import.","wrong":"const htmlTemplate = require('vite-plugin-html-template')","symbol":"default (htmlTemplate)","correct":"import htmlTemplate from 'vite-plugin-html-template'"},{"note":"The package also exports a named export 'htmlTemplate' identical to default. Both work.","wrong":"import { default as htmlTemplate } from 'vite-plugin-html-template'","symbol":"htmlTemplate (named)","correct":"import { htmlTemplate } from 'vite-plugin-html-template'"},{"note":"Common mistake: confusing Vite's defineConfig with the plugin's exports.","wrong":"import { defineConfig } from 'vite-plugin-html-template'","symbol":"defineConfig (Vite)","correct":"import { defineConfig } from 'vite'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport htmlTemplate from 'vite-plugin-html-template';\n\nexport default defineConfig({\n  plugins: [\n    htmlTemplate({\n      pages: {\n        index: {\n          template: './public/index.html',\n          title: 'Homepage'\n        },\n        about: {\n          template: './src/about/index.html',\n          title: 'About Us'\n        }\n      },\n      data: {\n        appName: 'My App'\n      }\n    })\n  ]\n});","lang":"typescript","description":"Shows MPA configuration with two pages and custom template data, using TypeScript in vite.config.ts."},"warnings":[{"fix":"Update vite.config.ts to provide a 'pages' object; see README options.","message":"Version 1.x has different options structure compared to earlier 0.x. 'pagesDir' default was removed; 'pages' must be defined explicitly.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Switch to EJS syntax in HTML templates: use <%= title %> instead of {{ title }}.","message":"Support for lodash template syntax is deprecated in favor of EJS; will be removed in 2.0.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Verify template paths are correct relative to project root, and that files exist.","message":"The plugin requires a valid HTML template file; missing or misconfigured template paths will result in build failure without clear error messages.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Place htmlTemplate after other HTML-modifying plugins in the plugins array.","message":"Plugin may conflict with other Vite plugins that modify HTML (e.g., vite-plugin-html) - order matters.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure public/index.html exists or provide custom template path in options.","cause":"Default template path './public/index.html' not found.","error":"Error: ENOENT: no such file or directory, open 'public/index.html'"},{"fix":"Define at least one page with 'template' and 'title' keys. Example: pages: { main: { template: './index.html', title: 'App' } }","cause":"Missing or malformed 'pages' definition in configuration.","error":"TypeError: Cannot read properties of undefined (reading 'template')"},{"fix":"Pass missing variables via 'data' option: data: { title: 'My Page' }","cause":"Template uses EJS variable but 'data' does not include it.","error":"ReferenceError: title is not defined (in template)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}