NUI interfaces (HTML/CSS/JS) · Lesson 1/3 · 8 min

What NUI is and how it's loaded

NUI is a web page (HTML/CSS/JS) that FiveM draws over the game. That's how menus, HUDs and phones are made.

Every nice FiveM menu (inventory, phone, HUD, shop) is actually a web page running on top of the game: the NUI. You build it with regular HTML, CSS and JavaScript.

Declare it in the fxmanifest

lua

ui_page 'html/index.html'

files {
  'html/index.html',
  'html/style.css',
  'html/app.js',
}

fxmanifest.lua

The HTML starts hidden

html

<body>
  <div id="app" style="display:none">
    <h1>My menu</h1>
  </div>
  <script src="app.js"></script>
</body>

html/index.html

The NUI is always loaded but starts HIDDEN (display:none) and WITHOUT focus. Your Lua shows it when needed. If you leave it visible or focused, the player won't be able to move.

Practice what you learned

0/3

Test

¿Qué es realmente una interfaz NUI en FiveM?

Pista

Piensa en el inventario o el teléfono: por dentro son HTML y CSS.

Rellena los huecos

Completa el fxmanifest.lua: declara la página de la NUI y la lista de archivos que carga.

1 'html/index.html'

3 {

4 'html/index.html',

5 'html/style.css',

6 'html/app.js',

7}

Pista

Una palabra apunta al HTML raíz; la otra lista TODO lo que la NUI necesita.

Ordena el código

Ordena el HTML de la NUI: un contenedor #app oculto con un título dentro y el script al final.

Coloca las líneas en el orden correcto con las flechas.

<script src="app.js"></script>

<body>

</div>

<h1>Mi menú</h1>

<div id="app" style="display:none">

Pista

Abre el body, luego el div oculto, el título dentro, cierra el div y carga el script.

Challenge: code it yourself

Create the skeleton of a resource with a NUI: fxmanifest with ui_page and files, and an index.html with a hidden div.

Write it yourself in your editor (VS Code) and test it on your server. You learn here by doing it, not by copying.

See hint

ui_page points to index.html; files lists EVERYTHING the NUI needs.

Escribe aquí tu solución:

Next: Showing and hiding the interface (focus)

How was this lesson?