Developer Snippet Diary

LiveWire laravel tutorial online

Laravel Core Updated: February 1, 2026 Author: R GONDAL Public

https://www.youtube.com/watch?v=bY58EfPqXXg&list=PL1JpS8jP1wgC8Uud_DKhL3jAtcPzeQ9pn&index=2
Livewire lets you make your web pages interactive using PHP instead of JS.

A Livewire component:

  • Handles UI logic + server logic together
  • Updates parts of a page without full page reload
  • Uses AJAX automatically (you don’t write it)

1.Install Livewrie > it will install livewire inside vendor folder

composer require livewire/livewire

2.Create a component ... 

php artisan make:livewire counter

It will create two files

app/Livewire/Counter.php
<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 1;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function decrement()
    {
        $this->count--;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

resources/views/livewire/counter.blade.php

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>
  • $count is public so accessible inside view
  • wire:click send ajax request  //http://127.0.0.1:8000/livewire/message/counter it will call to increment method

 

In routes\web.php

Route::get('/counter', \App\Livewire\CounterCounter::class);

By default livewire use: 

resources/views/components/layouts/app.blade.php

OR Custom app layout using this

return view('livewire.show')->layout('layouts.app_livewire'); #resources/views/layouts/app_livewire.blade.php

resources/views/layouts/app_livewire.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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    @livewireStyles
</head>
<body>
    <div id="app">
        <main class="py-4">
            {{ $slot }}
        </main>
    </div>
    @livewireScripts
</body>
</html>

The view data will be rendered in place of the $slot variable in the template above.

ACCESS PROPERTIES IN VIEW:

In livewire you can access properties directly in view:

class CreatePost extends Component
{
    public $title = 'Post title...';
}
#################
<h1>Title: "{{ $title }}"</h1>

SEND ADDITIONAL DATA TO VIEW:

public function render()
    {
        return view('livewire.create-post')->with([
            'author' => Auth::user()->name,
        ]);
    }
#######In View ########
<span>Author: {{ $author }}</span>

Adding wire:key to @foreach loops : Livewire needs a way to uniquely identify each item in the loop for ajax operations ie delete, add, remove etc

<div>
    @foreach ($posts as $post)
        <div wire:key="{{ $post->id }}"> 
            <!-- ... -->
        </div>
    @endforeach
</div>

If rendering a component, tell post-item and key

<div>
    @foreach ($posts as $post)
        <livewire:post-item :post="$post" :key="$post->id" />
    @endforeach
</div>

 

Posted by: R GONDAL
Email: rizikmw@gmail.com