Star Rating Component for Vue 2

A simple plugin and easy to customize, star rating Vue component

vue-star-rating

A simple, highly customizable star rating component for Vue 2.x. Import in you Vue project to give users rating abilities.

Features:

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

Example

Install via npm:

npm install vue-star-rating --save-dev

*.vue

<template>
<div id="app">
    <star-rating
    <!-- binding to props -->
     v-bind:increment="0.5"
     v-bind:max-rating="5"
     inactive-color="#000"
     active-color="#cc1166"
     v-bind:star-size="90"
    >
</star-rating>
</div>
</template>

<script>
import StarRating from 'vue-star-rating'

export default {
  components: {
    StarRating
  },
}
</script>

</style>

Details about props and more are available for usage.

You can see a live example on JSFiddle.

The plugin is available on GitHub.