github.com/SubZtep/vite-plugin-pug @v0.4.1
Chat with this repoWhat it actually does AI analysis from the code graph — generated when you open this
README
vite-plugin-pug
A plugin that makes Vite parse <pug src="https://github.com/SubZtep/vite-plugin-pug/raw/v0.4.1/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-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.
<html>
<body>
<pug src="https://github.com/SubZtep/vite-plugin-pug/raw/v0.4.1/index.pug" />
<script type="module" src="https://github.com/SubZtep/vite-plugin-pug/raw/v0.4.1/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! (.❛ ᴗ ❛.)
Extension points exported contracts — how you extend this code
PluginOptions (Interface)Core symbols most depended-on inside this repo
pugsShape
Languages
Modules by API surface
For agents
$ claude mcp add vite-plugin-pug \
-- python -m otcore.mcp_server <graph>