Configuration

Options

Pass an options object to the vento() function to customize Vento.

// Example with the default options:
const env = vento({
  dataVarname: "it",
  autoDataVarname: true,
  includes: "./templates",
  autoescape: false,
});

dataVarname

Vento provides the it variable with all data available in the template. For example:

{{ it.title }}

The dataVarname option allows changing the name of this variable.

const env = vento({
  dataVarname: "global",
});

Now you can use the global variable:

{{ global.title }}

autoDataVarname

The it global variable can be useful for some cases, for example if you want to see all data available in a template:

{{> console.log(it) }}

But in most cases you don't need it because Vento resolves the variable automaticaly for you.

For example, instead of {{ it.title }} you can simply write {{ title }} and it works. If you want to disable this behavior and force to use the it. prefix, set the autoDataVarname option to false:

const env = vento({
  autoDataVarname: false,
});

autoescape

Set true to automatically escape printed variables:

const env = vento({
  autoescape: true,
});

const result = env.runString("{{ title }}", {
  title: "<h1>Hello, world!</h1>",
});
// &lt;h1&gt;Hello, world!&lt;/h1&gt;

// Like in Nunjucks, you can use the `safe` filter for trusted content:
const result = env.runString("{{ title |> safe }}", {
  title: "<h1>Hello world</h1>",
});
// <h1>Hello world</h1>

includes

The path of the directory that Vento will use to look for includes templates. If you're using Vento in a browser, it must be the base URL to load the templates (using fetch):

// Node-like runtimes
const env = vento({
  includes: "./templates",
});

// Web browsers
const env = vento({
  includes: import.meta.resolve("./templates"),
});

strict mode

By default, if a variable used in a template doesn't exist, Vento creates it automatically with the undefined value. Let's take this example:

{{ if title }}
  {{ title }}
{{ /if }}

If the variable title is truly, the value is printed. But if it's not defined, the script doesn't fail because it's initialized automatically by Vento.

The strict mode changes this behavior to don't initialize undefined variables, so the example above will fail with the error ReferenceError: title is not defined if the title variable is not passed to the template.

Filters

Filters are custom functions to transform the content.

For example, let's create a function to make text italic:

function italic(text: string) {
  return `<em>${text}</em>`;
}

And we can register that with Vento:

env.filters.italic = italic;

Now you can use this filter anywhere:

<p>Welcome to {{ title |> italic }}</p>