Version 2.1.0

• New animate prop added which slightly rotates and expands the star on mouseover
• New active-on-click prop applies active colors on click rather than on hover when set to true
• New active-border-color prop, which allows border colour to be changed when star is active (issue #34)
• active-color and active-border-color now optionally accept an array of color values to color each star individually
• glow no longer requires glow-color to be set (thanks to @bifot)
• Screen readers are now supported. You can change the default message ("Rated {{rating}} out of {{maxRating}} stars") by using the screen-reader scoped slot:

<star-rating>
    <template v-slot:screen-reader="slotProps">
        This product has been rated {{slotProps.rating}} out of {{slotProps.stars}} stars
    </template>
</star-rating>

Version 2.0.3

• Fixes an issue where glow is always on, which is prominent on dark background
• Document new clearable prop which allows users to clear stars when same rating is clicked twice

Version 2 - Star Ratings for Vue 3!

vue-star-rating can now be used with Vue 3! This means there are now 2 versions of vue-star-rating

You should continue to use vue-star-rating version 1.6.x if you're using Vue 2, which will remain the default install via npm for the time being.

What's New?

Most changes are internal, but if you want to use vue-star-rating in your Vue 3 app you will need to install using the next tag:

npm install vue-star-rating@next

Vue 3 users now need to pass the rating argument to v-model

<star-rating v-model:rating="rating" />

Custom Event Name Changes

The custom event names emitted by the component have been changed to the following:

• The rating-selected event has been renamed to update:rating
• The current-rating event has been renamed to hover:rating

See changelog for details of all internal changes

Version 1.6.1

This release fixes an issue where round-start-rating, when set to false, still rounded when rating was initially set via an async call (issue #36)

Version 1.6.0

Version 1.6.0 adds the following new features:

• rounded-corners prop allows you to round the corners of the star. (Thanks to @SparoHawk)
• star-points prop allows you to pass an array of star points to create custom star shapes (Thanks to @SparoHawk)
• glow prop allows you to add a glow around an active star
• glow-color prop allows you set the color of the glow

Release Notes

• There have been some internal changes to how the stars are spaced and sized, this means that some star's spacing or sizing may change very slightly.

• The padding prop in Star.vue has been removed, while this doesn't affect the component itself, if you are using the Star component on it's own for any reason, this prop will no longer work.

Version 1.5.1

Change screenshot location is Readme.md and remove link.

Version 1.5.0

Version 1.5.0 adds a new round-start-rating prop which gives the option to prevent the initial rating value being rounded to the closest increment, allowing an initial average rating to be set without having to set the increment to 0.01 (See issue #21).

This version also fixes an issue with a "dead" column of pixels which allowed users to set a 0 rating (issue #22), this now resets the rating back to the current selected rating.

Version 1.4.0

Version 1.4 adds support for RTL (issue #11) and adds a fixed-points prop that allows you to specify a fixed number of decimal points to display for the rating.

Release Notes

Some of the internal css class names have been changed to help avoid unintentional name clashes (see issue #12 ) which can cause vue-star-rating to display incorrectly. If you are intentionally targeting these classes in your project the following name changes have been made:

• .star-rating > .vue-star-rating
• .star > .vue-star-rating-star
• .pointer > .vue-star-rating-pointer
• .inline > .vue-star-rating-inline
• .rating-text > .vue-star-rating-rating-text

When using the CDN , you are now required to register the component yourself, which you can do by doing:

Vue.component('star-rating', VueStarRating.default)

Version 1.3.1

Updated minified dist file for use via unpkg CDN

Version 1.3.0

Version 1.3.0 adds support for v-model when using Vue 2.2 and above:

Markup

<star-rating v-model="boundRating"></star-rating>

View Model

import StarRating from 'vue-star-rating';

export default {
  components:{
    StarRating
  },
  data(){
    return {
     boundRating: 0
   }
  }
}

Thanks to @acro5piano for the input on this feature.