Only until March 18th: coupon LARAVEL12 for 40% off Yearly/Lifetime membership!

Read more here
Courses

Livewire 3 From Scratch: Practical Course

Nested Components and Their "Bug"

Summary of this lesson:
- Creating nested component structure
- Using wire:key for component loops
- Managing parent-child component relationships
- Implementing recursive component rendering

You can include one component into another component in Livewire. Let's imagine we have one component for listing comments, inside it, we have a component to show a comment. So each comment is a Livewire component. There is one crucial aspect to know when adding a nested component.

nested comments component


So we have a Livewire component, CommentsList, where we get the comments, order them and do other needed tasks. Then in the Blade, we show them like so:

resources/views/livewire/comments-list.blade.php:

<div>
@foreach ($comments as $comment)
<livewire:comment-show :$comment wire:key="{{ $comment->id }}" />
@endforeach
</div>

Nothing particular here in the Blade file. The only thing Livewire says...

The full lesson is only for Premium Members.
Want to access all 30 lessons of this course? (108 min read)

You also get:

  • 71 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord