createRating
Bounded number with discrete items. Give it a size, get items to iterate with full/half/empty state. Half-step support for 0.5 increments.
Usage
ts
import { createRating } from '@vuetify/v0'
import { shallowRef } from 'vue'
// Basic — standalone
const rating = createRating({ size: 5 })
rating.select(3)
rating.items.value
// [
// { value: 1, state: 'full' },
// { value: 2, state: 'full' },
// { value: 3, state: 'full' },
// { value: 4, state: 'empty' },
// { value: 5, state: 'empty' },
// ]
// With half-step support
const half = createRating({ size: 5, half: true })
half.select(2.5)
half.items.value[2].state // 'half'
// With v-model (pass a ref)
const value = shallowRef(0)
const bound = createRating({ value, size: 5 })
bound.select(4)
value.value // 4Reactivity
| Property | Type | Reactive | Description |
|---|---|---|---|
value | WritableComputedRef<number> | Yes | Current rating, clamped 0–size |
size | number | Getter | Total items |
half | boolean | Getter | Half-step enabled |
items | ComputedRef<RatingItem[]> | Yes | Items with full/half/empty state |
isFirst | Readonly<Ref<boolean>> | Yes | Value is 0 |
isLast | Readonly<Ref<boolean>> | Yes | Value equals size |
select(v) | (value: number) => void | — | Set rating |
next() | () => void | — | Increment by step |
prev() | () => void | — | Decrement by step |
first() | () => void | — | Set to 0 |
last() | () => void | — | Set to size |
Examples
Basic
Standalone rating with navigation controls. Click a star or use the prev/next buttons.
0 / 5
When half is false (default), next() and prev() change the value by 1. When half is true, the step is 0.5.
Each item’s state is derived from the current value:
full: item value <= floor of rating value
half: item value equals the ceiling of a non-integer value
empty: item value > rating value
Yes. createRating is a pure composable with no DOM dependencies. Build your own UI with the items array and navigation methods.
The following API details are for the createRating composable.
Functions
createRatingContext
(_options?: RatingContextOptions) => ContextTrinity<R>Creates a rating context for dependency injection.
Options
Properties
Methods
Was this page helpful?