Vue-dynamic-star-rating is a highly customizable and easy-to-use elegant stars rating component. It is very similar to Google Play. You can view its demo here.

Installation

You can install this component via NPM, Just run this command:

npm i vue-dynamic-star-rating

Then require in your project:

var StarRating = require('vue-dynamic-star-rating');

or ES6 syntax:

import StarRating from 'vue-dynamic-star-rating'

Usage

After the installation, you can register the component globally:

Vue.component('star-rating', StarRating);

Or in your Vue component:

components: {
  StarRating
}

You can then use the following selector anywhere in your project:

To get up and running quickly the package now supports rendering just the selector with default values.

<star-rating></star-rating>

The component support various property. You can use either :

• rating to define the default rating value
• star-style to define the style that applies to the rating. If not provided, the default values are used.
• is-indicator-active to determine if an indicator should be enabled.

Implementation Example

Define your config options object in the component importing StarRating e.g

data: function() {
    return {
        rating: 4.7,
        starStyle: {
            fullStarColor: '#ed8a19',
            emptyStarColor: '#737373',
            starWidth: 30,
            starHeight: 30
        }
    }
}

And bind it to the selector like so

<star-rating :rating="rating" :star-style="starStyle"></star-rating>

For more details you can visit its complete documentation and source code on Github