Using Livewire to replace Vue.js

I am looking into replacing a bunch of UI code with Livewire.
The codebase I am working with uses a bunch of Vue.js components to handle things like button groups, “sexy” text input fields (like password visibility toggles), and components for things like slide ins and modals.

We know we will need some javascript to keep some existing functionality.
We have chosen AlpineJs for this task.

So, some of the things I am running into trouble are:

  • disabling buttons until all fields are filled in
  • assigning classes to elements based off of livewire methods
  • executing parent functions that are passed into a child blade component, for example, what a submit button should do

If we have to keep all this functionality in each livewire component, we are going to have a huge code base full of copypasted code.

I think livewire is really cool, but I need to make professional web applications, any tips?
Any examples out there that are more complicated than what Caleb usually demos, like an enterprise example, with modals and all that fluff?

I can give you some pointers, but nothing here is law, this is all generalizations. I don’t even follow it 100% of the time.

I think a really good rule of thumb is use livewire where you were making api calls, and alpine for general page manipulation. Livewire is making a full round trip to the server every time it wants to do something, rerending the component blade view, and swapping it out when it gets back to the browser. If you use livewire for everything, you will loose the “snappy-ness” you are used to in vue.

wire:model.lazy, or at least raise the debounce time, on all of your inputs. It’s a wasted call most of the time.
I wouldn’t use livewire for simple things like toggling menus for example. Modals are 50/50 depending on the case.

I like computed properties for this.

public function getExampleClassProperty()
{
    if ($foo) {
        return 'text-green-200';
    }
    return 'text-red-300';
}

<p class="{{ $this->exampleClass }}">
(You don’t have to use $this->exampleClass, you can use $exampleClass, I just prefer it because that tells me it’s something set in livewire.)
There’s also cases where you would just declare public $exampleClass and alter it in a method you hit as well, and the blade usage would be the same.
The same pattern can be used for if a button should be disabled or not.

This one’s a little trickier to explain blind. It will most likely be through events, but there’s different patterns of tackling how to structure your events. Looks like the emitUp method is documented now, which is good. If you have a code example of what you are trying to accomplish, I can show you code on how I would do it.

Thank you, that worked perfectly!
I used emitUp for the button actions

Did you see Freek.dev blog post about replacing Vue? Very good read: https://freek.dev/1609-building-complex-forms-with-laravel-livewire-in-oh-dear