A simple, customization star rating component for your vue3 projects

Last update: Jul 4, 2022

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

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')

GitHub

https://github.com/abiodunolunu/vue3-star-ratings
You might also like...

base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Jan 10, 2022

Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Mar 4, 2022

Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Jul 26, 2022

A vue2 component for manual data masking

A vue2 component for manual data masking

A vue2 component for manual data masking

Aug 2, 2022

A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Jun 9, 2022

Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Aug 8, 2022

A Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

May 9, 2022

A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Jul 28, 2022

Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

Jun 15, 2022
Vue.js directive to add inputmask library to your inputs (vanilla javascript).
Vue.js directive to add inputmask library to your inputs (vanilla javascript).

vue-inputmask Vue.js directive to add a mask to your inputs (vanilla javascript). It's a binding for the inputmask library by Robin Herbots https://gi

Jul 17, 2022
Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Nov 19, 2021
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Aug 15, 2022
A Simple Input Form For Vue 3

vue-base-input (Vue 3) Base-input: I made it, for simplify a create form on my differents projects. Base-input return if your value is valid and value

Dec 13, 2021
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Apr 24, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

Aug 1, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Jul 25, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

Jul 28, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jul 24, 2022
Vue.js component for Cleave.js :keyboard:

Vue Cleave Component Vue.js component for Cleave.js Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 2.x 2.x 3.x 3.x master F

Jul 20, 2022