Laravel is one of the most commonly used PHP frameworks, providing us with many packages to use and saving time to build any website. Today in this article we will see how to install livewire in Laravel 10. Livewire is used to build a website frontend and backend. It’s very simple and easy to use. So we will see how to install Livewire and create a component for the contact page by using Livewire.

Step required How to install livewire in Laravel 10.

1: Creating a new Laravel Project

2: Installing Livewire

3: Creating Component

4: Creating a migration

5: Storing data and fetching data

 

Creating a new Laravel project

Firstly we need a Laravel fresh project, so run the given command to create a project.

Composer create-project Laravel/Laravel LivewireInstall

Installing livewire

For installing livewire run the given command and install livewire.

composer require livewire/livewire

After installation add @livewireStyles in head section after that add @livewireScripts in body section. With out these file you cant access properly livewire.

Creating Component

So here we will create a component for contact form, and create form for contact. Run the given command to create component.

Php artisan make:livewire ContactComponent

Open created component in your favourite code editor, Resources/views/livewire/ContactComponent.

And paste the given code in it.

<div class="container">
    <div class="row mt-5">
        <div class="col-md-12">
            <div class="mb-3">
                 <div class="card">
                    <div class="card-header">
                        <h2 class="text-center text-light pt-2 pb-2 bg-info">Contact Messages</h2>
                    </div>
                    <div class="card-header">
                        <table class="table">
                            <thead>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Message</th>
                            </thead>
                            <tbody>
                                @foreach ($contact as $message)
                                <tr>
                                    <td>{{$message->name}}</td>
                                    <td>{{$message->email}}</td>
                                    <td>{{$message->message}}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                 </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h2 class="text-center text-light pt-2 pb-2 bg-info">Contact Us</h2>
                </div>
                <div class="card-body">
                    @if (Session::has('message'))
                        <div class="alert alert-success">
                            <strong>
                                {{ Session::get('message') }}
                            </strong>
                        </div>
                    @endif
                   <form wire:submit.prevent="storeMessage">
                    <div class="form-group mb-3">
                        <input type="text" name="name" placeholder="name" wire:model="name" id=""
                            class="form-control">
                        @error('name')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <input type="email" placeholder="email" name="email" wire:model="email" id=""
                            class="form-control">
                        @error('email')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <textarea name="message" class="form-control" wire:model="message" id="" cols="30" rows="10"></textarea>
                        @error('message')
                            <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-info form-control">Submit</button>
                   </form>
                </div>
            </div>
        </div>
    </div>
</div>

Creating migration

So we need a model and migration to store data into database and fetching to show on view file.

Run the given command to creating migration and model.

Php artisan make:model Contact -m

After creating migration update with given code.

$table->string('name');
$table->string('email');
$table->text('message');
$table->timestamps();

Storing and fetching data

So the last step is to store data and show on view file. Update your ContactComponent with given code. Which is available in App\Http\Livewire\ContactComponent.

<?php

namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Contact;
class ContactComponent extends Component
{
    public $name;
    public $email;
    public $message;

    public function updated($fields){
        $this->validateOnly($fields,[
            'name'=>'required',
            'email' =>'required',
            'message' => 'required'

        ]);
    }
    public function storeMessage(){
        $this->validate([
            'name'=>'required',
            'email' =>'required',
            'message' => 'required'
        ]);
        $contact = new Contact;
        $contact->name = $this->name;;
        $contact->email = $this->email;
        $contact->message = $this->message;

        $contact->save();
        session()->flash('message', 'Your message is sended!');
    }
    public function render()
    {
        $contact = Contact::all();
        return view('livewire.contact-component',['contact'=>$contact]);
    }
}

Run this project and test it.

PHP artisan serve

Download Source code