Package Exports

vite-plugin-pug

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-plugin-pug) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vite-plugin-pug

A plugin that makes Vite parse <pug file="example.pug"></pug> in your index.html. The rendered template replaces this tag with the compiled markup.

Handle self-closing tags.
Works with multiple pug tags.
Generated TypeScript declarations.
Common JS module but tested as ES module.
Auto-reload browser when saving changes to .pug file.

Installation

Using npm:

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

Configuration

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

import { defineConfig } from "vite"
import pugPlugin from "vite-plugin-pug"

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

Plugin Options

Accept Pug options as an optional parameter.

// vite.config.js
pugPlugin({
  pretty: true
})

Usage

Create a template file.

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

Embed pug tag with file attribute somewhere.

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

That's it.

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! (.❛ ᴗ ❛.)