README

Laravel Scoped Slots is a powerful Blade extension that brings scoped slots functionality to Laravel, inspired by modern frontend frameworks like Vue.js and Svelte.

It allows child components to expose data back to the parent's slot content using an elegant let syntax, while seamlessly preserving the parent view's variable scope.

Installation

You can install the package via composer:

composer require eduardoribeirodev/laravel-scoped-slots

The package will automatically register its service provider. If you have package discovery disabled, you can manually register EduardoRibeiroDev\LaravelScopedSlots\LaravelScopedSlotsServiceProvider in your bootstrap/providers.php.

Why Scoped Slots?

In standard Laravel Blade, slots are static HTML strings. If you build a highly reusable component (like a list, a table, or a dropdown), the child component controls the loop or the logic, making it difficult to format each item from the parent view.

With Scoped Slots, the child component provides the data, but the parent view defines how it should be rendered.

Usage

Scoped slots are ideal when the child component owns the iteration or the data-loading logic, but the parent view should decide how each item is rendered. The component exposes values to the slot, and the parent receives them through the let attribute.

Basic Example

Let's say you have a List component that iterates over an array, but you want the parent view to dictate how each list item looks.

1. Using the Component (Parent View): You can use the let attribute to capture the variable exposed by the component.

<x-list :items="$users" let="user">
    <!-- $user is provided by the child component -->
    <div class="user-card">
        <h3>{{ $user->name }}</h3>
        <p>{{ $user->email }}</p>
    </div>
</x-list>

2. Defining the Component (resources/views/components/list.blade.php): Inside the component, the $slot becomes a callable function. You can invoke it and pass the data.

<div class="list-wrapper">
    @foreach($items as $item)
        <!-- Call the slot and pass the variable -->
        {{ $slot($item) }}
    @endforeach
</div>

Now, let's say you want to pass multiple variables back to the parent. You can do that too! A carousel is a great example of where scoped slots shine. The child component can manage the list of slides, while the parent decides the exact markup for each card or panel.

Parent View:

<x-carousel :items="$slides" let="slide, index">
    <article class="slide-card">
        <span class="slide-index">#{{ $index + 1 }}</span>
        <h3>{{ $slide['title'] }}</h3>
        <p>{{ $slide['description'] }}</p>
        <img src="{{ $slide['image'] }}" alt="{{ $slide['title'] }}">
    </article>
</x-carousel>

Child Component (resources/views/components/carousel.blade.php):

<section class="carousel" aria-label="Featured content">
    <div class="carousel-track">
        @foreach($items as $index => $item)
            {{ $slot(
                item: $item,
                index: $index
            ) }}
        @endforeach
    </div>
</section>

This pattern is especially useful when you want to keep the component reusable while still allowing each page or view to define its own presentation. Named arguments such as item: and index: make the slot invocation more explicit and easier to read, especially when several values are passed at once.

Multiple Parameters

You can pass multiple variables back to the parent (for example, an item and its index).

Parent View:

<x-list :items="$users" let="user, index">
    <li>#{{ $index }} - {{ $user->name }}</li>
</x-list>

Child Component:

<ul>
    @foreach($items as $index => $item)
        {{ $slot($item, $index) }}
    @endforeach
</ul>

Supported Syntax Styles

The package provides developers with syntactic sugar that adapts to your coding style. The $ symbol in the parameter name is optional; the package will inject it automatically if omitted.

All of the following syntaxes are perfectly valid and behave exactly the same:

Vue.js Style (String):

<x-my-component let="item">
<x-my-component let="item, index">

Svelte Style (Colon):

<x-my-component let:item>
<x-my-component let:item,index>

With Explicit Variable Symbols ($):

<x-my-component let="$item, $index">
<x-my-component let:$item>

Named Scoped Slots

Scoped slots are not restricted to the default $slot. You can use them on named slots using Laravel's <x-slot:name> syntax, which is useful when a component needs to expose different templates for different parts of the UI.

Parent View:

<x-table>
    <x-slot:header let="column">
        <th>{{ strtoupper($column) }}</th>
    </x-slot:header>

    <x-slot:row let="row, index">
        <tr>
            <td>{{ $index }}</td>
            <td>{{ $row->name }}</td>
        </tr>
    </x-slot:row>
</x-table>

Child Component (table.blade.php):

<table>
    <thead>
        <tr>
            @foreach($columns as $column)
                {{ $header($column) }}
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach($data as $index => $row)
            {{ $row($row, $index) }}
        @endforeach
    </tbody>
</table>

This is especially handy for components like tables, accordions, tabs, and lists where the container structure is fixed but the content inside each section should be customizable by the consuming view.

Under the Hood (Blade Directives)

The syntactic sugar (let="...") works by hooking into Blade's pre-compiler and transforming your tags into raw Blade directives provided by this package.

If you ever need to use the directives directly (for example, outside of an <x-> tag), you can use @scopedslot and @endscopedslot.

@scopedslot('slot', ($item, $index))
    <div>{{ $index }}: {{ $item->name }}</div>
@endscopedslot

Parent Scope Preservation

When writing standard closures in PHP, you typically lose access to external variables unless you use them. This package intelligently binds the parent view's variable scope ($__scopedSlotVars) into the slot definition.

This means you can freely use variables from the parent view inside your scoped slot without any extra configuration!

@php $highlightColor = 'red'; @endphp

<x-list :items="$users" let="user">
    <!-- $highlightColor is automatically available here! -->
    <span style="color: {{ $highlightColor }}">{{ $user->name }}</span>
</x-list>

License

This package is open-sourced software licensed under the MIT license. Check the LICENSE file for more information.

Credits

• Built for Laravel
• Created by Eduardo Ribeiro

Support

For issues, questions, or contributions, please visit the GitHub repository. Don't forget, Jesus loves you ❤️.