Pug

Contents

Installation
Pug Options
- Add Compile/Render Options
Supported Features

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

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.

Pug

Installation

Pug Options

Add Compile/Render Options

Supported Features

Other pages in Template Languages: