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.
:information_source: Vue single file components don’t require this plugin, adding Pug to the dependency list is enough. — aka npm i -D pug
Features
- 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.
- Experimental hot module reloading functionality.
- Handle adding or removing files.
Add to a project
Installation
Choose your appropriate choice:
$ npm i -D vite-plugin-pug
$ pnpm add -D vite-plugin-pug
$ yarn add -D vite-plugin-pug
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 |
Plugin options object. |
| locals |
optional |
Data object with Pug locals. |
Plugin Options
| Name |
Required |
Description |
| ... |
optional |
Anything from Pug options object. |
| localImports |
optional |
If true, use relative imports in the pug src attribute. |
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.
:bulb: Check out its starter implementation in this repository.
Examples
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. :suspect:
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! (.❛ ᴗ ❛.)