Stable: 3.1.2
Canary: 4.0.0-alpha.6

Pug

Pug templates let you write HTML pages in a terse shorthand. Previously these were known as Jade templates (the project was renamed).

On this page

Installation
Pug Options
- Add Compile/Render Options
Supported Features

Eleventy Short Name	File Extension	npm Package
`pug`	`.pug`	`pug`

Eleventy or Plugin version	`pug` version
`@11ty/eleventy@0.x`	`pug@3.x`
`@11ty/eleventy@1.x`	`pug@3.x`
`@11ty/eleventy@2.x`	`pug@3.x`
`@11ty/eleventy@3.x` and newer	N/A
`@11ty/eleventy-plugin-pug@1.x`	`pug@3.x`

You can override a .pug file’s template engine. Read more at Changing a Template’s Rendering Engine.

Installation

The pug templating language was moved out of Eleventy core in v3 and now requires a plugin installation.

11ty/eleventy-plugin-template-languages on GitHub

npm install @11ty/eleventy-plugin-pug

Add to your configuration file:

eleventy.config.js

ESM CommonJS

import pugPlugin from "@11ty/eleventy-plugin-pug";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(pugPlugin);
}

const pugPlugin = require("@11ty/eleventy-plugin-pug");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(pugPlugin);
}

Pug Options

Add Compile/Render Options

Set compile/render options using the Configuration API. See all Pug options.

eleventy.config.js

ESM CommonJS

import pugPlugin from "@11ty/eleventy-plugin-pug";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(pugPlugin, {
		debug: true
	});
}

const pugPlugin = require("@11ty/eleventy-plugin-pug");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(pugPlugin, {
		debug: true
	});
}

Supported Features

Feature	Syntax
✅ Includes (Absolute Path)	`include /includedvar.pug` looks in `_includes/includedvar.pug`. Does not process front matter in the include file.
✅ Includes (Relative Path)	Relative paths use `./` (template’s directory) or `../` (template’s parent directory). Example: `{% include ./included.pug %}` looks for `included.pug` in the template’s current directory. Does not process front matter in the include file.
✅ Extends (Absolute Path)	`extends /layout.pug` looks in `_includes/layout.pug`. Does not process front matter in the include file.
✅ Extends (Relative Path)	Relative paths use `./` (template’s directory) or `../` (template’s parent directory). Example: `{% extends ./layout.pug %}` looks for `layout.pug` in the template’s current directory. Does not process front matter in the extends file.