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

You can visit Github for its detailed documentation