Announcing Vituum - Template engines and more in Vite

For the last months, we at Newlogic Digital 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 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

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.

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.

• 📁 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

Emails

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

You can add @vituum/juice integration and then write styles in PostCSS or any pre-processor you want. Everything will be inlined to html via Juice.

Html can be written with any template engine, including PostHTML.

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

You can learn more about this at vituum.dev

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

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.

The entire project has complete documentation on vituum.dev and you can also follow it on Twitter under @vituum_dev.

If you want to support the project, please give us a star on GitHub. 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 [e-mail] and your logo can appear on the project pages.

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