A simple, highly customisable star rating component for Vue 2.x. / 3.x

Need more than stars? Check out vue-rate-it with hundreds of different raters built in!

• Vue 2 Examples
• Vue 3 Examples

• SVG stars - scale without loss of quality.
• Customisable rating increments.
• Customisable colors.
• Customisable number of stars.
• Create read-only stars.

Install via npm:

npm install vue-star-rating

If you're using Vue 3 you will currently need to install the next version of vue-star-rating

npm install vue-star-rating@next

Once installed import in to your component:

import StarRating from 'vue-star-rating'

Then register vue-star-rating using the components option:

components: {
  StarRating
}

You can then use the following markup in your project:

<star-rating />

You may also include vue-star-rating directly in to your webpage via Unpkg. Simply add the following script tag:

<script src="https://unpkg.com/vue-star-rating/dist/VueStarRating.umd.min.js"></script>`

You will need to register the component by doing:

Vue.component('star-rating', VueStarRating.default);

<script src="https://unpkg.com/vue-star-rating@next/dist/VueStarRating.umd.min.js"></script>

const app = Vue.createApp({ 
  // Your component code
 })
app.component('star-rating', VueStarRating.default)
app.mount('#app')

To get started with vue-star-rating you will want to sync the rating values between the component and parent, you can then take a look at the props and custom events section of the docs to customise your star-rating component.

vue-star-rating supports v-model, which is the simplest way to keep your ratings in sync:

<star-rating v-model="rating"></star-rating>

v-model works on the rating prop, so if you're using Vue 3 you will need to do:

<star-rating v-model:rating="rating"></star-rating>

The following props can be passed to the component:

These props provide general functionailty to the star rating component

These props are used to style the star rating component

Important: Vue requires you to pass numbers and boolean values using v-bind, any props that require a number or bool should use v-bind: or the colon (:) shorthand.

<star-rating v-bind:increment="0.5"
             v-bind:max-rating="3"
             inactive-color="#000"
             active-color="#f00"
             v-bind:star-size="90">
</star-rating>

The active-color and active-border-color props also accept an array of colors. The colors in the array will be applied to the stars in order, so index 0 will be the color of the first star, index 1 will be the second and so on. Any array you pass will be padded if the number of elements in the array is less than the number of stars. This means that the following code will color the first star red and ALL remaining stars black.

<star-rating :active-color="['red','black']">
</star-rating>

vue-star-rating fires the following custom events, simply use v-on: or the @ shortand to capture the event.

<star-rating @rating-selected ="setRating"></star-rating>

Then in your view model:

new Vue({
  el: '#app',
  methods: {
    setRating: function(rating){
      this.rating= rating;
    }
  },
  data: {
    rating: 0
  }
});

Some changes have been made to event names in Vue 3

<star-rating @update:rating ="setRating"></star-rating>

Then in your view model:

const app = Vue.createApp({
  methods: {
    setRating(rating){
      this.rating= rating;
    }
  },
  data: {
    rating: 0
  }
})
app.component('star-rating', VueStarRating.default)
app.mount('#app')

vue-star-rating has built in support for screen readers. By default this message will read "Rated {{rating}} out of {{maxRating}} stars", you can change this by using the screen-reader scoped slot:

<star-rating>
    <template v-slot:screen-reader="slotProps">
        This product has been rated {{slotProps.rating}} out of {{slotProps.stars}} stars
    </template>
</star-rating>

vue-star-rating supports IE 9+; make sure you place the following in the head of your webpage to ensure that IE is in standards mode:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Open-source should always be 100% FREE! but, if you're feeling generous, feel free to: