Do you still make regular blade components?

This is probably a dumb question, but it is also an easy one I think.

Now that I can make livewire components, should I still be making blade components? For example if I don’t plan on a component being interactive should I just make a regular blade component? Or should I just make it a livewire component anyway in case I add some interactivity later?

Thanks,
Isaac

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>
1 Like

I appreciate the examples. I’ve been working on a little app most of the day and I’m still struggling with deciding when to start with a blade component and when to start with a livewire component. I know it is just going to take time/experience, but I’m wondering if there is any questions you ask yourself internally when deciding between the two?

My decision is by default - blade, unless you have a special reason to have a livewire component.
My top reasons:

  • Table (I have designed a livewire table component and I will nether ever go back to datatables :slight_smile:
  • Quick actions with local change on a page like some edits, “likes”, comments where you do not need to refresh entire page.
  • Sometimes navigation through the list of items (like a gallery)

Otherwise blade is a first choice.

2 Likes

If you don’t need a component to be livewired, I’d stick to regular blade component. You can even put all your livewire stuff into the blade component and just have that component kick up the livewire stuff. Functionally, I think there’s no difference between a livewire component and a blade component.

1 Like

@shortbrownman and @Dimonka2. I really appreciate the input. Thanks for the guidance!