{"id":12584,"library":"vue-star-rating","title":"Vue Star Rating Component","description":"`vue-star-rating` is a highly customizable star rating component for Vue.js applications, offering extensive control over its appearance and behavior. It maintains separate versions to support both Vue 2.x (primarily version 1.6.x, which remains the default `npm install`) and Vue 3 (via version 2.x, installed using `npm install vue-star-rating@next`). The library features a wide array of customization options, including custom star shapes (`star-points`), rounded corners, individual star coloring, glow effects, and full support for RTL (right-to-left) layouts. It integrates seamlessly with Vue's `v-model` for bidirectional data binding and provides fine-grained control over initial rating rounding and increment steps. The project actively develops the Vue 3 compatible version, ensuring continued relevance and compatibility within the evolving Vue ecosystem.","status":"active","version":"1.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/craigh411/vue-star-rating","tags":["javascript","star rating","star","vue","vue.js","vue 2"],"install":[{"cmd":"npm install vue-star-rating","lang":"bash","label":"npm"},{"cmd":"yarn add vue-star-rating","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-star-rating","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Vue.js component library and requires Vue as a peer dependency.","package":"vue","optional":false}],"imports":[{"note":"The component is exported as a default export.","wrong":"import { StarRating } from 'vue-star-rating';","symbol":"StarRating","correct":"import StarRating from 'vue-star-rating';"},{"note":"For Vue 3, ensure you install `vue-star-rating@next`. The import path remains the same.","symbol":"StarRating (Vue 3)","correct":"import StarRating from 'vue-star-rating';"},{"note":"This pattern is typically used in Vue 2 projects or older Node.js environments. For Vue 3, ESM imports are preferred.","symbol":"StarRating (CommonJS Vue 2)","correct":"const StarRating = require('vue-star-rating');"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport StarRating from 'vue-star-rating';\n\nconst app = createApp({\n components: {\n StarRating\n },\n setup() {\n const currentRating = ref(3.5);\n const readOnlyRating = ref(4.2);\n\n const setRating = (rating) => {\n currentRating.value = rating;\n console.log('New rating:', rating);\n };\n\n return {\n currentRating,\n readOnlyRating,\n setRating\n };\n },\n template: `\n
\n

Interactive Star Rating

\n \n

Your current rating: {{ currentRating }}

\n\n

Read-only Rating

\n \n

Average rating: {{ readOnlyRating }}

\n
\n `\n});\n\napp.mount('#app');","lang":"typescript","description":"This quickstart demonstrates basic usage of `vue-star-rating` with Vue 3, showcasing v-model binding for an interactive rating and a read-only display. It includes several common props like `star-size`, `increment`, `glow`, and `active-color`."},"warnings":[{"fix":"For Vue 3 projects, use `npm install vue-star-rating@next`. For Vue 2, continue with `npm install vue-star-rating` (or explicitly `vue-star-rating@1`).","message":"Version 2.x of `vue-star-rating` is specifically for Vue 3, while version 1.6.x and below are for Vue 2. Installing via `npm install vue-star-rating` defaults to the Vue 2 compatible version. For Vue 3, you MUST install with `npm install vue-star-rating@next`.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure the `rating` prop is always passed to the `StarRating` component. When using `v-model`, this is handled automatically.","message":"Starting with Vue 3 compatible versions (v2.0.2+), the `rating` argument must now be explicitly passed for the component to function correctly.","severity":"breaking","affected_versions":">=2.0.2"},{"fix":"Review your custom CSS for `vue-star-rating` and update class selectors according to the new naming conventions if you are targeting internal classes. (e.g., `.star-rating` changed to `.vue-star-rating`).","message":"Internal CSS class names were changed in v1.4.0 to prevent clashes. Custom CSS targeting old class names will no longer work.","severity":"breaking","affected_versions":">=1.4.0 <2.0.0"},{"fix":"If using `glow` on versions prior to 2.1.0, always specify a `:glow-color` prop, for example: `:glow-color=\"'#ffd055'\"`.","message":"Prior to v2.1.0, enabling the `glow` prop required also explicitly setting a `glow-color`. In v2.1.0+, `glow-color` is optional as it will default if not provided.","severity":"gotcha","affected_versions":"<2.1.0"},{"fix":"Upgrade to `vue-star-rating@1.6.1` or higher for Vue 2 projects if you are encountering issues with `round-start-rating` and asynchronously loaded initial ratings.","message":"The `round-start-rating` prop, intended to prevent initial rating rounding, had an issue where it would still round when the rating was set asynchronously. This was fixed in v1.6.1.","severity":"gotcha","affected_versions":">=1.5.0 <1.6.1"},{"fix":"To apply different colors to each star, provide an array of color strings, e.g., `:active-color=\"['red', 'orange', 'yellow', 'green', 'blue']\"`.","message":"The `active-color` and `active-border-color` props can accept an array of color values in v2.1.0+ to color each star individually. If a single string is provided, all stars will share that color.","severity":"gotcha","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This issue was resolved in `vue-star-rating@1.5.0`. Upgrade to this version or newer for Vue 2 projects.","cause":"A 'dead' column of pixels prevented resetting to zero or selecting the lowest increment. This was a known issue (issue #22).","error":"Rating not being set to 0 when clicking outside the star or to the left of the first star."},{"fix":"This specific glow issue was fixed in `vue-star-rating@2.0.3`. Upgrade to this version or newer for Vue 3 projects.","cause":"An issue where the `glow` effect was permanently active due to a bug in the component's styling or logic.","error":"Glow effect is always on, even when not intended, particularly prominent on dark backgrounds."},{"fix":"Upgrade to `vue-star-rating@1.6.1` or higher for Vue 2 projects to correctly apply `round-start-rating` with async data.","cause":"A bug in versions prior to 1.6.1 caused `round-start-rating` to not correctly apply when the initial rating was loaded asynchronously (issue #36).","error":"Initial rating values are being rounded despite `round-start-rating` being set to `false`, especially with async data."},{"fix":"Upgrade to `vue-star-rating@1.4.0` or newer for Vue 2 projects. This version introduced specific class names (e.g., `.vue-star-rating`) to avoid clashes. Review and update any custom CSS targeting the old class names.","cause":"Older versions of the component (prior to v1.4.0) used generic CSS class names (`.star-rating`) that could easily conflict with other project styles (issue #12).","error":"Styling of the star rating component is incorrect or clashing with other CSS in my application."}],"ecosystem":"npm"}