Awesome Vue Star Rating

Simple and Easy Customisable Awesome Vue Star Rating using Pure Vue application without any external package.

Installing

npm install --save awesome-vue-star-rating

Features

1. Font icon stars — scale without loss of quality
2. Customisable ratings and rating descriptions
3. Customisable results of selected value and description
4. Customisable number of stars
5. Create read-only stars
6. Customisable Colors

Options

Usage

Step 1: import AwesomeVueStarRating in our component

import AwesomeVueStarRating from 'awesome-vue-star-rating'

export default {
  name: 'app',
  components: {
    AwesomeVueStarRating
  }
}
</script>

Step 2: Load default values to the component

data() {
    return {
      star: 5, // default star
      ratingdescription: [
        {
          text: 'Poor',
          class: 'star-poor'
        },
        {
          text: 'Below Average',
          class: 'star-belowAverage'
        },
        {
          text: 'Average',
          class: 'star-average'
        },
        {
          text: 'Good',
          class: 'star-good'
        },
        {
          text: 'Excellent',
          class: 'star-excellent'
        }
      ],
      hasresults: true,
      hasdescription: true,
      starsize: 'lg', //[xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x],
      maxstars: 5,
      disabled: false
    }
}

Step 3: Place the Rate component inside the template

<template>
  <div id="app">
    <AwesomeVueStarRating :star="this.star" :disabled="this.disabled" :maxstars="this.maxstars" :starsize="this.starsize" :hasresults="this.hasresults" :hasdescription="this.hasdescription" :ratingdescription="this.ratingdescription" />
  </div>
</template>

Step 4: Customize the star color styles like below

<style lang="scss">
 .star {
  color: red;
 }
 .star.active {
  color: red;
 }
 .list, .list.disabled {
  &:hover {
    .star {
      color: red !important;
    }
    .star.active {
      color: red;
    }
  }
}
</style>

Compiles and hot-reloads for development

npm run serve

Screen Shot

Demo

🎉 Demo Link 🎉

Compiles and minifies for production

npm run build

Run your tests

npm run test