JavaScript, TypeScript and NUI

JS / TS resources

@rivolabs/fx is a set of FiveM adapters for the real effect package, speaking the same protocol as the Lua side. A Lua client can call a TypeScript server RPC and the other way round.

npm install @rivolabs/fx effect

The package README has the full API: packages/fx.

NUI pages

@rivolabs/fx-nui is a dependency-free (about 3 KB) helper for the page, in any framework:

npm install @rivolabs/fx-nui

import { fetchNui, onMessage, isNuiError } from "@rivolabs/fx-nui"

try {
  const { bought } = await fetchNui<{ bought: string }>("buy", { item: "apple", qty: 2 })
} catch (e) {
  if (isNuiError(e, "OutOfStock")) showSoldOut()
}
onMessage<{ items: string[] }>("open", ({ items }) => render(items))

It pairs with Fx.nui.handle and Fx.nui.send in the client script. Outside the game, mockNui(name, fn) answers calls so the page runs in a normal browser.

One schema, every side

@rivolabs/fx-cli is the rivo-fx command. Describe payloads once in a JSON schema file and generate the Lua validators (with LuaLS types), the Effect schemas for JS resources and the plain types for NUI pages:

npx rivo-fx gen shared/shop.schema.json --lua shared/schemas.lua --ts src/schemas.ts --types web/src/schemas.ts

It also starts new resources:

npx rivo-fx create my_shop                      # server + client
npx rivo-fx create my_shop --template lua-nui   # plus a page using @rivolabs/fx-nui