DOCSEARCHbyAlgolia
Submit Docs

Vituum

website·Indexed 32 days ago

https://vituum.dev/

A collection of plugins for Vite that adds additional features such as multi-page support and various template engines. Supported engines and plugins include Handlebars, Liquid, Nunjucks, Pug, Twig, Latte, PostHTML, PostCSS, TailwindCSS, and Juice.

Tokens
9K
Snippets
52
Records
80
Agent score
62%

What's inside Vituum

  1. Overview of official Vituum plugins for Vite

    Vituum provides a suite of official plugins for Vite. These are categorized into internal plugins (core Vituum functionality), common utility plugins for CSS and HTML processing, and template engine plugins. Most of these plugins can be used independently in any Vite project, though template engine plugins require manual input configuration in build.rollupOptions.input if used without Vituum's multi-page support.

  2. Vituum Overview

    Vituum is a collection of plugins for Vite designed to extend its capabilities, specifically providing multi-page HTML support and integration with various template engines and CSS tools. Additional functionality can be added by installing specific Vituum plugins.

  3. Migrate Vituum configuration from 0.0.X to 1.0

    Vituum 1.0 is a complete rewrite where the core is now a Vite plugin rather than a wrapper around Vite. Key changes include:

    • Plugin Architecture: Integrations are replaced by Vite plugins. Use the plugins array in the config.
    • PostCSS: No longer included by default; use @vituum/vite-plugin-postcss to add it.
    • Directory Changes: The default src/views directory has been renamed to src/pages (this can be customized in the config).
    • Build Process: The vituum build command is removed; build directly using Vite.
    • Templates: Defining templates via <script type="application/json"> is removed. Use dedicated template files (e.g., .liquid, .pug, .json).
    // 0.0.X Configuration
import { defineConfig } from 'vituum'
import liquid from '@vituum/liquid'

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

// 1.0.0 Configuration
import vituum from 'vituum'
import liquid from '@vituum/vite-plugin-liquid'

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

  4. Use supported template engines with Vituum

    Vituum supports several template engines via plugins, which can be used independently or with the Vituum core plugin for multi-page support in Vite. Supported engines include Liquid, Twig, Latte, Nunjucks, Pug, and Handlebars.

    By default, pages are added in the pages directory, while templates and components are typically stored in layouts, components, or templates directories.

  5. Enable multi-page support with Vituum Pages plugin

    The Vituum Pages plugin adds multi-page support for Vite by automatically routing requests to files and directories located inside the src/pages directory. This plugin applies to .html files and template files (e.g., .liquid, .twig, .json).
    npm i vituum --save-dev
# or
yarn add vituum -D

  6. Install and configure Vituum in vite.config.js

    To enable Vituum's core features, such as multi-page support and imports, add the vituum plugin to your vite.config.js (or .mjs, .ts) file in the project root. You can use Vituum plugins independently if you do not require the core multi-page support features.
    import vituum from 'vituum'

export default {
    plugins: [vituum()]
}

  7. Install @vituum/vite-plugin-concat

    Install the Vite concatenation plugin using npm or yarn as a development dependency.
    # Using npm
npm i @vituum/vite-plugin-concat --save-dev

# Using yarn
yarn add @vituum/vite-plugin-concat -D

  8. Use template engines with Vituum

    Vituum allows the use of various template engines within Vite, which is particularly useful for fast prototyping or preparing templates for PHP backend frameworks (e.g., Symfony, Laravel, Nette). Supported engines include Twig, Liquid, Pug, Nunjucks, Handlebars, and Latte.

  9. Install @vituum/vite-plugin-handlebars

    Install the Handlebars plugin for Vituum using npm or yarn as a development dependency.
    # Using npm
npm i @vituum/vite-plugin-handlebars --save-dev

# Using yarn
yarn add @vituum/vite-plugin-handlebars -D

  10. Install @vituum/vite-plugin-twig

    Install the Twig plugin for Vituum using npm or yarn as a development dependency.
    # Using npm
npm i @vituum/vite-plugin-twig --save-dev

# Using yarn
yarn add @vituum/vite-plugin-twig -D

  11. Use the standalone send function from @vituum/vite-plugin-send

    You can use the send function independently of Vite by importing it from @vituum/vite-plugin-send/send.js. This is useful for creating custom npm scripts to trigger emails manually without using the ?send URL parameter. It accepts the same options as the Vite plugin.
    import { send } from '@vituum/vite-plugin-send/send.js'

// Use with the same options as the plugin
send({
  to: 'user@example.com',
  host: 'smtp.example.com',
  // ... other options
})

  12. Automatically import multiple files using glob-like patterns

    Vituum includes an internal plugin that allows importing multiple files from a directory into a single file, overcoming the vanilla CSS/JS limitation of importing one file at a time. This supports .css, .less, .scss, .js, and .ts files. By creating a file named +.css (or similar) in a directory, you can aggregate imports.
    /* src/styles/Components/+.css */
@import "Button.css";
@import "Badge.css";

/* src/styles/main.css */
@import "Components/+.css";