Skip to main content

Create a new component

Create a new component or modify an existing one to use with the Livewire Page Builder.

PHP Component class​

Create a livewire component​

php artisan make:livewire CustomComponent

Implement the PageBuilderComponentInterface​

use LivewirePageBuilder\Contracts\PageBuilderComponentInterface;

class CustomComponent extends Component implements PageBuilderComponentInterface
{
    ...
}

Use the PageBuilderComponent trait​

This trait will provide the default properties needed to use the Livewire Page Builder.

use LivewirePageBuilder\Traits\PageBuilderComponent;

class CustomComponent extends Component implements PageBuilderComponentInterface
{
    use PageBuilderComponent;

    ...
}

Define the component configuration​

use LivewirePageBuilder\Traits\PageBuilderComponent;
use Livewire\Component;
use LivewirePageBuilder\Interfaces\PageBuilderComponentInterface;

class CustomComponent extends Component implements PageBuilderComponentInterface
{
    use PageBuilderComponent;

    public $title;

    public static function getConfig(): array
    {
        return [
            'name' => __('Custom Component'),
            'description' => __('A description of what your component does'),
            'icon' => '/path/to/icon.svg|.jpg|.png|.gif',
            'allow_children' => false,
            'props' => [
                'title' => [ // Key should be the same as the property name
                    'type' => \LivewirePageBuilder\Props\Text::class,
                    'label' => __('Title'),
                    'default' => __('Default Title'),
                ],
            ],
        ];
    }
}

Blade view​

Update the blade view to use Livewire Page Builder.

Add the component wrapper​

<x-lpb::component-wrapper>
    ...
</x-lpb::component-wrapper>

<x-lpb::component-wrapper> should be the root element of the component.

Support children components​

If the component supports children components, you can add the allow_children property to the component configuration.

'allow_children' => true,

Render children components​

<x-lpb::component-wrapper>
    ...
    @foreach ($children ?? [] as $child)
        <livewire:lpb.dynamic-component :component="$child['component']" :props="$child['props']" />
    @endforeach
    ...
</x-lpb::component-wrapper>

Register the component​

In the config/livewire-page-builder.php file, add the component to the components array.

return [
    'components' => [
        // ... default components
        'App\Components\CustomComponent',
        // ... other components
    ],
];