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

    1.0.7 • Public • Published

    vue3-star-ratings


    A simple, customizable component for star ratings

    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

    Prop Description Type Default
    starSize This is the height and width of the stars in pixels String Or Number 32
    starColor This is the color of the stars when active String #ff9800
    inactiveColor This is the color of the stars when inactive String #333
    numberOfStars This is the number of stars shown and also the totalRating rating possible Number 5
    step This is the increment or decrement when the control buttons are clicked Number 0.5
    controlBg This is the background of the control buttons String #2e5090
    controlColor This is the color of the color buttons String #fff
    controlSize This is the size of the the control buttons String Or Number 24
    showControl This is the option to choose if the control buttons are being shown Boolean true
    disableClick This is the option to disabled click on the stars, use in conjunction with the showControl Prop Boolean false
    v-model Sync the rating between the component and its parent ('Where it is been used')

    Install

    npm i vue3-star-ratings

    DownloadsWeekly Downloads

    13

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    39.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • abeydev