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:
05/09/2023
- Refactor
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