Components

Components allows views to re-use the same markup multiple places in the application, without having to copy it’s declaration. Components are files that are stored in the resources/views/components/ subdirectory in your application.

When writing components in your application, components are automatically discovered, so no manual registration is required to use them.

Creating components

Components must exist within the resources/views/components/ subdirectory in your application and use the .html.php file extension. For example, to create an alert component:

<div type="alert">
    An error occured.
</div>

You can then reference the component using it’s relative path, prefixed with x-:

<html>
    <body>
        <x-alert></x-alert>
    </body>
</html>

Passing attributes

A static component can only do so much, so components also support passing attributes to them, which can then be used inside of the component. For example, if we change the component to use the template:

<div type="alert" class="alert alert-{{ $type }}">
    {{ $message }}
</div>

Then, we can pass the message using an attribute, when using it:

<html>
    <body>
        <x-alert type="error" message="User could not be found."></x-alert>
    </body>
</html>

This would render into:

<html>
    <body>
        <div type="alert" class="alert alert-error">
            User could not be found.
        </div>
    </body>
</html>

Slots

You will often want to create more complex components, which needs more than just text interpolation. For this, you can use “slots”, which will replace parts of the component markup. Let’s take the same component as before, but use slots for it’s content:

<div type="alert">
    <slot />
</div>

Then, when we reference the component, we can pass markup into it’s body content:

<x-alert>
    <b>Error:</b> user could not be found.
</x-alert>

This will emplace the given content into the slot-tag and render into the following:

<div type="alert">
    <b>Error:</b> user could not be found.
</div>

Fallback / default content

You also don’t need to define the content of the slot every time, if it will likely stay the same. For that, it might be better to define the default content of a slot, like so:

<div type="alert">
    <slot>
        <!-- Default content -->
        An error occured.
    </slot>
</div>

If the component is referenced without providing the slot, the fallback content will be shown:

<x-alert></x-alert>

This will render the default content:

<div type="alert">
    An error occured.
</div>

But if we provide content for the slot:

<x-alert>
    <b>Warning:</b> connection lost.
</x-alert>

Then the provided content will be rendered instead:

<div type="alert">
    <b>Warning:</b> connection lost.
</div>

Named slots

Sometimes, you need more than a single slot for a component. To facilitate that, you can use “named slots”. Let’s use the same alert component:

<div type="alert">
    <span class="alert-title">
        <slot #title />
    </span>

    <slot />
</div>

We have defined an additional slot named title. Slots are named by prefixing the name with a hashtag (#) as an attribute. We can then define the content of the given slot, by using template-tags:

<x-alert>
    </template #title>
        Could not save user.
    </template>

    <template>
        <b>Error:</b> user could not be found.
    </template>
</x-alert>

Here, the template-tag with the #title attribute defines the content of the title-slot, whereas the template-tag without any attributes defines the content of the default slot.