---
title: "Laravel Livewire: A Full-stack Framework for Laravel"
url: "https://live-krishaweb.pantheonsite.io/blog/laravel-livewire-a-full-stack-framework-for-laravel/"
date: "2020-07-28T10:03:23+00:00"
modified: "2024-06-17T09:27:47+00:00"
type: "Article"
resource: "https://live-krishaweb.pantheonsite.io/blog/laravel-livewire-a-full-stack-framework-for-laravel/"
timestamp: "2024-06-17T09:27:47+00:00"
author:
  name: "Nirav"
  url: "https://www.krishaweb.com"
categories:
  - "Web Development"
tags:
  - "FullStack Framework"
  - "Laravel"
  - "Laravel Livewire"
  - "Livewire"
word_count: 773
reading_time: "4 min read"
summary: "Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel."
description: "Laravel Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple. Let\'s see its magic with an example of Form here..."
keywords: "Laravel Livewire, FullStack Framework, Laravel, Livewire"
language: "en"
schema_type: "Article"
related_posts:
  - title: "15 Reasons Why Laravel is Best for Web App Development"
    url: "https://live-krishaweb.pantheonsite.io/blog/why-laravel-is-best-for-web-app-development/"
---

# Laravel Livewire: A Full-stack Framework for Laravel

_Published: Tuesday,July 28, 2020_  
_Author: Nirav_  

![Laravel Livewire](https://d1hdtc0tbqeghx.cloudfront.net/wp-content/uploads/2020/07/27141257/laravel-livewire.jpg)

![Laravel Livewire](https://www.krishaweb.com/wp-content/uploads/2020/07/laravel-livewire.jpg)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 :

https://laravel-livewire.com/docs/quickstart 1. **Install Laravel 7** First of all, we need to create a Laravel 7 version application using bellow command: ```
    <strong>composer create-project --prefer-dist laravel/laravel idea
    </strong>
    ```

    2. **Create Migration and Model**
    Now we will create migration and model for it ```
    <strong>php artisan make:migration create_ideas_table</strong>
    ```

    ```
    <?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');
        }
    }
    <strong>php artisan migrate</strong>
    ```

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

    ```
    <strong>php artisan make:model Idea</strong>

    <?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. ```
    <strong>composer require livewire/livewire</strong>
    ```

    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">

                <label for="forText">Name</label>
            <input type="text" class="form-control" id="forText" placeholder="Enter name" wire:model="name">
            @error('name') {{ $message }} @enderror

                    <label for="forDescription">Body</label>
            <textarea class="form-control" id="forDescription" placeholder="Enter Body" wire:model="body"></textarea>
            @error('body') {{ $message }} @enderror

        <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.

    ```
    <strong>php artisan serve</strong>
    ```

    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***](https://www.krishaweb.com/contact-us).

##  Hire the right Laravel Development Company with confidence!

  [Let's Talk](https://www.krishaweb.com/contact-us/)     ![author](https://d1hdtc0tbqeghx.cloudfront.net/wp-content/uploads/2023/06/22062906/NIRAV-1.png)

###### Nirav Panchal

 Lead – Custom DevelopmentLead of the Custom Development team at KrishaWeb, holds AWS certification and excels as a Team Leader. Renowned for his expertise in Laravel and React development. With expertise in cloud solutions, he leads with innovation and technical excellence.

  ![author](https://d1hdtc0tbqeghx.cloudfront.net/wp-content/uploads/2023/06/22062906/NIRAV-1.png)  Interact With Me- [ <svg class="icon" height="16" width="16"> <use xlink:href="https://live-krishaweb.pantheonsite.io/wp-content/themes/krishaweb-v4/assets/images/sprite.svg#profile-twitter"> </use> </svg> ](https://twitter.com/iamNiravPanchal)
- [ <svg class="icon" height="16" width="16"> <use xlink:href="https://live-krishaweb.pantheonsite.io/wp-content/themes/krishaweb-v4/assets/images/sprite.svg#profile-linkedIn"> </use> </svg> ](https://www.linkedin.com/in/nirav-panchal-5b299385/)
- [ <svg class="icon" height="16" width="16"> <use xlink:href="https://live-krishaweb.pantheonsite.io/wp-content/themes/krishaweb-v4/assets/images/sprite.svg#envolpe"></use> </svg> ](mailto:niravp@krishaweb.com)


---

_View the original post at: [https://live-krishaweb.pantheonsite.io/blog/laravel-livewire-a-full-stack-framework-for-laravel/](https://live-krishaweb.pantheonsite.io/blog/laravel-livewire-a-full-stack-framework-for-laravel/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.6.1_  
_Generated: 2026-08-17 15:26:59 UTC_