├── server
└── server.lua
├── web
├── src
│ ├── vite-env.d.ts
│ ├── main.ts
│ ├── utils
│ │ ├── misc.ts
│ │ ├── fetchNui.ts
│ │ ├── debugData.ts
│ │ └── useNuiEvent.ts
│ ├── store
│ │ └── stores.ts
│ ├── App.svelte
│ ├── providers
│ │ └── VisibilityProvider.svelte
│ └── components
│ │ └── HelloWorld.svelte
├── tsconfig.node.json
├── svelte.config.js
├── vite.config.ts
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── pnpm-lock.yaml
├── .github
└── dependabot.yml
├── fxmanifest.lua
├── client
└── client.lua
├── LICENSE
└── README.md
/server/server.lua:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
(events: DebugEvent
[], timer = 1000): void => {
16 | if (isEnvBrowser()) {
17 | for (const event of events) {
18 | setTimeout(() => {
19 | window.dispatchEvent(
20 | new MessageEvent("message", {
21 | data: {
22 | action: event.action,
23 | data: event.data,
24 | },
25 | })
26 | );
27 | }, timer);
28 | }
29 | }
30 | };
--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/svelte/tsconfig.json",
3 | "compilerOptions": {
4 | "target": "ESNext",
5 | "useDefineForClassFields": true,
6 | "module": "ESNext",
7 | "strict": true,
8 | "resolveJsonModule": true,
9 | "allowSyntheticDefaultImports": true,
10 | "noFallthroughCasesInSwitch": true,
11 | "baseUrl": ".",
12 | /**
13 | * Typecheck JS in `.svelte` and `.js` files by default.
14 | * Disable checkJs if you'd like to use dynamic types in JS.
15 | * Note that setting allowJs false does not prevent the use
16 | * of JS in `.svelte` files.
17 | */
18 | "allowJs": true,
19 | "checkJs": true,
20 | "isolatedModules": true
21 | },
22 | "include": ["src/**/*"],
23 | "exclude": ["node_modules/*", "public/*"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/web/src/providers/VisibilityProvider.svelte:
--------------------------------------------------------------------------------
1 |
30 |
31 | Svelte NUI Popup!
31 |
3 |
Svelte & Lua Boilerplate
5 |
6 | This repository is a basic boilerplate for getting started
7 | with Svelte in NUI. It can be used for both in browser and
8 | in game development.
9 |
10 | Utilizing `Vite` allows us to have hot builds while developing in game
11 | by restarting the resource, instead of having to make a production build.
12 |
13 | This version of the boilerplate is meant for the CfxLua runtime.
14 |
15 | ## Requirements
16 | * [Node > v10.6](https://nodejs.org/en/)
17 | * [pnpm](https://pnpm.io/installation) (Highly recommended over yarn or npm)
18 |
19 | *A basic understanding of the modern web development workflow. If you don't
20 | know this yet, Svelte might not be for you just yet.*
21 |
22 | ## Getting Started
23 |
24 | First clone the repository or use the template option and place
25 | it within your `resources` folder
26 |
27 | ### Installation
28 |
29 | Install dependencies by navigating to the `web` folder within
30 | a terminal of your choice and type `pnpm i`.
31 |
32 | ## Features
33 |
34 | This boilerplate comes with some utilities and examples to work off of.
35 |
36 | ### Svelte Utils
37 |
38 | Signatures are not included for these utilities as the type definitions
39 | are sufficient enough.
40 |
41 | **Toggling main frame visibility**
42 |
43 | You can exit the UI frame using the `ESC` key, if you need to forcefully
44 | hide it you can use `visibility.set()`, visibility being an exported writable
45 | from the Svelte store.
46 |
47 | Before being able to use the writable you must first import it from `store/stores.ts`
48 | ```svelte
49 |
52 | ```
53 |
54 | **useNuiEvent**
55 |
56 | This is a custom function that is designed to intercept and handle
57 | messages dispatched by the game scripts. This is the primary
58 | way of creating passive listeners.
59 |
60 |
61 | *Note: For now handlers can only be registered a single time. I haven't
62 | come across a personal usecase for a cascading event system*
63 |
64 | **Usage**
65 | ```svelte
66 |
77 |
78 |