---
url: /guide/features.md
---
# About Vituum and its features

The main goal of Vituum is to add some additional features on top of Vite via plugins.

It's also a bridge for developers who still depend on template engines or older front-end tools like **gulp** or **grunt** and want to migrate to **Vite**.

Vituum can also be used as a small static site generator, but we recommend using [Astro](https://astro.build/) or [Eleventy](https://www.11ty.dev/) for a full SSG experience.

Most of the features are optional and can be added via dedicated [Vite Plugins](/plugins/).

## Multi-page support

Vituum makes it easy to use multiple `.html` files in Vite out of the box.

So you can add glob patterns to [rollupOptions.input](https://vitejs.dev/guide/build.html#multi-page-app) and use multi-page routing in pages directory.

```javascript
export default {
    build: {
        rollupOptions: {
            input: ['./src/pages/**/*.html']
        }
    }
}
```

You can use this to prototype fast without the need to change much in the config.By default, Vituum routes from `src/pages` directory.

You can even enhance this with [PostHTML](/plugins/posthtml) syntax like `<include>` to include small `html` components or use [Template Engines](/guide/template-engines) for full templating experience.

Example of the structure:

* 📁 **src**
  * 📁 **components**
    * 📄 Button.html
  * 📁 **pages**
    * 📁 **nested**
      * 📄 index.html
    * 📄 index.html
    * 📄 about.html

## Template Engines

Today frontend tools are awesome, but the good old template engines don't get enough love anymore.

Vituum tries to change this by supporting template engines in Vite.Let's go *Vite* with the templates!

**Twig**, **Liquid**, **Pug**, **Nunjucks**, **Handlebars**, **Latte** - there are a bunch of them!

Template engines are great for fast prototyping and preparing templates fast for PHP backend frameworks like Symfony, Laravel or Nette.

Example of the structure:

* 📁 **src**
  * 📁 **layouts**
    * 📄 Layout.twig
  * 📁 **pages**
    * 📁 **nested**
      * 📄 index.twig
    * 📄 index.json
    * 📄 about.twig

Learn more how to use template engines in Vituum [here](/guide/template-engines).

## Project structure

Pre-defined optional structure for your template files. You can always change the structure to your own liking.

* 📁 **public** - place for static files and dist files
* 📁 **src**
  * 📁 **assets** - your static files as `.png`, `.svg`
  * 📁 **data** - your `.json` data used in templates
  * 📁 **emails** - your email template files
  * 📁 **scripts** - your script files as `.js`, `.ts`
  * 📁 **styles** - your styles files as `.css`, `.scss`
  * 📁 **components** - your template files as `.twig`, `.latte`
  * 📁 **layouts** - your template layout files as `.twig`, `.latte`
  * 📁 **pages** - your pages as `.html`, you can also nest or define page as `.json` or `.twig`, `.latte` and other template engines

## Imports

In vanilla `css` and `js` you can import one file at a time. Globs like `*.css` or `*.js` are not possible.

To help import multiple files automatically, **Vituum** uses internal plugin which adds all file imports in the directories into a single file.

This is great if you have a complex project with a lot of styles or scripts files.

All filetypes are supported, so you can use this also with `.css`, `.less`, `.scss` or `.js`,  `.ts` or add your own via [config](/config/main-options#imports).

Example of the structure:

* 📁 **src**
  * 📁 **styles**
    * 📁 **Components**
      * 📄 +.css
      * 📄 Button.css
      * 📄 Badge.css
    * 📄 main.css

```css
/* +.css */
@import "Button.css";
@import "Badge.css";
```

```css
/* main.css */
@import "Components/+.css";
```

## Email Templates

Writing email templates was always tricky. **Vituum** tries to make it easier for you.

* With [@vituum/vite-plugin-juice](/plugins/juice) plugin you can write styles in **PostCSS** or any **pre-processor** you want. Everything will be inlined to html via **[Juice](https://github.com/Automattic/juice)**.
* Html can be written with any [Template Engine](/guide/template-engines), including **PostHTML** or in plain HTML.
* You can even use TailwindCSS or send your email for test via [@vituum/vite-plugin-send](/plugins/send)

Learn more about [Email Templates here](/guide/email-templates).

## Other use

Don't need template engines? You just want to write a **Vue** or **React** app? **Sure no problem, we do too!**

**Vituum** is a set of plugins for **Vite**. So you can use other plugins like **PostCSS** or **TailwindCSS** in your project, or any of the internal plugins! Learn more on [Plugins page](/plugins/).

Or go see all examples of usage [here](/guide/#trying-vituum-online).

---

---
url: /plugins/concat.md
---
# Concat

*[@vituum/vite-plugin-concat](https://github.com/vituum/vite-plugin-concat)*

Vite plugin for concatenating files together, handy especially for old projects that used gulp-concat or grunt-concat for concatenating `.js` files together.

Automatically concatenates all `import './paths'` together into single file, additionally you can provide glob of files which should be also concated into single file via `files` option.

## Install

**npm**

```bash
npm i @vituum/vite-plugin-concat --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-concat -D
```

## Config

```javascript
import concat from '@vituum/vite-plugin-concat'

export default {
    plugins: [concat({
        input: ['main.js']
    })]
}
```

## Options

### input

* **Type:** `string[]`
* **Default:** `[]`

Determinates which input files should be processed by concat plugin.

### files

* **Type:** `{[key: string]: string[]}`
* **Default:** `{}`

Additional files that should be concated together inside input file, eg. `{ 'main.js': ['src/scripts/**'] }`

---

---
url: /config.md
---

# Configuring Vituum

**Vituum** needs to be added as a plugin in `vite.config.js` inside a project root.
You can also use `.mjs`, `.ts`, learn more about [Vite config](https://vitejs.dev/config/).

The most basic config file looks like this:

```js
import vituum from 'vituum'

export default {
    plugins: [vituum()]
}
```

This adds basic [features](/guide/features) like multi-page support and imports. To add more features, you will need to define additional [plugins](/plugins/).

Here is an example of usage with **LiquidJS** and **TailwindCSS**

```js
import vituum from 'vituum'
import liquid from '@vituum/vite-plugin-liquid'
import tailwindcss from '@vituum/vite-plugin-tailwindcss'

export default {
    plugins: [
        vituum(),
        liquid(),
        tailwindcss()
    ]
}
```

You can also choose to not use Vituum and only use its plugins, that's ok too if you don't need multi-page support and other core features.

---

---
url: /plugins/css-inline.md
---
# CSS Inline

*[@vituum/vite-plugin-css-inline](https://www.npmjs.com/package/@vituum/vite-plugin-css-inline)*

Adds support for inlining your `css` files to `html`.
It's handy for creating email templates. Learn more about that [here](/guide/features#email-templates).

See library [docs](https://github.com/Stranger6667/css-inline/tree/master/bindings/javascript) for more info about **css-inline**.

> This is a faster alternative to [Juice](/plugins/juice)

## Install

**npm**

```bash
npm i @vituum/vite-plugin-css-inline --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-css-inline -D
```

## Config

```javascript
import cssInline from '@vituum/vite-plugin-css-inline'

export default {
    plugins: [cssInline()]
}
```

## Options

### paths

* **Type:** `string[]`
* **Default:** `['src/pages/email']`

Paths in which `html` files should be processed with [Juice](https://github.com/Automattic/juice)

### tables

* **Type:** `boolean`
* **Default:** `true`

Whenever to add default attributes `border="0" cellpadding="0" cellspacing="0"` to every table.

### doctype

* **Type:** `string`
* **Default:** `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

Default doctype to use, replaces `<!DOCTYPE html>` from your `.html` with your doctype to use in emails.

### postcss.customProperties

* **Type:** `pluginOptions`
* **Default:** `{ preserve: false }`

See all options [here](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties)

### postcss.processOptions

* **Type:** `ProcessOptions`
* **Default:** `undefined`

See all options [here](https://postcss.org/api/#processor-process)

### postcss.plugins

* **Type:** `ProcessOptions`
* **Default:** `undefined`

Here you can add additional [PostCSS plugins](https://github.com/postcss/postcss-load-config/blob/main/README.md#array).

### options

* **Type:** `Object`
* **Default:** `{}`

Additional options for Juice. Learn more about Juice options [here](https://github.com/Stranger6667/css-inline/tree/master/bindings/javascript#configuration).

---

---
url: /guide/email-templates.md
---
# Email Templates

To write email templates in Vite, you should start by adding following plugins in your `vite.config.js`, for templates in this example we use [PostHTML](/plugins/posthtml), but you can use any [Template Engine](/guide/template-engines) you want.

```javascript
import vituum from 'vituum'
import postcss from '@vituum/vite-plugin-postcss'
import posthtml from '@vituum/vite-plugin-posthtml'
import juice from '@vituum/vite-plugin-css-inline'
import send from '@vituum/vite-plugin-send'

export default {
    plugins: [
        vituum(),
        postcss(),
        posthtml({
            root: './src/emails'
        }),
        cssInline(),
        send()
    ]
}
```

Now add your `index.html` to `/src/pages/email`

```html
<!-- index.html -->
<extends src="layouts/main.html">
    <block name="body">
        <include src="components/button.html"></include>
    </block>
</extends>
```

And your `layout.html` should look like this.

```html
<!-- src/emails/layouts/main.html -->
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @import "/src/emails/main.css";
        </style>
    </head>
    <body>
    <table>
        <tr>
            <td>Vituum Emails</td>
        </tr>
        <tr>
            <td>
                <block name="body" with="locals"></block>
            </td>
        </tr>
    </table>
    </body>
</html>

```

Now, since we're using [@vituum/vite-plugin-postcss](/plugins/postcss) (you can also use [lightningcss](https://vite.dev/config/shared-options#css-lightningcss)), we can use modern syntax in `/src/emails/main.css`. You can even switch this with [@vituum/vite-plugin-tailwindcss](/plugins/tailwindcss) or [@tailwindcss/vite](https://www.npmjs.com/package/@tailwindcss/vite) and use TailwindCSS classes.

All CSS will be inlined into `html` via `css-inline`. You can write your emails much more easier, use modern syntax, split your email into components etc.

Lastly, if you want to test your email, add an `.env` file to your project with env variables for [@vituum/vite-plugin-send](/plugins/send), or add them via config.

After that you can add `?send` in your browser URL and a test email will be sent to you. We also recommend uploading your images somewhere, so that they can load in your email.

Find full example of using Vituum with Juice on [Trying Vituum Online](/guide/#trying-vituum-online).

---

---
url: /guide.md
---
# Getting Started

## Overview

Vituum is a mix of words **Vite** *(French word for "quick")* and **Tuum** *(Estonian word for "core")*
It's a set of plugins for **Vite**, the full list can be found on [Plugins page](/plugins/).

## Get started

Already using preview version of Vituum 0.0.x? [Learn more](/guide/migrating-1-0) how to migrate to 1.0.

```bash
$ npm create vite@latest
$ npm i vituum --save-dev
```

Then add Vituum to your [Vite config](https://vitejs.dev/config/), this adds basic multi-page `.html` support in `src/pages`.
Add more functionality, template engines and more with [Vituum Plugins](/plugins/).

```javascript
import vituum from 'vituum'

export default {
    plugins: [
        vituum()
    ]
}

```

And start Vite. Or build your project, see [Vite docs](https://vitejs.dev/guide/cli.html) for more info.

```bash
$ npx vite
```

You can learn more about how to use **Vituum** in the examples bellow.

## Trying Vituum Online

You can also try Vituum online on [StackBlitz](https://stackblitz.com/).

### Basic

* [vituum](https://stackblitz.com/github/vituum/vituum/tree/main/examples/vanilla)
* [vituum + posthtml](https://stackblitz.com/github/vituum/vituum/tree/main/examples/posthtml)
* [vituum + postcss](https://stackblitz.com/github/vituum/vituum/tree/main/examples/postcss)
* [vituum + less](https://stackblitz.com/github/vituum/vituum/tree/main/examples/less)
* [vituum + sass](https://stackblitz.com/github/vituum/vituum/tree/main/examples/sass)
* [vituum + juice](https://stackblitz.com/github/vituum/vituum/tree/main/examples/juice)

### Templates

* [vituum + twig](https://stackblitz.com/github/vituum/vituum/tree/main/examples/twig)
* [vituum + latte](https://stackblitz.com/github/vituum/vituum/tree/main/examples/latte)
* [vituum + liquid](https://stackblitz.com/github/vituum/vituum/tree/main/examples/liquid)
* [vituum + nunjucks](https://stackblitz.com/github/vituum/vituum/tree/main/examples/nunjucks)
* [vituum + handlebars](https://stackblitz.com/github/vituum/vituum/tree/main/examples/handlebars)
* [vituum + pug](https://stackblitz.com/github/vituum/vituum/tree/main/examples/pug)

### CSS

* [vituum + tailwindcss](https://stackblitz.com/github/vituum/vituum/tree/main/examples/tailwindcss)
* [vituum + winduum](https://stackblitz.com/github/vituum/vituum/tree/main/examples/winduum)
* [vituum + openprops](https://stackblitz.com/github/vituum/vituum/tree/main/examples/openprops)
* [vituum + bootstrap](https://stackblitz.com/github/vituum/vituum/tree/main/examples/bootstrap)
* [vituum + bulma](https://stackblitz.com/github/vituum/vituum/tree/main/examples/bulma)

All examples can be found on [GitHub](https://github.com/vituum/vituum/tree/main/examples).

---

---
url: /plugins/handlebars.md
---
# Handlebars

*[@vituum/vite-plugin-handlebars](https://github.com/vituum/vite-plugin-handlebars)*

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

See [docs](https://handlebarsjs.com/) for more info about the syntax

## Install

**npm**

```bash
npm i @vituum/vite-plugin-handlebars --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-handlebars -D
```

## Config

```javascript
import handlebars from '@vituum/vite-plugin-handlebars'

export default {
    plugins: [handlebars()]
}
```

## Options

### reload

* **Type:** `boolean` or `Function`
* **Default:** `true`

Whenever to auto-reload browser window upon `hbs` or `json` file change. You can also provide function to filter upon which file a reload should occur.

### root

* **Type:** `string`
* **Default:** `null`

Root is inherited from Vite `root` by default. But you can change this to path such as `'./src/'` or `'./src/templates'`, then you can use includes with paths defaulting to this directory.

### helpers

* **Type:** `Object`
* **Default:** `{}`

Object of named helper functions to use, see Handlebars [docs](https://handlebarsjs.com/api-reference/helpers.html) for more info.

### partials.directory

* **Type:** `string`
* **Default:** `null`

Root directory for partials. Directory is inherited from plugin `root` by default.

### partials.extname

* **Type:** `boolean`
* **Default:** `true`

Whenever to use ext-name in partial path like this `"path/to/partial.hbs`

### data

* **Type:** `string`
* **Default:** `['src/data/**/*.json']`

Path to additional data provided with json file. Can be a file, or a glob like this `/path/to/*.jsom`.

### globals

* **Type:** `Object`
* **Default:** `{}`

Other global data to use. Can be `Object` or `function` returning object, or combination of both.

### ignoredPaths

* **Type:** `string[]`
* **Default:** `[]`

Which paths should be ignored from processing as TwigJS.

### formats

* **Type:** `string[]`
* **Default:** `['hbs', 'json.hbs', 'json']`

Which ext-names should be processed by the plugin.

### options.compileOptions

* **Type:** `Object`
* **Default:** `{}`

Additional Handlebars compileOptions, see Handlebars [docs](https://handlebarsjs.com/api-reference/compilation.html) for more info.

### options.runtimeOptions

* **Type:** `Object`
* **Default:** `{}`

Additional Handlebars runtimeOptions, see Handlebars [docs](https://handlebarsjs.com/api-reference/runtime-options.html) for more info.

---

---
url: /plugins/imports.md
---
# Imports

*Internal Vituum Plugin*

Learn more about this plugin on [Features](/guide/features#⬇️-imports) page.

## Install

**npm**

```bash
npm i vituum --save-dev
```

**yarn**

```bash
yarn add vituum -D
```

## Config

```javascript
import vituum from 'vituum'

export default {
    plugins: [vituum()]
}
```

### Using separately

```javascript
import imports from 'vituum/plugins/imports.js'

export default {
    plugins: [imports()]
}
```

## Options

## paths

* **Type:** `string[]`
* **Default:** `['./src/styles/*/**', './src/scripts/*/**']`

Paths where auto-imports should be resolved.

## extnamePattern.styles

* **Type:** `RegExp`
* **Default:** `/.(css|less|scss|pcss)$/`

Types of files that should be resolved as styles

## extnamePattern.scripts

* **Type:** `RegExp`
* **Default:** `/.(js|mjs|ts)$/`

Types of files that should be resolved as scripts

## filenamePattern

* **Type:** `Object`
* **Default:** `{'+.css': 'src/styles', '+.js': 'src/scripts'}`

Filename for file with imports paths and where it should be applied.
Path can be also `string[]` of paths.

---

---
url: /plugins/juice.md
---
# Juice

*[@vituum/vite-plugin-juice](https://www.npmjs.com/package/@vituum/vite-plugin-juice)*

Adds support for inlining your `css` files to `html`.
It's handy for creating email templates. Learn more about that [here](/guide/features#email-templates).

See library [docs](https://github.com/Automattic/juice) for more info about **Juice**.

> Juice is dependency heavy and slow, consider using [css-inline](/plugins/css-inline) instead as a faster alternative.

## Install

**npm**

```bash
npm i @vituum/vite-plugin-juice --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-juice -D
```

## Config

```javascript
import juice from '@vituum/vite-plugin-juice'

export default {
    plugins: [juice()]
}
```

## Options

### paths

* **Type:** `string[]`
* **Default:** `['src/pages/email']`

Paths in which `html` files should be processed with [Juice](https://github.com/Automattic/juice)

### tables

* **Type:** `boolean`
* **Default:** `true`

Whenever to add default attributes `border="0" cellpadding="0" cellspacing="0"` to every table.

### doctype

* **Type:** `string`
* **Default:** `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

Default doctype to use, replaces `<!DOCTYPE html>` from your `.html` with your doctype to use in emails.

### postcss.processOptions

* **Type:** `ProcessOptions`
* **Default:** `undefined`

See all options [here](https://postcss.org/api/#processor-process)

### postcss.plugins

* **Type:** `ProcessOptions`
* **Default:** `undefined`

Here you can add additional [PostCSS plugins](https://github.com/postcss/postcss-load-config/blob/main/README.md#array).

### options

* **Type:** `Object`
* **Default:** `{}`

Additional options for Juice. Learn more about Juice options [here](https://github.com/Automattic/juice#options).

---

---
url: /plugins/latte.md
---
# Latte

*[@vituum/vite-plugin-latte](https://github.com/vituum/vite-plugin-latte)*

* Requires [PHP (8.x)](https://www.php.net/) or [Docker PHP (8.x)](https://hub.docker.com/_/php) to run

```handlebars
<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](https://latte.nette.org/en/) for more info about the syntax

## Install

**npm**

```bash
npm i @vituum/vite-plugin-latte --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-latte -D
```

## Config

```javascript
import vituum from 'vituum'
import latte from '@vituum/vite-plugin-latte'

export default {
    plugins: [vituum(), latte()]
}
```

## Options

### reload

* **Type:** `boolean` or `Function`
* **Default:** `true`

Whenever to auto-reload browser window upon `latte` or `json` file change. You can also provide function to filter upon which file a reload should occur.

### root

* **Type:** `string`
* **Default:** `null`

Root is inherited from Vite `root` by default. But you can change this to path such as `'./src/'` or `'./src/templates'`, then you can use includes with paths defaulting to this directory.

### filters

* **Type:** `Object`
* **Default:** `{}`

Object of named filters to use. Can be function or string providing path to `.php` or `.js` (faster than function) file. See examples [here](https://github.com/vituum/vite-plugin-latte/tree/main/latte) or official docs [here](https://latte.nette.org/en/extending-latte#toc-filters).

### functions

* **Type:** `Object`
* **Default:** `{}`

Object of named functions to use. Can be function or string providing path to `.php` or `.js` (faster than function) file. See examples [here](https://github.com/vituum/vite-plugin-latte/tree/main/latte) or official docs [here](https://latte.nette.org/en/extending-latte#toc-functions).

### tags

* **Type:** `Object`
* **Default:** `{}`

Object of named tags to use. Only a string providing path to `.php` file is possible. See official docs [here](https://latte.nette.org/en/extending-latte#toc-tags).

### data

* **Type:** `string`
* **Default:** `['src/data/**/*.json']`

Path to additional data provided with json file. Can be a file, or a glob like this `/path/to/*.jsom`.

### globals

* **Type:** `Object`
* **Default:** `{}`

Other global data to use. Can be `Object` or `function` returning object, or combination of both.

### ignoredPaths

* **Type:** `string[]`
* **Default:** `[]`

Which paths should be ignored from processing as TwigJS.

### formats

* **Type:** `string[]`
* **Default:** `['latte', 'json.latte', 'json']`

Which ext-names should be processed by the plugin.

### bin

* **Type:** `string`
* **Default:** `php`

Which binary should be used for processing `latte` files, you can also set `docker` but it's slower.

### renderTransformedHtml

* **Type:** `Function`
* **Default:** `(path) => false`

Determines which path should be rendered as transformedHtml from Vite, otherwise `php` is loading your file directly from disk and not from transformed stream.

You might need this if you need to transform your file via Vite before `latte` renders your file.

---

---
url: /plugins/liquid.md
---
# Liquid

*[@vituum/vite-plugin-liquid](https://github.com/vituum/vite-plugin-liquid)*

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

See official [docs](https://liquidjs.com/) for more info about the syntax

## Install

**npm**

```bash
npm i @vituum/vite-plugin-liquid --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-liquid -D
```

## Config

```javascript
import vituum from 'vituum'
import liquid from '@vituum/vite-plugin-liquid'

export default {
    plugins: [vituum(), liquid()]
}
```

## Options

### reload

* **Type:** `boolean` or `Function`
* **Default:** `true`

Whenever to auto-reload browser window upon `liquid` or `json` file change. You can also provide function to filter upon which file a reload should occur.

### root

* **Type:** `string`
* **Default:** `null`

Root is inherited from Vite `root` by default. But you can change this to path such as `'./src/'` or `'./src/templates'`, then you can use includes with paths defaulting to this directory.

### filters

* **Type:** `Object`
* **Default:** `{}`

Object of named filter functions to use, see LiquidJS [docs](https://liquidjs.com/tutorials/register-filters-tags.html#Register-Filters) for more info.

### tags

* **Type:** `Function[]`
* **Default:** `[]`

Array of functions that extend LiquidJS with custom tag, see LiquidJS [docs](https://liquidjs.com/tutorials/register-filters-tags.html#Register-Tags) for more info.

### data

* **Type:** `string | string[]`
* **Default:** `''`

Path to additional data provided with json file. Can be a file, or a glob like this `/path/to/*.jsom`.

### globals

* **Type:** `Object`
* **Default:** `{}`

Other global data to use. Can be `Object` or `function` returning object, or combination of both.

### ignoredPaths

* **Type:** `string[]`
* **Default:** `[]`

Which paths should be ignored from processing as LiquidJS.

### formats

* **Type:** `string[]`
* **Default:** `['liquid', 'json.liquid', 'json']`

Which ext-names should be processed by the plugin.

### options.liquidOptions

* **Type:** `Object`
* **Default:** `{}`

Additional LiquidJS options, see LiquidJS [docs](https://liquidjs.com/api/interfaces/LiquidOptions.html) for more info.

### options.renderOptions

* **Type:** `Object`
* **Default:** `{}`

Additional render options, see LiquidJS [docs](https://liquidjs.com/) for more info.

### options.renderFileOptions

* **Type:** `Object`
* **Default:** `{}`

Additional renderFile options, see LiquidJS [docs](https://liquidjs.com/) for more info.

---

---
url: /config/main-options.md
---
# Main Options

These are the main **Vituum** options that can be used in the main plugin.

## input

* **Type:** `string[]`
* **Default:** `['./src/styles/*.{css,pcss,scss,sass,less,styl,stylus}', './src/scripts/*.{js,ts,mjs}']`

Additional paths that are added in `build.rollupOptions.input`, change this mainly if you want to change paths for you styles and scripts or to add other paths for templates.

Default paths for `build.rollupOptions.input` are following, so if you want to change them completely, change them in `build.rollupOptions.input`.

```javascript
// build.rollupOptions.input
[
    './src/emails/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
    './src/pages/**/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
    '!./src/pages/**/*.{latte,twig,liquid,njk,hbs,pug,html}.json'
]
```

## formats

* **Type:** `string[]`
* **Default:** `'./src'`

Determines which extname formats are supported inside `build.rollupOptions.input` and renamed to `.html`.

## pages

See [Pages Plugin](/plugins/pages) for more info about options.

## imports

See [Imports Plugin](/plugins/imports) for more info about options.

---

---
url: /guide/migrating-1-0.md
---
# Migrating to 1.0

1.0 is a complete rewrite and various functions were removed or simplified

* Vituum is no longer defined as a wrapper around Vite, but as a Vite plugin
* PostCSS plugins are no longer included by default, to add them use [@vituum/vite-plugin-postcss](/plugins/postcss)
* Various main config options were removed, see [config](/config/main-options) for more details what remained
* `src/views` directory was changed to `src/pages`, but you can still use views by changing it in the config (see [main-options](/config/main-options.html#input) and [pages](/plugins/pages.html#dir))
* `vituum` build command was removed in favour of building directly with Vite
* Integrations were removed, and everything is a Vite plugin now
* Defining template with `<script type="application/json">` was removed in favour of defining templates with files (`.liquid`, `.pug`, `.json` etc.)

Here is an example of upgrading the Vituum config from `0.0.X` to `1.0`

### 0.0.X

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

export default defineConfig({
    integrations: [liquid()],
    templates: {
        format: 'liquid'
    }
})
```

### 1.0.0

```javascript
import vituum from 'vituum'
import liquid from '@vituum/vite-plugin-liquid'

export default {
    plugins: [vituum(), liquid()]
}
```

---

---
url: /plugins/nunjucks.md
---
# Nunjucks

*[@vituum/vite-plugin-nunjucks](https://github.com/vituum/vite-plugin-nunjucks)*

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

See [docs](https://mozilla.github.io/nunjucks/) for more info about the syntax

## Install

**npm**

```bash
npm i @vituum/vite-plugin-nunjucks --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-nunjucks -D
```

## Config

```javascript
import vituum from 'vituum'
import nunjucks from '@vituum/vite-plugin-nunjucks'

export default {
    plugins: [vituum(), nunjucks()]
}
```

## Options

### reload

* **Type:** `boolean` or `Function`
* **Default:** `true`

Whenever to auto-reload browser window upon `njk` or `json` file change. You can also provide function to filter upon which file a reload should occur.

### root

* **Type:** `string`
* **Default:** `null`

Root is inherited from Vite `root` by default. But you can change this to path such as `'./src/'` or `'./src/templates'`, then you can use includes with paths defaulting to this directory.

### filters

* **Type:** `Object`
* **Default:** `{}`

Object of named filter functions to use, see Nunjucks [docs](https://mozilla.github.io/nunjucks/api.html#custom-filters) for more info.

### extensions

* **Type:** `Object`
* **Default:** `{}`

Object of named extensions to use, see Nunjucks [docs](https://mozilla.github.io/nunjucks/api.html#custom-tags) for more info.

### data

* **Type:** `string`
* **Default:** `['src/data/**/*.json']`

Path to additional data provided with json file. Can be a file, or a glob like this `/path/to/*.jsom`.

### globals

* **Type:** `Object`
* **Default:** `{}`

Other global data to use. Can be `Object` or `function` returning object, or combination of both. Uses the [addGlobal](https://mozilla.github.io/nunjucks/api.html#addglobal) method of Nunjucks.

### context

* **Type:** `Object`
* **Default:** `{}`

Other global data to use. Can be `Object` or `function` returning object, or combination of both.

### ignoredPaths

* **Type:** `string[]`
* **Default:** `[]`

Which paths should be ignored from processing as TwigJS.

### formats

* **Type:** `string[]`
* **Default:** `['njk', 'json.njk', 'json']`

Which ext-names should be processed by the plugin.

### options

* **Type:** `Object`
* **Default:** `{}`

Additional Nunjucks options, see Nunjucks [docs](https://mozilla.github.io/nunjucks/api.html#environment) for more info.

---

---
url: /plugins/pages.md
---
# Pages

*Internal Vituum Plugin*

Adds multi-page support for Vite inside `pages` directory. You can add files and directories inside `src/pages` and every request should route there with this plugin.

Applies only on `.html` files and template files such as eg. `.liquid`, `.twig`, `.json`.

## Install

**npm**

```bash
npm i vituum --save-dev
```

**yarn**

```bash
yarn add vituum -D
```

## Config

```javascript
import vituum from 'vituum'

export default {
    plugins: [vituum()]
}
```

### Using separately

```javascript
import pages from 'vituum/plugins/pages.js'

export default {
    plugins: [pages()]
}
```

## Options

### root

* **Type:** `string`
* **Default:** `'./src'`

Determines where does pages routing work by default outside of `pages` directory. Path is relative to Vite `root`.

### dir

* **Type:** `string`
* **Default:** `./src/pages'`

Directory where your `.html` or template engine page files are located. Requests are auto-redirected to this directory. Path is relative to Vite `root`.

### ignoredPaths

* **Type:** `string[]`
* **Default:** `[]`

Determines which paths should be ignored from routing to `pages` directory and should fallback to `pages.root`. This should be url pathname not starting with slash.

## normalizeBasePath

* **Type:** `boolean`
* **Default:** `false`

Renames and normalizes paths in output `.html` files. It's a workaround if vite `base` is set to `'./'` - [#12](https://github.com/vituum/vituum/issues/12)

---

---
url: /plugins.md
---
# Plugins

Here are some official **Vituum** plugins for Vite!

## Internal Plugins

These are internal plugins that are part of Vituum, they can be used separately too.

* [@vituum/vite-plugin-pages](/plugins/pages)
* [@vituum/vite-plugin-imports](/plugins/imports)

## Common Plugins

Other common plugins can be used to enhance Vite functionality and can also be used separately without Vituum in any Vite project.

* [@vituum/vite-plugin-tailwindcss](/plugins/tailwindcss)
* [@vituum/vite-plugin-postcss](/plugins/postcss)
* [@vituum/vite-plugin-posthtml](/plugins/posthtml)
* [@vituum/vite-plugin-juice](/plugins/juice)
* [@vituum/vite-plugin-send](/plugins/send)

## Template Engines Plugins

And lastly there are [Template Engines](/guide/template-engines) plugins, these are meant to be primary used with Vituum to get full functionality.

You can use them separately without Vituum too, but you would have to manually define each file in `build.rollupOptions.input`, since there is no multi-page support.

* [@vituum/vite-plugin-liquid](/plugins/liquid)
* [@vituum/vite-plugin-twig](/plugins/twig)
* [@vituum/vite-plugin-latte](/plugins/latte)
* [@vituum/vite-plugin-nunjucks](/plugins/nunjucks)
* [@vituum/vite-plugin-pug](/plugins/pug)
* [@vituum/vite-plugin-handlebars](/plugins/handlebars)

---

---
url: /plugins/postcss.md
---
# PostCSS

*[@vituum/vite-plugin-postcss](https://www.npmjs.com/package/@vituum/vite-plugin-postcss)*

Adds more base **PostCSS** plugins to Vite.
Includes `postcss-import`, `postcss-nesting`, `postcss-custom-media`, `autoprefixer`

Add more via Vite or PostCSS config. See [Vite docs](https://vitejs.dev/guide/features.html#postcss) for more info.

## Install

**npm**

```bash
npm i @vituum/vite-plugin-postcss --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-postcss -D
```

## Config

```javascript
import postcss from '@vituum/vite-plugin-postcss'

export default {
    plugins: [postcss()]
}
```

## Options

### import

* **Type:** `Object`
* **Default:** `{}`

PostCSS \[postcss-import]\(https://www.npmjs.com/package/postcss-import plugin options.

### nesting

* **Type:** `Object`
* **Default:** `{}`

PostCSS [postcss-nesting](https://www.npmjs.com/package/postcss-nesting) plugin options.

### customMedia

* **Type:** `Object`
* **Default:** `{}`

PostCSS [postcss-custom-media](https://www.npmjs.com/package/postcss-custom-media) plugin options.

### autoprefixer

* **Type:** `Object`
* **Default:** `{}`

PostCSS [autoprefixer](https://www.npmjs.com/package/autoprefixer) plugin options.

---

---
url: /plugins/posthtml.md
---
# PostHTML

*[@vituum/vite-plugin-posthtml](https://github.com/vituum/vite-plugin-posthtml)*

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

See [docs](https://posthtml.org/) for more info about the syntax

## Install

**npm**

```bash
npm i @vituum/vite-plugin-posthtml --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-posthtml -D
```

## Config

```javascript
import posthtml from '@vituum/vite-plugin-posthtml'

export default {
    plugins: [posthtml()]
}
```

## Options

### root

* **Type:** `string`
* **Default:** `null`

Root path to use for built-in `extend` and `include` plugins. Current path of `.html` is used if not defined.

### extend

* **Type:** `Object | false`
* **Default:** `{}`

PostHTML [posthtml-extend](https://www.npmjs.com/package/posthtml-extend) plugin options. Can be disabled from loading with `false`.

### include

* **Type:** `Object | false`
* **Default:** `{}`

PostHTML [posthtml-include](https://www.npmjs.com/package/posthtml-include) plugin options. Can be disabled from loading with `false`.

### plugins

* **Type:** `(Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]`
* **Default:** `[]`

Additional PostHTML plugins to use. See PostHTML [GitHub](https://github.com/posthtml) for list of all official plugins.

### options

* **Type:** `Object`
* **Default:** `{}`

Additional PostHTML options to use. See PostHTML [options](https://posthtml.org/#/core?id=posthtml-options) for more info.

### enforce

* **Type:** `'pre' | 'post'`
* **Default:** `pre`

Enforce the plugin to run before or after other plugins.

---

---
url: /plugins/pug.md
---
# Pug

*[@vituum/vite-plugin-pug](https://github.com/vituum/vite-plugin-pug)*

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

See [docs](https://pugjs.org) for more info about the syntax

## Install

**npm**

```bash
npm i @vituum/vite-plugin-pug --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-pug -D
```

## Config

```javascript
import vituum from 'vituum'
import pug from '@vituum/vite-plugin-pug'

export default {
    plugins: [vituum(), pug()]
}
```

## Options

### reload

* **Type:** `boolean` or `Function`
* **Default:** `true`

Whenever to auto-reload browser window upon `pug` or `json` file change. You can also provide function to filter upon which file a reload should occur.

### root

* **Type:** `string`
* **Default:** `null`

Root is inherited from Vite `root` by default. But you can change this to path such as `'./src/'` or `'./src/templates'`, then you can use includes with paths defaulting to this directory.

### filters

* **Type:** `Object`
* **Default:** `{}`

Object of named filter functions to use, see Pug [docs](https://pugjs.org/language/filters.html#custom-filters) for more info.

### data

* **Type:** `string`
* **Default:** `['src/data/**/*.json']`

Path to additional data provided with json file. Can be a file, or a glob like this `/path/to/*.jsom`.

### globals

* **Type:** `Object`
* **Default:** `{}`

Other global data to use. Can be `Object` or `function` returning object, or combination of both.

### ignoredPaths

* **Type:** `string[]`
* **Default:** `[]`

Which paths should be ignored from processing as TwigJS.

### formats

* **Type:** `string[]`
* **Default:** `['hbs', 'json.hbs', 'json']`

Which ext-names should be processed by the plugin.

### options

* **Type:** `Object`
* **Default:** `{}`

Additional Pug options, see Pug [docs](https://pugjs.org/api/reference.html) for more info.

---

---
url: /plugins/send.md
---
# Send

*[@vituum/vite-plugin-send](https://github.com/vituum/vite-plugin-send)*

Can be used for sending test email from `html` file.

If you add `?send` to your URL, an email of current page will be sent to your user defined email address. Don't forget to remove the get parameter when you make changes to your files, or you will constantly get new emails with updated content.

You can also use send function separately of Vite, it's exported under `@vituum/vite-plugin-send/send.js` and takes the same options as the plugin. You can use this to create npm script to run the function manually instead of get parameter.

## Install

**npm**

```bash
npm i @vituum/vite-plugin-send --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-send -D
```

## Config

```javascript
import send from '@vituum/vite-plugin-send'

export default {
    plugins: [send()]
}
```

## Options

### content

* **Type:** `string`
* **Default:** `null`

It's `html` content which should be sent via test email.

### filename

* **Type:** `string`
* **Default:** `process.env.VITUUM_SEND_FILE || null`

Path to template to use for sending a test email. Should be already built `html` file.

### from

* **Type:** `string`
* **Default:** `process.env.VITUUM_SEND_FROM || 'example@example.com'`

Email address from which the email should be sent. You can also use `VITUUM_SEND_FROM` in `.env` file.

### to

* **Type:** `string`
* **Default:** `process.env.VITUUM_SEND_TO || null`

Email address to which the email should be sent. You can also use `VITUUM_SEND_TO` in `.env` file.

### host

* **Type:** `string`
* **Default:** `process.env.VITUUM_SEND_HOST || null`

SMTP Host from to send, you can also use `VITUUM_SEND_HOST` in `.env` file.

### user

* **Type:** `string`
* **Default:** `process.env.VITUUM_SEND_USER || null`

SMTP User from to send, you can also use `VITUUM_SEND_USER` in `.env` file.

### pass

* **Type:** `string`
* **Default:** `process.env.VITUUM_SEND_PASS || null`

SMTP Password from to send, you can also use `VITUUM_SEND_PASS` in `.env` file.

---

---
url: /plugins/tailwindcss.md
---
# TailwindCSS

*[@vituum/vite-plugin-tailwindcss](https://www.npmjs.com/package/@vituum/vite-plugin-tailwindcss)*

Adds out-of-the-box support for the old **TailwindCSS v3** to your project. Including base **PostCSS** plugins from [@vituum/vite-plugin-postcss](/plugins/postcss)

See [docs](https://v3.tailwindcss.com/docs) for more info about **TailwindCSS**

> Use the official [@tailwindcss/vite](https://www.npmjs.com/package/@tailwindcss/vite) if you want to use latest **TailwindCSS** version

## Install

**npm**

```bash
npm i @vituum/vite-plugin-tailwindcss --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-tailwindcss -D
```

## Config

```javascript
import tailwindcss from '@vituum/vite-plugin-tailwindcss'

export default {
    plugins: [tailwindcss()]
}
```

## Options

### tailwindcss

* **Type:** `Object`
* **Default:** `{}`

TailwindCSS [configuration](https://tailwindcss.com/docs/configuration#configuration-options) options. Can be used instead of `tailwind.config.js`.

### import

* **Type:** `Object`
* **Default:** `{}`

PostCSS \[postcss-import]\(https://www.npmjs.com/package/postcss-import plugin options.

### nesting

* **Type:** `Object`
* **Default:** `{}`

PostCSS [postcss-nesting](https://www.npmjs.com/package/postcss-nesting) plugin options.

### customMedia

* **Type:** `Object`
* **Default:** `{}`

PostCSS [postcss-custom-media](https://www.npmjs.com/package/postcss-custom-media) plugin options.

### autoprefixer

* **Type:** `Object`
* **Default:** `{}`

PostCSS [autoprefixer](https://www.npmjs.com/package/autoprefixer) plugin options.

---

---
url: /guide/template-engines.md
---
# Template Engines

Following template engines are supported via [Plugins](/plugins/). You can use them separately or with **Vituum** core plugin which adds multi-page support and other [features](/guide/features) in **Vite**.

* Liquid
* Twig
* Latte
* Nunjucks
* Pug
* Handlebars

You can add pages in the **📁 pages** directory, and your templates files should be located in **📁 layouts** and **📁 components** directory, but that's up to you - **📁 templates** is ok too.

Here is an example of how to use **Liquid** as a template engine inside the pages directory:

* `*.liquid` - classic liquid template file, `.liquid.json` file with the same name can be added to add data to the template
* `*.json.liquid` - for non-html data such as json. `liquid` 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`
* `*.json` - for defining a page only with data, template is auto-loaded from the `template` property inside the file, or from plugin config, or from **📁 data** directory inside a `.json` file (and you can add other shared data for all your templates here)

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

Only one template engine can be used as `*.json` at the same time though. If you have more than one template engine, you need to add `format` property into `*.json` so plugins can tell which template engine should be rendered, otherwise it's the first defined plugin.

See [Plugins](/plugins/) to learn more how to configure the plugins.

See [Trying Vituum Online](/guide/#trying-vituum-online) for various examples of template engines

## Create your own plugin

Vituum can be used with any template engine plugin made for Vite.

Vite doesn't support ext-names for template engine by default. That's why Vituum uses internal API to change file names before and after build via Vite plugin API so templates are treated as `.html` files during build.

You can use the same [internal API](https://github.com/vituum/vituum/blob/next/utils/build.js) for your own plugin or make your own.

Additionally, each plugin uses Vite middleware to support urls without ext-names in Vite Dev Server.

---

---
url: /plugins/twig.md
---
# Twig

*[@vituum/vite-plugin-twig](https://github.com/vituum/vite-plugin-twig)*

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

See official [docs](https://twig.symfony.com/doc/3.x/) for more info about the syntax

## Install

**npm**

```bash
npm i @vituum/vite-plugin-twig --save-dev
```

**yarn**

```bash
yarn add @vituum/vite-plugin-twig -D
```

## Config

```javascript
import vituum from 'vituum'
import twig from '@vituum/vite-plugin-twig'

export default {
    plugins: [vituum(), twig()]
}
```

## Options

### reload

* **Type:** `boolean` or `Function`
* **Default:** `true`

Whenever to auto-reload browser window upon `twig` or `json` file change. You can also provide function to filter upon which file a reload should occur.

### root

* **Type:** `string`
* **Default:** `null`

Root is inherited from Vite `root` by default. But you can change this to path such as `'./src/'` or `'./src/templates'`, then you can use includes with paths defaulting to this directory.

### filters

* **Type:** `Object`
* **Default:** `{}`

Object of named filter functions to use, see TwigJS [wiki](https://github.com/twigjs/twig.js/wiki/Extending-twig.js#filters) for more info.

### functions

* **Type:** `Object`
* **Default:** `{}`

Object of named functions to use, see TwigJS [wiki](https://github.com/twigjs/twig.js/wiki/Extending-twig.js#functions) for more info.

### extensions

* **Type:** `Function[]`
* **Default:** `[]`

Array of functions that extend TwigJS with custom tag, see TwigJS [wiki](https://github.com/twigjs/twig.js/wiki/Extending-twig.js-With-Custom-Tags) for more info.

### namespaces

* **Type:** `Object`
* **Default:** `{}`

Object defining namespaces, see TwigJS [wiki](https://github.com/twigjs/twig.js/wiki#namespaces) for more info.

### data

* **Type:** `string`
* **Default:** `['src/data/**/*.json']`

Path to additional data provided with json file. Can be a file, or a glob like this `/path/to/*.jsom`.

### globals

* **Type:** `Object`
* **Default:** `{}`

Other global data to use. Can be `Object` or `function` returning object, or combination of both.

### ignoredPaths

* **Type:** `string[]`
* **Default:** `[]`

Which paths should be ignored from processing as TwigJS.

### formats

* **Type:** `string[]`
* **Default:** `['twig', 'json.twig', 'json']`

Which ext-names should be processed by the plugin.

### options.compileOptions

* **Type:** `Object`
* **Default:** `{}`

Additional TwigJS compileOptions, see TwigJS [wiki](https://github.com/twigjs/twig.js/wiki) for more info.

### options.renderOptions

* **Type:** `Object`
* **Default:** `{}`

Additional TwigJS renderOptions, see TwigJS [wiki](https://github.com/twigjs/twig.js/wiki) for more info.