vite-plugin-pug
v0.4.1
Published
Vite plugin for transform Pug templates into HTML
Downloads
16,342
Readme
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
- [x] CommonJS and ES module builds.
- [x] Handle self-closing
pugtags. - [x] Works with multiple
pugtags. - [x] Generated TypeScript declarations.
- [x] Reload when saving changes on a
.pugfile. - [x] Support Pug local variables.
- [x] 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-pugConfiguration
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! (.❛ ᴗ ❛.)