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 Filament PHP
• Proper SSR support
• Match UI/functionality to connorabbas/primevue-spa-laravel-api project

Features

• Need an admin panel? There's a branch for that.
• Pre-configured Auto Import PrimeVue components
• Wrapper components for PrimeVue's Breadcrumb, Menu, MenuBar, & PanelMenu utilizing Inertia's Link component
• usePaginatedData() & useLazyDataTable() composables for use with PrimeVue's Paginator & DataTable components for easy pagination/filtering/sorting (example usage in feature/admin-panel branch)
• Easily customizable theming
• Opt-in TypeScript usage

Theme

This starter kit features a light/dark/system color mode toggle along with 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.

---

Usage 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 with value used in docker-compose.local.yml
   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
   
   # Update port values as needed when running multiple projects/services
   APP_PORT=8000
   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 (like above)
   • 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.