NUI Development

Introduction

NUI (Native User Interface) is a feature that allows you to create user interfaces with HTML, CSS, and JavaScript. This is a powerful feature that allows you to create rich and interactive user interfaces for your FiveM scripts.

Getting Started

To get started with NUI development, you'll need to create a new HTML file in your script's directory. You'll also need to add a `ui_page` entry to your `fxmanifest.lua` file.

Example `fxmanifest.lua`

ui_page 'html/index.html'

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

Communicating with the Client

You can communicate between your NUI and your client-side script using NUI callbacks.

Sending a Message from NUI to the Client

// In your html/script.js file

fetch(`https://my-script/my-callback`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=UTF-8',
    },
    body: JSON.stringify({
        message: 'hello from NUI'
    })
}).then(resp => resp.json()).then(resp => {
    console.log(resp)
});
                        

Receiving a Message in the Client

-- In your client-side script

RegisterNUICallback('my-callback', function(data, cb)
    -- Do something with the data
    print(data.message) -- prints "hello from NUI"
    cb('ok')
end)
                        

Conclusion

This guide has introduced you to the basics of NUI development. There's much more to learn, but this should give you a good foundation to build upon.