Switch statements can be constructed using the @switch, @case, @break, @default and @endswitch directives:

In addition to conditional statements, Blade provides simple directives for working with PHP's loop structures. Again, each of these directives functions identically to their PHP counterparts:

@for ($i = 0; $i < 10; $i++)

The current value is {{ $i }}

@foreach ($users as $user)

This is user {{ $user->id }}

@forelse ($users as $user)

I'm looping forever.

While iterating through a foreach loop, you may use the loop variable to gain valuable information about the loop, such as whether you are in the first or last iteration through the loop.

When using loops you may also skip the current iteration or end the loop using the @continue and @break directives:

@foreach ($users as $user)

@if ($user->type == 1)

@if ($user->number == 5)

You may also include the continuation or break condition within the directive declaration:

@foreach ($users as $user)

@continue($user->type == 1)

@break($user->number == 5)

While iterating through a foreach loop, a $loop variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop:

@foreach ($users as $user)

This is the first iteration.

This is the last iteration.

This is user {{ $user->id }}

If you are in a nested loop, you may access the parent loop's $loop variable via the parent property:

@foreach ($users as $user)

@foreach ($user->posts as $post)

@if ($loop->parent->first)

This is the first iteration of the parent loop.

The $loop variable also contains a variety of other useful properties:

The @class directive conditionally compiles a CSS class string. The directive accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:

'font-bold' => $isActive,

'text-gray-500' => ! $isActive,

'bg-red' => $hasError,

Likewise, the @style directive may be used to conditionally add inline CSS styles to an HTML element:

'background-color: red',

'font-weight: bold' => $isActive,

For convenience, you may use the @checked directive to easily indicate if a given HTML checkbox input is "checked". This directive will echo checked if the provided condition evaluates to true:

@checked(old('active', $user->active))

Likewise, the @selected directive may be used to indicate if a given select option should be "selected":

@foreach ($product->versions as $version)

Additionally, the @disabled directive may be used to indicate if a given element should be "disabled":

isNotEmpty())>Submit

Moreover, the @readonly directive may be used to indicate if a given element should be "readonly":

@readonly($user->isNotAdmin())

In addition, the @required directive may be used to indicate if a given element should be "required":

@required($user->isAdmin())

While you're free to use the @include directive, Blade components provide similar functionality and offer several benefits over the @include directive such as data and attribute binding.

Blade's @include directive allows you to include a Blade view from within another view. All variables that are available to the parent view will be made available to the included view:

@include('shared.errors')

Even though the included view will inherit all data available in the parent view, you may also pass an array of additional data that should be made available to the included view:

@include('view.name', ['status' => 'complete'])

If you attempt to @include a view which does not exist, Laravel will throw an error. If you would like to include a view that may or may not be present, you should use the @includeIf directive:

@includeIf('view.name', ['status' => 'complete'])

If you would like to @include a view if a given boolean expression evaluates to true or false, you may use the @includeWhen and @includeUnless directives:

@includeWhen($boolean, 'view.name', ['status' => 'complete'])

@includeUnless($boolean, 'view.name', ['status' => 'complete'])

To include the first view that exists from a given array of views, you may use the includeFirst directive:

@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])

You should avoid using the __DIR__ and __FILE__ constants in your Blade views, since they will refer to the location of the cached, compiled view.

You may combine loops and includes into one line with Blade's @each directive:

@each('view.name', $jobs, 'job')

The @each directive's first argument is the view to render for each element in the array or collection. The second argument is the array or collection you wish to iterate over, while the third argument is the variable name that will be assigned to the current iteration within the view. So, for example, if you are iterating over an array of jobs, typically you will want to access each job as a job variable within the view. The array key for the current iteration will be available as the key variable within the view.

You may also pass a fourth argument to the @each directive. This argument determines the view that will be rendered if the given array is empty.

@each('view.name', $jobs, 'job', 'view.empty')

Views rendered via @each do not inherit the variables from the parent view. If the child view requires these variables, you should use the @foreach and @include directives instead.

The @once directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. This may be useful for pushing a given piece of JavaScript into the page's header using stacks. For example, if you are rendering a given component within a loop, you may wish to only push the JavaScript to the header the first time the component is rendered:

// Your custom JavaScript...

Since the @once directive is often used in conjunction with the @push or @prepend directives, the @pushOnce and @prependOnce directives are available for your convenience:

// Your custom JavaScript...

In some situations, it's useful to embed PHP code into your views. You can use the Blade @php directive to execute a block of plain PHP within your template:

Or, if you only need to use PHP to import a class, you may use the @use directive:

@use('App\Models\Flight')

A second argument may be provided to the @use directive to alias the imported class:

@use('App\Models\Flight', 'FlightModel')

Blade also allows you to define comments in your views. However, unlike HTML comments, Blade comments are not included in the HTML returned by your application:

{{-- This comment will not be present in the rendered HTML --}}

Components and slots provide similar benefits to sections, layouts, and includes; 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.

To create a class based component, you may use the make:component Artisan command. To illustrate how to use components, we will create a simple Alert component. The make:component command will place the component in the app/View/Components directory:

php artisan make:component Alert

The make:component command will also create a view template for the component. The view will be placed in the resources/views/components directory. When writing components for your own application, components are automatically discovered within the app/View/Components directory and resources/views/components directory, so no further component registration is typically required.

You may also create components within subdirectories:

php artisan make:component Forms/Input

The command above will create an Input component in the app/View/Components/Forms directory and the view will be placed in the resources/views/components/forms directory.

If you would like to create an anonymous component (a component with only a Blade template and no class), you may use the --view flag when invoking the make:component command:

php artisan make:component forms.input --view

The command above will create a Blade file at resources/views/components/forms/input.blade.php which can be rendered as a component via .

When writing components for your own application, components are automatically discovered within the app/View/Components directory and resources/views/components directory.

However, if you are building a package that utilizes Blade components, you will need to manually register your component class and its HTML tag alias. You should typically register your components in the boot method of your package's service provider:

use Illuminate\Support\Facades\Blade;

* Bootstrap your package's services.

public function boot(): void

Blade::component('package-alert', Alert::class);

Once your component has been registered, it may be rendered using its tag alias:

Alternatively, you may use the componentNamespace method to autoload component classes by convention. For example, a Nightshade package might have Calendar and ColorPicker components that reside within the Package\Views\Components namespace:

use Illuminate\Support\Facades\Blade;

* Bootstrap your package's services.

public function boot(): void

Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');

This will allow the usage of package components by their vendor namespace using the package-name:: syntax:

Blade will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.

To display a component, you may use a Blade component tag within one of your Blade templates. Blade component tags start with the string x- followed by the kebab case name of the component class:

If the component class is nested deeper within the app/View/Components directory, you may use the . character to indicate directory nesting. For example, if we assume a component is located at app/View/Components/Inputs/Button.php, we may render it like so:

If you would like to conditionally render your component, you may define a shouldRender method on your component class. If the shouldRender method returns false the component will not be rendered:

use Illuminate\Support\Str;

* Whether the component should be rendered

public function shouldRender(): bool

return Str::length($this->message) > 0;

Sometimes components are part of a component group and you may wish to group the related components within a single directory. For example, imagine a "card" component with the following class structure:

App\Views\Components\Card\Card

App\Views\Components\Card\Header

App\Views\Components\Card\Body

Since the root Card component is nested within a Card directory, you might expect that you would need to render the component via . However, when a component's file name matches the name of the component's directory, Laravel automatically assumes that component is the "root" component and allows you to render the component without repeating the directory name:

...

...

You may pass data to Blade components using HTML attributes. Hard-coded, primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix:

You should define all of the component's data attributes in its class constructor. All public properties on a component will automatically be made available to the component's view. It is not necessary to pass the data to the view from the component's render method:

namespace App\View\Components;

use Illuminate\View\Component;

use Illuminate\View\View;

class Alert extends Component

* Create the component instance.

public function __construct(

public string $message,

* Get the view / contents that represent the component.

public function render(): View

return view('components.alert');

When your component is rendered, you may display the contents of your component's public variables by echoing the variables by name:

Component constructor arguments should be specified using camelCase, while kebab-case should be used when referencing the argument names in your HTML attributes. For example, given the following component constructor:

* Create the component instance.

public function __construct(

public string $alertType,

The $alertType argument may be provided to the component like so:

When passing attributes to components, you may also use a "short attribute" syntax. This is often convenient since attribute names frequently match the variable names they correspond to:

{{-- Short attribute syntax... --}}

{{-- Is equivalent to... --}}

Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you may use a double colon (::) prefix to inform Blade that the attribute is not a PHP expression. For example, given the following component:

The following HTML will be rendered by Blade:

In addition to public variables being available to your component template, any public methods on the component may be invoked. For example, imagine a component that has an isSelected method:

* Determine if the given option is the currently selected option.

public function isSelected(string $option): bool

return $option === $this->selected;

You may execute this method from your component template by invoking the variable matching the name of the method:

Blade components also allow you to access the component name, attributes, and slot inside the class's render method. However, in order to access this data, you should return a closure from your component's render method:

* Get the view / contents that represent the component.

public function render(): Closure

return '

Components content

';

The closure returned by your component's render method may also receive a $data array as its only argument. This array will contain several elements that provide information about the component:

return function (array $data) {

// $data['componentName'];

// $data['attributes'];

return '

Components content

';

The elements in the $data array should never be directly embedded into the Blade string returned by your render method, as doing so could allow remote code execution via malicious attribute content.

The componentName is equal to the name used in the HTML tag after the x- prefix. So 's componentName will be alert. The attributes element will contain all of the attributes that were present on the HTML tag. The slot element is an Illuminate\Support\HtmlString instance with the contents of the component's slot.

The closure should return a string. If the returned string corresponds to an existing view, that view will be rendered; otherwise, the returned string will be evaluated as an inline Blade view.

If your component requires dependencies from Laravel's service container, you may list them before any of the component's data attributes and they will automatically be injected by the container:

use App\Services\AlertCreator;

* Create the component instance.

public function __construct(

public AlertCreator $creator,

public string $message,

If you would like to prevent some public methods or properties from being exposed as variables to your component template, you may add them to an $except array property on your component:

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component

* The properties / methods that should not be exposed to the component template.

protected $except = ['type'];

* Create the component instance.

public function __construct(

We've already examined how to pass data attributes to a component; however, sometimes you may need to specify additional HTML attributes, such as class, that are not part of the data required for a component to function. Typically, you want to pass these additional attributes down to the root element of the component template. For example, imagine we want to render an alert component like so:

All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute bag". This attribute bag is automatically made available to the component via the $attributes variable. All of the attributes may be rendered within the component by echoing this variable:

Using directives such as @env within component tags is not supported at this time. For example, will not be compiled.

Sometimes you may need to specify default values for attributes or merge additional values into some of the component's attributes. To accomplish this, you may use the attribute bag's merge method. This method is particularly useful for defining a set of default CSS classes that should always be applied to a component:

merge(['class' => 'alert alert-'.$type]) }}>

If we assume this component is utilized like so:

The final, rendered HTML of the component will appear like the following:

Sometimes you may wish to merge classes if a given condition is true. You can accomplish this via the class method, which accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:

class(['p-4', 'bg-red' => $hasError]) }}>

If you need to merge other attributes onto your component, you can chain the merge method onto the class method:

class(['p-4'])->merge(['type' => 'button']) }}>

If you need to conditionally compile classes on other HTML elements that shouldn't receive merged attributes, you can use the @class directive.

When merging attributes that are not class attributes, the values provided to the merge method will be considered the "default" values of the attribute. However, unlike the class attribute, these attributes will not be merged with injected attribute values. Instead, they will be overwritten. For example, a button component's implementation may look like the following:

merge(['type' => 'button']) }}>

To render the button component with a custom type, it may be specified when consuming the component. If no type is specified, the button type will be used:

The rendered HTML of the button component in this example would be:

If you would like an attribute other than class to have its default value and injected values joined together, you may use the prepends method. In this example, the data-controller attribute will always begin with profile-controller and any additional injected data-controller values will be placed after this default value:

merge(['data-controller' => $attributes->prepends('profile-controller')]) }}>

You may filter attributes using the filter method. This method accepts a closure which should return true if you wish to retain the attribute in the attribute bag:

{{ $attributes->filter(fn (string $value, string $key) => $key == 'foo') }}

For convenience, you may use the whereStartsWith method to retrieve all attributes whose keys begin with a given string:

{{ $attributes->whereStartsWith('wire:model') }}

Conversely, the whereDoesntStartWith method may be used to exclude all attributes whose keys begin with a given string:

{{ $attributes->whereDoesntStartWith('wire:model') }}

Using the first method, you may render the first attribute in a given attribute bag:

{{ $attributes->whereStartsWith('wire:model')->first() }}

If you would like to check if an attribute is present on the component, you may use the has method. This method accepts the attribute name as its only argument and returns a boolean indicating whether or not the attribute is present:

@if ($attributes->has('class'))

Class attribute is present

If an array is passed to the has method, the method will determine if all of the given attributes are present on the component:

@if ($attributes->has(['name', 'class']))

All of the attributes are present

The hasAny method may be used to determine if any of the given attributes are present on the component:

@if ($attributes->hasAny(['href', ':href', 'v-bind:href']))

One of the attributes is present

You may retrieve a specific attribute's value using the get method:

{{ $attributes->get('class') }}

By default, some keywords are reserved for Blade's internal use in order to render components. The following keywords cannot be defined as public properties or method names within your components:

You will often need to pass additional content to your component via "slots". Component slots are rendered by echoing the $slot variable. To explore this concept, let's imagine that an alert component has the following markup:

We may pass content to the slot by injecting content into the component:

Whoops! Something went wrong!

Sometimes a component may need to render multiple different slots in different locations within the component. Let's modify our alert component to allow for the injection of a "title" slot:

{{ $title }}

You may define the content of the named slot using the x-slot tag. Any content not within an explicit x-slot tag will be passed to the component in the $slot variable:

Whoops! Something went wrong!

You may invoke a slot's isEmpty method to determine if the slot contains content:

{{ $title }}

@if ($slot->isEmpty())

This is default content if the slot is empty.

Additionally, the hasActualContent method may be used to determine if the slot contains any "actual" content that is not an HTML comment:

@if ($slot->hasActualContent())

The scope has non-comment content.

If you have used a JavaScript framework such as Vue, you may be familiar with "scoped slots", which allow you to access data or methods from the component within your slot. You may achieve similar behavior in Laravel by defining public methods or properties on your component and accessing the component within your slot via the $component variable. In this example, we will assume that the x-alert component has a public formatAlert method defined on its component class:

{{ $component->formatAlert('Server Error') }}

Whoops! Something went wrong!

Like Blade components, you may assign additional attributes to slots such as CSS class names:

To interact with slot attributes, you may access the attributes property of the slot's variable. For more information on how to interact with attributes, please consult the documentation on component attributes:

class(['border']) }}>

attributes->class(['text-lg']) }}>