Skip to navigation Skip to main content
Blog
Eleventy, 2024 in Review
Versions
Stable
3.0.0
Canary
3.0.1-alpha.5

Pug

Template Languages:
On this page
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.

Installation

Jump to section titled: Installation

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

npm install @11ty/eleventy-plugin-pug

Add to your configuration file:

eleventy.config.js
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

Jump to section titled: Pug Options

Add Compile/Render Options

Jump to section titled: Add Compile/Render Options

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

eleventy.config.js
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

Jump to section titled: 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.

Other pages in Template Languages