Vue Star Rating

A simple star rating component built with Vue 3.

Usage

Full source and preview/dev server:

• Clone or download this repository to a directory of your choice
• Install dependencies: npm i
• Build: npm run build (or skip this and the next step and just run the dev server: npm run dev)
• Run preview: npm run serve

Component

• Copy the StarRating.vue component to your project.
• Replace all styles with your own (unless you are already using Tailwind CSS).
• Use v-model to get the rating from the component, like this.
• Optionally provide the stars prop like fewer (or more) stars, the default is 10.

Notes

The star icon is from Hero Icons and can be easily replaced with any SVG of your choice, refer to src/components/StarRating.vue.