vue3-star-ratings

---

A simple, customizable component for star ratings

Documentation

---

![](https://res.cloudinary.com/abeydev/image/upload/v1625737162/npm-packages/ezgif.com-gif-maker_2_wt9pw0.gif)

$3

- Uses svg for the stars, so it can scale without quality loss
- Customizable number of stars/ratings
- Customizable step for the rating eg _0.5 0r 0.2_
- Customizable colors

$3

---

``



npm install vue3-star-ratings-ksh --save





You can use register it globally like this:

javascript

import { createApp } from "vue";

import App from "./App.vue";

import vue3StarRatings from "vue3-star-ratings-ksh";



const app = createApp(App);



app.component("vue3-star-ratings", vue3StarRatings);





then use it this in your component:





Alternatively, you can use it directly:

vue

$3

html

javascript

const { createApp } = Vue;

const App = {

  //Component code...

};

const app = createApp(App);

app.component("vue3StarRatings", Vue3StarRatings);

app.mount("#app");





Vue3StarRatings uses v-model to sync the rating between the components and its parent :

.



You can customize the component by taking a look at the

props

 table below.



Props



| Prop          | Description                                                                                       | Type             | Default |

| ------------- | ------------------------------------------------------------------------------------------------- | ---------------- | ------- |

| starSize      | This is the height and width of the stars in pixels                                               | String Or Number | 32      |

| starColor     | This is the color of the stars when active                                                        | String           | #ff9800 |

| inactiveColor | This is the color of the stars when inactive                                                      | String           | #333    |

| numberOfStars | This is the number of stars shown and also the totalRating rating possible                        | Number           | 5       |

| step          | This is the increment or decrement when the control buttons are clicked                           | Number           | 0.5     |

| controlBg     | This is the background of the control buttons                                                     | String           | #2e5090 |

| controlColor  | This is the color of the color buttons                                                            | String           | #fff    |

| controlSize   | This is the size of the the control buttons                                                       | String Or Number | 24      |

| showControl   | This is the option to choose if the control buttons are being shown                               | Boolean          | true    |

| disableClick  | This is the option to disabled click on the stars, use in conjunction with the