Courses

Livewire 3 From Scratch: Practical Course

Nested Components and Their "Bug"

You're reading a FREE PREVIEW of a PREMIUM course.
Login Or Join Premium ($129/year or $29/mo)
Summary of this lesson:
- Creating nested component structure
- Using wire:key for component loops
- Managing parent-child component relationships
- Implementing recursive component rendering

Link to the repository

[Only for premium members]

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 text lessons of this course? (108 min read)

You also get:

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