Registry / web-framework / vue-star-rating

vue-star-rating

library1.7.0jsnpmunverified

`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.

web-framework

npm install vue-star-rating

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-STAR-RATING

vue-star-rating

web-frameworkjavascriptv1.7.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

StarRating

✓ import StarRating from 'vue-star-rating';

✗ import { StarRating } from 'vue-star-rating';

The component is exported as a default export.

StarRating (Vue 3)

✓ import StarRating from 'vue-star-rating';

For Vue 3, ensure you install `vue-star-rating@next`. The import path remains the same.

StarRating (CommonJS Vue 2)

✓ const StarRating = require('vue-star-rating');

This pattern is typically used in Vue 2 projects or older Node.js environments. For Vue 3, ESM imports are preferred.

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`.

import { createApp, ref } from 'vue'; import StarRating from 'vue-star-rating'; const app = createApp({ components: { StarRating }, setup() { const currentRating = ref(3.5); const readOnlyRating = ref(4.2); const setRating = (rating) => { currentRating.value = rating; console.log('New rating:', rating); }; return { currentRating, readOnlyRating, setRating }; }, template: ` <div> <h1>Interactive Star Rating</h1> <star-rating v-model:rating="currentRating" :increment="0.5" :star-size="30" :show-rating="false" :glow="5" glow-color="#ffd055" active-color="#FFD700" inactive-color="#D8D8D8" border-color="#ccc" :border-width="2" :rounded-corners="true" :padding="5" @update:rating="setRating" ></star-rating> <p>Your current rating: {{ currentRating }}</p> <h2>Read-only Rating</h2> <star-rating :rating="readOnlyRating" :read-only="true" :increment="0.01" :star-size="25" :fixed-points="2" :show-rating="true" active-color="#42b883" inactive-color="#f0f0f0" ></star-rating> <p>Average rating: {{ readOnlyRating }}</p> </div> ` }); app.mount('#app');

Debug

Known issues

breakingVersion 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`.

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`).

affects: >=2.0.0

breakingStarting with Vue 3 compatible versions (v2.0.2+), the `rating` argument must now be explicitly passed for the component to function correctly.

fix

Ensure the `rating` prop is always passed to the `StarRating` component. When using `v-model`, this is handled automatically.

affects: >=2.0.2

breakingInternal CSS class names were changed in v1.4.0 to prevent clashes. Custom CSS targeting old class names will no longer work.

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`).

affects: >=1.4.0 <2.0.0

gotchaPrior 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.

fix

If using `glow` on versions prior to 2.1.0, always specify a `:glow-color` prop, for example: `:glow-color="'#ffd055'"`.

affects: <2.1.0

gotchaThe `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.

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.

affects: >=1.5.0 <1.6.1

gotchaThe `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.

fix

To apply different colors to each star, provide an array of color strings, e.g., `:active-color="['red', 'orange', 'yellow', 'green', 'blue']"`.

affects: >=2.1.0

Errors

Common errors & fixes

Rating not being set to 0 when clicking outside the star or to the left of the first star.

A 'dead' column of pixels prevented resetting to zero or selecting the lowest increment. This was a known issue (issue #22).

fix

This issue was resolved in `vue-star-rating@1.5.0`. Upgrade to this version or newer for Vue 2 projects.

Glow effect is always on, even when not intended, particularly prominent on dark backgrounds.

An issue where the `glow` effect was permanently active due to a bug in the component's styling or logic.

fix

This specific glow issue was fixed in `vue-star-rating@2.0.3`. Upgrade to this version or newer for Vue 3 projects.

Initial rating values are being rounded despite `round-start-rating` being set to `false`, especially with async data.

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).

fix

Upgrade to `vue-star-rating@1.6.1` or higher for Vue 2 projects to correctly apply `round-start-rating` with async data.

Styling of the star rating component is incorrect or clashing with other CSS in my application.

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).

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.

Upgrade

Version history

1.7.0latest on npm

Audit

Dependencies

vuerequiredThis is a Vue.js component library and requires Vue as a peer dependency.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/craigh411/vue-star-rating ↗

packagehttps://www.npmjs.com/package/vue-star-rating ↗

homepagehttps://vue-star-rating.com ↗