Pug

Pug is a templating language that compiles to HTML. Parcel supports Pug automatically using the @parcel/transformer-pug plugin. When a .pug file is detected, it will be installed into your project automatically.

Pug is compiled to HTML and processed as described in the HTML docs.

Example usage

doctype html
html(lang="en")
  head
    link(rel="stylesheet", href="style.css")
  body
    h1 Hello Pug!
    p.
      Pug is a terse and simple templating language with a
      strong focus on performance and powerful features.
    script(type="module", src="index.js")

Pug may be used as an entry to Parcel just like HTML:

parcel index.pug

Pug may also be referenced anywhere a URL is allowed, e.g. in an HTML file, or from a JS file. To inline the compiled HTML into a JavaScript file, use the bundle-text: scheme. See Bundle inlining for details.

import html from 'bundle-text:./index.pug';

document.body.innerHTML = html;

Configuration

Pug can be configured using a .pugrc, .pugrc.js, .pugrc.mjs, .pugrc.cjs, pug.config.js, pug.config.mjs, or pug.config.cjs file. See the Pug API Reference for details on the available options.

Locals

You can define a locals object in your Pug config, and this will be provided to your Pug templates when rendering.

h1 Hello, #{name}!

{
  "locals": {
    "name": "Puggy"
  }
}