{"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,"search_vec":"'1.0.8':23 '2.5.10':31 '3.0.0':32 '4.0.0':33 '5.0.0':34 '6.0.0':35 '7.0.0':36 'align':41 'allow':62 'attribut':51 'configur':72 'current':19 'data':50 'depend':30 'differenti':46 'entir':60 'entri':54 'hook':18 'html':13,53,61 'javascript':78 'key':45 'minim':71 'multipl':63 'node.js':38 'option':74 'page':67 'peer':29 'per':66 'plugin':3,7,81 'point':55 'pug':4,10,64,82 'pugloc':77 'pugopt':75 'rather':56 'replac':58 'requir':40 'ship':68 'stabl':20 'support':24 'tag':48 'templat':11,65 'transform':5,9 'transformindexhtml':17 'type':70 'typescript':69,84 'use':14,47 'v2':26 'v7':28 'version':21,39,44 'vite':2,6,15,25,43,80,83 'vite-plugin':79 'vite-plugin-pug-transform':1","created_at":"2026-04-27T17:07:02.842372+00:00","updated_at":"2026-04-27T17:07:02.842372+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/TheSeally/vite-plugin-pug-transformer","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-pug-transformer","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"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}}