vite-plugin-pug

A plugin that makes Vite parse <pug src="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

Features (exists and awaiting)

CommonJS and ES module builds.
Handle self-closing pug tags.
Works with multiple pug tags.
Generated TypeScript declarations.
Reload when saving changes on a .pug file.
Support Pug local variables.
Templates for multiple inputs. WIP🔗
Experimental hot module reloading functionality.
Handle adding or removing files.

Installation

Using npm:

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

Configuration

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

// vite.config.(js|ts)
import { defineConfig } from "vite"
import pugPlugin from "vite-plugin-pug"

const options = { pretty: true } // FIXME: pug pretty is deprecated!
const locals = { name: "My Pug" }

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

Plugin Parameters

Name	Required	Description
options	optional	Pug options object.
locals	optional	Data object with Pug locals.

Usage

Simple

Create a template file.

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

Embed pug tag with src attribute somewhere.

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

That's it.

💡 Check out its starter implementation in this repository.

Example

Please find the examples folder 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.

If it doesn't match with your setup please start a new discussion about it, I'm interested to see other workflows. If something is simply not working, please raise an issue. PRs certainly welcome! (.❛ ᴗ ❛.)

Raiondesu/vite-plugin-pug