vuejs3-star-ratings

vue3-star-ratings

A simple, customizable component for star ratings

Documentation

Features

• 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

Installation and usage

npm install vue3-star-ratings --save

You can use register it globally like this:

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);

then use it this in your component: <vue3-star-ratings />

Alternatively, you can use it directly:

<!-- your-component.vue -->

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

<script>
import { defineComponent } from "vue";
import vue3starRatings from "vue3-star-ratings";

export default defineComponent({
  components: {
    vue3starRatings,
  },
});
</script>

Browser with CDN

<script src="https://unpkg.com/vue@3.0.0"></script>
<script src="https://unpkg.com/vue3-star-ratings/dist/vue3-star-ratings.min.js"></script>

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 :

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

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 showControl Prop	Boolean	false
v-model	Sync the rating between the component and its parent ('Where it is been used')