vsr

vue3-star-ratings

A simple, customization star rating component for your vue3 projects

Showing:

Popularity

Downloads/wk

14

GitHub Stars

6

Maintenance

Last Commit

24d ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

vue3-star-ratings


A simple, customizable component for star ratings

npm

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

PropDescriptionTypeDefault
starSizeThis is the height and width of the stars in pixelsString Or Number32
starColorThis is the color of the stars when activeString#ff9800
inactiveColorThis is the color of the stars when inactiveString#333
numberOfStarsThis is the number of stars shown and also the totalRating rating possibleNumber5
stepThis is the increment or decrement when the control buttons are clickedNumber0.5
controlBgThis is the background of the control buttonsString#2e5090
controlColorThis is the color of the color buttonsString#fff
controlSizeThis is the size of the the control buttonsString Or Number24
showControlThis is the option to choose if the control buttons are being shownBooleantrue
disableClickThis is the option to disabled click on the stars, use in conjunction with the showControl PropBooleanfalse
v-modelSync the rating between the component and its parent ('Where it is been used')

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100