Laravel Livewire beginners guide

git add .
git status
git commit -m "message"
git branch -M master
git push -u origin master
git branch -M main
git push -u origin main

new project livewire screencasts

laravel new livewire-screencasts

we install livewire from command line using composer

composer require livewire/livewire

to finish we include javascript file to every file that is using livewire

Include the JavaScript (on every page that will be using Livewire).
@livewireStyles
@livewireScripts
in the blade welcome page

Livewire magic starts

We try now to echo out the

@livewire('hello-world')

we make a first livewire command

php artisan livewire:make hello-world

we will have two files

• one fille in Http folder livewire HelloWorld component

  this file acts like a controller to decide what to send to the view component

• and one file in resources views livewire hello-world.blade.php

  this just return blade view and show data

lets make our first livewire component work

hello {{ $name }}

return view('livewire.hello-world', [
    'name' => 'Jelly',
]);

this will show this

Hello Jelly

or we can use Laravel's feature to pass any public property from a controller to a view automatically

public $name = 'Jelly';

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

our first view interactive livewire view

        <input type="text" wire:model="name">
    hello {{ $name }}

now whatever we type in the input it will be shown in the page without reloading the model binding

we type in the input it will be reflected instantly in the html page

livewire has few options for the model in the view component

First it acts like an html

<input type="text" wire:model="name">
    hello {{ strtoupper($name) }}

Second if we type superfast the page wont be refreshing it will wait until we stop typing which comes out of the box which is something you need to configure in something live Vue or React but we can use bounce or debounce and set it to as much time as we want

<input type="text" wire:model.debounce.1000ms="name">
    hello {{ $name }}

we can update after they click way which is just like Vue's lazy option

<input type="text" wire:model.lazy="name">
    hello {{ $name }}

lets now try to add an if to show and hide the exclamation point

<input type="checkbox" wire:model="loud">
@if ($loud) ! @endif

this will show us a checkbox we can use to show and hide the exclamation point

✅ !

we can use the select option also to make something

<select wire:model="greeting">
        <option>Hello</option>
        <option>Goodbye</option>
        <option>Adios</option>
    </select>

{{ $greeting }}

public @greeting = 'Hello';

hello goodbye Adios

we can take it one step further we implode the greeting array

<select wire:model="greeting" multiple>
        <option>Hello</option>
        <option>Goodbye</option>
        <option>Adios</option>
    </select>
    {{ implode($greeting) }} {{ $name }} @if ($loud) ! @endif

We make sure the greeting variable is an array.

public @greeting = ['Hello'];