Unlock your full development potential with the Vite, Vue & TailwindCSS boilerplate for FiveM. Designed to streamline your workflow and boost your productivity, this powerful tool delivers lightning-fast performance and a sleek, modern design. Download now and revolutionize your FiveM development!
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
- Vite for fast, modern builds
- Vue for a powerful and intuitive UI development experience
- TailwindCSS for easy, customizable styling
- Customizable configuration options
- Lightweight and easy to use
To get started with using this boilerplate, follow these steps:
- Clone this repository to your local machine.
- Open the main directory of the cloned repository in your preferred editor.
- CD into the "web" folder in your terminal by running
cd web.
cd web- Install the dependencies by running
npm install.
npm install
To use this boilerplate, you can use the following commands in your terminal:
Use the following command to start the development server with hot-reload enabled:
npm run dev
This will compile the Vue.js files and start a local server that you can access in your browser. Any changes you make to the files will be automatically recompiled and the browser will refresh to show the changes.
Use the following command to compile the Vue.js files for production:
npm run build
This will compile the files and create an html folder that contains the output. Once you've loaded compiled it successfully, you can now access your project in-game.
Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design.
To make this as easy as possible, Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled:
- Launch your preferred editor and access the main directory of the cloned repository.
- Locate and open the src folder within the directory.
- Navigate to the index.html file located inside the src folder.
- Toggle between the
darkorlightmode as desired.
TailwindCSS has also developed a handful of official plugins for popular features that for one reason or another don’t belong in core yet.
npm install -D tailwindcss-animatenpm install -D @tailwindcss/aspect-rationpm install @headlessui/vue@latestnpm install @heroicons/vuenpm install -D @tailwindcss/formsnpm i @tailwindcss/typography
This boilerplate was created by loljoshie.
Contributions are always welcome! If you would like to contribute to this project, please create a pull request or open an issue.