An open API service indexing awesome lists of open source software.

https://github.com/brycerussell/astro-fivem-nui

A template for creating a NUI resource for FiveM using Astro
https://github.com/brycerussell/astro-fivem-nui

Last synced: about 1 year ago
JSON representation

A template for creating a NUI resource for FiveM using Astro

Awesome Lists containing this project

README

          




# Astro FiveM NUI Template

This is a template for creating a [FiveM](https://fivem.net/) [NUI resource](https://docs.fivem.net/docs/scripting-manual/nui-development/) using Astro

## Features

- Easily build small(<100kb) NUIs
- Tailwind preinstalled for styling
- Image optimization and icons
- Custom NUI utility to make message handling, callbacks, etc easier

## How to Use

### [Using the Dev Enviroment](/dev)

### Setup

1) [Clone](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) the project into a [local FiveM dev server](https://docs.fivem.net/docs/server-manual/setting-up-a-server/) as a resource

2) Use the terminal to naviagte to the `dev` folder (`cd dev`)

3) Once inside the `dev` folder, use [pnpm](https://pnpm.io/installation#using-npm) to install all dependencies: `pnpm i`

4) Start building your NUI inside the `dev/src/pages/index.astro` file

**Testing in a Browser**:

1) Use the command `pnpm dev` to start a dev server at https://localhost:3000

**Testing In-game**:

1) Use the command `pnpm build` to build your NUI

2) Use the command `restart [resource-name]` inside your FiveM server test the new changes