I noticed most of the NUI boilerplates floating around are either outdated or don’t really contain good examples of how to handle common scenarios, so I’m open-sourcing the boilerplate I use for my projects. This is as feature-complete as possible, with many common use cases pre-configured or with useful examples to kickstart your project.
What’s included?
- Vue 3 (configured for Composition API.)
- Vue Router (plus two example pages.)
- Pinia (plus two example stores.)
- TailwindCSS (plus inline and SFC examples.)
- Axios, Mix, RCON, and Dotenv.
Features
-
Vue Router + Pinia Examples: Includes two example pages handled using Vue Router and router links, as well as two Pinia stores with an example “increment counter” feature.
-
Open/Close Functionality: Includes an example of opening/closing the NUI screen using Lua. Also includes Escape Key support for closing the open NUI screen and releasing focus.
-
SendNUIMessage Example: Includes an example of how to handle messages sent to NUI using
SendNUIMessageand updating a Pinia store accordingly. -
NUI Callback Example: Includes an example of sending NUI callbacks from Vue or through a Pinia store action.
-
Hot Reloading: Using the Mix/Webpack build system and RCON, this boilerplate can automatically restart your resource whenever you save a file while running
npm run watch.
Screenshots
Of course, the meat of this release is the code - but here’s what the example project looks like.
Download
The best way to download this boilerplate is via Github, so you receive the latest updates!
- GitHub: GitHub - charleshacks/fivem-vue-tailwind-boilerplate: FiveM NUI resource boilerplate using Vue 3 and TailwindCSS.
- Direct: fivem-vue-tailwind-boilerplate-master.zip (177.3 KB)