Socket
Socket
Sign inDemoInstall

vue3-star-ratings

Package Overview
Dependencies
21
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-star-ratings

A simple, customizable vue3 component for star ratings


Version published
Maintainers
1
Weekly downloads
1,297
increased by9.18%

Weekly downloads

Readme

Source

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

PropDescriptionTypeDefault
numberOfStarsSpecifies the total number of stars displayed and the maximum ratingNumber5
starSizeSets the height and width of each star, in pixelsNumber32
starColorDefines the color of active starsString#ff9800
inactiveColorSets the color of inactive starsString#333333
disableClickAllows you to disable the click event on the starsBooleanfalse
v-modelSyncs the rating value between the component and its parent component
customSvgProvides an option for using a custom SVG icon for the star ratingComponentBuilt-in

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

Keywords

FAQs

Last updated on 18 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc