# Custom APPs

{% hint style="warning" %}
Custom APPs are only available for customers who bought the complete laptop bundle, if you don't own it please ignore this guide.
{% endhint %}

{% file src="/files/HfLHQveQqSV72NKDpyFL" %}
App Template using React + TS + Mantine
{% endfile %}

{% file src="/files/v3xAK2k113wPnFmRJ6vg" %}
App Template using Vanilla JS
{% endfile %}

<details>

<summary>Startup order</summary>

```markdown
## Make sure to start ox_lib and your framework first.
ensure ox_lib
ensure your_framework

ensure av_laptop
ensure av_apps
## your custom app(s):
ensure app_template
```

</details>

<details>

<summary>Restart Order</summary>

<pre class="language-markdown"><code class="lang-markdown"><strong>## When testing in game you probably will need to restart your custom app
</strong>## To do this you will need to restart the scripts in the following order:
ensure av_laptop
ensure av_apps
ensure your_custom_app
</code></pre>

</details>

<details>

<summary>Other Info</summary>

```markdown
# Plase DON'T try to register a custom APP using av_laptop files
# You need to create your own resource folder and register the app from there,
# that's why a template exists so u can copy/paste and add all the apps u want
```

</details>

{% tabs %}
{% tab title="Custom APPs" %}

> For React TS template:
>
> * Navigate to **app\_template/ui** folder using your terminal.
> * Run command `yarn` to install dependencies.
> * Once all dependencies are fully loaded run `yarn dev` to start the project.
> * To build just run command `yarn build` or `yarn build --w`
>   {% endtab %}

{% tab title="Using Websites" %}

> * If you don't want to build an APP but just to trigger a website to be shown in the laptop window, make sure to follow the template from config/\_config.lua:
>
> ```lua
> local resourceName = GetCurrentResourceName()
> Config = {}
> Config.App = { -- This config will open a website, you don't need the UI folder at all
>     name = "template", -- You can modify this just make sure don't use duplicated app names
>     label = "App Template", -- You can modify this
>     resource = resourceName, -- don't modify this
>     icon = resourceName..'/icon.png', -- don't modify this?
>     website = "https://uwucatcafe.com/", -- custom website
>     isEnabled = function()
>         -- this check runs when the player opens the laptop, return true/false to enable/disable app
>         return true
>     end
> }
> ```

<figure><img src="/files/zOIldojus8eL6Qu1ty88" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="NUI Events" %}

> * If you don't want to open any window in laptop but you want to trigger an event from an external resource you can trigger a NUI Callback, check the config from config/\_config.lua:
>
> <pre class="language-lua"><code class="lang-lua">local resourceName = GetCurrentResourceName()
> Config = {}
> Config.App = { -- This config will trigger a NUIEvent (check client/nui/example)
> <strong>    name = "template", -- You can modify this just make sure don't use duplicated app names
> </strong>    label = "App Template", -- You can modify this
>     resource = resourceName, -- don't modify this
>     icon = resourceName..'/icon.png', -- don't modify this?
>     event = "doSomething", -- trigger a nui event
>     isEnabled = function()
>         -- this check runs when the player opens the laptop, return true/false to enable/disable app
>         return true
>     end
> }
> </code></pre>

> * This will trigger the NUI Callback from **client/nui/example.lua**
>
> ```lua
> RegisterNUICallback("doSomething", function(data,cb)
>     TriggerEvent("av_laptop:notification", Config['app_title'], "Event triggered from laptop", "success")
>     cb("ok")
> end)
> ```

> * The resource where the NUI callback is located needs to be the same resource that is used to register the APP using the **registerApp** export from **client/editable/app.lua**

<figure><img src="/files/YuK0X0yOrhEq0a2Ubxu2" alt=""><figcaption></figcaption></figure>

> **Note:** If you choose to just trigger a nui event you can delete the UI folder and all ui references from fxmanifest.lua
> {% endtab %}
> {% endtabs %}

{% hint style="danger" %}
I don't provide any support for custom APPs, if you don't know how React or JS works, please hire a dev from Fiverr or any other platform, I won't do any custom commission at all, refrain from opening a ticket about custom apps.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.av-scripts.com/laptop-pack-v3/custom-apps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.