Components feature already existed in Laravel as Blade directives. docs link
But, in Laravel 7, they just took it to a whole new level.
Let's dive in.
Laravel 7 has not been released at the time of writing this article, if you want to follow along, you can download it with below command.
laravel new projectname --dev
Creating Components
A new Artisan command is available to easily create components:
php artisan make:component Alert
This command will create two files:
- a class file (
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 function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.alert');
}
}
- a blade file (
resources/views/components/alert.blade.php
)
<div>
<!-- He who is contented is rich. - Laozi -->
</div>
Let's modify this HTML so that we can see this component in action when we render it.
<div>
<h3>Alert Component</h3>
</div>
Rendering Components
Components are meant to be used within Blade templates. There is a special syntax to use a component in blade file.
x-
followed by the kebab case name of component class.
<x-alert />
Let's use our Alert
component in welcome.blade.php
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div>
<x-alert/>
</div>
</div>
Automatic Discovery
Laravel can automatically discover components in app/View/Components
directory and resources/views/components
directory.
But what if components are nested in directories for example App\View\Components\Alerts\Success.php
?
We can use
.
notation to indicate directory nesting.
<x-alerts.success />
Passing Data to Components
We can pass data via HTML attributes. It's similar to passing props
in a Vue component.
- primitive or a hard coded value
<x-alert type="error" />
- variables and expressions should be passed with
:
prefix
<x-alert :message="$message" />
In component's class, this data should be made available via constructor.
class Alert extends Component
{
public string $type;
public string $message;
public function __construct(string $type, string $message)
{
$this->type = $type;
$this->message = $message;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.alert');
}
}
Notice that both properties are set to public
.
All public properties will be available to component's view file. You don't need to pass the data to view from
render()
method.
alert.blade.php
can use these properties as:
<div>
<div class="alert alert-{{$type}}">
<h3>{{$message}}</h3>
</div>
</div>
There are few other things related to this topic:
- Anonymous components
- Accessing public methods in view but I think we can cover that in Deeper look article 🤷🏻♂️
Calling it First look because I am actually reading docs while writing this article 😂 docs link
Let me know your thoughts about Blade View Components in comments below.
Top comments (6)
This is a proper game-changer, Laravel never ceases to amaze me. I can't wait to master Laravel and have this under my belt for development.
For those who want to see this in action: youtube.com/watch?v=cQWeTnOwlm4
Guys, go check it out. Really good example. 👍
Thanks for sharing it.
Your welcome. That whole channel is pretty cool btw. :)
Looks like need to remember Laravel again :))
Wow.. that will take laravel into new level ..