Livewire & Alpine web app redesign from the ground

I am React and Laravel web app developer. I have decided to re-setup or re-design one of my web apps with Livewire and Alpine from the ground. during this conversion, I share with you the sense, problems, needs and so on.
the web app is multilingual (en and ar), has complicated model relations with modal, Ajax and…


  1. navigating between view and class of a component is frustrating, especially when the livewire components go high. it is better a folder named livewire with two subfolder class and view.

  2. in modal there is other colors of a product and by click, on each color, I want to add a class (isactive) to that clicked other color, it was what I did in Alpine by @click and :class instead of addClass and removeClass in jquery:

            <div x-data="{id:null}">
                @foreach($product->othercolors as $color)
                  <img wire:click="theOtherColor({{ $color->id }})" @click="id = {{ $color->id }}"  **:class="{'isactive': id === {{ $color->id }}}"** src="{{ asset('images/colors/' . $color->image) }}">


  1. I use IntelliJ and a dedicated plugin to cover livewire seems is a need.
  2. in modal section the x-data, x-show is fantastic, clear and less jquery.
1 Like