Eleventy The possum is Eleventy’s mascot

Eleventy Documentation

Menu

Computed Data Coming soon in v0.11.0 #

At the end of the Data Cascade you may want to inject Data properties into your data object that are based on other data values. To do that you can use the new eleventyComputed feature.

Real World Example #

Say you want to use Eleventy’s Navigation Plugin to create a navigation menu for your site. This plugin relies on the eleventyNavigation object to be set. You don’t necessarily want to set this object manually in front matter in each individual source file. This is where Computed Data comes in!

Consider a blog post with the following front matter format:

Filename posts/my-page-title.md
---
title: My Page Title
parent: My Parent Key
---

If this file is generated by a Content Management System (like Netlify CMS, in my particular case), I may not be able to (or want to) create the eleventyNavigation object for each of them. I would also not be able to just dump a standard Data Directory File in there either (that would be useful for setting defaults but we don’t want the same values for every markdown file). eleventyNavigation properties must be set based on other data properties.

Instead, I created this Data Directory File using eleventyComputed:

Filename posts/posts.11tydata.js
module.exports = {
eleventyComputed: {
eleventyNavigation: {
key: data => data.title,
parent: data => data.parent
}
}
};
If you want to use a JavaScript function for your eleventyComputed properties, you must use either JavaScript front matter or a JavaScript data file (template, directory, or global). YAML and JSON do not support JavaScript functions.

The resulting data for each posts/*.md file when processed by Eleventy has the following structure:

Data Cascade for posts/my-page-title.md
{
"title": "My Page Title",
"parent": "My Parent Key",
"eleventyNavigation": {
"key": "My Page Title",
"parent": "My Parent Key"
}
}

Just Use JavaScript #

Use any arbitrary JavaScript for an eleventyComputed property. Note that JavaScript functions require either JavaScript front matter or a JavaScript data file (template, directory, or global). YAML and JSON do not support JavaScript functions.

Here’s a bunch of examples:

module.exports = {
eleventyComputed: {
myString: "this is just a raw string",
myFunction: data => `This is a string using ${data.someValue}.`,
myAsyncFunction: async data => await someAsyncThing(),
myPromise: data => {
return new Promise(resolve => {
setTimeout(() => resolve("100ms DELAYED HELLO"), 100);
})
}
}
};

Use a Template String #

If you want to use eleventyComputed in YAML front matter, you can use the template syntax string that matches the syntax of the template.

This is how permalink works, if you’re already familiar with that.

Consider our first example, but using Nunjucks (this example is also valid Liquid syntax).

Filename posts/my-page-title.njk
---
title: My Page Title
parent: My Parent Key
eleventyComputed:
eleventyNavigation:
key: "{{ title }}"
parent: "{{ parent }}"
---

The above would also resolve to the same Data Cascade:

Data Cascade for posts/my-page-title.njk
{
"title": "My Page Title",
"parent": "My Parent Key",
"eleventyNavigation": {
"key": "My Page Title",
"parent": "My Parent Key"
}
}
Note that template syntax is definitely slower than the “Just Use JavaScript” methods above.
This would also work in JSON data files or any other data file type in the cascade, just keep in mind that the template syntax must match the template syntax that it eventually winds up with in the Data Cascade.

Advanced Details #

We put a lot of work into making this feature as easy to use as possible. Most of these details shouldn’t matter to you as it should Just Work™. But here’s a few things we thought of already and handle in a good way:

---
key: My Key
eleventyComputed:
key: "This Is {{key}}"
---

Other pages in Data Cascade: