<p>Vue Rating component is a star based selection input.
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> Rating <span class="hljs-keyword">from</span> <span class="hljs-string">'primevue/rating'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>Two-way value binding is defined using v-model.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Rating</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"val"</span> /&gt;</span>
</code></pre>
<h3 id="number-of-stars">Number of Stars</h3>
<p>Number of stars to display is defined with <strong>stars</strong> property, default is 5.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Rating</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"val"</span> <span class="hljs-attr">:stars</span>=<span class="hljs-string">"7"</span>/&gt;</span>
</code></pre>
<h3 id="cancel">Cancel</h3>
<p>A cancel icon is displayed to reset the value by default, set <strong>cancel</strong> as false to remove this option.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Rating</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"val"</span> <span class="hljs-attr">:cancel</span>=<span class="hljs-string">"false"</span> /&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>Rating supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primevue/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/rating">Rating</a> showcase for demos and documentation.</p>


Vue Rating component is a star based selection input.
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.

### Import

```js
import Rating from 'primevue/rating';
```

### Getting Started

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

```html
<Rating v-model="val" />
```

### Number of Stars

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

```html
<Rating v-model="val" :stars="7"/>
```

### Cancel

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

```html
<Rating v-model="val" :cancel="false" />
```

### Theming

Rating supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primevue/showcase/#/theming) tool.

### Resources

Visit the PrimeVue [Rating](https://primefaces.org/primevue/showcase/#/rating) showcase for demos and documentation.

Vue3 Rating

Setup

Import

Getting Started

Number of Stars

Cancel

Theming

Resources