Fivem Nuxt + TS Boilerplate

Fivem Nuxt + TS Boilerplate


The “fivem-ts-nuxt-boilerplate” is a boilerplate for web application development in the FiveM environment using the Nuxt.js framework and TypeScript. This boilerplate includes predefined configurations for both frameworks and basic resources to make it easier to create new projects.

Environment Configuration

To use the boilerplate, you will need to have Node.js and Yarn installed on your system. After installing them, open the terminal in the project folder and run the following command to install all dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Starting the Server

To start the server, run the following command:

npm run dev

This command will start the Nuxt.js server in development mode, allowing you to start building your application.

Project Structure

The project is structured according to the standard conventions of Nuxt.js. The assets folder contains resources such as images and CSS files. The components folder contains reusable Vue.js components. The layouts folder contains layouts for different pages and the pages folder contains the Vue.js pages for the application.

The server folder contains the FiveM server files. The server.ts file is the entry point for the server and contains the server configurations. The src folder contains the TypeScript code for the server.

Integrating with FiveM

To integrate the project with FiveM, you need to create a resource on the FiveM server. Create a folder for the resource in the server’s resources folder, and then copy all the files from the fivem-ts-nuxt-boilerplate project to the resource folder.

Additionally, you need to update the fxmanifest.lua file to include the new resource. Add the following code to the file:

resource_type 'nui_page' {    -- defines that the resource is a web page
    name = 'Nuxt.js App',    -- the name of the resource
    url = '/',              -- the URL of the web page
    files = {               -- the files that will be sent to the client

Building the Project

To build the project, run the following command:

npm run build

This command will create a dist folder in the root of the project containing the compiled application files ready to be deployed.

To run the compiled application, run the following command:

yarn start

This command will start the Nuxt.js server in production mode, serving the compiled files in the dist folder. Make sure to build the project before running this command.

Adding to FiveM

npm run generate

By doing so, it will generate the static files for FiveM, just start your resource!