Set

The set tag allows to create or modify a global variable. For example:

{{ set message = "Hello, world!" }}

Use pipes to transform the value:

{{ set message = "Hello, world!" |> toUpperCase }}

Destructuring syntax is also supported:

{{ set { id, name: username } = { id: 23, name: "Laura" } }}
{{ set [one, two, ...other] = [1, 2, 3, 4] }}

{{# this returns an error: #}}
{{ set { name = "default-value" } = {} }}

Block mode

It's also possible to capture the variable value between {{ set [name] }} and {{ /set }}.

{{ set message }}
  Hello, world!
{{ /set }}

Block mode supports pipes too:

{{ set message |> toUpperCase }}
  Hello, world!
{{ /set }}

Differences between set and creating the variable with JavaScript

Vento allows you to run JavaScript, so it's possible to create new variables using normal JavaScript code:

{{> const name = "Óscar" }}
{{ name }}

The set tag provides the following benefits:

• With set, the variable is created globally. This means it's available in the included files (using include).

• You can use Pipes.

• It prevents errors of initializing the variable twice. For example, the following code will breaks, because the same variable is initialized twice:

  {{> const name = "Óscar" }}
  {{> const name = "Laura" }}
  

  With set this will work fine:

  {{ set name = "Óscar" }}
  {{ set name = "Laura" }}
  

Importing/exporting variables

See Imports and exports to learn how to export and import variables from other templates.

Internal variables

When Vento compiles a template, it generates JavaScript code that contains some internal variables like __env, __exports, or __pos. These internal variables (prefixed with __ to avoid conflicts with your own variables) shouldn't be modified. As a general rule, avoid creating variables prefixed with a double underscore.