Using Components
WireUse - Components - 2024-07-12
Usage
WireUse offers a set of traits that you can include on your Component and Livewire components.
Page
The Foxws\WireUse\Views\Support\Page
class can be used for Livewire controllers:
use Foxws\WireUse\Views\Support\Page;
use Livewire\Attributes\Layout;
#[Layout('components.layouts.app')]
class PostViewController extends Page
{
public Post $post;
protected function authorizeAccess(): void
{
$this->canView($this->post);
}
protected function getTitle(): ?string
{
return (string) $this->post->name;
}
protected function getDescription(): ?string
{
return (string) $this->post->summary;
}
}
The Page
class extends Livewire\Component
and includes the following traits:
-
WithAuthentication
- Can be used to retrieve the current user. -
WithAuthorization
- Can be used to authorize the current user. -
WithHash
- Can be used to generate a hash for the given component. -
WithSeo
- Can be used to generate SEO contents.
Component
The Foxws\WireUse\Views\Support\Component
class may useful for Blade components:
use Foxws\WireUse\Views\Support\Component;
use Illuminate\Contracts\Support\Htmlable;
class Button extends Component
{
public function __construct(
public string|Htmlable|null $label = '',
) {
}
}
The Component
class extends Illuminate\View\Component
and includes the following traits:
-
WithHash
-
WithLivewire
-
Illuminate/Support/Traits/Conditionable
-
Illuminate/Support/Traits/Tappable
Concerns
A selection of some traits that are available:
WithLivewire
Located at Foxws\WireUse\Views\Concerns\WithLivewire
, this trait can be used to call Livewire attributes.
The following methods are available:
-
wireKey()
- Value ofid
orwire:model
attribute - or generate withuuid()
. -
wireModel()
- Value of firstwire:model
attribute. -
uuid()
- Generates an UUID, mainly used as fallback.
This is an example of using it with a Livewire wire:key:
<article {{ $attributes
->merge([
'wire:key' => $wireKey(),
])
}}>
{{ $slot }}
</article>
WithHash
Located at Foxws\WireUse\Views\Concerns\WithHash
, this trait can be used to generate a hash for the given component, and be used as a wire key.
The following methods are available:
-
hash()
- The hash will be generated using the class itself. -
classHash()
- The hash will be generated using the class name.
Note: Always be careful with
hash
methods, as collisions may occur.
This is an example of using it with a Livewire wire:key:
<article {{ $attributes
->merge([
'wire:key' => $hash(),
])
}}>
{{ $slot }}
</article>
WithSeo
Located at Foxws\WireUse\Views\Concerns\WithSeo
, this trait can be to handle SEO in your Laravel application.
This trait only works with ralphjsmit/laravel-seo, and is a package requirement of WireUse.
use Foxws\WireUse\Views\Concerns\WithSeo;
use Livewire\Component;
class PostViewController extends Component
{
use WithSeo;
public Post $post;
public function mount(): void
{
// $this->seo()->setTitle('Title using mount hook');
// $this->seo()->setDescription('Description using mount hook');
}
public function getTitle(): ?string
{
return (string) $this->post->name;
}
public function getDescription(): ?string
{
return (string) $this->post->description;
}
}