Nunjucks Installed

Use the Nunjucks template engine to create pages and layouts.

Options See on

extensions string[] object

The list of extensions this plugin applies to

[ ".njk" ]
includes string

Custom includes path

options object

Options passed to Nunjucks


  dev: false,
  autoescape: true,
  throwOnUndefined: false,
  trimBlocks: false,
  lstripBlocks: false
plugins object

Plugins loaded by Nunjucks


Nunjucks is a powerful template language created by Mozilla and inspired by ninja2. This plugin allows you to use it to create pages and layouts.


This plugin is installed by default. 🎉


If you want to change the default configuration, use the second argument of lume() function in your _config.ts file.

For example, let's configure nunjucks and change the default folder of the _includes:

// Nunjucks plugin configuration
const nunjucks = {
  includes: "_layouts",
  options: {
    throwOnUndefined: true,

// Apply the plugin config
const site = lume({}, { nunjucks });

Now, Lume will search the .njk templates in the directory _layouts instead of _includes.

Creating layouts

Add a file with .njk extension in the _includes directory. Use the front matter to set data to the template.

title: Welcome to my page
intro: This is my first post using Lume. I hope you like it!

    <title>{{ title }}</title>

    <p>{{ intro }}</p>

Creating pages

Creating pages is the same as creating layouts; just place the .njk file outside the _includes directory.

njk filter

The Nunjucks plugin also registers the njk filter, to render any string value as a Nunjucks template and output it as HTML. The filter accepts an object with data.

  username: Oscar
text: "Hello {{ username }}"

<!-- Render a string -->
<div>{{ text | njk(data) | safe }}<div>


This plugin exposes the following hooks:

  • addNunjucksPlugin(name, fn) To add additional plugins.

Configure VSCode

You can use the Nunjucks extension for VS Code for syntax highlight and some useful snippets.