[Question] Using VueJS on FiveM server

FiveM Resource Development Discussion
1

Hi, I am a Vue developer and I was looking to take that knowledge and write all my UIs in Vue. I’m just unsure of how to set things up so it works with my FiveM server… Do I have to have my UI running on a server aswell and then NUI calls to the address ? Is it possible to have only one Vue project for all the UIs using the router or something like that?

Thanks in advance :slight_smile:

2

Do I have to have my UI running on a server aswell and then NUI calls to the address ?

Wat? The UI NEVER runs server-side. Sometimes, it might be generated server-side, but it never runs on
the server.

Is it possible to have only one Vue project for all the UIs using the router or something like that?

Yes.

The way this works is: The server delivers the UI resource(s) to the client when it connects. Then the client NATIVES perform some calls to show/hide the UI.

The NUI and the game process communicate using duplex message passing. The cef NUI can send messages to the game and receive messages from the game. Similarly, the game can send messages to the NUI and receive messages from the NUI.

Here’s an example of a client js script that runs as a child of the FiveM process. This is not a UI script per-se:

const UI_INPUT_MODE_CAPTURE = 0;
const UI_INPUT_MODE_FALLTHROUGH = 1;

let isPhoneBeingShown = false;
let uiInputMode = UI_INPUT_MODE_CAPTURE;

setTick(async () => {
    if (IsControlJustReleased(1, 74)) {
        SendNuiMessage(JSON.stringify({
            message: "sentry://ui/phone/toggleDisplay"
        }));
    }
});

RegisterNuiCallbackType('onPhoneToggled')

on('__cfx_nui:onPhoneToggled', (data, responder) => {
    isPhoneBeingShown = data.showPhone;
    if (uiInputMode === UI_INPUT_MODE_CAPTURE) {
        SetNuiFocus(isPhoneBeingShown, isPhoneBeingShown);
    }
    else {
        SetNuiFocus(isPhoneBeingShown, isPhoneBeingShown);
        SetNuiFocusKeepInput(isPhoneBeingShown);
    }
    
    responder(data);
});

It sends a message to the window object of the cef NUI process. Then it registers a callback for the message “onPhoneToggled” that the cef NUI process can send back to the game.

Any other questions?

2 Likes
3

Wat? The UI NEVER runs server-side. Sometimes, it might be generated server-side, but it never runs on the server.

I meant do I need to run the front end like you usually do in Vue like npm run serve or build the vue app and then serve it or just put the files in the fxmanifest ?

I know how to make calls from Lua scripts to NUI, but what I wanted to know is how to serve my vue app inside my FiveM project as one big UI resource. Like right now I have a very simple vue app that I got working on my server only using the Vue CDNs (so it’s litterally just an html, js and css file), but if I wanna use router and VueX and stuff like that I need to build a real app and then make it available to my fiveM server but that’s what i’m wondering how to do.

Like you know when you “npm run build” your Vue app, you get a dist folder. Do I have to put all the dist folder files in the fxmanifest of my resource to be able to call it ? That’s what I wanna know how to do :slight_smile:

Hopefully you can enlighten me :slight_smile:
Thanks a lot !

4

I use Angular with a lotta other libs as well, and set up an npm script to build the app, watch the files for changes and output the content in a subdir in my resources folder.
This way, I can open up an OS cli, type in npm run “myscript”, and simply reload the resource from the server console whenever I want to see the changes in game.

5

Ok, but when you build your app final for production with Angular, is it just an html file with css and js ? If so, do you put it inside a resource and set the ui_page attribute and the files {} attribute of the fxmanifest to the file you just built with angular ?

6

it’s a single index.html with several hundred js/css/png/font etc. files as I use lazy loaded modules and need a ton’o assets.
the index.html is the ui_page
the js/css etc. are all client_files {…}, it’s what the clients get when they connect into the server.
depending on the mode I build my app in (dev/prod/debug/test/etc.) my script will then generate a different fxmanifest and replace the existing one each time any of my project files changes

1 Like
7

Ok so lets say this is my build folder when my app is completely built :
image
Those are my js files in the js folder:
image
And those are my css files in the css folder:
image

So ultimately, I would have to put in my fxmanifest something like this ? :

...
ui_page 'dist/index.html'

files {
     'dist/js/*.js',
     'dist/css/*.css
}
...

Something like this ?

8

Looks like you are asking about how to package up your vue.js app.
A couple of resources that will help, that I looked at was the following:

  1. GitHub - calumari/fivem-vue-boilerplate: FiveM + Vue 🐌
  2. Very similar one GitHub - GHMatti/fivem-vue-loadingscreen-boilerplate
  3. GitHub - GHMatti/ghmattibanking: banking system for fivem this one is interesting as it has SQL usage as well as a reference.

By the way, I like to make them single file components, it makes it easier for dist in the long run.

Hope this helps.

Cheers!

2 Likes
9

Ok I think I might not have been clear enough, I am a Vue developer. So I know how to deploy a Vue app :stuck_out_tongue: What I wanna know is do I have to mention all the files separately in my resource manifest? Or Can I mention all the js files in the folder with *.js ?

Thanks :slight_smile:

10

Wildcards work but there’s a pending bug with FXS on Linux that makes them potentially weird.

1 Like
11

:point_up: It might be safe for the moment to mention all files. @nta Do you have the GH issue # that we could follow by any chance?

Thanks.

12

Ok so would be better to mention all files in every folder then ?

Thanks :slight_smile:

13

It depends, wildcards work on windows, but looks like there is an issue with Linux.
So if windows is your target platform then you are good. But if you want to support both then mention all files in folders.