Do I need lucide-vue-next if I use FontAwesome or a custom icon?

No. vue-js-star-rating has no runtime dependencies and its only peer dependency is vue (^3.5.0); there are no optional peers. iconProvider="lucide" draws Lucide's own star geometry inline as an SVG, so there is nothing to install for it. iconProvider="fontawesome" renders i elements with Font Awesome class names, so your app must load Font Awesome's stylesheet itself, for example import '@fortawesome/fontawesome-free/css/all.min.css'; without it the stars are invisible. The exception is releases 2.0.0 to 3.1.0, which imported lucide-vue-next at build time (3.1.0 also wrongly documented it as an optional peer), so Vite, webpack, esbuild, Nuxt and Storybook builds fail unless it is installed (GitHub issue #13). This is fixed in 3.1.1; see CHANGELOG.md.

Is vue-js-star-rating SSR-safe and Nuxt 3 compatible?

Yes. The component renders deterministically on the server, and the markup of all three icon providers (default SVG, Lucide, Font Awesome) is part of the server-rendered HTML. Nothing is loaded asynchronously, so no ClientOnly or Suspense wrapper is needed.

What is the bundle size of vue-js-star-rating?

Measured with Vite 6 and esbuild minification, vue external, gzip -9: import { VueStarRate } costs about 12.4 KB raw / 4.6 KB gzipped of JavaScript plus 2.9 KB raw / 0.75 KB gzipped of CSS (vue-js-star-rating/dist/style.css). All three icon providers are inside that one entry file; nothing is lazy-loaded or split into chunks. useStarRating alone costs about 1 KB gzipped because export-level tree-shaking works; there is no component-level code splitting.

The root is role="group" with an aria-label, and each star is a native button (type=button) with aria-pressed and an aria-label such as "3 stars". Keyboard: arrow keys (by the step, or 0.5 with allowHalf), Home, End and the digits 0-9 set the rating; Ctrl, Alt and Meta combinations are left to the browser, and Tab never changes the value. The root and the star buttons show a focus ring on keyboard focus, the counter uses aria-live="polite", the star hover animations respect prefers-reduced-motion, and read-only is conveyed by disabled star buttons. The package has not been audited against WCAG, so it makes no conformance claim. Known gaps: the default star colors have low contrast on white (empty #d1d5db is 1.47:1, filled #fbbf24 is 1.67:1), so pass your own colors; size="xs" targets are 16px, below the 24px WCAG 2.2 target-size minimum; a half value such as 2.5 is announced to a screen reader like the next whole number; and the numeric value is only available as text when showCounter is on.

Can I use it without v-model?

Yes. Pass :model-value and listen to @change or @update:modelValue. The useStarRating composable is also exported for headless control.

Which Vue versions are supported?

Vue 3.5+ is required. The component uses defineModel, useTemplateRef, and MaybeRefOrGetter, all stable in Vue 3.5. Vue 2 is not supported.

Vue Star Rate (vue-js-star-rating)

Zero-dependency Vue 3.5+ star rating component with half-star precision, keyboard navigation, TypeScript types, Lucide, Font Awesome or custom icons, and SSR / Nuxt support. This page needs JavaScript for the live demos; the same information is available as plain text.

llms.txt: short summary for AI assistants
llms-full.txt: full reference (props, events, slots, keyboard, FAQ)
npm
GitHub