@vextjs/vite-plugin

Integrates the Venice Unleashed WebUI compiler into Vite.

• Automatically build a WebUI package (ui.vuic) after running vite build
• Support for Vite's Dev Server, which allows direct UI development in-game.

Installation

With npm

npm i -D @vextjs/vite-plugin

With yarn

yarn -D @vextjs/vite-plugin

Usage

By default, this plugin is configured to put the ui.vuic file in the parent folder (the root folder of your mod).

We recommend your mod to have the following mod structure:

mods/<Your Mod>
|--ext
|  |--Client          Client Lua code
|  |--Server          Server Lua code
|  `--Shared          Shared Lua code
|--WebUI              All your WebUI source code
|  |--src             WebUI code
|  |--package.json    NPM's configuration and dependencies
|  `--vite.config.ts  Vite's configuration
|--mod.json       Mod metadata
`--ui.vuic        Generated by this plugin

This plugin requires zero configuration when using the above structure:

// vite.config.ts
import { defineConfig } from 'vite';

import vext from '@vextjs/vite-plugin';

export default defineConfig({
  plugins: [vext()],
});

If however your WebUI is not a child folder of your mod or you want the ui.vuic file to be placed elsewhere, override the outputPath option:

// vite.config.ts
import { defineConfig } from 'vite';

import vext from '@vextjs/vite-plugin';

export default defineConfig({
  plugins: [
    vext({
      outputPath: '/path/to/your/mod/root',
    }),
  ],
});

Development

Building

Run nx build vite-plugin to build the library.

Running unit tests

Run nx test vite-plugin to execute the unit tests via Jest.