> For the complete documentation index, see [llms.txt](https://daddy-studios.gitbook.io/daddy-studios-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://daddy-studios.gitbook.io/daddy-studios-docs/scripts/daddy-marketplace/building-the-ui.md).

# Building the UI

{% hint style="info" %}
This page is for the **open-source edition** only. The escrow edition ships the compiled UI in `web/dist` and does not include its source.
{% endhint %}

The interface is a Vue 3 + TypeScript + Vite app in `web/src`. The compiled output in `web/dist` is included and ready to run, so you only need to build after changing something under `web/src`.

## Requirements

* [Node.js](https://nodejs.org/) 20.19+ or 22.12+ (npm is included)

## Build

```bash
cd web
npm install
npm run build
```

`npm install` is only needed the first time and after an update. `npm run build` type-checks with `vue-tsc` first and then writes a fresh `web/dist` — the old build is deleted, so stale asset files cannot pile up.

Restart the resource afterwards:

```
restart daddy-marketplace
```

{% hint style="warning" %}
A build that fails type-checking writes nothing. Fix the reported errors rather than skipping the check — the type errors are almost always a real mismatch with what Lua sends.
{% endhint %}

## Live preview in a browser

```bash
cd web
npm run dev
```

Starts a Vite dev server on `http://127.0.0.1:3000` with hot reload and mock data, so you can work on the layout without launching FiveM. Outside the game no real data arrives and calls back to Lua are skipped, so always build and do the final check in game.

To see real item icons in the browser preview, point the dev server at your inventory's image folder:

```bash
OX_IMAGES_PATH="C:/server/resources/[ox]/ox_inventory/web/images" npm run dev
```

## Project structure

| Path                              | Content                                                                                                      |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `web/src/App.vue`                 | Root component                                                                                               |
| `web/src/composables/useNui.ts`   | Wires every NUI message from Lua to the stores. Called once in `App.vue`.                                    |
| `web/src/utils/fetchNui.ts`       | Sending callbacks back to Lua                                                                                |
| `web/src/stores/`                 | Pinia stores: marketplace, notifications, locale, seller profile, price history, market pulse, sales history |
| `web/src/pages/`                  | Marketplace, Auctions, Buy Orders, My Listings, Dashboard, History                                           |
| `web/src/components/marketplace/` | Listing cards, create/edit modals, cart, offers, seller profile                                              |
| `web/src/components/auctions/`    | Auction cards and the bid modal                                                                              |
| `web/src/components/buyorders/`   | Buy order cards, create and fulfil modals                                                                    |
| `web/src/components/dashboard/`   | Market pulse, top items, ending soon, my buy orders                                                          |
| `web/src/components/common/`      | Buttons, modals, badges, toasts, charts, pagination                                                          |
| `web/src/types/index.ts`          | The TypeScript shape of everything Lua sends                                                                 |
| `web/src/style.css`               | Tailwind entry and design tokens                                                                             |

Aliases: `@/` resolves to `web/src`.

## How Lua and the UI talk

Lua sends a message with an `action` and a `data` payload; `useNui.ts` matches on the action and fills the matching store:

```ts
// web/src/composables/useNui.ts
case 'open': {
  market.populate(data as MarketData)
  break
}
```

The UI calls back with `fetchNui`:

```ts
import { fetchNui } from '@/utils/fetchNui'

const result = await fetchNui('buyListing', { listingId: 12, quantity: 2 })
```

{% hint style="warning" %}
Everything the UI sends is re-validated on the server. Prices, quantities, item metadata, categories and the market location are taken from the database and the player's session, never from the payload. Adding a field to a callback does not make the server trust it.
{% endhint %}

## Changing the look

Colours, spacing and fonts are Tailwind tokens in `web/src/style.css` and `web/tailwind.config.js`. The featured-card colours are the exception: they come from `Config.Featured.bgColor` / `bgHoverColor` in `config.lua`, so a server owner can change those without rebuilding.

## Production servers

`web/src` and `web/node_modules` are only needed for development. You can delete `web/src`, `web/node_modules` and the build config files on a live server — FiveM only loads `web/dist`.

## Next steps

* [Configuration](/daddy-studios-docs/scripts/daddy-marketplace/configuration.md)
* [Exports](/daddy-studios-docs/scripts/daddy-marketplace/exports.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://daddy-studios.gitbook.io/daddy-studios-docs/scripts/daddy-marketplace/building-the-ui.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.