Components and slots in Laravel - Mini Project: Build & Apply

Building a Laravel Component with Slots

📖 Scenario: You are creating a reusable alert box component for a Laravel Blade template. This alert box will have a title and a message. You want to use Laravel components and slots to make it easy to reuse and customize the alert box in different parts of your website.

🎯 Goal: Build a Laravel Blade component called alert-box that accepts a title attribute and uses a default slot for the alert message content.

📋 What You'll Learn

Create a Blade component file named alert-box.blade.php with a title attribute

Use a slot to display the alert message inside the component

Use the component in a Blade view passing the title and slot content

Ensure the component renders the title and message correctly

💡 Why This Matters

🌍 Real World

Reusable components with slots help you build consistent UI elements like alerts, modals, and cards in Laravel projects.

💼 Career

Understanding Laravel components and slots is essential for modern Laravel development and improves code reuse and maintainability.

1

Create the Blade component file with a title attribute

Create a Blade component file named alert-box.blade.php inside the resources/views/components directory. Define a $title attribute at the top using @props(['title']). Inside the component, add a <div> with a class alert-box and inside it add an <h3> tag that displays the $title variable.

Laravel

@props(['title'])

    {{ $title }}
    

Need a hint?

Use @props(['title']) to declare the title attribute. Use {{ $title }} to display it inside the <h3> tag.

2

Add a slot to display the alert message inside the component

Inside the div with class alert-box, below the h3 tag, add the Blade slot directive {{ $slot }} to display the content passed into the component slot.

Laravel

@props(['title'])

    {{ $title }}
    

Need a hint?

Use {{ $slot }} to show the content passed between the component tags.

3

Use the alert-box component in a Blade view with title and slot content

In a Blade view file (e.g., resources/views/welcome.blade.php), use the alert-box component with the syntax <x-alert-box title="Warning">This is an important alert message.</x-alert-box>.

Laravel

@props(['title'])

    {{ $title }}
    {{ $slot }}

Need a hint?

Use the component tag <x-alert-box> with the title attribute and put the alert message between the tags.

4

Add a CSS class to style the alert box

Add a class attribute with value alert-box to the div in the component file alert-box.blade.php. This class will be used for styling the alert box.

Laravel

@props(['title'])

    {{ $title }}
    {{ $slot }}
 

This is an important alert message.

Need a hint?

Make sure the div has the attribute class="alert-box" for styling.