/lj-boilerplate

Unlock your full development potential with the Vite, Vue & TailwindCSS boilerplate for FiveM.

Primary LanguageVue

lj-boilerplate lj-boilerplate

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!

Latest Status Latest Status Version 1.0

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Features

  • 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

Getting Started

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

cd web npm install

Usage

To use this boilerplate, you can use the following commands in your terminal:

Compile and Hot-Reload for Development:

Use the following command to start the development server with hot-reload enabled:

npm run dev

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.

Compile for Production:

Use the following command to compile the Vue.js files for production:

npm run build

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.

Dark mode

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 dark or light mode as desired.

Code_JPZ4ssLrhI

Boilerplate Upgrade (optional)

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-animate
  • npm install -D @tailwindcss/aspect-ratio
  • npm install @headlessui/vue@latest
  • npm install @heroicons/vue
  • npm install -D @tailwindcss/forms
  • npm i @tailwindcss/typography

Credits

This boilerplate was created by loljoshie.

Contributions

Contributions are always welcome! If you would like to contribute to this project, please create a pull request or open an issue.

Projects used with: