vue-js-star-rating v1.1.5

Vue.js fontawesome icon rate component

It's easy to use Vue.js component for star rating!

1. This package is fully customized (Shape, Color, Rate, ...).
2. I used Vue font awesome.
3. You can change your rating shape with free and open source font awesome project.

Install package

1. Install with npm npm i vue-js-star-rating --save
2. Install with yarn yarn add vue-js-star-rating --save

Code sample

After import and registering component in your Vue.js application:

<template>
  <div>
    <vue-star-rate
      :rateRange="3"
      :maxIcon="5"
      :iconHeight="22"
      :iconWidth="22"
      :hasCounter="true"
      iconColor="#FFFF99"
      iconColorHover="#FFFF99"
      iconShape="star"
    ></vue-star-rate>
  </div>
</template>

<script>
import vueStarRate from "vue-js-star-rating";
export default {
  components: { vueStarRate }
};
</script>

Documents

Events

When a star is clicked, an event is emitted called ratingSet. You can listen for this event to get the value of the rating.

<template>
  <div>
    <vue-star-rate v-on:ratingSet="myRatingMethod"></vue-star-rate>
  </div>
</template>

<script>
import vueStarRate from "vue-js-star-rating";
export default {
  components: { vueStarRate },
  methods: {
    myRatingMethod(rating) {
      console.log("The selected rating is " + rating);
    }
  }
};
</script>