How to Use Laravel 7 New Blade Components Feature
According to Laravel, “components and slots provide similar benefits to sections and layouts; however, some may find the mental model of components and slots easier to understand. There are two approaches to writing components: class based components and anonymous components.”
Let’s use blade components:
Table of Contents
Create a Component
The make:component
command will place the component in the App\View\Components
directory. Run this command to create a component named Alert:
php artisan make:component Alert
This command will create two files:
- app\View\Components\Alert.php
- resources\views\components\alert.blade.php
Open open the alert.blade.php and modify like this:
<div>
<h3>This is Alert Component</h3>
</div>
Render Component
We can easily render component in blade file. The syntax:
<x-alert/>
x-
followed by the kebab case name of component class. Now let’s render in a blade file:
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<!-- alert component -->
<x-alert />
</div>
Pass Data to Component
It’s similar to Vue.js’s props
. We can pass data to component using HTML attribute. We’re going to pass type and message data to the alert component.
Modify Alert.php like this:
class Alert extends Component
{
public $type, $message;
public function __construct($type, $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');
}
}
Then modify alert.blade.php:
<div class="alert alert-{{$type}}">
<h3>{{$message}}</h3>
</div>
Now render the component in blade like:
<!-- hardcoded values -->
<x-alert type="success" message="Successfully Stored"/>
<!-- variables -->
<x-alert :type="$type" :message="$message"/>
Auto Discovery
Components are automatically discovered by Laravel in app/View/Components
and resources/views/components
directories.
We can add nested components too. Example:
The nested component: App\View\Components\Alerts\Success.php
Use in blade file like:
<x-alerts.success/>
To indicate directory nesting, we have to use .
notation.
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)