v-rating
Rating component in Semantic-UI made with VueJS
3,564
49
| Install | |
|---|---|
npm install v-rating |
|
| Latest Version: | 1.1.2 |
| Vue: | 2 |
| Last Updated: | Oct 24, 2026 |
| Links: | GitHub · npm |
Maintainer: vinayakkulkarni
V-Rating :zap:

-
Simple
ui ratingcomponent for Vue made with Semantic-UI. -
This is on GitHub so let me know if I've b0rked it somewhere, give me a star :star: if you like it :beers:
-
Demo here -> 💯 Codesandbox Link
Requirements
- Vue.js 2.x
- Semantic-UI 2.x
:white_check_mark: Install :ok_hand:
npm install v-rating
// or
yarn add v-rating
CDN: UNPKG | jsDelivr (available as window.VRating)
:white_check_mark: Usage :mortar_board:
Register the component globally:
Vue.component('Rating', require('v-rating'));
Or use locally
import Rating from 'v-rating';
:white_check_mark: Example 1 :four_leaf_clover:
<rating v-model="yourLocalVariable" class="huge heart"></rating>
Vue.component('example-component', {
data() {
return {
yourLocalVariable: 0,
};
}
});
:white_check_mark: :book: Props
| Name | Type | Required? | Default | Description |
|---|---|---|---|---|
type |
String | No | star |
The type of rating component will it be? SUI has stars &heart. |
clearable |
Boolean | No | true |
Whether the rating is clearable or not. Read the SUI Docs on this |
max |
String | No | 5 |
A number representing the maximum ratings that can be made available. |
initial |
String | No | 0 |
A number representing the default rating to apply. |
NPM :octocat:
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.1.2 | ^2.6.9 | ||
| 1.1.1 | ^2.6.9 | ||
| 1.1.0 | ^2.6.9 | ||
| 1.0.2 | ^2.6.8 | ||
| 1.0.1 | ^2.4.4 | ||
| 1.0.0 | ^2.4.4 |
