Skip to Content

NUI (User Interface)

NUI allows you to create custom HTML/CSS/JavaScript interfaces.

Basic Setup

fxmanifest.lua

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

HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="script.js"></script>
  </body>
</html>

Communication

Client to NUI

-- Send data to NUI
SendNUIMessage({
    type = 'showMenu',
    data = menuData
})

NUI to Client

// Send data from NUI
fetch(`https://${GetParentResourceName()}/callback`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    type: 'buttonClick',
    data: buttonData,
  }),
})

Client Receives from NUI

RegisterNUICallback('callback', function(data, cb)
    print('Received from NUI:', data)
    cb('ok')
end)

React Setup

For React applications:

  1. Build React app
  2. Output to html/ folder
  3. Configure in fxmanifest.lua

CORS Configuration

NUI automatically handles CORS. No additional configuration needed.

Best Practices