Awesome Vue Star Rating

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


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


  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


Property Type Required Description
star Number Required. Default value of Star. Default value is 2
maxstars Number Required. Default value is 5.
hasresults Boolean Optional. Displaying the result values. Default value is true.
hasdescription Boolean Optional. Default value is true.
ratingdescription Array Required. Displaying the rating values. Ex. [{ 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' }]
starsize String Optional. Displaying the size of the stars. Default value is lg. We have list of [xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x] other optional values too.
disabled Boolean Optional. Enable or disable the star selection. Default value is false.


Step 1: import AwesomeVueStarRating in our component

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

export default {
  name: 'app',
  components: {

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

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

Step 4: Customize the star color styles like below

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

Compiles and hot-reloads for development

npm run serve

Screen Shot




Compiles and minifies for production

npm run build

Run your tests

npm run test