Laravel Fullstack

Blade + Alpine.js + Vue.js + TailwindCSS development for Laravel 12+.

Stack Overview

Layer	Technology	Purpose
Views	Blade	Server-rendered templates
Interactivity	Alpine.js	Lightweight JS framework
SPA (optional)	Vue.js	Complex client-side apps
Styling	TailwindCSS v4	Utility-first CSS
Assets	Vite	Build tool

Blade Components

Anonymous Components

{{-- resources/views/components/button.blade.php --}}
@props([
    'type' => 'button',
    'variant' => 'primary',
])

<button 
    type="{{ $type }}"
    {{ $attributes->class([
        'px-4 py-2 rounded-lg font-medium transition-colors',
        'bg-blue-600 text-white hover:bg-blue-700' => $variant === 'primary',
        'bg-gray-200 text-gray-800 hover:bg-gray-300' => $variant === 'secondary',
        'bg-red-600 text-white hover:bg-red-700' => $variant === 'danger',
    ]) }}
>
    {{ $slot }}
</button>

{{-- Usage --}}
<x-button variant="primary">Save</x-button>
<x-button variant="danger" type="submit">Delete</x-button>

Class Components

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

final class Alert extends Component
{
    public function __construct(
        public string $type = 'info',
        public ?string $title = null,
    ) {}

    public function render(): View
    {
        return view('components.alert');
    }

    public function iconClass(): string
    {
        return match($this->type) {
            'success' => 'text-green-500',
            'error' => 'text-red-500',
            'warning' => 'text-yellow-500',
            default => 'text-blue-500',
        };
    }
}

Layouts

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100 dark:bg-gray-900">
    <x-navbar />
    
    <main class="container mx-auto py-8">
        {{ $slot }}
    </main>
    
    <x-footer />
</body>
</html>

{{-- Usage --}}
<x-layouts.app title="Dashboard">
    <h1>Welcome</h1>
</x-layouts.app>

Alpine.js Patterns

Basic Toggle

<div x-data="{ open: false }">
    <button @click="open = !open">
        Toggle Menu
    </button>
    
    <div x-show="open" x-transition>
        Menu content
    </div>
</div>

Dropdown

<div x-data="{ open: false }" @click.away="open = false">
    <button @click="open = !open">
        Options
    </button>
    
    <div 
        x-show="open" 
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg"
    >
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Edit</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Delete</a>
    </div>
</div>

Modal

<div x-data="{ open: false }">
    <button @click="open = true">Open Modal</button>
    
    <div 
        x-show="open" 
        x-transition:enter="ease-out duration-300"
        x-transition:leave="ease-in duration-200"
        class="fixed inset-0 z-50 flex items-center justify-center"
    >
        {{-- Backdrop --}}
        <div 
            class="fixed inset-0 bg-black/50" 
            @click="open = false"
        ></div>
        
        {{-- Modal Content --}}
        <div class="relative bg-white rounded-lg p-6 max-w-md w-full mx-4">
            <h2 class="text-lg font-semibold">Modal Title</h2>
            <p class="mt-2">Modal content here</p>
            
            <div class="mt-4 flex justify-end gap-2">
                <button @click="open = false">Cancel</button>
                <button @click="open = false">Confirm</button>
            </div>
        </div>
    </div>
</div>

Form with Loading State

<form 
    x-data="{ loading: false }"
    @submit.prevent="loading = true; $el.submit()"
    method="POST"
    action="{{ route('orders.store') }}"
>
    @csrf
    
    <input type="text" name="name" required>
    
    <button type="submit" :disabled="loading">
        <span x-show="!loading">Submit</span>
        <span x-show="loading">Processing...</span>
    </button>
</form>

References

Topic	Reference	When to Load
Blade advanced	references/blade.md	Slots, stacks, includes
Alpine.js patterns	[refer

...

laravel-fullstack

SKILL.md

Laravel Fullstack

Stack Overview

Blade Components

Anonymous Components

Class Components

Layouts

Alpine.js Patterns

Basic Toggle

Dropdown

Modal

Form with Loading State

References

Repository

Repository Stats