Courses

Livewire 3 for Beginners with Laravel 12 Starter Kit

DB Schema, Livewire Component, and Menu

Summary of this lesson:
- Creating Task model, migration, factory, and seeder
- Defining tasks route and Livewire component
- Displaying placeholder text in tasks view
- Adding Tasks link to navigation menu

Let's try to create a simple CRUD for Tasks with two fields (for now): name and is_completed.

In this lesson, we'll manage the Model/Migration, Routes, and Controllers and add a navigation link in the top menu.

Preparing the Database

First, we create the DB structure with factories to create some fake records:

php artisan make:model Task -mf

The table structure is in Migration.

database/migrations/xxxx_create_tasks_table.php:

public function up(): void
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->boolean('is_completed')->default(false);
        $table->timestamps();
    });
}

In the Model, we just make the fields fillable and cast is_completed to boolean.

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Task extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'name',
        'is_completed'
    ];
 
    protected function casts(): array
    {
        return [
            'is_completed' => 'boolean'
        ];
    }
}

Then, the Factory with the rules.

database/factories/TaskFactory.php:

class TaskFactory extends Factory
{
    public function definition(): array
    {
        return [
            'name' => fake()->words(asText: true),
            'is_completed' => fake()->boolean(),
        ];
    }
}

Finally, that Factory should be used in the main seeder to create 10 fake task records.

database/seeders/DatabaseSeeder.php:

use App\Models\Task;
use App\Models\User;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
 
class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        User::factory()->create([
            'name' => 'Test User',
            'email' => 'test@example.com',
        ]);
 
        Task::factory()->count(10)->create();
    }
}

And then we run the command:

php artisan migrate --seed

As a result, we have 10 records in the DB.

Livewire Component and Routes

We will create a Livewire component to manage the tasks with this command:

php artisan make:livewire Tasks/Index

Then, we assign that Component to...

The full lesson is only for Premium Members.
Want to access all 19 lessons of this course? (91 min read)

You also get:

  • 73 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord