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
- CommonJS and ES module builds.
- Handle self-closing
pugtags. - Works with multiple
pugtags. - Generated TypeScript declarations.
- Reload when saving changes on a
.pugfile. - Support Pug local variables.
- Templates for multiple inputs.
- Experimental hot module reloading functionality.
- Handle adding or removing files.
Choose your appropriate choice:
$ npm i -D vite-plugin-pug
$ pnpm add -D vite-plugin-pug
$ yarn add -D vite-plugin-pugCreate 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)],
})| Name | Required | Description |
|---|---|---|
| options | optional | Plugin options object. |
| locals | optional | Data object with Pug locals. |
| Name | Required | Description |
|---|---|---|
| ... | optional | Anything from Pug options object. |
| localImports | optional | If true, use relative imports in the pug src attribute. |
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.
Please find the examples folder in this repository.
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! (.❛ ᴗ ❛.)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent