These are two different use cases that you should learn to make co-exist together.
A good example would be this blade icon package:
You would never do this as a Livewire component but it works well as a Blade component.
Another example is, I make my form components as Blade components that can take Livewire attributes. This way if I don’t want to use Livewire I still get the benefit of the Blade components.
Here is my form Blade component:
@props(['method' => null, 'action' => null, 'errors'])
<form
{{ $attributes }}
@if ($method) method="POST" @endif
@if ($action) action="{!! $action !!}" @endif
role="form"
novalidate
>
@csrf
@if ($method)
@method($method)
@endif
{{ $slot }}
</form>
Here is that form Blade component used inside a Livewire component:
<div>
<div class="mb-4">
Create new repository
</div>
<x-form.form wire:submit.prevent="submit">
<x-form.text-field
wire:model.debounce.500ms="name"
label="Repository name"
name="name"
placeholder="Enter repository name..."
class="mb-4"
/>
<x-form.text-field
wire:model.debounce.500ms="description"
type="textarea"
rows="8"
label="Description"
name="description"
placeholder="Enter repository description..."
class="mb-4"
/>
<div class="flex">
<button type="submit" class="ml-auto bg-indigo-700 hover:bg-indigo-800 focus:outline-none text-white py-2 px-4 rounded">
<i class="fas fa-building"></i> {{ __('Create') }}
</button>
</div>
</x-form.form>
</div>