Blog Detail

20

Aug
A customizable Star Rating Component Made with Vue Js cover image

A customizable Star Rating Component Made with Vue Js

Abiodun Olunu introduced a simple, customizable component for star ratings made by Vue Js. It is straightforward and User-friendly so you can easily utilize this component in your web application. It has the following features.

  • Use 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

You can install this via npm:

npm install vue3-star-ratings --save 

Usage

Next, you've to import this package into your app.js. You can 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); 

Next, you've to utilize it 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> 

Usage with CDN

You can also use this package via 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"); 

This package uses the v-model to sync the rating between the components and their 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 inactivee 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

You can visit Github for its detailed documentation

Published at : 20-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project