Laravel Livewire: A Full-stack Framework for Laravel

Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

If you are using livewire with Laravel then you don’t worry about writing jquery ajax code, livewire will help to write very simple way jquery ajax code using PHP without page refresh Laravel validation will work, the form will submit etc.

Laravel Livewire release adds the following:

• Turbolinks integration
• Alpine JS integration
• Support for wire:model listening for “input” events dispatched by AlpineJS: $dispatch(‘input’, ‘foo’)
• Support for wire:custom-event=”foo” receiving params from an AlpineJS dispatch: $dispatch(‘custom-event’, ‘bar’).
• Livewire custom-tag syntax

What does the Laravel Livewire do?

• Livewire renders the initial component output with the page (like a Blade include), this way it is SEO friendly.
• When an interaction occurs, Livewire makes an AJAX request to the server with the updated data.
• The server re-renders the component and responds with the new HTML.
• Livewire then intelligently mutates DOM according to the things that changed.

To get started please follow below link :

1. Install Laravel 7
   First of all, we need to create a Laravel 7 version application using bellow command:

    

   composer create-project --prefer-dist laravel/laravel idea
   

2. Create Migration and Model
   Now we will create migration and model for it

    

   php artisan make:migration create_ideas_table

   <?php
     
   use Illuminate\Database\Migrations\Migration;
   use Illuminate\Database\Schema\Blueprint;
   use Illuminate\Support\Facades\Schema;
     
   class CreateIdeasForms extends Migration
   {
       /**
        * Run the migrations.
        *
        * @return void
        */
       public function up()
       {
           Schema::create('ideas', function (Blueprint $table) {
               $table->bigIncrements('id');
               $table->string('text');
               $table->text('description');
               $table->timestamps();
           });
       }
     
       /**
        * Reverse the migrations.
        *
        * @return void
        */
       public function down()
       {
           Schema::dropIfExists('ideas');
       }
   }
   php artisan migrate
   

   Now we will create Idea model by using the following command:

   php artisan make:model Idea
   
   <?php
   
   namespace App;
   
   use Illuminate\Database\Eloquent\Model;
     
   class Idea extends Model
   {
        /**
        * The attributes that are mass assignable.
        *
        * @var array
        */
       protected $fillable = [
           'text', 'description',
       ];
   }
   

3. Install Livewire
   Now install livewire to our application.

    

   composer require livewire/livewire

4. Create Component
   Now create livewire form component using bellow command.php artisan make:livewire idea-form Now they created files on both path:
   app/Http/Livewire/IdeaForm.php
   resources/views/livewire/idea-form.blade.phpNow both file we will update as bellow for our idea us form.app/Http/Livewire/IdeaForm.php

    

   <?php
   
   namespace App\Http\Livewire;
     
   use Livewire\Component;
   use App\Idea;
     
   class IdeaForm extends Component
   {
       public $text;
       public $description;
     
       public function submit()
       {
           $validatedData = $this->validate([
               'text' => 'required|min:6',
               'description' => 'required',
           ]);
     
           Idea::create($validatedData);
     
           return redirect()->to('/form');
       }
     
       public function render()
       {
           return view('livewire.idea-form');
       }
   }
   
   resources/views/livewire/idea-form.blade.php
   
   <form wire:submit.prevent="submit">
   
   <div class="form-group">
           <label for="forText">Name</label>
           <input type="text" class="form-control" id="forText" placeholder="Enter name" wire:model="name">
           @error('name') <span class="text-danger">{{ $message }}</span> @enderror
       </div>
     
       <div class="form-group">
           <label for="forDescription">Body</label>
           <textarea class="form-control" id="forDescription" placeholder="Enter Body" wire:model="body"></textarea>
           @error('body') <span class="text-danger">{{ $message }}</span> @enderror
       </div>
     
       <button type="submit" class="btn btn-primary">Save Idea</button>
   </form>
   
   
   

5. Create Route
   Now create route for our form.

    

   routes/web.php
   
   Route::get('/form', function () {
       return view('form');
   });
   

6. Create View File
   Now we will create blade file which is used in our route. In this file we will use @livewireStyles for styles, @livewireScripts for scripts and @livewire(‘idea-form’) for form tag.resources/views/form.blade.php

    

   <!DOCTYPE html>
   <html>
   <head>
   <title></title>
   @livewireStyles
   <link rel=”stylesheet” href=”{{ asset(‘css/app.css’) }}”>
   </head>
   <body><div class=”container”><div class=”card”>
   <div class=”card-header”>
   My first Laravel Livewire Example
   </div>
   <div class=”card-body”>
   @livewire(‘idea-form’)
   </div>
   </div></div></body>
   <script src=”{{ asset(‘js/app.js’) }}”></script>
   @livewireScripts
   </html>

   Now we will start the server to see the magic.

   php artisan serve

   Please open your browser and paste below link in it.

   http://localhost:8000/form

As we have implemented an example of Form using Laravel Livewire and seen the magic of it simplifying the complex jquery ajax code using PHP. So, try it and if you still face any difficulties feel free to reach out our Laravel Experts.