Laravel & PrimeVue Starter Kit

About

A basic authentication starter kit using Laravel, Intertia.js, PrimeVue components, and Tailwind CSS.

Hosted Demo Project

Do you need a separate Vue SPA front-end instead of using Inertia.js? Consider using the Vue SPA w/ PrimeVue & Laravel Breeze API Starter Kit instead.

Roadmap

• Hosted demo project
• Updated User profile settings pages (similar to official Laravel starter kits)
• Additional layouts (similar to official Laravel starter kits)
• Alternative admin branch using either Filament PHP or spatie/laravel-permission (In development)
• TypeScript & SSR repo using PrimeVue Volt (In development)
• Update connorabbas/primevue-spa-laravel-api project to match UI/functionality (WIP)

Features

• Pre-configured Auto Import PrimeVue components
• Extended PrimeVue menu/navigation components utilizing Inertia's Link component and Lucide Icons
• usePaginatedData() & useLazyDataTable() composables for use with PrimeVue's Paginator & DataTable components for easy pagination/filtering/sorting
• Light/dark/system color mode toggle
• Easily customizable theming
• Opt-in TypeScript usage

Theme

This starter kit provides a collection of custom theme presets to choose from, built using the powerful PrimeVue V4 theming system. It leverages styled mode and custom design token values to create flexible and cohesive UI designs.

Prebuilt Theme Presets

The prebuilt theme presets are located in the /resources/js/theme directory. Each preset offers a distinct visual style:

• noir
  A minimal, monochromatic theme that serves as the default style.

• bootstrap
  Emulates the familiar look and feel of Bootstrap.

• breeze
  Captures the aesthetic of Laravel Breeze.

• enterprise
  Provides a clean, no-nonsense corporate design.

Customizing Your Own Theme

Creating your own theme preset is simple. You can:

• Swap the primary values with a different set of colors.
• Adjust the colorScheme surface values (e.g., slate, gray, neutral).
• Change the extended preset theme.

For detailed guidance on customization, please refer to the PrimeVue Styled Mode Docs.

PrimeVue v4 w/ Tailwind CSS

To clarify, Tailwind is not used for any component styling in this starter kit; instead, we use PrimeVue's styled mode with a custom theme preset implementation for component styling. Tailwind is applied solely for layout purposes around PrimeVue components and for minimal styling when needed.

---

Local Development with Docker

This starter kit is configured to use Docker Compose for local development with just a few extra steps, powered by images & configuration from Laravel Sail. With this setup, you do not need PHP, Composer, PostgreSQL or Node.js installed on your machine to get up and running with this project.

Setup

1. In a new directory (outside of your Laravel project) create a docker-compose.yml file to create a reverse proxy container using Traefik. You can clone/reference this example implementation.

2. Step into the directory containing the new compose file, and spin up the Traefik container:

   docker compose up -d
   

3. Update Laravel app .env

   # Use any desired domain ending with .localhost
   # Match domain value in docker-compose.local.yml laravel service labels section
   APP_URL=http://laravel-primevue.localhost
   
   DB_CONNECTION=pgsql
   DB_HOST=pgsql # name of service
   DB_PORT=5432
   DB_DATABASE=laravel
   DB_USERNAME=sail
   DB_PASSWORD=password
   
   WWWGROUP=1000
   WWWUSER=1000
   
   # Update port values as needed when running multiple projects/services
   #APP_PORT=80 not required when using Traefik reverse proxy
   VITE_PORT=5173
   FORWARD_DB_PORT=5432

4. Build the Laravel app container using one of the following techniques:

   • Build manually using docker compose CLI

        docker compose -f docker-compose.local.yml up -d

   • Use Laravel Sail
   • Build as a VS Code Dev Container using the Dev Containers: Reopen in Container command

Additional configuration

If you wish to add additional services, or swap out PostgreSQL with an alternative database, you can reference the Laravel Sail stubs and update the docker-compose.local.yml file as needed.