Vento

Use the Vento template engine to create pages and layouts.

Options See on deno.land

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".vento", ".vto" ]

includes string

Custom includes path

Default:

site.options.includes

options object

The options for the Vento engine

See https://vento.js.org/configuration/

dataVarname string: Default:
"it"
useWith boolean: Default:
true
autoescape boolean: Default:
false

Vento is a template language created by the same creator as Lume (Óscar Otero) and inspired by other popular template engines like Nunjucks, Liquid or Eta. This plugin allows you to use it to create pages and layouts.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import vento from "lume/plugins/vento.ts";

const site = lume();

site.use(vento(/* Options */));

export default site;

Creating layouts

Add a file with .vto extension in the _includes directory. Use the front matter to set data to the template.

---
title: Welcome to my page
intro: This is my first post using Lume. I hope you like it!
---

<html>
  <head>
    <title>{{ title }}</title>
  </head>

  <body>
    <p>{{ intro }}</p>
  </body>
</html>

Creating pages

Creating pages is the same as creating layouts; just place the .vto file outside the _includes directory.

vto filter

The Vento plugin also registers the vto filter, to render any string value as a Vento template and output it as HTML. The filter accepts an object with data. For example, to render Vento code inside a Nunjucks template:

---
data:
  username: Oscar
text: "Hello {{ username }}"
---

<!-- Render a string -->
<div>{{ text | vto(data) | safe }}<div>

Configure VSCode

You can use the Vento extension for VS Code for syntax highlight and some useful snippets.