> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ais-rating-menu
> Lets users refine search results by selecting star ratings.
```vue Signature theme={"system"}
```
## Import
To ensure optimal bundle sizes,
see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).
```js Vue icon=code theme={"system"}
import { AisRatingMenu } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
export default {
components: {
AisRatingMenu
},
// ...
};
```
This imports all widgets, even the ones you don't use.
For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).
```js JavaScript icon="code" theme={"system"}
import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
Vue.use(InstantSearch);
```
Preview this widget and its behavior.
## About this widget
The `ais-rating-menu` lets users refine search results by clicking on stars.
The stars are based on the selected attribute.
### Requirements
The [`attribute`](#param-attribute) provided to the widget must be in attributes for faceting,
either on the [dashboard](/doc/guides/managing-results/refine-results/faceting/how-to/declaring-attributes-for-faceting-with-dashboard)
or using the [`attributesForFaceting`](/doc/api-reference/api-parameters/attributesForFaceting) parameter with the API.
## Examples
```vue Vue icon=code theme={"system"}
```
## Props
The name of the attribute in the record.
```vue Vue icon=code theme={"system"}
```
The maximum value for the rating.
This value is exclusive,
which means the number of stars will be the provided value, minus one.
```vue Vue icon=code theme={"system"}
```
The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):
* `ais-RatingMenu`. The root element of the widget.
* `ais-RatingMenu-starSymbol`. The SVG symbol for a filled star.
* `ais-RatingMenu-starEmptySymbol`. The SVG symbol for an empty star.
* `ais-RatingMenu-list`. The list of ratings.
* `ais-RatingMenu-item`. The item of the ratings list.
* `ais-RatingMenu-link`. The link of each rating item.
* `ais-RatingMenu-starIcon`. The star icon.
* `ais-RatingMenu-starIcon--full`. The filled star icon.
* `ais-RatingMenu-starIcon--empty`. The empty star icon.
* `ais-RatingMenu-label`. The "& Up" label.
* `ais-RatingMenu-count`. The number of results for the rating.
```vue Vue icon=code theme={"system"}
```
## Customize the UI
The slot to override the complete DOM output of the widget.
When you implement this slot,
none of the other slots will change the output,
as the default slot surrounds them.
**Scope**
* `items: object[]`. The list of available refinements.
* `canRefine: boolean`. Whether a refinement can be applied.
* `refine: (value: string) => void`. A function to select the next refinement.
* `createURL: (item: string) => string`. A function to generate a link from the refinement.
* `sendEvent: (eventType: 'click', facetValue: string) => void`. The function to send `click` events.
* The `view` event is automatically sent when the facets are rendered.
* The `click` event is automatically sent when `refine` is called.
* You can learn more about the middleware.
Where each item is an `object` containing:
* `count: number`. The number of results that match this refinement.
* `isRefined: boolean`. Whether the refinement is selected.
* `name: string`. The name corresponding to the number of stars.
* `value: string`. The number of stars with a string form.
* `stars: boolean[]`. The list of stars to generate with:
* `true`. Represents a filled star
* `false`. Represents an empty star
```vue Vue icon=code theme={"system"}
```
## HTML output
```html HTML icon=code-xml theme={"system"}
```