Pug

Contents

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

Pug templates used to be called Jade templates and the project was renamed.

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

Pug Options Jump to heading

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

module.exports = function (eleventyConfig) {
	eleventyConfig.setPugOptions({ debug: true });
};

As an escape mechanism for advanced usage, pass in your own instance of the Pug library using the Configuration API.

module.exports = function (eleventyConfig) {
	let pug = require("pug");
	eleventyConfig.setLibrary("pug", pug);
};

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.