Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
3.0.0
Canary
3.0.1-alpha.1
Toggle Menu
Eleventy 5.81s
Remix 40.14s

Virtual Templates Added in v3.0.0

In addition to template files in your input directory, Eleventy can also process virtual templates defined in your configuration file (or plugins). Related GitHub #1612.

The RSS plugin offers a virtual template to add feeds to your project.

API

eleventyConfig.addTemplate(virtualPath, content, data = {});
  • virtualPath: used to determine the template language and data cascade for this template. This path is relative to your project’s input directory.
  • content: usually a string, but maybe JavaScript (if using an 11ty.js template). Can include front matter if the template language supports it.
  • data: a data object tied to the template. A little more ergonomic than front matter but functionally the same.

Example

Markdown, HTML (via Liquid) Layout

eleventy.config.js
export default function(eleventyConfig) {
// Create content templates Files
eleventyConfig.addTemplate("virtual.md", `# Hello`, {
layout: "virtual.html"
});

// Works great with Layouts too
eleventyConfig.addTemplate("_includes/virtual.html", `<!-- Layout -->{{ content }}`);
};
module.exports = function(eleventyConfig) {
// Create content templates Files
eleventyConfig.addTemplate("virtual.md", `# Hello`, {
layout: "virtual.html"
});

// Works great with Layouts too
eleventyConfig.addTemplate("_includes/virtual.html", `<!-- Layout -->{{ content }}`);
};

JavaScript

Any of the JavaScript shapes on 11ty.js templates are also supported here.

eleventy.config.js
export default function(eleventyConfig) {
// Create content templates Files
eleventyConfig.addTemplate("virtual.11ty.js", function(data) {
return `<h1>Hello</h1>`;
});
};
module.exports = function(eleventyConfig) {
// Create content templates Files
eleventyConfig.addTemplate("virtual.11ty.js", function(data) {
return `<h1>Hello</h1>`;
});
};

Other pages in Eleventy Projects: