Laravel Blade components - Create Components in Laravel

In this tutorial, I will give you an example of “Laravel Blade components”, So you can easily apply it with your laravel 7, laravel 8, and laravel 9 application.

First, what we’re doing here, This is the example :

Laravel components

Laravel components are an advanced feature, which is added from laravel 7th version. In this tutorial, we discuss what is component, how to make and use components in the blade template and pass data in the component.

Laravel blade component example

A component is a piece of code, which we can reuse in any blade template. It’s something similar to sections, layouts, and includes. For example, we use the same bootstrap alert example for each template, so we can create a Bootstrap Alert component, which we can reuse.

The use of components for better understanding is that you need to use a Sign-Up button on the website at many places, like in the header, footer, or any other place on the website. Then make a component of that button code and reuse it.

Related article:- How to Display Session Flash Message in Laravel 8.

Make Component in Laravel

php artisan make:component Alert

This command makes two files in your laravel project.

One PHP file is created with the name of Alert.php inside app/http/View/Components directory.

And another HTML file is created with the name of alert.blade.php inside resources/views/components/ directory.

Let’s create a Bootstrap alert and call it on the blade file, where ever you want to show an alert message.

app\View\Components\Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public $type;
    public $message;

    public function __construct($type=NULL,$message=NULL)
    {
        $this->type = $type;  
        $this->message = $message;    

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    }
    public function render()
    {
        return view('components.alert');
    }
}

resources\views\components\alert.blade.php

<div class="row justify-content-end mb-1">
    <div class="col-sm-12 float-right">
      @if(Session::has('message'))
       <div class="alert alert-{!! session('type')!!} alert-dismissible p-2">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>{!! session('message')!!}.
       </div>
       @endif
    </div>
 </div>

Create a Controller :

php artisan make:controller ComponentExampleController

routes\web.php :

#Component Alert Example 

Route::get('/student-add', [ComponentExampleController::class, 'create'])->name('student.create');
Route::get('/student-list', [ComponentExampleController::class, 'index'])->name('student.index');
Route::post('/student-store', [ComponentExampleController::class, 'store'])->name('student.store');

app\Http\Controllers\ComponentExampleController.php :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Student;

class ComponentExampleController extends Controller
{
    public function create()
    {
        return view('exapmple-component-use.add-student');
    }

    public function index()
    {
        $students = Student::get();
        return view('exapmple-component-use.list-student',compact('students'));
    }

    public function store(Request $request)
    {
        $student = new Student();
        $student->name = $request->name;
        $student->email = $request->email;
        $student->phone = $request->phone;
        $student->save();
        return redirect()->route('student.index')->with(['type'=>'danger','message'=>'Something went Wrong.']);
    }
}

resources\views\example-component-use\add-student.blade.php


   <main>
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-lg-6">
               <div class="main">
                  <h3><a>Laravel Blade components Example</a></h3>
                  <form role="form" action="{{route('student.store')}}" method="post">
                     @csrf
                     <div class="form-group">
                        <label for="name">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required>
                     </div>
                     <div class="form-group">
                        <label for="email">Email <span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control" required>
                     </div>
                     <div class="form-group">
                        <label for="phone">Phone <span class="text-danger">*</span></label>
                        <input type="phone" name="phone" class="form-control" required>
                     </div>
                     <div class="form-group">
                     <button type="submit" class="btn btn btn-secondary">save</button>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </main>

resources\views\example-component-use\list-student.blade.php

Call alert Mesage in Laravel :-


       <div class="container">
       
        <x-alert/>

         <h3>Laravel Blade components Example</h3>
         <table class="table">
            <thead>
               <tr>
                  <th>S.no</th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Phone</th>
               </tr>
            </thead>
            <tbody>
               @foreach($students as $key => $student)
               <tr>
                  <td>{{ $key+1 }}</td>
                  <td>{{ $student->name }}</td>
                  <td>{{ $student->email }}</td>
                  <td>{{ $student->phone }}</td>
               </tr>
            </tbody>
            @endforeach
         </table>
      </div>

<strong>Syntax:-</strong> <x-alert/>

Output:-

display a alert message using component in laravel

In this article, we learned “How to use Laravel Blade components in Laravel”, I hope this article will help you with your Laravel application Project.

Gaurav Pandey

Hi, My name is Gaurav Pandey. I'm a Laravel developer, owner of 8Bityard. I live in Uttarakhand - India and I love to write tutorials and tips that can help other developers. I am a big fan of PHP, Javascript, JQuery, Laravel, WordPress. connect@8bityard.com

Laravel components

Laravel blade component example

Make Component in Laravel

Gaurav Pandey

Related Posts