vite-plugin-pug

A plugin that makes Vite parse <pug file="example.pug"></pug> in your index.html. The rendered template replaces this tag with the compiled markup.

ℹ️ Vue single file components don't require this plugin, adding Pug to the dependency list is enough. — aka npm i -D pug

Handle self-closing tags.
Works with multiple pug tags.
Generated TypeScript declarations.
Common JS module but tested as ES module.
Auto-reload browser when saving changes to .pug file.

Installation

Using npm:

npm install vite-plugin-pug --save-dev

Configuration

Create a vite.config.js configuration file and import the plugin:

import { defineConfig } from "vite"
import pugPlugin from "vite-plugin-pug"

export default defineConfig({
  plugins: [
    pugPlugin()
  ]
})

Plugin Options

Accept Pug options as an optional parameter.

// vite.config.js
pugPlugin({
  pretty: true
})

Usage

Create a template file.

//- index.pug
h1 Hello World
p I'm a cool Vite project!

Embed pug tag with file attribute somewhere.

<!-- index.html -->
<html>
<body>
  <pug file="index.pug" />
  <script type="module" src="/main.ts"></script>
</body>
</html>

That's it.

💡 Check out an example implementation in this repository.

Contribution

~~After Rollup~~ I started to use Vite recently but this is not a reason to leave my beloved template format behind. Its lack of active Pug plugins made me make one quickly. It does the job to me, I will extend it when I need it.