Registry / web-framework / vite-plugin-pug-transformer

vite-plugin-pug-transformer

library1.0.8jsnpmunverified

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.

web-framework

npm install vite-plugin-pug-transformer

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-PUG-TR

vite-plugin-pug-transformer

web-frameworkjavascriptv1.0.8

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import vitePugPlugin from 'vite-plugin-pug-transformer';

✗ const vitePugPlugin = require('vite-plugin-pug-transformer');

ESM-only; no default CommonJS require supported.

vitePugPlugin

✓ import vitePugPlugin from 'vite-plugin-pug-transformer';

✗ import { vitePugPlugin } from 'vite-plugin-pug-transformer';

Default export; named import does not exist.

default with type

✓ import vitePugPlugin from 'vite-plugin-pug-transformer';

✗ import * as vitePugPlugin from 'vite-plugin-pug-transformer';

Namespace import is not needed; use default import.

Shows basic setup with Vite config, HTML entry using template tags, and a simple Pug template.

// vite.config.js import { defineConfig } from 'vite'; import vitePugPlugin from 'vite-plugin-pug-transformer'; export default defineConfig({ plugins: [ vitePugPlugin({ pugLocals: { bundler: 'Vite' }, pugOptions: { pretty: true }, }), ], }); // index.html <!DOCTYPE html> <html> <body> <template data-type="pug" data-src="./template.pug"></template> </body> </html> // template.pug p #{bundler} is the best

Debug

Known issues

gotchaThe plugin only transforms <template data-type="pug"> elements; standard .pug imports are NOT supported.

fix

Use <template data-type="pug" data-src="./file.pug"> in your HTML entry point. Do not use import .pug in JavaScript.

affects: >=1.0.0

deprecatedSupport for Vite v2 and v3 is deprecated in newer versions; only Vite v4+ is actively tested.

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).

affects: >=1.0.0

gotchaPug locals defined in pugLocals are static; dynamic values (like env variables) must be passed explicitly and will not update on hot reload.

fix

If you need dynamic locals, implement a custom Vite plugin that rebuilds the config on env change or use process.env inside pugOptions.

affects: >=1.0.0

gotchaThe plugin uses Vite's transformIndexHtml hook; it does not transform Pug imported in JavaScript or Vue SFCs.

fix

This plugin is only for the main HTML entry. For Pug in JavaScript, use another loader like @rollup/plugin-pug.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-plugin-pug-transformer'

Package not installed or node_modules missing.

fix

Run npm install vite-plugin-pug-transformer or yarn add vite-plugin-pug-transformer.

TypeError: vitePugPlugin is not a function

Using import { vitePugPlugin } instead of default import.

fix

Use import vitePugPlugin from 'vite-plugin-pug-transformer';

Error: [vite] Transform failed with 1 error: expected expression, got 'p'

Using .pug file directly in JavaScript import (unsupported).

fix

Only use Pug via <template> tags in HTML; do not import .pug in JS files.

Error: The template tag data-src is missing or invalid

Missing or incorrect data-src attribute in <template> tag.

fix

Ensure <template data-type="pug" data-src="./yourfile.pug"> has a valid path to a .pug file.

Upgrade

Version history

1.0.8latest on npm

Audit

Dependencies

viterequiredpeer dependency; plugin requires Vite's plugin API and transformIndexHtml hook

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/TheSeally/vite-plugin-pug-transformer ↗

packagehttps://www.npmjs.com/package/vite-plugin-pug-transformer ↗