vue3-star-ratings
TypeScript icon, indicating that this package has built-in type declarations

3.0.5 • Public • Published

vue3-star-ratings


A simple, customizable component for star ratings

Documentation


Features

  • SVG-based stars ensure scalable and high-quality display
  • Customizable number of stars/ratings
  • Customizable icon
  • Customizable color options for active and inactive stars

Demo

You can try out the demo here: https://vue3-star-ratings.netlify.app/demo

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"></script>
<script src="https://unpkg.com/vue3-star-ratings"></script>
const { createApp } = Vue;
const App = {
  //Component code...
};
const app = createApp(App);
app.component("vue3StarRatings", Vue3StarRatings);
app.mount("#app");

The v-model directive syncs the rating value between the Vue3StarRatings component and its parent:

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

Available Props

Prop Description Type Default
numberOfStars Specifies the total number of stars displayed and the maximum rating Number 5
starSize Sets the height and width of each star, in pixels Number 32
starColor Defines the color of active stars String #ff9800
inactiveColor Sets the color of inactive stars String #333333
disableClick Allows you to disable the click event on the stars Boolean false
v-model Syncs the rating value between the component and its parent component
customSvg Provides an option for using a custom SVG icon for the star rating Component Built-in

Customize the component by leveraging these props to meet your specific needs.

Package Sidebar

Install

npm i vue3-star-ratings

Weekly Downloads

1,297

Version

3.0.5

License

MIT

Unpacked Size

25.1 kB

Total Files

9

Last publish

Collaborators

  • abeydev