Fivem Vue Tailwind Boilerplate

screenshot of Fivem Vue Tailwind Boilerplate

FiveM NUI resource boilerplate using Vue 3 and TailwindCSS.

Overview

The Vue + Tailwind Boilerplate for FiveMA is an outstanding starting point for anyone looking to develop a user interface for FiveM using the powerful combination of Vue 3 and TailwindCSS. This boilerplate not only streamlines the development process with a bunch of useful utilities but also encourages best practices through well-structured folder organization. Whether you're just stepping into frontend development for FiveM or are looking to improve your workflow, this boilerplate caters to your needs.

With features like hot reloading and an intuitive build system, developers can focus on crafting their applications without constantly worrying about manual restarts or setup woes. The supportive community and comprehensive documentation further enhance this package, making it a solid choice for both novice and seasoned developers.

Features

  • Comprehensive Boilerplate: Full resource setup for FiveM, featuring stores, event handling, and pre-configured Vue components.

  • Hot Reloading: Automatically restarts the resource on build triggers, enhancing development speed and efficiency.

  • Simple Build System: Utilizes Laravel Mix for a dead-simple setup process, allowing developers to get started quickly.

  • NuiProxy Service: Facilitates listening to events and sending callbacks, simplifying communication between the client and the NUI.

  • State Management with Pinia: Integrated state management system with two stores for smoother data handling.

  • Integrated TailwindCSS: Tailored for modern CSS development with SCSS support and inline examples to kickstart styling.

  • Node.js Commands: Supports various build commands like npm run dev, npm run watch, and npm run prod for different stages of development.

  • Easy Setup: Drop the resource into your resources folder, run npm install, and you're ready to build your first asset!