Configuration

Options

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

// Example with the default options:
const env = vento({
  dataVarname: "it",
  useWith: true,
  includes: Deno.cwd(),
  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 }}

useWith

Vento use with statement to convert the variables from it to global. For example, instead of {{ it.title }} you can simply write {{ title }}.

Note that if the variable doesn't exist, the error (ReferenceError: title is not defined) is thrown.

You can disable the with behavior by setting this option to false:

const env = vento({
  useWith: 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.

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>