@hbilal_9/vue3-star-ratings NPM

Vue Star Ratings

Vue 3 simple and customizable component for star ratings

Features

Simple to use
HTML Encode Characher Stars without quality loss
customize color, size, font-family, and counts of stars

Screenshots

App Screenshot

Installation

Install Vue Stars Ratings with npm

  npm i @hbilal_9/vue3-star-ratings

Browser with CDN

<script src="https://unpkg.com/@hbilal_9/vue3-star-ratings/dist/index.js"></script>

Setup

Import Images Dragger in main.ts

  import StarRatings from '@hbilal_9/vue3-star-ratings'
  import '@hbilal_9/vue3-star-ratings/dist/style.css'
  app.use(StarRatings)

Use as component

  import StarRatings from '@hbilal_9/vue3-star-ratings'
  import '@hbilal_9/vue3-star-ratings/dist/style.css'

In template

  <star-ratings :starsCounts="7" v-model="ratings"></star-ratings>

you can also pass change event

  <star-ratings @star-change="getRatings"></star-ratings>

in script

function getRatings(e){
    console.log(e)
}

Usage

<script setup lang="ts">
  import { ref } from 'vue';
  const ratings = ref(0)

</script>

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

    You added {{ ratings }} stars ratings.
</template>

Custom Style

You can pass a custom class as a props to design the component according to your needs

<star-ratings v-model="ratings" class="custom-style" />

css

.custom-style {
    color: red !important;
    font-size: 5rem !important;
    font-family: 'system-ui', 'Courier New', Courier, monospace;
}

Props

Prop	Description	Type	Default
starsCounts	Stars counts	Number	5
fillColor	This is the color of the stars when active or hover	String	#ED8A19
size	star size in accept px and rem	String	3rem
fontFamily	This is the font family of the stars,this will auto select accounding to your system's fontFamily	String	'system-ui'