{"id":22695,"library":"vite-plugin-html-variables","title":"vite-plugin-html-variables","description":"A Vite plugin that enables using environment variables and custom variables in HTML files by replacing placeholders like {{VAR}} with actual values at build time. Version 1.0.4 is the current stable release, updated irregularly. Key differentiators include support for custom prefixes/suffixes, the ability to exclude environment variables, and TypeScript definitions. It is minimal and focused on a single task, unlike heavier solutions like @vitejs/plugin-legacy or custom middleware.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/kiran-venugopal/vite-plugin-html-variables","tags":["javascript","vite","js","vite-lugin","html","variables","typescript"],"install":[{"cmd":"npm install vite-plugin-html-variables","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-html-variables","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-html-variables","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default ESM export. CJS require is not supported due to Vite's ESM-only plugin ecosystem.","wrong":"const htmlVariables = require('vite-plugin-html-variables')","symbol":"htmlVariables","correct":"import htmlVariables from 'vite-plugin-html-variables'"},{"note":"This is a default export, not a named export. Named import will result in undefined.","wrong":"import { htmlVariables } from 'vite-plugin-html-variables'","symbol":"default export (factory function)","correct":"import htmlVariables from 'vite-plugin-html-variables'"},{"note":"The type is only available as a TypeScript type export, not a runtime value. Use 'import type' or ignore if not using TS.","wrong":"import { HtmlVariablesOptions } from 'vite-plugin-html-variables'","symbol":"HtmlVariablesOptions (TypeScript type)","correct":"import type { HtmlVariablesOptions } from 'vite-plugin-html-variables'"}],"quickstart":{"code":"// vite.config.ts or vite.config.js\nimport { defineConfig } from 'vite';\nimport htmlVariables from 'vite-plugin-html-variables';\n\nexport default defineConfig({\n  plugins: [\n    htmlVariables({\n      prefix: '{{',\n      suffix: '}}',\n      variables: { MY_VAR: 'Hello World' },\n      excludeEnvVariables: false,\n    }),\n  ],\n});\n\n// .env file (optional, if not using variables object)\nVITE_APP_TITLE=My App","lang":"typescript","description":"Shows basic usage of vite-plugin-html-variables with custom variables and env variable inclusion."},"warnings":[{"fix":"Use VITE_ prefix for env vars or add them to the `variables` object.","message":"Environment variables not prefixed with VITE_ must be explicitly passed via the `variables` config option, otherwise they are not exposed to the HTML.","severity":"gotcha","affected_versions":"<=1.0.4"},{"fix":"Restart the dev server after modifying .env or variables config.","message":"The plugin replaces placeholders in HTML files only during build (vite build) and not in dev server (vite dev). Changes to variables may require a full server restart.","severity":"gotcha","affected_versions":"<=1.0.4"},{"fix":"Set excludeEnvVariables: false or use the variables object to include specific vars.","message":"If `excludeEnvVariables` is set to true, VITE_ prefixed env variables will not be available in the HTML, even if they are in the environment.","severity":"gotcha","affected_versions":"<=1.0.4"},{"fix":"Upgrade to latest version and update config accordingly (default prefix='{{', suffix='}}').","message":"Previous versions (before 1.0.0) used different default prefix/suffix or API. Check changelog for migration.","severity":"breaking","affected_versions":"<1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install with: npm i -D vite-plugin-html-variables","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'vite-plugin-html-variables'"},{"fix":"Ensure VITE_ prefix is used in .env or add variable to `variables` config.","cause":"Variable not passed via env or variables object, or excludeEnvVariables set to true.","error":"Uncaught ReferenceError: VITE_APP_TITLE is not defined (in HTML)"},{"fix":"Use: import htmlVariables from 'vite-plugin-html-variables'","cause":"Incorrect import (named instead of default).","error":"TypeError: htmlVariables is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}