A Simple Star Rating VueJs Component

What is a star rating? A start rating comprises of stars with the amount usually at a maximum of five. You let your users rate an item using stars. One star means poor; five is excellent. By selecting more than one star, all previous stars should be filled. We normally use yellow or gold.

I wanted to add this functionality for a web page I was working on for the company that I work for. Instead of building this component, I looked around for something quick and simple for our use case. Some where overly complicated while some did not fit the criteria of a simple touch-and-go. I like to put pen and paper together and I came up with:

• Each star should be clickable
• Buttons on either sides to increase/decrease star/rating
• Use one star svg and make use of v-for

Simple, right?

The requirement was simple, a button to decrease rating, another button to increase and each star should be clickable. Once rated, there’s no going back; back to zero (no rating).

At the time of creating this post, I see ways to improve this simple component. I leave the creativity in your hands. I’m open to end and post your names here.

If this was useful, “clap” until I say stop 😜