Getting Started
Docs
Stars Hearts Font Awesome Image Rater
Extending

Getting Started

Vue-rate-it is an extensible rating system for Vue.js 2. It includes four built-in rating components for rating with stars, hearts, images and over 600 font awesome glyphs, check out how simple it is to use:

Stars

0
<star-rating></star-rating>

Hearts

0
<heart-rating></heart-rating>

Images

0
<image-rating src="/images/vueLogo.png"></image-rating>

Font Awesome Thumbs-up Glyph

0
<fa-rating :glyph="thumbsUp" active-color="#ffcd94"></fa-rating>
Registering Icons

vue-rate-it comes with a port of font awesome icons. Before you can use an icon you must register it in your vue instance. See the Font Awesome Rater Docs for more info.

Setup

NPM

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

Registering the Rating Components

Global Registration

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

Local Registration

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
  }
}

Using the CDN

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 webpage. These components are registered automatically:

Star Rating

<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/star-rating.min.js">

Heart Rating

<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/heart-rating.min.js">

Fa Rating (Font-awesome)

<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/fa-rating.min.js">

Image Rating

<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/image-rating.min.js">

All Features

You may also add all vue-rate-it features and raters via CDN by doing: 
<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/vue-rate-it.min.js">

Registering the Raters

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
  }
});

Syncing Ratings between Parent and Child

The first thing you will want to do is sync your ratings between the parent and the rating component, here's an example of syncing in action:

3
Currently Selected: 3

Using v-model for Syncing in Vue 2.2 and above

If you are using Vue 2.2 and above the simplest way to sync the rating is to use v-model:

Basic Markup

<heart-rating v-model="rating"></heart-rating>

Complete Example

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

Syncing Ratings in Vue 2.1 and below

It isn't possible to use v-model on the component in Vue.js 2.1 and below, however, the following is the equivelent of the v-model example above:

Basic Markup

<heart-rating @rating-selected="rating = $event" :rating="rating"></heart-rating>

Complete Example

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

What Next

Once you have everything up and running, you can check out the detailed docs for each component under the "docs" heading on the navigation menu.