Vite Plugin for Pug to HTML Conversion

This plugin for Vite allows you to convert Pug files to HTML. It tracks changes in the folder src/pug/ and converts files from src/pug/pages to `dist'.

Installation

Install the plugin using npm or yarn:

1npm i @povly/vite-plugin-pug -D

Configuration

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

1// vite.config.(js|ts)
2import { defineConfig } from "vite"
3import PugConverter from "@povly/vite-plugin-pug"
4
5const config = {
6  paths: {
7    src: 'src/pug',
8    pages: 'src/pug/pages',
9    output: 'dist'
10  },
11  renderOptions: {
12    pretty: true,
13    cache: false
14  },
15  serverOptions: {
16    close: true,
17    watcher: true
18  }
19};
20
21export default defineConfig({
22  plugins: [PugConverter(config)],
23})

Plugin Parameters - Config

Name	Type	Description
paths	object	Optional. Path configurations for source, pages, and output directories.
paths.src	string	Path to the source Pug files for tracking. Default: src/pug
paths.pages	string	Path to the Pug pages for conversion. Default: src/pug/pages
paths.output	string	Path for the output HTML files. Default: dist/html
renderOptions	object	Optional. Rendering options for Pug. Default: pretty:true and cache:false
serverOptions	object	Optional. Server options.
serverOptions.close	boolean	Disconnects tracking after the server closing. Default: true
serverOptions.watcher	boolean	Enable watching for changes. Default: true

📂 Example of a structure

project/
├── src/
│ └── pug/
│  ├── pages/ # Main pages
│  │ ├── index.pug
│  │ └── about.pug
│  └── includes/ # Plug-in components
│  │ ├── head.pug
│  │ ├── footer.pug
|  └── etc.
└── dist/
  ├── index.html
  └── about.html

🚀 Features

• Hot Reload: Automatic reassembly when files are changed in src/pug/
• Flexible paths: Customization of input/output directories
• Pug settings: Full control over rendering options
• Integration with Vite: Works with dev server and production build

Contribution

Thank you for contributing in the project. If something is simply not working, please raise an issue. PRs certainly welcome! (.❛ ᴗ ❛.)

Additional Information

I use a layout build without a framework from this link: Vite Template HTML