Custom Apps

You need the laptop complete bundle to use this feature.

You can add custom apps by building your own using the provided template or stream it from an existing website hosted at services like WIX or any other website builder.

Existing Websites

  • For existing websites you can use the following export and configuration from any client.lua:

app_template/client/website.lua
local website = {
    name = "uwucafe", -- unique app identifier
    label = "UwU Cafe", -- app label
    website = "https://uwucatcafe.com/", --website to embed and display on laptop
    isEnabled = function()
        return true -- return true, false or do your own check using exports
    end
}

exports['av_apps']:registerApp(website)

Building my Own App

  • React knowledge is required for this.

  • Clone the repository from Github.

  • Install yarn and all dependencies.

  • Run yarn dev and open the address http://localhost:3000/ in your browser.

  • Go to src/index.jsx and uncomment line 22 to show the App in your Browser.

  • Run yarn build to build the app when is ready and test it in game.

  • Don't forget to comment out line 22 before building the app.

fetchNui hook

This hook will allow you to send data from the UI to the Lua files using NUICallbacks, there's already an example inside app.jsx

import { fetchNui } from "./hooks/useNuiEvents";
const handleClick = () => {
    fetchNui(resourceName, NUICallbackName, Data);
};

  • resourceName is the resource that is gonna receive the callback data.

  • NUICallbackName is the name of the callback registered in the .lua file using native RegisterNUICallback()

  • Data is the info the resource is gonna receive from our UI.

You can send a response from the Lua callback by making the function asynchronous like this:

import { fetchNui } from "./hooks/useNuiEvents";
const handleClick = async () => {
    const resp = await fetchNui(resourceName, NUICallbackName, Data);
    console.log(resp) // this will print whatever you sent from RegisterNUICallback cb()
};

Import your custom App

Once your App UI is built is now time to import it to av_laptop so it can be used in game, for this you will need to create a table just like this example and send it to av_apps using the registerApp export.

app_template/client/add.lua
appName = "app_template" -- unique identifier for the App
appLabel = "App Template" -- app label for laptop
icon = "https://i.imgur.com/DOyr0rA.png" -- app icon

local myApp = {
    name = appName,
    label = appLabel,
    custom = GetCurrentResourceName(), -- no need to modify this
    icon = icon,
    isEnabled = function()
        return true -- return true, false or an export check
    end
}

exports['av_apps']:registerApp(myApp)

  • If you followed and built the app correctly you should be able to open it in game

Last updated