Vue Formulate Star Rating Input

A simple wrapper component for the excellent vue-star-rating package by craigh411.

This component allows you to use a star rating as a custom input as a Vue Formulate Plugin.

Installation

Using NPM and webpack

1. npm install --save vue-formulate-star-rating

2. Register the component

   import Vue from "vue";
   import VueFormulate from "@braid/vue-formulate";
   
   import VueFormulateStarRating from "vue-formulate-star-rating";
   
   // add plugin to VueFormulate
   Vue.use(VueFormulate, {
     plugins: [VueFormulateStarRating],
   });

3. Use in a Formulate form

   <FormulateInput
     type="star-rating"
     name="productRating"
     label="Rate this product"
     help="How would you rate this product?"
     :max-rating="5"
     :show-rating="false"
     validation="required|min:4"
   />

Using script tags

1. Include the vue-formulate-star-rating.

   <script src="https://unpkg.com/vue-formulate-star-rating/dist/VueFormulateStarRating.umd.min.js"></script>

2. Register a custom Formulate input

   Vue.use(VueFormulate, {
     plugins: [VueFormulateStarRating.default],
   });

3. Use in your form

   <formulate-input type="star-rating" label="Product rating" name="rating" help="Rate this" :show-rating="false" validation="required"></formulate-input>

Note: as per the Vue Formulate docs:

Due to DOM limitations, when mounting Vue Formulate in DOM templates (outside of single-file components) all the component names will need to be lower-cased, hyphen separated and with a closing tag.

Usage

You can pass props to the input, they will be bound using v-bind.

See vue-star-rating documentation for list of available props.

Validation rules work as normal.

For example, this would set the max rating to 10 and hide the rating, while requiring a minimum rating of 4:

   <FormulateInput
     type="rating"
     name="productRating"
     label="Rate this product"
     help="How would you rate this product?"
     :max-rating="10"
     :show-rating="false"
     validation="required|min:4"
   />

Contribute

Contributions and issues welcome, please file a PR or raise an issue on GitHub.

Development

• npm install
• make your changes
• npm run build
• npm version patch
• npm publish