Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Nesting Livewire v4 Components

Build complex UIs with nested components.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Parent Component
  2. Dynamic Components

Nest components for modular architecture.

Parent Component

blade
<div>
    <h1>{{ $post->title }}</h1>
    <livewire:comments :post="$post" />
</div>

Dynamic Components

blade
@foreach($widgets as $widget)
    <livewire:dynamic-component 
        :is="$widget->type"
        :data="$widget->data"
        wire:key="widget-{{ $widget->id }}"
    />
@endforeach
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read