FiveM NUI

fivem nui

New guide on how to setup a new NUI on FiveM, the only thing required is a running FiveM server. Let’s get started!

Requirements

  • Running FiveM server.

Resource

  1. The first thing you want to do is create a new folder inside the resource’s folder. You can name it whatever you want.
  2. Now open the folder and create a file named: fxmanifest.lua and a folder named: client/
  3. Inside the client/ folder create another folder named: nui/, and a file: main.lua
  4. Inside the the nui/ folder create an index.html and if you like a .js and .css file

fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

author 'devhideout'
version '1.0.0'

ui_page 'client/nui/index.html' -- Path to the main .html file
-- ui_page 'https://example.com' -- Url the page


-- All files related to the html part: html, css, js
files {
    'client/nui/index.html',
    --'client/nui/app.js',
    --'client/nui/style.css'
}

-- Files needed to be loaded into the client
client_script {
    'client/main.lua'
}

main.lua

local display = false

RegisterNUICallback("close", function(data)
    setDisplay(false)
end)

function setDisplay(bool)
    display = bool
    SetNuiFocus(bool, bool)
    SendNUIMessage({
        type = "display",
        status = bool,
    })
end

RegisterCommand("customNuiDisplay", function(source, args, rawCommand)
    setDisplay(true)
end, true)

This code will show the nui when the command /nui get issued in the chat. When the nui send a callback named close it will make the nui disappear.

index.html

<!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">
    <!-- If you want to use an external css file
    <link href="style.css" rel="stylesheet"></link>-->
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <!-- If you want to use an external js file
    <script src="app.js" type="text/javascript"></script>-->
</head>
<body>
    <div id="root" style="height:400px; width:400px; background-color:red;">
        <!-- <button id="closeui" style="height:50px; width:50px; background-color:black; color: white">X</button> -->
        <p>It works! Hello there</p>
    </div>
    <script>
        $(function() {

        let url = 'https://nui-example/';

        // Controls whether the NUI needs to be shown or not 
        function display(bool) {
            if (bool) {
                $("#root").show();
                return;
            }
            $("#root").hide();
        }

        display(false);

        // Listener for all the NUIMessages that comes from the client/main.lua file
        window.addEventListener('message', function(event) {
            if (event.data.type === "display") return display(event.data.status)
        });

        // If the Escape key is pressed the NUI closes
        document.onkeyup = data => {
            if (data.key === "Escape") return $.post(`${url}close`, JSON.stringify({}));
        };


        // Closes the NUI when the button is pressed
        //$('#closeui').click(e => {
             //return $.post(`${url}close`, JSON.stringify({}));
        //})

    })
    </script>
</body>
</html>

 

Make sure to replace the resource name in the JS part, otherwise the callbacks won’t work.

Utils

Its important that jQuery is loaded with fivem so you won’t need to download it or use a CDN just use:

<script src="nui://game/ui/jquery.js" type="text/javascript"></script>

This is the basic for the creation of a NUI on FiveM, if you want you can download the resource from here, or you can copy and paste it. Make sure to stay toned for other guides.

Related Posts