Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Laravel Livewire components


Laravel Livewire components


Here are the key points about using Laravel Livewire components:

Creating Components

- Use the `php artisan make:livewire` command to generate a new Livewire component, which creates both the PHP class and Blade view files[4].

- The generated component class extends `Livewire\Component` and contains a `render()` method that returns the view[4].

Rendering Components

- Use the `@livewire` Blade directive or `` tag syntax to render a Livewire component in a view[2].

- If the component is in a subdirectory with its own namespace, use the dot notation, e.g. ``[2].

- You can pass initial parameters to the component using the `['param' => $value]` syntax with `@livewire` or the `:param="$value"` syntax with the tag[2].

Nesting Components

- Livewire supports nesting components, which can be a powerful technique[1][3].

- Nested components can accept data parameters from their parents, but they are not reactive like Vue component props[3].

- When rendering a component inside a loop, use the `wire:key` directive to uniquely identify each instance, e.g. ``[3].

Lifecycle Hooks

- The `mount()` method is called when the component is instantiated and can be used to set initial properties[2].

- The `render()` method is called on the initial page load and every subsequent component update to render the component's view[2].

So in summary, Livewire components are defined in PHP classes that extend `Livewire\Component`, with their views defined in Blade files. They can be rendered anywhere in a Blade template, passed parameters, and nested to build complex UIs. The `mount()` and `render()` methods provide hooks to initialize state and render the component.

Citations:
[1] https://livewire.laravel.com/docs/nesting
[2] https://laravel-livewire.com/docs/1.x/rendering-components
[3] https://laravel-livewire.com/docs/2.x/nesting-components
[4] https://livewire.laravel.com/docs/quickstart
[5] https://laravel-livewire.com/docs/2.x/quickstart