Star Rating custom component using Pure VueJS

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