:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x
animate
prop added which slightly rotates and expands the star on mouseoveractive-on-click
prop applies active colors on click rather than on hover when set to trueactive-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 individuallyglow
no longer requires glow-color to be set (thanks to @bifot)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>
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.
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" />
The custom event names emitted by the component have been changed to the following:
rating-selected
event has been renamed to update:rating
current-rating
event has been renamed to hover:rating
See changelog for details of all internal changes
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 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 starglow-color
prop allows you set the color of the glowThere 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.
Change screenshot location is Readme.md and remove link.
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 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.
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:
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)
Updated the README to include a Getting Started
section which shows how to sync values.
Updated minified dist file for use via unpkg CDN