Nesting Components

• Introduction
• Keeping Track Of Components In A Loop
  • Sibling Components in a Loop

Introduction

Livewire supports nesting components. Component nesting can be an extremely powerful technique, but there are a few gotchas worth mentioning up-front:

1. Nested components CAN accept data parameters from their parents, HOWEVER they are not reactive like props from a Vue component.
2. Livewire components should NOT be used for extracting Blade snippets into separate files. For these cases, Blade includes or components are preferable.

Here is an example of a nested component called add-user-note from another Livewire component's view.

            
1class UserDashboard extends Component
2{
3    public User $user;
4}        

            
 1<div>
 2    <h2>User Details:</h2>
 3    Name: {{ $user->name }}
 4    Email: {{ $user->email }}
 5 
 6    <h2>User Notes:</h2>
 7    <div>
 8        @livewire('add-user-note', ['user' => $user])
 9    </div>
10</div>        

Keeping Track Of Components In A Loop

Similar to VueJs, if you render a component inside a loop, Livewire has no way of keeping track of which one is which. To remedy this, livewire offers a special "key" syntax:

            
1<div>
2    @foreach ($users as $user)
3        @livewire('user-profile', ['user' => $user], key($user->id))
4    @endforeach
5</div>        

If you are on Laravel 7 or above, you can use the tag syntax.

            
1<div>
2    @foreach ($users as $user)
3        <livewire:user-profile :user="$user" :wire:key="$user->id">
4    @endforeach
5</div>        

Sibling Components in a Loop

In some situations, you may find the need to have sibling components inside of a loop, this situation requires additional consideration for the wire:key value.

Each component will need its own unique wire:key, but using the method above will lead to both sibling components having the same key, which will cause unforeseen issues. To combat this, you could ensure that each wire:key is unique by prefixing it with the component name, for example:

        
 1<!-- user-profile component -->
 2<div>
 3    // Bad
 4    <livewire:user-profile-one :user="$user" :wire:key="$user->id">
 5    <livewire:user-profile-two :user="$user" :wire:key="$user->id">
 6 
 7    // Good
 8    <livewire:user-profile-one :user="$user" :wire:key="'user-profile-one-'.$user->id">
 9    <livewire:user-profile-two :user="$user" :wire:key="'user-profile-two-'.$user->id">
10</div>