vue-star-rate: Feature-Rich Star Rating with Zero Dependencies

Introduction

The vue-star-rate component is designed for Vue 3.5+ applications, offering a comprehensive solution for star rating systems with zero runtime dependencies. This component is engineered to address common challenges in star rating implementations, such as half-star precision, accessibility, and customization.

Installation

To integrate vue-star-rate into your project, execute:

pnpm add vue-js-star-rating

Ensure your environment is running on Vue 3.5+, as it utilizes defineModel and useTemplateRef, which are stable in this version.

Basic Setup

Here’s a simple setup example to get you started:

<script setup lang="ts">
import 'vue-js-star-rating/dist/style.css';
const rating = ref(0);
</script>

<template>
  <VueStarRate v-model="rating" />
</template>

Key Features

• Half-Star Ratings: Supports decimal ratings, such as 3.5, with precise visual rendering.
• Size Options: Choose from several preset sizes or define custom dimensions.
• Icon Customization: Use built-in icon providers like Lucide and FontAwesome, or insert custom SVGs.
• Read-Only Mode: Perfect for static displays on review cards or dashboards.

Accessibility and Navigation

The component is fully compliant with WCAG 2.2 standards, featuring keyboard navigation:

• Arrow Right/Up: Increase rating
• Arrow Left/Down: Decrease rating
• Home/End: Set to minimum/maximum
• Numeric Keys (1-9): Jump to specific value
• Zero Key (0): Reset to minimum

Advanced Configuration

Customizing vue-star-rate is straightforward with a variety of props:

<VueStarRate
  v-model="rating"
  :max-stars="5"
  :allow-half="true"
  :show-counter="true"
  :show-tooltip="true"
  size="lg"
  :colors="{ empty: '#27272a', filled: '#fbbf24', hover: '#fcd34d', half: '#fbbf24' }"
  :animation="{ enabled: true, duration: 200, type: 'scale' }"
  :clearable="true"
  @change="(val, old) => console.log(val, old)"
/>

Props Overview

• v-model: (number) The current rating value
• maxStars: (number) Maximum number of stars
• allowHalf: (boolean) Enable half-star ratings
• size: (string) Define size preset (xs, sm, md, lg, xl)
• readonly: (boolean) Activates display-only mode
• clearable: (boolean) Allows clearing the rating
• showCounter: (boolean) Displays a numeric counter
• showTooltip: (boolean) Shows tooltips on hover
• rtl: (boolean) Supports right-to-left layout
• iconProvider: (string) Choose icon provider (custom, lucide, fontawesome)

Programmatic Control

Control the component programmatically:

const ratingRef = ref<InstanceType<typeof VueStarRate>>();

ratingRef.value?.reset();
ratingRef.value?.setRating(3.5);
ratingRef.value?.getRating();
ratingRef.value?.focus();

Migrating from v2

• Icon Provider: Use icon-provider="lucide" instead of lucideIcons prop
• Role Change: Transition from role="slider" to role="group" for WCAG compliance
• Animation: Update from { scale: 1.15 } to { type: 'scale' }
• Vue Dependency: Upgrade from Vue ^3.3.0 to Vue ^3.5.0

Explore more on GitHub and npm for full documentation and live demos.