DEV Community

loading...
Cover image for Vue3 Rating

Vue3 Rating

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・1 min read

Vue Rating component is a star based selection input.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Rating from 'primevue/rating';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Two-way value binding is defined using v-model.

<Rating v-model="val" />
Enter fullscreen mode Exit fullscreen mode

Number of Stars

Number of stars to display is defined with stars property, default is 5.

<Rating v-model="val" :stars="7"/>
Enter fullscreen mode Exit fullscreen mode

Cancel

A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.

<Rating v-model="val" :cancel="false" />
Enter fullscreen mode Exit fullscreen mode

Theming

Rating supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Rating showcase for demos and documentation.

Discussion (0)