Skip to content
An example Vue project that displays a star-based rating.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
src
static
test/unit
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
README.md
index.html
package-lock.json
package.json

README.md

Vue Star-Rating

This is a sample Vue project, built around a StarRating component which displays stars and half-stars based on the inputs you give it, similar to what you might see on Amazon or other ecommerce websites.

Install

git clone https://github.com/Jantho1990/vue-star-rating.git vue-star-rating
cd vue-star-rating
npm install
npm start

This should open a page on your browser to the demo app. If not, you should be able to access it via localhost:3000.

How To Use

Change the inputs via the inputs section:

  • Rating changes the actual rating.
  • Min Rating sets the lower limit for a rating.
  • Max Rating sets the upper limit for a rating.
  • Star Ratio sets how many rating points are required to add a star.

Updating the input values should show in the field of stars below the Vue logo. Visually, increments only occur in half-stars, but you can set the rating to anything you want.

I Want To Use This In A Real App

This is just a sample project. It was not designed for inclusion in a real app. That said, if it inspires you, that's awesome!

You can’t perform that action at this time.