{"flag":true,"single":true,"pageTitle":"LiveWire laravel tutorial online","post":{"id":287,"user_id":"1","slug":"livewire-laravel-tutorial-online-llin","title":"LiveWire laravel tutorial online","body":"<p><a href=\"https:\/\/www.youtube.com\/watch?v=bY58EfPqXXg&amp;list=PL1JpS8jP1wgC8Uud_DKhL3jAtcPzeQ9pn&amp;index=2\">https:\/\/www.youtube.com\/watch?v=bY58EfPqXXg&amp;list=PL1JpS8jP1wgC8Uud_DKhL3jAtcPzeQ9pn&amp;index=2<\/a><br>Livewire lets you make your web pages interactive using PHP instead of JS.<\/p>\r\n<p>A Livewire component:<\/p>\r\n<ul>\r\n<li>Handles UI logic + server logic together<\/li>\r\n<li>Updates parts of a page without full page reload<\/li>\r\n<li>Uses AJAX automatically (you don&rsquo;t write it)<\/li>\r\n<\/ul>\r\n<p><strong>1.Install Livewrie &gt; it will install livewire inside vendor folder<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>composer require livewire\/livewire<\/code><\/pre>\r\n<p><strong>2.Create a component ...&nbsp;<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>php artisan make:livewire counter<\/code><\/pre>\r\n<p>It will create two files<strong><br><\/strong><\/p>\r\n<table style=\"border-collapse: collapse; width: 99.9988%;\" border=\"1\"><colgroup><col style=\"width: 49.9431%;\"><col style=\"width: 49.9431%;\"><\/colgroup>\r\n<tbody>\r\n<tr>\r\n<td><strong>app\/Livewire\/Counter.php<\/strong><br>\r\n<pre class=\"language-markup\"><code>&lt;?php\r\n \r\nnamespace App\\Http\\Livewire;\r\n \r\nuse Livewire\\Component;\r\n \r\nclass Counter extends Component\r\n{\r\n    public $count = 1;\r\n \r\n    public function increment()\r\n    {\r\n        $this-&gt;count++;\r\n    }\r\n \r\n    public function decrement()\r\n    {\r\n        $this-&gt;count--;\r\n    }\r\n \r\n    public function render()\r\n    {\r\n        return view('livewire.counter');\r\n    }\r\n}<\/code><\/pre>\r\n<\/td>\r\n<td>\r\n<p><strong>resources\/views\/livewire\/counter.blade.php<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>&lt;div&gt;\r\n    &lt;h1&gt;{{ $count }}&lt;\/h1&gt;\r\n    &lt;button wire:click=\"increment\"&gt;+&lt;\/button&gt;\r\n    &lt;button wire:click=\"decrement\"&gt;-&lt;\/button&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<ul>\r\n<li><strong>$count<\/strong>&nbsp;is public so accessible inside view<\/li>\r\n<li><strong>wire:click<\/strong> send ajax request&nbsp; \/\/<strong>http:\/\/127.0.0.1:8000\/livewire\/message\/counter<\/strong> it will call to increment method<\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<p><strong>In routes\\web.php<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>Route::get('\/counter', \\App\\Livewire\\CounterCounter::class);<\/code><\/pre>\r\n<p><strong>By default livewire use:&nbsp;<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>resources\/views\/components\/layouts\/app.blade.php<\/code><\/pre>\r\n<p>OR Custom app layout using this<\/p>\r\n<pre class=\"language-markup\"><code>return view('livewire.show')-&gt;layout('layouts.app_livewire'); #resources\/views\/layouts\/app_livewire.blade.php<\/code><\/pre>\r\n<p><strong>resources\/views\/layouts\/app_livewire.blade.php<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>&lt;!doctype html&gt;\r\n&lt;html lang=\"{{ str_replace('_', '-', app()-&gt;getLocale()) }}\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n    &lt;meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"&gt;\r\n    &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;\/title&gt;\r\n    @livewireStyles\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div id=\"app\"&gt;\r\n        &lt;main class=\"py-4\"&gt;\r\n            {{ $slot }}\r\n        &lt;\/main&gt;\r\n    &lt;\/div&gt;\r\n    @livewireScripts\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\r\n<p>The view data will be rendered in place of the<strong> $slot<\/strong> variable in the template above.<\/p>\r\n<p><span style=\"font-size: 14pt;\"><strong>ACCESS PROPERTIES IN VIEW:<\/strong><\/span><\/p>\r\n<p>In livewire you can access properties directly in view:<\/p>\r\n<pre class=\"language-markup\"><code>class CreatePost extends Component\r\n{\r\n    public $title = 'Post title...';\r\n}\r\n#################\r\n&lt;h1&gt;Title: \"{{ $title }}\"&lt;\/h1&gt;<\/code><\/pre>\r\n<p><span style=\"font-size: 14pt;\"><strong>SEND ADDITIONAL DATA TO VIEW:<\/strong><\/span><\/p>\r\n<pre class=\"language-markup\"><code>public function render()\r\n    {\r\n        return view('livewire.create-post')-&gt;with([\r\n            'author' =&gt; Auth::user()-&gt;name,\r\n        ]);\r\n    }\r\n#######In View ########\r\n&lt;span&gt;Author: {{ $author }}&lt;\/span&gt;<\/code><\/pre>\r\n<p><strong><span style=\"font-size: 14pt;\">Adding wire:key to @foreach loops : <\/span><\/strong><span style=\"font-size: 12pt;\">Livewire needs a way to uniquely identify each item in the loop for ajax operations ie delete, add, remove etc<\/span><\/p>\r\n<pre class=\"language-markup\"><code>&lt;div&gt;\r\n    @foreach ($posts as $post)\r\n        &lt;div wire:key=\"{{ $post-&gt;id }}\"&gt; \r\n            &lt;!-- ... --&gt;\r\n        &lt;\/div&gt;\r\n    @endforeach\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p>If rendering a component, tell post-item and key<\/p>\r\n<pre class=\"language-markup\"><code>&lt;div&gt;\r\n    @foreach ($posts as $post)\r\n        &lt;livewire:post-item :post=\"$post\" :key=\"$post-&gt;id\" \/&gt;\r\n    @endforeach\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p>&nbsp;<\/p>","category_id":"2","is_private":"0","created_at":"2025-01-26T03:01:04.000000Z","updated_at":"2026-02-01T11:51:08.000000Z","category":{"id":2,"user_id":"1","name":"Laravel Core","slug":"laravel-nhyt","parent_id":"1","created_at":"2023-03-14T03:58:27.000000Z","updated_at":"2023-03-20T11:30:50.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"https:\/\/www.youtube.com\/watch?v=bY58EfPqXXg&amp;list=PL1JpS8jP1wgC8Uud_DKhL3jAtcPzeQ9pn&amp;index=2Livewire lets you make your web pages int - LiveWire laravel tutorial online (Updated: February 1, 2026) - Read more about LiveWire laravel tutorial online at my programming site [SITE]","categories":[]}