Vite.v

November 20, 2025 · View on GitHub

Vite.v is a V module that integrates your V applications with Vite.js. It provides a simple and efficient way to manage frontend assets with minimal configuration while keeping full flexibility.

🚀 Features

  • 🔌 Seamless integration between V and Vite
  • ⚡ Fast builds with optimized asset handling
  • 🎯 Minimal setup for both simple and advanced use cases

⚙️ Requirements

Make sure you have:

📦 Installation

v install siguici.vite

Via Git

mkdir -p ${VMODULES:-$HOME/.vmodules}/siguici
git clone --depth=1 https://github.com/siguici/vite ${VMODULES:-$HOME/.vmodules}/siguici/vite

As a project dependency

Module {
  dependencies: ['siguici.vite']
}

🔧 Usage

Vite.v can be used globally or locally depending on your project needs.

You can simply create a single, global vite instance and use it anywhere:

import siguici.vite

const vite := vite.new()

println(vite.url('assets/logo.svg'))

This makes the vite instance available across your entire project without having to pass it through your app or context.

2. Local usage (attached to your app or struct)

You can store the Vite instance as a field inside your app struct:

import siguici.vite { Vite }

struct MyStruct {
    vite: Vite
}

my_struct := MyStruct{
    vite: Vite.new()
}

println(my_struct.vite.url('assets/logo.svg'))

Or, using a default value:

struct MyStruct {
    vite Vite = vite.new()
}

my_struct := MyStruct{}

println(my_struct.vite.url('assets/logo.svg'))

This pattern is useful when working inside frameworks like Veb:

module main

import veb
import siguici.vite

pub struct Context {
    veb.Context
    vite.ViteContext
}

pub struct App {
}

fn main() {
    mut app := &App{}
    veb.run[App, Context](mut app, 8080)
}

3. Using in templates

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Inject assets -->
  @{ctx.vite_assets([
    'src/resources/app.css',
    'src/resources/app.ts'
  ])}

  <!-- Or generate individual tags -->
  @{ctx.vite_tag('src/resources/app.css')}
  @{ctx.vite_tag('src/resources/app.ts')}
</head>
<body>
  <h1>Hello Vite + Veb!</h1>
</body>
</html>

Configuration

The configuration is structured as follows:

@[params]
struct ViteConfig {
    manifest_file string = 'manifest.json'
    hot_file      string = 'hot'
    public_dir    string = 'public'
    build_dir     string = 'build'
}

🧩 Injecting Assets in Templates

  • vite.assets Manually inject specific CSS/JS assets:
@{vite.assets([
  'src/resources/app.css',
  'src/resources/app.ts'
])}
  • vite.input_assets (production only) Automatically inject entrypoints (scripts, styles, and dependencies):
@{vite.input_assets()}

🧱 Helpers

  • tag(path) Generate the correct HTML tag (<script>, <link>, <img>) for a given path:
@{vite.tag('src/resources/main.ts')}
@{vite.tag('src/resources/global.css')}
@{vite.tag('images/logo.svg')}
  • url(path) Get the fully resolved asset URL (including APP_URL if defined):
<link rel="icon" href="@{vite.url('favicon.ico')}" />
<img src="@{vite.url('images/logo.png')}" alt="Logo" />
<script type="module" src="@{vite.url('src/resources/main.ts')}"></script>

These helpers work consistently in both development (via the Vite dev server) and production (via the Vite manifest).

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a PR to improve Vite.v.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.