FiveM NUI

Beginning

FiveM NUI is generally simple but will require a decent understanding in:

HTML
CSS
LUA

NUI is essentially the same as making a website! However, this is done within FiveM instead.

So, let's start

Now that you've achieved your knowledge and you are fluent enough in the above languages we can just learn to make a simple div page in our FiveM server!

Now let's do the following:

Make a resource! You can call this anything you want in my case I will call this NUI

Now going inside that resource we want to create a few files!

You will want to create these files as shown (inside your folder):

In our fxmanifest.lua we want to open this up and put inside:

fx_version 'cerulean'
games { 'gta5' }


ui_page 'index.html'
files { 
'index.html', 
'index.css', 
'index.js'
}


client_scripts {
    'nui.lua'
}

This will require the UI page and the index.html, CSS, and JS to all be downloaded by the client.

FiveM also has documentation on this here

The HTML!

Now we are going to edit our index.html file and input the following code as you would when creating any web page too!

<html>
<header>

</header>

<body>
  <!---Our content will soon go here!-->
</body>

</html>

We will add the content to this later but we just want to prep the file first! Also, you can get an understanding of how this works by seeing its before and after.

The CSS!

In our index.css file, we want to add the following inside:

body {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
}

This will give the index.html body the responsiveness to adapt to different screen sizes as such! Assuming you follow the rest of the guide and how to actually properly adapt your divs and text etc to different screens too!

Then we want to move back to our HTML file so we can finish up and add the rest of the links to the HTML file.

<html>
<header>
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</header>

<body>
    <!---Our content will soon go here!-->
    <div class="OurDiv">
        <h1 class="OurDivText">Hi there I am JamesUK!</h1>
    </div>
</body>

</html>

Our index.css we will now want to go back to!

    body {
        padding: 0px;
        margin: 0px;
        width: 100vw;
        height: 100vh;
    }
    
    .OurDiv {
        position: fixed;
        /* This sets the div to a fixed place*/
        top: 50%;
        /*Sets how much it should be down from the top of the screen*/
        left: 50%;
        /*Sets how much it should be left from the screen.*/
        width: 20%;
        /*Sets the width of the div*/
        height: 20%;
        /*Sets the height of the div*/
        background-color: rgb(168, 66, 66);
        /*Now this one should be obvious.*/
        vertical-align: middle;
        /*Aligns the text within div to middle*/
        text-align: center;
        /*Sets the div text to the center*/
    }
    
    .OurDivText {
        font-size: 3vw;
        /*Font size in view points :)*/
    }

The classes are usually referenced within the index.css with a dot and then the class name as such with then your CSS styling. However, very basic knowledge in CSS styling would tell you this.

Javascript

Now we will go into the javascript of our file. The index.js

This will create the open and closing functionality of our small UI.

window.addEventListener('message', function(event) {
    var item = event.data;
    if (item.showUI) {
        $('.OurDiv').show();
    } else {
        $('.OurDiv').hide();
    }
});

The event listener listens out for messages sent by the native SendNUIMessage

The LUA File! Finally

Now in our nui.lua file we want to have the following:

local ui = false;
RegisterCommand('showuitest', function()
    ui = not ui 
    if ui then 
        SendNUIMessage({showUI = true; }) -- Sends a message to the js file. 
    else     
        SendNUIMessage({showUI = false; }) -- Sends a message to the js file.
    end 
end)

RegisterKeyMapping('showuitest', 'Opens the UI', 'keyboard', 'L') -- Keymapping allows players to rebind if they want.

This controls sending messages to the javascript event listener.

Conclusion

Now that you have done all of that you should have a UI in the game that opens and closes when pressing L! This is one of the many simple implementations of NUI.

The final result:

<html>
<header>
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</header>

<body>
    <!---Our content will soon go here!-->
    <div class="OurDiv">
        <h1 class="OurDivText">Hi there I am JamesUK!</h1>
    </div>
</body>

</html>

window.addEventListener('message', function(event) {
    var item = event.data;
    if (item.showUI) {
        $('.OurDiv').show();
    } else {
        $('.OurDiv').hide();
    }
});

    body {
        padding: 0px;
        margin: 0px;
        width: 100vw;
        height: 100vh;
    }
    
    .OurDiv {
        position: fixed;
        /* This sets the div to a fixed place*/
        top: 50%;
        /*Sets how much it should be down from the top of the screen*/
        left: 50%;
        /*Sets how much it should be left from the screen.*/
        width: 20%;
        /*Sets the width of the div*/
        height: 20%;
        /*Sets the height of the div*/
        background-color: rgb(168, 66, 66);
        /*Now this one should be obvious.*/
        vertical-align: middle;
        /*Aligns the text within div to middle*/
        text-align: center;
        /*Sets the div text to the center*/
    }
    
    .OurDivText {
        font-size: 3vw;
        /*Font size in view width*/
    }

fx_version 'cerulean'
games { 'gta5' }


ui_page 'index.html'
files { 
'index.html', 
'index.css', 
'index.js'
}


client_scripts {
    'nui.lua'
}

local ui = false;
RegisterCommand('showuitest', function()
    ui = not ui 
    if ui then 
        SendNUIMessage({showUI = true; }) -- Sends a message to the js file. 
    else     
        SendNUIMessage({showUI = false; }) -- Sends a message to the js file.
    end 
end)

RegisterKeyMapping('showuitest', 'Opens the UI', 'keyboard', 'L') -- Keymapping allows players to rebind if they want.

End result:

Obviously, you will spend more time on your UI but this is a very basic guide. Generally, for fonts, I suggest using https://fonts.google.com/ which will allow you to import your fonts via the CSS file using the @import method as shown:

So let's say I select the font https://fonts.google.com/specimen/Montserrat?preview.text_type=custom Regular 400.

I can select the:

After selecting the import option we can edit our index.css like so:

Index.css

    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
    body {
        padding: 0px;
        margin: 0px;
        width: 100vw;
        height: 100vh;
    }
    
    .OurDiv {
        position: fixed;
        /* This sets the div to a fixed place*/
        top: 50%;
        /*Sets how much it should be down from the top of the screen*/
        left: 50%;
        /*Sets how much it should be left from the screen.*/
        width: 20%;
        /*Sets the width of the div*/
        height: 20%;
        /*Sets the height of the div*/
        background-color: rgb(168, 66, 66);
        /*Now this one should be obvious.*/
        vertical-align: middle;
        /*Aligns the text within div to middle*/
        text-align: center;
        /*Sets the div text to the center*/
    }
    
    .OurDivText {
        font-size: 3vw;
        /*Font size in view width*/
        font-family: 'Montserrat', sans-serif;
    }

New end result:

PreviousvRP FAQ NextOneSync

Last updated 3 years ago