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:

Alternatively, you can use it directly:

<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/[email protected]">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 :

.

You can customize the component by taking a look at the props table below.

Props

GitHub