{"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,"search_vec":"'1.2.2':24 'activ':82 'applic':32 'cli':70 'cli-lik':69 'configur':34,73 'ejs/lodash.template':26 'elimin':49 'entri':11,57 'file':12,55 'generat':9 'html':4,10,18,60,88,90,94 'html-templat':89 'html-webpack-plugin':17 'ideal':61 'index.html':54 'javascript':84 'like':71 'maintain':83 'manual':53 'migrat':63 'mpa':33,47 'multi':30 'multi-pag':29 'need':51 'option':39 'page':31,38,72 'pagesdir':36 'per':56 'plugin':3,7,20,46,87 'project':76 'provid':25 'seamless':42 'ship':77 'similar':15 'support':28 'syntax':27 'templat':5,14,91 'type':79 'typescript':78,95 'use':67 'version':23 'via':35 'virtual':59,93 'virtual-html':92 'vite':2,6,45,75,86 'vite-plugin':85 'vite-plugin-html-templ':1 'vite-plugin-mpa':44 'vue':68 'webpack':19,22,65 'work':41","created_at":"2026-04-27T17:06:30.860864+00:00","updated_at":"2026-04-27T17:06:30.860864+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/IndexXuan/vite-plugin-html-template","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-html-template","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}