Customizable Star Rating Component For Vue 3

A scalable, customizable star rating component for Vue 3 powered apps.

How to use it:

1. Import and register the star rating component.

import { createApp } from "vue";
import App from "./App.vue";
import vue3StarRatings from "vue3-star-ratings";
const app = createApp(App);
app.component("vue3-star-ratings", vue3StarRatings);

2. Use the component in your app.

<template>
  <vue3-star-ratings v-model="rating" />
</template>

import { defineComponent } from "vue";
import vue3starRatings from "vue3-star-ratings";
export default defineComponent({
  components: {
    vue3starRatings,
  },
});

3. Available component props to customize the star rating component.

starColor: {
  type: String,
  default: "#ff9800"
},
inactiveColor: {
  type: String,
  default: "#333"
},
starSize: {
  type: String,
  default: '32'
},
controlBg: {
  type: String,
  default: '#2e5090'
},
controlColor: {
  type: String,
  default: '#fff'
},
controlSize: {
  type: String,
  default: '24'
},
numberOfStars: {
  type: Number,
  default: 5
},
showControl: {
  type: Boolean,
  default: true
},
modelValue: {
  type: Number
},
disableClick: {
  type: Boolean,
  default: false
},
step: {
  type: Number,
  default: 0.5
}

Preview:

Changelog:

10/02/2023

• v3.0.4: fixed bug where calculations doesn’t work when wrapped around an element with absolute positioning

Download Details:

Author: abiodunolunu

Live Demo: https://github.com/abiodunolunu/vue3-star-ratings

Download Link: https://github.com/abiodunolunu/vue3-star-ratings/archive/refs/heads/main.zip

Official Website: https://github.com/abiodunolunu/vue3-star-ratings

Install & Download:

# NPM
$ npm i vue3-star-ratings --save