Livewire Components

Livewire components inside modules are registered with namespaced aliases using the <livewire:module::component /> syntax. This version of the package targets Livewire v3 and discovers class-based components from each module's Livewire/ directory.

This feature is conditional. If Livewire isn't installed, the package skips it entirely. No configuration needed.

'livewire-components' => [
    'active' => true,
    'patterns' => [
        '*/Livewire',
    ],
],

The patterns array controls where class-based components are discovered. The package scans each matched directory for non-abstract classes extending Livewire\Component.

Put a PHP class in the Livewire/ directory and a matching Blade view in Resources/views/livewire/:

// Modules/Blog/Livewire/PostEditor.php
namespace Modules\Blog\Livewire;

use Livewire\Component;
use Modules\Blog\Models\Post;

class PostEditor extends Component
{
    public Post $post;
    public string $title = '';
    public string $body = '';

    public function mount(Post $post): void
    {
        $this->post = $post;
        $this->title = $post->title;
        $this->body = $post->body;
    }

    public function save(): void
    {
        $this->post->update([
            'title' => $this->title,
            'body' => $this->body,
        ]);

        session()->flash('saved', true);
    }

    public function render()
    {
        return view('blog::livewire.post-editor');
    }
}

The view file lives under the module's view directory:

{{-- Modules/Blog/Resources/views/livewire/post-editor.blade.php --}}
<form wire:submit="save">
    <input wire:model="title" type="text">
    <textarea wire:model="body"></textarea>
    <button type="submit">Save</button>

    @if(session('saved'))
        <span>Saved!</span>
    @endif
</form>

Use it in any Blade template:

<livewire:blog::post-editor :post="$post" />

Modules/Blog/
├── Livewire/
│   ├── PostEditor.php              // <livewire:blog::post-editor />
│   └── Comments/
│       └── CommentList.php         // <livewire:blog::comments.comment-list />
└── Resources/
    └── views/
        └── livewire/
            ├── post-editor.blade.php
            └── comments/
                └── comment-list.blade.php

The module name becomes a kebab-case prefix. Path segments are kebab-cased and dot-joined:

The component is registered with Livewire using Livewire::component($name, $class), so the namespaced tag resolves to the correct class automatically.

Both Blade tag syntax and the @livewire directive work:

{{-- Tag syntax --}}
<livewire:blog::post-editor :post="$post" />

{{-- Directive syntax --}}
@livewire('blog::post-editor', ['post' => $post])

Test module Livewire components using the namespaced alias:

use Livewire\Livewire;

Livewire::test('blog::post-editor', ['post' => $post])
    ->set('title', 'Updated Title')
    ->call('save')
    ->assertHasNoErrors();

This version of the package requires Livewire v3. It does not support Livewire v4 features like single-file components (SFC) or multi-file components (MFC). If you need v4 support, use the 3.x version of this package.

Set 'livewire-components.active' => false to disable Livewire component registration. Adjust 'livewire-components.patterns' if your modules use a different directory for Livewire components.