Level-5; Sheikh Hasina Software Technology Park, Jessore, Bangladesh

Let’s develop a Laravel Component

Read all about software development and Coding

Let’s develop a Laravel Component

Laravel component is added from version 5.4 to make life more easier. This feature was inspired by Vue.js and allows you to simplify building HTML elements into reusable areas. Step by step I will guide you through. Lets think you want to add a alert component.

Step 1:

Create a file in resources/views/components/alert.blade.php

<div class="alert alert-danger">
    <div class="alert-title">{{ $title }}</div>
    {{ $slot }}

Explanation: Here {{$title}} is a variable you can pass from other file. Any content not within a @slot directive will be passed to the component in the $slot variable.

Step 2:

Now you want to use the alert component. Let call alert component from home.blade.php

method 1:

       Hello World!!!
    <strong>Whoops!</strong> Something went wrong!

method 2:

@component('components.alert', ['title' => 'hello world!!!'])
    <strong>Whoops!</strong> Something went wrong!

Now alert div will show in your homepage.

Aliasing Components

You can also shorten texting to call a component,  @component('components.alert') to @alert. In that case you have register the component in AppServiceProvider.php

use Illuminate\Support\Facades\Blade;

Blade::component('components.alert', 'alert');

Once the component has been aliased, you may render it using a directive:

@alert(['title' => 'hello world!!!'])
    You are not allowed to access this resource!

This is how you can manage monster size of markup in developing a project using Laravel Component, for example using modal, panel, card, tooltips multiple times

You can learn more about Blade component aliases in the Components and Slots section of the documentation.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.