@repo/vite-config

@repo/vite-config provides a pre-configured Vite build configuration with the Preact preset and a relative base path — essential for FiveM NUI embedding.

Usage

Import the shared config in your app's vite.config.ts:

apps/my-app/vite.config.ts

import { preactConfig } from '@repo/vite-config'
import { defineConfig, type UserConfig } from 'vite'

export default defineConfig({
  ...(preactConfig as UserConfig),
})

You can extend or override any Vite option by spreading additional properties after the shared config.

Configuration Details

The exported preactConfig includes:

vite.config.ts

import preact from '@preact/preset-vite'
import type { UserConfig } from 'vite'

export const preactConfig = {
  plugins: [preact()],
  base: './',
  build: {
    emptyOutDir: true,
    outDir: './dist'
  }
} as UserConfig

Key options

Option	Value	Purpose
`plugins`	`[preact()]`	Enables Preact JSX transform and HMR
`base`	`'./'`	Uses relative paths so built assets load correctly inside FiveM's NUI environment
`build.emptyOutDir`	`true`	Cleans the output directory before each build
`build.outDir`	`'./dist'`	Outputs built files to `dist/`

FiveM serves NUI files from a local resource path (e.g., nui://my-resource/dist/index.html). Using an absolute base path (/) would cause asset 404s. Setting base: './' ensures all asset references are relative, so they resolve correctly regardless of the serving origin.

Extending the Config

You can merge additional Vite options with the shared config: