Building Your First Livewire 3.0 Component

December 23, 2024
1:42 pm
No Comments

What is a Livewire Component?

A Livewire component is a self-contained unit of logic and UI. It contains both backend logic (written in PHP) and frontend rendering (done via Blade templates). With Livewire 3.0, these components are stored in the app/Livewiref older by default, ensuring a cleaner and more intuitive directory structure.

Step 1: Creating a Livewire Component

To create a new Livewire component, run the following command in your terminal:

				
					php artisan make:livewire HelloWorld

This will create two files:

app/Livewire/HelloWorld.php – The PHP class that contains the logic for your component.
resources/views/livewire/hello-world.blade.php – The Blade template for the component’s UI.

Step 2: Understanding the Component Structure

HelloWorld.php

Here’s what the generated PHP class looks like:

				
					<?php

namespace App\Livewire;

use Livewire\Component;

class HelloWorld extends Component
{
    public function render()
    {
        return view('livewire.hello-world');
    }
}

Namespace: Components are stored in the App\Livewire namespace.
render() method: This method defines the Blade view that will be rendered.

hello-world.blade.php

Here’s the generated Blade file:

				
					<div>
    Hello, World!
</div>

This file will be displayed when the component is rendered.

Step 3: Using the Component

To use the component, include it in any Blade template, like welcome.blade.php:

				
					<livewire:hello-world />

Visit your application in the browser (e.g., http://localhost:8000), and you’ll see:

				
					Hello, World!

Step 4: Adding Dynamic Behavior

Let’s enhance the HelloWorld component to display dynamic content.

Update the PHP Class

Add a public property and a method to update it:

				
					<?php

namespace App\Livewire;

use Livewire\Component;

class HelloWorld extends Component
{
    public $name = 'Livewire';

    public function updateName($newName)
    {
        $this->name = $newName;
    }

    public function render()
    {
        return view('livewire.hello-world');
    }
}

Update the Blade Template

Modify hello-world.blade.php to include a text input and a button:

				
					<div>
    <h1>Hello, {{ $name }}!</h1>

    <input type="text" wire:model="name" placeholder="Enter your name">
    <button wire:click="updateName('Laravel')">Change Name to Laravel</button>
</div>

What’s Happening Here?

wire:model: Binds the text input to the $name property in the PHP class. Changes to the input are reflected in real time.
wire:click: Triggers the updateName() method when the button is clicked.

Step 5: Livewire Lifecycle Hooks

Livewire provides hooks to manage the lifecycle of your components. Here are some key hooks:

mount(): Called when the component is initialized.
updated($propertyName): Called after a property is updated.
render(): Called to render the component’s Blade template.

Let’s add a mount() hook to set a default value for $name:

				
					public function mount()
{
    $this->name = 'Livewire 3.0';
}

Final Output

With the above changes, visiting your page now allows users to:

See Hello, Livewire 3.0! as the default text.
Update the name dynamically by typing into the input field.
Change the name to Laravel by clicking the button.