Template engines #

Following template engines are supported via Integrations. They can be also used separately outside of Vituum as plugin in Vite. But you lose the ext-name support for the template engines.

You can add pages in the 📁 views directory, and your templates files should be located in 📁 templates directory.

Here is an example of how to use Twig as a template engine inside the views directory:

• *.json (or *.json.html) - for defining a page with data, template is auto-loaded from the template variable which can be added in config or in 📁 data directory inside a .json file (and you can add other shared data for all your templates here)
• *.twig (or *.twig.html) - classic twig template file, .twig.json file with the same name can be added to add data to the template
• *.json.twig (or *.json.twig.html) - for non-html data such as json. twig is input and json is output (as a .json file) - you can use this if you have custom tag or function that transforms html into json

Same goes for any other template engine, just change the .twig to something else. You can even use more template engines at the same time.

Only one template engine defined as *.json can be used at the same time though, you can change the default template engine via templates.format in config.

See Integrations Options to learn more how to configure the plugins.

See Trying Vituum Online for various examples of template engines

PostHTML (@vituum/vite-plugin-posthtml) #

<extends src="layout.html">
    <block name="body">
        <include src="main.html"></include>
    </block>
</extends>

See docs for more info about the syntax

Install #

npm

npm i @vituum/posthtml --save-dev

yarn

yarn add @vituum/posthtml -D

For use outside Vituum as Vite plugin use @vituum/vite-plugin-posthtml

Config #

import { defineConfig } from 'vituum'
import posthtml from '@vituum/posthtml'

export default defineConfig({
    integrations: [posthtml()]
})

See @vituum/posthtml to learn more about config options

Twig (@vituum/vite-plugin-twig) #

<ul id="navigation">
    {% for item in ['Home', 'About'] %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

See docs for more info about the syntax

Install #

npm

npm i @vituum/twig --save-dev

yarn

yarn add @vituum/twig -D

For use outside Vituum as Vite plugin use @vituum/vite-plugin-twig

Config #

import { defineConfig } from 'vituum'
import twig from '@vituum/twig'

export default defineConfig({
    integrations: [twig()]
})

See @vituum/twig to learn more about config options

Latte (@vituum/vite-plugin-latte) #

• Requires PHP (8.x) or Docker PHP (8.x) to run

<ul id="navigation">
    {foreach ['Home', 'About'] as $item}
        <li>{$item}</li>
    {/foreach}
</ul>

or

<ul id="navigation">
    <li n:foreach="['Home', 'About'] as $item">{$item}</li>
</ul>

See docs for more info about the syntax

Install #

npm

npm i @vituum/latte --save-dev

yarn

yarn add @vituum/latte -D

For use outside Vituum as Vite plugin use @vituum/vite-plugin-latte

Config #

import { defineConfig } from 'vituum'
import latte from '@vituum/latte'

export default defineConfig({
    integrations: [latte()]
})

See @vituum/latte to learn more about config options

Liquid (@vituum/vite-plugin-liquid) #

<ul id="navigation">
    {% assign items = 'Home,About'|split:',' %}
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

See docs for more info about the syntax

Install #

npm

npm i @vituum/liquid --save-dev

yarn

yarn add @vituum/liquid -D

For use outside Vituum as Vite plugin use @vituum/vite-plugin-liquid

Config #

import { defineConfig } from 'vituum'
import liquid from '@vituum/liquid'

export default defineConfig({
    integrations: [liquid()]
})

See @vituum/liquid to learn more about config options

Nunjucks (@vituum/vite-plugin-nunjucks) #

<ul id="navigation">
    {% for item in ['Home', 'About'] %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

See docs for more info about the syntax

Install #

npm

npm i @vituum/nunjucks --save-dev

yarn

yarn add @vituum/nunjucks -D

For use outside Vituum as Vite plugin use @vituum/vite-plugin-nunjucks

Config #

import { defineConfig } from 'vituum'
import nunjucks from '@vituum/nunjucks'

export default defineConfig({
    integrations: [nunjucks()]
})

See @vituum/nunjucks to learn more about config options

Pug (@vituum/vite-plugin-pug) #

ul(id='navigation')
  each item in ['Home', 'About']
    li= item

See docs for more info about the syntax

Install #

npm

npm i @vituum/pug --save-dev

yarn

yarn add @vituum/pug -D

For use outside Vituum as Vite plugin use @vituum/vite-plugin-pug

Config #

import { defineConfig } from 'vituum'
import pug from '@vituum/pug'

export default defineConfig({
    integrations: [pug()]
})

See @vituum/pug to learn more about config options

Handlebars (@vituum/vite-plugin-handlebars) #

```twig
<ul id="navigation">
    {{#each navigation as |item|}}
        <li>{{ item }}</li>
    {{/each}}
</ul>

See docs for more info about the syntax

Install #

npm

npm i @vituum/handlebars --save-dev

yarn

yarn add @vituum/handlebars -D

For use outside Vituum as Vite plugin use @vituum/vite-plugin-handlebars

Config #

import { defineConfig } from 'vituum'
import handlebars from '@vituum/handlebars'

export default defineConfig({
    integrations: [handlebars()]
})

See @vituum/handlebars to learn more about config options

Create your own plugin #

Vituum can be used with any template engine plugin, the only requirement is that the plugin supports file ext-names such as following (twig as example)

• .json.html - for defining a page with data, template param is used to load default template file
• .twig.html - classic template engine syntax
• .twig.json - data for the template engine syntax

Supported ext-names can be changed via config

Template engine syntax should be also possible to process in any .html file like this

<script type="application/json" data-format="twig">
    {
        "template": "path/to/template",
        "title": "Hello nested"
    }
</script>

You can also create Vituum integration with predefined options via Integrations API