Laravel components is 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 blade template and pass data in the component.
Let’s start with some introduction.
What is Laravel Component?
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 header for each template, so we can create a Header component, which we can reuse.
Another use of components for better understanding is like 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.
How to Make Component in Laravel 8
For example, we create a Header component. Below artisan command is used to create the header component.
|
1 |
php artisan make:component Header |
This command makes two files in your laravel project.
One PHP file is created with the name of Header.php inside app/http/View/Components directory.
And another HTML file is created with the name of header.blade.php inside resources/views/components/ directory.
You can also make components with in subdirectories like:
|
1 |
php artisan make:component Forms/Button |
This command will create a button component in App\View\Components\Forms directory and the blade file will be placed in the resources/views/components/forms directory.
This syntax is used to rendered component in HTML file:
<x-ComponentName/>
Example of Laravel 8 Components
Step 1: First we place some HTML code in the component header.blade.php file.
|
1 2 3 |
<div> <h1> Header Component </h1> </div> |
Step 2: Now create a users.blade.php view file in the resource folder, in which we can use the header component.
|
1 2 |
<x-header /> <h1>User Page</h1> |
Step 3: Now we call users to view the template via laravel routing method, which shows output like that.
Pass Data in Laravel Components
To pass data to balde component using below syntax:
<x-header message=”Users” />
For example, we have used the above component in users.blade.php file.
You should define the component’s data in header.php file. All the public variables data were automatically available to the component’s view.
Add code in header.php file inside app/http/View/Components/ directory.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php namespace App\View\Components; use Illuminate\View\Component; class Header extends Component { /** * The alert type. * * @var string */ public $title = ""; public function __construct($message) { $this->title = $message; } } |
Now add this $title variable in header.blade.php component file to show passed data.
|
1 2 3 |
<div> <h1> {{$title}}'sHeader Component </h1> </div> |
Now this passed component data will show in users view template as below.
Similarly, you may use this component on another view page with different data like create another view file with the name of contact.blade.php file and add below component code to show passed data.
<x-header message=”Contact Us” />
In component, sometimes you need to specify additional HTML attributes, like CSS class name, you can add it directly.
<x-header class=”styleDiv” />
