Star Rating Component using Livewire & AlpineJS

Documentation

For storing the ratings-related data, we'll be using a Rating model.

One more thing to keep in mind is the polymorphic relationship, we'll be using this relationship to store ratings of multiple models in this Model itself.

Additionally, since we are using a polymorphic relationship, we need to define the following relationship to the Modal to which we want to attach the rating component.

In our case, the model is shown above in the WinkPost Model tab.

Usage

And finally, a demo showcasing the usage of the Rating Component.

      @livewire('pro.star-rating-component', [
                            // the $post model here is a WinkPost model
                            'model' => $post
                            ])