connorabbas/primevue-breeze-nuxt

Nuxt app using PrimeVue components, meant to use with Laravel Breeze API stack on the backend.

Nuxt w/ PrimeVue & Laravel Breeze API Stack

A Nuxt & PrimeVue starter kit meant for use with a Laravel Breeze API stack backend.

An alternative to using my Inertia or Traditional Vue SPA starter kits.

SSR authorization/middleware possible using Pinia Plugin Persistedstate.

Setup

1. Clone the repo (or download the zip)
2. Create a new .env file in the root directory, reference the .env.example file for the vars/values
3. Create a new Laravel application
4. Install Laravel Breeze using the API Stack option
5. Setup necessary .env configuration values in the Laravel API project

   # Remember, your SPA and API must share the same top-level domain
   # Example implementation, could also use localhost with different port numbers
   APP_URL="http://breeze-api.localhost" # Match this value with NUXT_PUBLIC_API_BASE_URL in the Nuxt app .env
   FRONTEND_URL="http://nuxt.breeze-api.localhost" # Add app.frontend_url config entry as needed
   SANCTUM_STATEFUL_DOMAINS="nuxt.breeze-api.localhost"
   SESSION_DOMAIN=".breeze-api.localhost"
   

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 theme-preset.js file at the root of the project. 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.