Laravel Breeze & PrimeVue

A starter kit using Laravel Breeze with the Intertia.js Vue option, utilizing PrimeVue components.

Installation

1. Clone the repo (or download the zip)

   git clone https://github.com/connorabbas/primevue-breeze-inertia.git
   

2. Step into the project directory

   cd ./primevue-breeze-inertia
   

3. Install the framework and other packages

   composer install
   

4. Setup .env file

   Windows

   copy .env.example .env
   

   Unix/Linux/MacOS

   cp .env.example .env
   

5. Generate the app key

   php artisan key:generate
   

6. Migrate database tables (after .env and database related config setup)

   php artisan migrate
   

7. Install npm packages

   npm install
   

8. Start the Vite dev server

   npm run dev
   

Theme

This starter kit provides a light/dark mode and custom theme functionality provided by the powerful PrimeVue theming system, using styled mode and custom design token values.

The starting point for customizing your theme will be the resources/js/theme-preset.js module file. To quickly change the look and feel of your theme, swap the primary values with a different set of colors, change the surface colorScheme values (slate, gray, neutral, etc.), or completely change the preset theme (Aura used by default).

Please reference the PrimeVue Styled Mode Docs to fully understand how this system works, and how to further customize your theme to make it your own.

PrimeVue v4 w/ Tailwind CSS

If you have used a previous version of this project using PrimeVue v3, you'll know that Tailwind was removed in favor of PrimeFlex. With v4 however, the PrimeTek team has officially suggested Moving from PrimeFlex to Tailwind CSS.

For this reason, Tailwind has been added back into the project and is utilized with the tailwindcss-primeui plugin. CSS layers have also been implemented so the Tailwind utilities can override the PrimeVue component styling when needed.