Vue-rate-it - Extensible Rating Component for Vue.js 2

![Build Status](https://travis-ci.org/craigh411/vue-rate-it)

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.

Features

- Rate with Stars, Hearts, Images or any Font Awesome glyph.
- Extensible - Create your own SVG raters by extending the included components.
- Includes port of nerly 700 font awesome glyphs to use as rating items.
- Customisable rating increments - Use any increment you want from 0.01 onwards.
- Customisable styles - Change colours, borders, sizes and spacing.
- Create read-only ratings.
- Uses scalable SVG images.
- Supports v-model for easy syncing (vue 2.2+)
- Supports RTL (right-to-left)

Check out the detailed docs with examples on the vue-rate-it Github Pages

Getting Started

Below you can see the simple markup required to create a rating component:

$3

![star-rating.png](https://craigh411.github.io/vue-rate-it/#/docs/stars)

Try on JSFiddle

``

HTML









$3



![heart-rating.png](https://craigh411.github.io/vue-rate-it/#/docs/hearts)



Try on JSFiddle

HTML



$3



![image-rating.png](https://craigh411.github.io/vue-rate-it/#/docs/images)



Try on JSFiddle

HTML





$3



![fa-thumbs-up.png](https://craigh411.github.io/vue-rate-it/#/docs/font-awesome)



Try on JSFiddle

HTML





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)



Setup



$3



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:

javascript

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:

javascript

import Raters from 'vue-rate-it';





$3



#### Global Registration



You can register your raters globally by doing the following:

javascript

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:

javascript

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



$3



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:



#### Star Rating

HTML





#### Heart Rating

HTML





#### Fa Rating (Font-awesome)

HTML





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.



#### Image Rating

HTML





#### All Features



You may also include all features and raters via CDN by doing:

HTML





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.



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

javascript

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:

javascript

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



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. If you are using Vue 2.2 and above the simplest way to sync the rating is to use v-model:



#### Basic Markup

HTML





#### Complete Example

HTML





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 equivalent of the

v-model

 example above:



#### Basic Markup

HTML





#### Complete Example

HTML

What Next

Once you have everything up and running, you can check out the detailed docs on the vue-rate-it docs github pages

Vue-rate-it - Extensible Rating Component for Vue.js 2

Features

Getting Started

Below you can see the simple markup required to create a rating component:

$3

![star-rating.png](https://craigh411.github.io/vue-rate-it/#/docs/stars)

Try on JSFiddle

``

HTML









$3



![heart-rating.png](https://craigh411.github.io/vue-rate-it/#/docs/hearts)



Try on JSFiddle

HTML



$3



![image-rating.png](https://craigh411.github.io/vue-rate-it/#/docs/images)



Try on JSFiddle

HTML





$3



![fa-thumbs-up.png](https://craigh411.github.io/vue-rate-it/#/docs/font-awesome)



Try on JSFiddle

HTML





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)



Setup



$3



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:

javascript

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:

javascript

import Raters from 'vue-rate-it';





$3



#### Global Registration



You can register your raters globally by doing the following:

javascript

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:

javascript

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



$3



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:



#### Star Rating

HTML





#### Heart Rating

HTML





#### Fa Rating (Font-awesome)

HTML





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.



#### Image Rating

HTML





#### All Features



You may also include all features and raters via CDN by doing:

HTML





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.



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

javascript

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:

javascript

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



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. If you are using Vue 2.2 and above the simplest way to sync the rating is to use v-model:



#### Basic Markup

HTML





#### Complete Example

HTML





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 equivalent of the

v-model

 example above:



#### Basic Markup

HTML





#### Complete Example

HTML

What Next

Once you have everything up and running, you can check out the detailed docs on the vue-rate-it docs github pages