Announcing Vituum - Template engines and more in Vite
Tags: javascript, webdev, vite, vituum
Published: 2022-08-30 14:37:44

For the last months, we at [Newlogic Digital](https://www.newlogic.cz) have been working on our own open-source project built around Vite. 

It's called Vituum, combination of the words **Vite** _(French word for "quick")_ and **Tuum** _(Estonian word for "core")_.

## Give it a try!
If you want to try it all out right now, visit the [Trying Vituum Online](https://vituum.dev/guide/#trying-vituum-online) section on the official website. Here you can try lots of online examples right away on **StackBlitz**.

## So what is Vituum?

It's a small wrapper around Vite which includes predefined config and integrations. The main goal is to add some additional features on top of Vite.

- The primary focus is on easy **backend integration** but can be used for anything.
- Modified build command `vituum build` is used, which supports building of template engine files ending with ext-name such as `.twig`, `.pug` or `.latte`

Think of it like a Vite **starter pack** ready to go.

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**.

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

Vituum tries to change that with support for template engines in Vite. Gotta go fast 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 backend integrations like **Symfony**, **Laravel** or **Nette**.

Learn more about template engines at [vituum.dev](https://vituum.dev/guide/template-engines.html)

### Multi-page support
Vituum makes it easy to use multiple `.html` files in `src/views` directory out of the box. Even with nesting.

You can use this to prototype fast without the need to change anything in the config.

You can even enhance this with **PostHTML** syntax like `<include>` to include small html components or use other [template engines](https://vituum.dev/guide/template-engines.html).

### Project structure
Vituum has a pre-defined optional structure for your project files. You can always change the structure to your own liking via [config](https://vituum.dev/config/main-options#input).

* 📁 **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 templates
    * 📁 **scripts** - your script files as `.js`, `.ts`
    * 📁 **styles** - your styles files as `.css`, `.scss`
    * 📁 **templates** - your template files as `.twig`, `.latte`
    * 📁 **views** - your pages as `.html`, you can also nest and define page as `.json` or `.twig`, `.latte` and other

### 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 an 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 script files.

You can learn more about this at [vituum.dev](https://vituum.dev/guide/features.html#%E2%AC%87%EF%B8%8F-imports)

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

You can add [@vituum/juice](https://vituum.dev/guide/integrations#juice-vituum-juice) integration and then 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](https://vituum.dev/guide/template-engines), including **PostHTML**.

You can even test sending your email via `vituum send` command.

You can learn more about this at [vituum.dev](https://vituum.dev/guide/features.html#%E2%9C%89%EF%B8%8F-emails)

### Integrations
All modules can be optionally added using **Integrations API**. Using this API, you can even write your own command and then run it via `vituum my-command`

Among our integrations is also popular **TailwindCSS**. You can add it easily via `vite.config.js`, `tailwind.config.cjs` and you can start using this library to the fullest without complicated configuration.

We wrote our own integration at Newlogic - [@newlogic-digital/core](https://github.com/newlogic-digital/core) with pre-prepared config, integrations and extensions for templating engines for easy use on our projects.

You can learn more about integrations at [vituum.dev](https://vituum.dev/guide/integrations.html)

## Like it?

Vituum is also great as a **static site generator**. However, if you are looking for a complete solution for purely static pages, we definitely recommend trying [Astro](https://astro.build/).

The entire project has complete documentation on [vituum.dev](https://vituum.dev) and you can also follow it on **Twitter** under [@vituum_dev](https://twitter.com/vituum_dev).

If you want to **support** the project, please **give us a star** on [GitHub](https://github.com/vituum/vituum). And if you really want to support the project a lot, you can also become our partner and support further development financially. In that case, contact me at [lubomir.blazek@newlogic.cz](mailto:lubomir.blazek@newlogic.cz) and your logo can appear on the project pages.

Also, any help whether by adding **issues** or **pull requests** is much welcome!

![Vituum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odjjh6dwlncxqgceg1vo.jpg)