The ultimate Fivem NUI guide. Here you’ll find all the code you need, and all the explanations to create your first or maybe second NUI. Let’s get started!
Requirements
In order to code properly for fivem you will need VSCode which can be downloaded here. You can download some extensions like “fivem-lua” to get the code suggestion while you code in Lua. Another thing you’ll need is a server to test the script, if you don’t have one click here for a full guide on windows or here for linux.
Creation of the resource
In order to create a NUI on Fivem you’ll need the actual resource. If you don’t know how to check this guide out to get started, and come back when you have one. Anyway, NUIs are a bit nasty since with all the resource you put the files inside the “client_scripts” declaration of the fxmanisfest.lua, but hey no. All the files related to the nui, so html, js, css, needs to be placed inside the “files” declaration. So you’ll have something like:
files {
'client/nui/index.html',
'client/nui/app.js',
'client/nui/style.css'
}
And that’s one thing, another thing you may want to use is:
ui_page 'client/nui/index.html'
Which can even be on a completely separated server. In fact you can use your own web page if you have one.
Creation of the NUI
We’ve just seen how to create the fxmanifest of our NUI on fivem, now let’s talk about the real stuff:
- The first thing you want to do is to create a folder for the NUI. You can call that “nui”.
- Go inside the folder you just created and make a nui.lua file and create another folder for all files, such as .html, .js. .css, whatever you use for the page.
- Now open the nui.lua and copy this code:
local display = false RegisterNUICallback("exit", function(data) SetDisplay(false) end) function SetDisplay(bool) display = bool SetNuiFocus(bool, bool) SendNUIMessage({ type = "display", status = bool, }) endSo basically here you are registering a callback handler for the NUI which is triggered every time you make a call inside of the js file, which is loaded in the page. With the function “SetDisplay()” you are telling the game if the nui is on. And you are sending a message to the JS file with the function “SendNUIMessage()”
- No go into the folder of the page part and create an html file. Load the css and js files inside of its head, as you may do. Note that jquery can be loaded using:
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
- In the js file you will need to copy this code:
$(function() { let url = 'https://[your-resource-name]/'; let started = false; function display(bool) { if (bool) { $("#root").show(); return; } $("#root").hide(); } display(false) window.addEventListener('message', function(event) { if (event.data.type === "ui") return display(event.data.status) }); document.onkeyup = data => { if (data.key === "Escape") return $.post(`${url}exit`, JSON.stringify({})); }; /* Code if you want to put a button $('#closeui').click(e => { return $.post(`${url}exit`, JSON.stringify({})); }) */ })Here you need to replace [your-resource-name] with the name of your resource. You’ll need to change the selector of the root container, which can be the body. If you want you can put a button you’ll need to uncomment the last part.
- Now let’s make a basic html file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet"></link> <script src="nui://game/ui/jquery.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </head> <body style="height=500px; width=500px; background-color:green;> <div id="root" style="height=100%; width=100%;"> <button id="closeui" style="height=50px; width=50px; background-color:white; color: black">X</button> <p>Hello world! <br> I am an NUI</p> </div> </body> </html>
And this is all about the creation of an NUI on Fivem, soon other guide about the magic world of the development of scripts on fivem. Here you can find another guide about fivem. Be sure to stay tuned and join our discord here!
