{"id":22792,"library":"vite-plugin-pug-transformer","title":"vite-plugin-pug-transformer","description":"Vite plugin that transforms Pug templates into HTML using Vite's transformIndexHtml hook. Current stable version is 1.0.8. Supports Vite v2 through v7 (peer dependency: ^2.5.10 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0), with Node.js version requirements aligning with Vite versions. Key differentiator: uses <template> tags with data attributes in HTML entry points rather than replacing the entire HTML, allowing multiple Pug templates per page. Ships TypeScript types. Minimal configuration with optional pugOptions and pugLocals.","status":"active","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/TheSeally/vite-plugin-pug-transformer","tags":["javascript","vite-plugin","pug","vite","typescript"],"install":[{"cmd":"npm install vite-plugin-pug-transformer","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-pug-transformer","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-pug-transformer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires Vite's plugin API and transformIndexHtml hook","package":"vite","optional":false}],"imports":[{"note":"ESM-only; no default CommonJS require supported.","wrong":"const vitePugPlugin = require('vite-plugin-pug-transformer');","symbol":"default","correct":"import vitePugPlugin from 'vite-plugin-pug-transformer';"},{"note":"Default export; named import does not exist.","wrong":"import { vitePugPlugin } from 'vite-plugin-pug-transformer';","symbol":"vitePugPlugin","correct":"import vitePugPlugin from 'vite-plugin-pug-transformer';"},{"note":"Namespace import is not needed; use default import.","wrong":"import * as vitePugPlugin from 'vite-plugin-pug-transformer';","symbol":"default with type","correct":"import vitePugPlugin from 'vite-plugin-pug-transformer';"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport vitePugPlugin from 'vite-plugin-pug-transformer';\n\nexport default defineConfig({\n  plugins: [\n    vitePugPlugin({\n      pugLocals: { bundler: 'Vite' },\n      pugOptions: { pretty: true },\n    }),\n  ],\n});\n\n// index.html\n<!DOCTYPE html>\n<html>\n<body>\n  <template data-type=\"pug\" data-src=\"./template.pug\"></template>\n</body>\n</html>\n\n// template.pug\np #{bundler} is the best","lang":"typescript","description":"Shows basic setup with Vite config, HTML entry using template tags, and a simple Pug template."},"warnings":[{"fix":"Use <template data-type=\"pug\" data-src=\"./file.pug\"> in your HTML entry point. Do not use import .pug in JavaScript.","message":"The plugin only transforms <template data-type=\"pug\"> elements; standard .pug imports are NOT supported.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to Vite v4 or newer. If you must use Vite v2/v3, pin plugin version to 1.0.6 or earlier (not verified).","message":"Support for Vite v2 and v3 is deprecated in newer versions; only Vite v4+ is actively tested.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"If you need dynamic locals, implement a custom Vite plugin that rebuilds the config on env change or use process.env inside pugOptions.","message":"Pug locals defined in pugLocals are static; dynamic values (like env variables) must be passed explicitly and will not update on hot reload.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"This plugin is only for the main HTML entry. For Pug in JavaScript, use another loader like @rollup/plugin-pug.","message":"The plugin uses Vite's transformIndexHtml hook; it does not transform Pug imported in JavaScript or Vue SFCs.","severity":"gotcha","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":"Run npm install vite-plugin-pug-transformer or yarn add vite-plugin-pug-transformer.","cause":"Package not installed or node_modules missing.","error":"Error: Cannot find module 'vite-plugin-pug-transformer'"},{"fix":"Use import vitePugPlugin from 'vite-plugin-pug-transformer';","cause":"Using import { vitePugPlugin } instead of default import.","error":"TypeError: vitePugPlugin is not a function"},{"fix":"Only use Pug via <template> tags in HTML; do not import .pug in JS files.","cause":"Using .pug file directly in JavaScript import (unsupported).","error":"Error: [vite] Transform failed with 1 error: expected expression, got 'p'"},{"fix":"Ensure <template data-type=\"pug\" data-src=\"./yourfile.pug\"> has a valid path to a .pug file.","cause":"Missing or incorrect data-src attribute in <template> tag.","error":"Error: The template tag data-src is missing or invalid"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}