Pug
Template Languages:
| Eleventy Short Name | File Extension | npm Package |
|---|---|---|
pug |
.pug |
pug |
Pug templates were previously known as Jade templates (the project was renamed).
| 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
Jump to section titled: InstallationThe pug templating language was moved out of Eleventy core in v3 and now requires a plugin installation.
npm install @11ty/eleventy-plugin-pugAdd 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 OptionsAdd Compile/Render Options
Jump to section titled: Add Compile/Render OptionsSet 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. |