Laravel Jetstream CRUD | Laravel 10 Livewire 3 CRUD with Alpine JS & Tailwind CSS Example

Laravel Jetstream CRUD | Laravel 10 Livewire 3 CRUD with Alpine JS & Tailwind CSS Example

Setup Fresh Laravel 10 Project and Install Jetstream

composer create-project --prefer-dist laravel/laravel jetstream
cd jetstream
php artisan jetstream:install livewire --dark --verification

Creating a Components for Table Elements

php artisan make:component table --view
php artisan make:component table.header --view
php artisan make:component table.row --view
php artisan make:component table.cell --view
php artisan make:component modals.form --view 

Path:- resources/views/components/table.blade.php

<div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-lg">
    <table class="w-full divide-y divide-gray-200">
        @if (!empty($header))
            <thead class="table-head">
                {{ $header }}
            </thead>
        @endif
        <tbody class="bg-white divide-y divide-gray-200">
            {{ $body ?? '' }}
        </tbody>
        @if (!empty($footer))
            <tfoot class="table-foot">
                {{ $footer }}
            </tfoot>
        @endif
    </table>
</div>

Path:- resources/views/components/table/header.blade.php

@props([
    'sortable' => null,
    'direction' => null,
])…