Vue SPA w/ PrimeVue & Laravel Breeze API Stack

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

An alternative to using my Inertia or Nuxt starter kits.

Setup

Clone the repo (or download the zip)
Create a new .env file in the root directory, reference the .env.example file for the vars/values
Create a new Laravel application
Install Laravel Breeze using the API Stack option

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 VITE_API_BASE_URL in the Vue app
FRONTEND_URL="http://vue-spa.breeze-api.localhost" # Add app.frontend_url config entry as needed
SANCTUM_STATEFUL_DOMAINS="vue-spa.breeze-api.localhost"
SESSION_DOMAIN=".breeze-api.localhost"

Setup additional routes and controllers for profile page in the Laravel API project:

php artisan make:controller ProfileController

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\Rule;
use Illuminate\View\View;

class ProfileController extends Controller
{
    /**
    * Update the user's profile information.
    */
    public function update(Request $request): Response
    {
        $validated = $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'email' => [
                'required',
                'string',
                'lowercase',
                'email',
                'max:255',
                Rule::unique(User::class)->ignore($request->user()->id),
            ],
        ]);

        $request->user()->fill($validated);

        if ($request->user()->isDirty('email')) {
            $request->user()->email_verified_at = null;
        }

        $request->user()->save();

        return response()->noContent();
    }

    /**
    * Delete the user's account.
    */
    public function destroy(Request $request): Response
    {
        $request->validate([
            'password' => ['required', 'current_password'],
        ]);

        $user = $request->user();

        Auth::logout();

        $user->delete();

        $request->session()->invalidate();
        $request->session()->regenerateToken();

        return response()->noContent();
    }
}

php artisan make:controller Auth/PasswordController

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules\Password;

class PasswordController extends Controller
{
    /**
    * Update the user's password.
    */
    public function update(Request $request): Response
    {
        $validated = $request->validate([
            'current_password' => ['required', 'current_password'],
            'password' => ['required', Password::defaults(), 'confirmed'],
        ]);

        $request->user()->update([
            'password' => Hash::make($validated['password']),
        ]);

        if ($request->session()->has('password_hash_web')) {
            $user = Auth::user();
            $request->session()->forget('password_hash_web');
            Auth::login($user);
        }

        return response()->noContent();
    }
}

Route::controller(App\Http\Controllers\ProfileController::class)
    ->middleware('auth')
    ->group(function () {
        Route::patch('/profile', 'update')->name('profile.update');
        Route::delete('/profile', 'destroy')->name('profile.destroy');
    });

Route::put('password', [App\Http\Controllers\Auth\PasswordController::class, 'update'])
    ->middleware('auth')
    ->name('password.update');

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.

connorabbas/primevue-breeze-spa

Vue SPA w/ PrimeVue & Laravel Breeze API Stack

Setup

Theme