Nuxt Shadcn Tailwind Fivem Boilerplate

Nuxt ShadCN Tailwind FiveM Boilerplate: Streamline Your FiveM UI Development

Kickstart your FiveM server development with this comprehensive boilerplate. It integrates Nuxt.js for optimized UIs, Tailwind CSS for rapid styling, and ShadCN (Vue) components for modern, accessible elements. With built-in Lua integration for FiveM server-client communication and TypeScript support, this template provides a solid foundation for creating sophisticated in-game interfaces efficiently, enhancing both developer experience and final product quality.

Features:

• Nuxt.js Integration: Leverages Nuxt.js for building highly optimized, server-side rendered, or static web interfaces.
• Tailwind CSS Styling: Utilizes Tailwind CSS, a utility-first framework for rapid UI development.
• ShadCN (Vue) Components: Incorporates ShadCN (Vue) components, offering pre-styled and accessible UI elements for modern interfaces.
• FiveM Lua Integration: Provides Lua scripts for seamless server-client communication within the FiveM environment.
• TypeScript Support: Ensures type safety and an improved developer experience throughout the project.
• fxmanifest.lua Configuration: Includes a pre-configured fxmanifest.lua for easy integration with FiveM, defining game resources and scripts.
• Client-Side Scripting (Lua): Comes with scripts/client/main.lua for implementing client-specific logic in FiveM.
• Server-Side Scripting (Lua): Features scripts/server/main.lua for handling server-side operations in FiveM.
• Shared Lua Scripts: Supports shared Lua scripts, such as scripts/shared/config.lua, for common configurations.
• UI Page Loading for FiveM: Configures ui page 'dist/index.html' in fxmanifest.lua to serve the Nuxt application as the NUI.
• Static Asset Handling for FiveM: Manages UI assets through the files directive in fxmanifest.lua, including dist/assets/**.
• Development Mode with HMR: Offers an npm run dev command for a development server with hot module replacement.
• Production Build Command: Provides npm run build to create optimized assets for production deployment.
• Static Site Generation: Includes npm run generate to output static files suitable for static hosting environments.
• Post-Install Setup Script: Features an npm run postinstall command for finalizing Nuxt environment setup after dependency installation.

Summary:

This boilerplate provides a ready-to-use FiveM server template featuring Nuxt.js, Tailwind CSS, ShadCN (Vue) components, and Lua scripting. It simplifies the setup for modern NUI development in FiveM, offering essential tools, scripts, and configurations for building interactive user interfaces. Developers can leverage this starter to accelerate their workflow, ensuring a high-quality, type-safe, and performant application for their FiveM server projects.