Hello Friends,

This simple article demonstrates of How to create and use Component in Laravel Blade?. if you want to see example of laravel create blade component then you are a right place. if you want to see example of how to create blade component in laravel then you are a right place.

In this post, we will create "x-post" using component artisan command. we will pass post object as argument. "x-post" component will display title and body of posts table. then we will use "x-post" component in for each loop. you can see following step to done this example.

step by step explain laravel create blade component and use it.

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app

Here, we need create database migration for Posts table and also we will create model for files table.

php artisan make:migration create_posts_table

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

php artisan migrate

now we will create Post.php model by using following command:

php artisan make:model Post

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

In this step, we will create routes for view posts. so create get routes here.

<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::get('posts', [PostController::class, 'index']);
   

In this step, we will create PostController file and add following code on it.

<?php

namespace App\Http\Controllers;

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

class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        $posts = Post::latest()->take(5)->get();

        return view('posts', compact('posts'));
    }
}

To create component you can use the artisan command like so:

php artisan make:component Post

Once running this command you will see two files created, which are app/View/Components/Post.php and resources/views/components/post.blade.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Post extends Component
{
    public $post;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($post)
    {
        $this->post = $post;
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function format($content)
    {
        return substr($content, 0, 50) . "...";
    }

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

<tr>
    <td>{{ $post->id }}</td>
    <td>{{ $post->title }}</td>
    <td>{{ $format($post->body) }}</td>
    <td>
        <a class="btn btn-info">Show</a>
    </td>
</tr>

Here, in this step we will create view file.

so, let's create it and add bellow code on it.

<!DOCTYPE html>
<html>
<head>
    <title>How to create and use Component in Laravel Blade? - mywebtuts.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
      
<div class="container">
    <h1>How to create and use Component in Laravel Blade? - mywebtuts.com</h1>
  
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Body</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($posts as $post)
                <x-post :post="$post" />
            @endforeach
        </tbody>
    </table>

</div>

</html>

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/posts

now it works...

I hope it can help you...