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

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

See it in action on JSFiddle

• 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

Then require in your project:

var StarRating = require('vue-star-rating');

or ES6 syntax:

import StarRating from 'vue-star-rating'

Then you can register the component globally:

Vue.component('star-rating', StarRating);

Or in your Vue component:

components: {
  StarRating
}

You can then use the following markup in your project:

<star-rating></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/star-rating.min.js"></script>

You will need to register the component by doing:

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

You may also register the component locally via the components option.

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 when using Vue 2.2 and above, which is the simplest way to keep your ratings in sync:

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

See this example on JSFiddle

If you are using Vue 2.1.x or below the following is the equivelent to the v-model example above:

<star-rating @rating-selected="rating = $event" :rating="rating"></star-rating>

See this example on JSFiddle

The following props can be passed to the 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>

vue-star-rating fires the following custom events, simply use v-on:event 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
  }
});

Note: When writing methods to capture custom events, the rating param is automatically passed to the method. If you need to declare methods with multiple paramaters you will need to use $event to pass the rating to the method:

<star-rating @current-rating="setCurrentRating($event, anotherParam)"></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">