@povly/vite-plugin-pug NPM

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:

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

Configuration

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

// vite.config.(js|ts)
import { defineConfig } from "vite"
import PugConverter from "@povly/vite-plugin-pug"

const config = {
  paths: {
    src: 'src/pug',
    pages: 'src/pug/pages',
    output: 'dist'
  },
  renderOptions: {
    pretty: true,
    cache: false
  },
  serverOptions: {
    close: true,
    watcher: true
  }
};

export default defineConfig({
  plugins: [PugConverter(config)],
})

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