VueJS Star Rating

Star Rating custom component using Pure VueJS application without any external package.

Project setup

npm install

Options

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 lg | xs | 6x other optional values too.

Usage

Step 1: import and use the custom Rating component.

import Rating from './components/Rating'

Step 2: Import the Rating component inside the App component

<script>

import Rating from './components/Rating'

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

Step 3: Load defalt values to the component

data() {
    return {
      desc: [
        {
          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: 'lg' //xs/6x
    }
}

Step 4: Place the Rate component inside the template

<template>
  <div id="app">
    <Rating :star="2" :starSize="starSize" :hasResults="true" :hasDescription="true" :ratingDescription="desc" />
  </div>
</template>

Compiles and hot-reloads for development

npm run serve

Screen Shot

Demo

Compiles and minifies for production

npm run build

Run your tests

npm run test