Level-5; Sheikh Hasina Software Technology Park, Jessore, Bangladesh
+8801976062011
shahanur.sharif84

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 }}
</div>

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:

@component('components.alert')
    @slot('title')
       Hello World!!!
    @endslot
    <strong>Whoops!</strong> Something went wrong!
@endcomponent

method 2:

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

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!
@endalert

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.

 

Creator of Shapecss, full stack developer and founder of MicroDreamIT. I wish to feel good if my blog help you developing your coding and career. I am also looking for project and consultancy. Please keep in touch with me in my twitter, facebook or other social network.

 

Leave a Reply

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