Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Vue Star Rating | 566 | 141 | 21 | a year ago | 27 | October 08, 2020 | 15 | mit | JavaScript | |
:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x | ||||||||||
Vue Bulma | 403 | 6 years ago | 9 | mit | Vue | |||||
轻量级高性能MVVM Admin UI框架,Charts Collaopse Modal NavMenu Pagination ProgressBar Rating Timeline Toast | ||||||||||
Exchangerate.host | 321 | 2 months ago | 39 | CSS | ||||||
Exchange rates API is a simple and lightweight free service for current and historical foreign exchange rates & crypto exchange rates. | ||||||||||
Vue Rate | 213 | 9 | a year ago | 26 | May 16, 2022 | 1 | mit | Vue | ||
Rate component for Vue | ||||||||||
Vue Tiny Rate | 157 | 2 | 4 years ago | 10 | March 08, 2019 | 2 | mit | Vue | ||
⭐️ The smallest rating component for Vue2.x , use character★ and ☆ support mpvue | ||||||||||
Vue Stars | 115 | 3 | 1 | 5 months ago | 13 | March 27, 2021 | 8 | mit | Vue | |
Flexible VueJS input control for ratings (stars, etc.). | ||||||||||
Vue Gravatar | 108 | a year ago | 9 | mit | JavaScript | |||||
A dead-simple gravatar component for VueJS | ||||||||||
Marketplace Demo | 88 | 3 months ago | 35 | mit | Vue | |||||
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 Rating | 84 | 5 | 2 years ago | 9 | June 29, 2019 | 10 | Vue | |||
A highly dynamic vue stars rating component, similar to google play stars rating | ||||||||||
Vue Rate It | 74 | 16 | 2 | 4 years ago | 10 | November 03, 2017 | 10 | mit | JavaScript | |
:thumbsup: Customisable rating system for Vue.js 2 |
Vue-rate-it is an extensible, highly customisable rating system for Vue.js 2. It includes four built-in rating components for rating with stars, hearts, images or any Font Awesome glyph.
Check out the detailed docs with examples on the vue-rate-it Github Pages
Below you can see the simple markup required to create a rating component:
<star-rating></star-rating>
<heart-rating></heart-rating>
<image-rating src="/images/vueLogo.png"></image-rating>
<fa-rating v-bind:glyph="thumbsUp"></fa-rating>
Note: The fa-rating
component requires you to first register the font-awesome glyph you want to use in your Vue instance, which is why this example uses v-bind
(see: font-awesome rating component docs)
It is recommended that you install vue-rate-it via npm:
npm install vue-rate-it
Once installed you can import the rating components like so:
import {StarRating} from 'vue-rate-it';
import {HeartRating} from 'vue-rate-it';
import {FaRating} from 'vue-rate-it';
import {ImageRating} from 'vue-rate-it';
You may also import all of the components at once, however, you will still need to register each component individually:
import Raters from 'vue-rate-it';
You can register your raters globally by doing the following:
import Raters from 'vue-star-rating';
Vue.component('star-rating', Raters.StarRating);
Vue.component('heart-rating', Raters.HeartRating);
Vue.component('fa-rating', Raters.FaRating);
Vue.component('image-rating', Raters.ImageRating);
You can register your raters in the components that you want to use them in by doing the following:
import {StarRating} from 'vue-rate-it';
export default{
components:{
StarRating
}
}
You can find details about all the available props, events and options on the docs github pages
It is recommended that you use vue-rate-it
via NPM, however, each rating component does have a dist file available via unpkg. To use the raters via CDN simply include the following in your web page. These components are registered automatically:
<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/star-rating.min.js">
<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/heart-rating.min.js">
<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/fa-rating.min.js">
Note: The fa-rating
component CDN is intended for demonstrative purposes only. It contains an entire port of font-awesome glyphs which makes it more than 700kB in size. It is strongly recommended that you use this component via NPM where you can specify the glyphs that you want to import.
<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/image-rating.min.js">
You may also include all features and raters via CDN by doing:
<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/vue-rate-it.min.js">
Note: This CDN file is intended for demonstrative purposes only. It contains an entire port of font-awesome glyphs which makes it more than 700kB in size. It is strongly recommended that you use NPM where you can specify any glyphs that you want to import.
When importing all features via CDN, the raters are not automatically registered, so you will need to register them yourself by doing:
Vue.component('star-rating', VueRateIt.StarRating);
Vue.component('heart-rating', VueRateIt.HeartRating);
Vue.component('image-rating', VueRateIt.ImageRating);
Vue.component('fa-rating', VueRateIt.FaRating);
You may also register them in your view model:
new Vue({
el: "#app",
components:{
'star-rating': VueRateIt.StarRating
}
});
You can find details about all the available props, events and options on the docs github pages
The first thing you will want to do is sync your ratings between the parent and the rating component. If you are using Vue 2.2 and above the simplest way to sync the rating is to use v-model:
<heart-rating v-model="rating"></heart-rating>
<template>
<div>
<heart-rating v-model="rating"></heart-rating>
<div>Currently Selected: {{rating}}</div>
<div><a href="#" @click.prevent="rating = 0">Reset Rating</a></div>
</div>
</template>
<script type="text/javascript">
import {HeartRating} from 'vue-rate-it';
export default{
components: {
HeartRating
},
data(){
return {
rating: 3
}
}
}
</script>
It isn't possible to use v-model on the component in Vue.js 2.1 and below, however, the following is the equivalent of the v-model
example above:
<heart-rating @rating-selected="rating = $event" :rating="rating"></heart-rating>
<template>
<div>
<heart-rating @rating-selected="rating = $event" :rating="rating"></heart-rating>
<div>Currently Selected: {{rating}}</div>
<div><a href="#" @click.prevent="rating = 0">Reset Rating</a></div>
</div>
</template>
<script type="text/javascript">
import {HeartRating} from 'vue-rate-it';
export default{
components: {
HeartRating
},
data(){
return {
rating: 3
}
}
}
</script>
Once you have everything up and running, you can check out the detailed docs on the vue-rate-it docs github pages