Vue Rate

Alternatives To Vue Rate
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Star Rating56614121a year ago27October 08, 202015mitJavaScript
:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x
Vue Bulma403
6 years ago9mitVue
轻量级高性能MVVM Admin UI框架,Charts Collaopse Modal NavMenu Pagination ProgressBar Rating Timeline Toast
2 months ago39CSS
Exchange rates API is a simple and lightweight free service for current and historical foreign exchange rates & crypto exchange rates.
Vue Rate213
9a year ago26May 16, 20221mitVue
Rate component for Vue
Vue Tiny Rate157
24 years ago10March 08, 20192mitVue
⭐️ The smallest rating component for Vue2.x , use character★ and ☆ support mpvue
Vue Stars115315 months ago13March 27, 20218mitVue
Flexible VueJS input control for ratings (stars, etc.).
Vue Gravatar108
a year ago9mitJavaScript
A dead-simple gravatar component for VueJS
Marketplace Demo88
2 months ago35mitVue
Open-source marketplace front-end powered by Stelace API including search, platform automation, user management, transactions, real-time messaging, ratings and much more :zap:
Vue Stars Rating84
52 years ago9June 29, 201910Vue
A highly dynamic vue stars rating component, similar to google play stars rating
Vue Rate It741624 years ago10November 03, 201710mitJavaScript
:thumbsup: Customisable rating system for Vue.js 2
Alternatives To Vue Rate
Select To Compare

Alternative Project Comparisons

Vue Rate

npm version npm

Rate component for Vue - Demo. Note: This version for Vue 2. If you want to use for Vue 3.x, please see.

Installation and usage

Once, install rate component for your project

npm install vue-rate --save
# or
yarn add vue-rate

Import Vue Rate into your app

import rate from 'vue-rate'
import 'vue-rate/dist/vue-rate.css'


Use HTML template

<rate :length="5" />

Options from props

  • length {number}: Star size
<rate :length="5" />
  • value {number}: Default value
<rate :length="5" :value="2" />
  • showcount {boolean}: Shows rate number when mouseover the star.
<rate :length="5" :value="2" :showcount="true" />
  • ratedesc {object}: Rate star description array.
<rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']" />
  • disabled {boolean}: Disable rate.
<rate :length="5" :value="2" :disabled="true" />
  • readonly {boolean}: Read-only rate.
<rate :length="5" :value="2" :readonly="true" />
  • iconref {string}: ID of symbol icon

Insert symbol icon into your codebase

<symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
  <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>

Then add Rate component. iconref must be symbol's id

<rate :length="5" iconref="icon-heart" />
  • slot: Custom icon via slot

You can directly use custom icon via default slot

<rate :length="5" :value="3" :ratedesc="desc" class="viaSlot">
  <svg class="icon" width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="">
      d="M12.034 7.074H19.416L13.445 11.448L15.726 18.524L9.75201 14.151L3.77901 18.524L6.06101 11.448L0.0880127 7.075H7.47001L9.75201 0.002V0L12.034 7.075V7.074Z"

Add some flavour

.RateCustom.viaSlot .icon {
  width: 25px;
  height: 25px;
.Rate.viaSlot .Rate__star.filled{color: #813d1a;}
.Rate.viaSlot .Rate__star.hover{color: #E67136;}
  • v-model
new Vue({
  data: {
    return () {
      myRate: 0
<rate :length="5" v-model="myRate" />


new Vue({
  methods: {
    onBeforeRate (rate) {
    onAfterRate (rate) {
<rate :length="5" :value="2" @before-rate="onBeforeRate" @after-rate="onAftereRate" />


  1. Fork the project
  2. Install all dependencies
  3. Make your changes on src/Rate.vue
  4. Build the package
npm run build
# or yarn build
  1. Commit and create PR



Popular Vue Projects
Popular Rating Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Component