Fivem Svelte Boilerplate

filipejunqueiro

A minimal boilerplate featuring lightweight, type-safe NUI utilities for Svelte 5

Minimalistic Svelte Boilerplate

A minimal boilerplate featuring lightweight, type-safe NUI utilities for Svelte 5

API

Export	Description
`nui`	Class for sending/receiving NUI events from client
`inBrowser`	Returns `true` when running outside FiveM (useful for local dev)
`resourceName`	Returns the current FiveM resource name
`noop`	A no-op function, useful as a default callback

Usage

Sending data to the client

import { nui } from "svelte-nui";

const { trigger: fetchBalance, state: balanceState } = nui.send<void, number>({
  action: "getAccountBalance",
  mockData: 5000,
  autoFetch: true,
});

console.log(balanceState.data);

fetchBalance(); // Refetching the action

console.log(balanceState.data);

Receiving data from the client

import { nui } from "svelte-nui";

let isVisible = $state<boolean>(false);

nui.receive<boolean>({
  action: "visibility",
  callback: (visible) => (isVisible = visible),
});

Debugging NUI events

import { nui } from "svelte-nui";

nui.debug(
  [
    { action: "visibility", data: true, delay: 3000 },
    { action: "visibility", data: false, delay: 1500 },
    { action: "visibility", data: true },
  ],
  500,
);

Getting the current environment

import { inBrowser } from "svelte-nui";

console.log(`Dev env: ${inBrowser() ? "yes" : "no"}`);

Getting the current resource name

import { resourceName } from "svelte-nui";

console.log(resourceName());

Development

bun install
bun dev
bun run build
bun preview

License

The project is licensed under the Unlicense

Top categories