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
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 // 4Context / DI
Use createRatingContext to share a rating instance across a component tree:
import { createRatingContext } from '@vuetify/v0'
export const [useProductRating, provideProductRating, productRating] =
createRatingContext({ namespace: 'my:rating', max: 5 })
// In parent component
provideProductRating()
// In child component
const rating = useProductRating()
rating.select(4)Reactivity
| 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.
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.
Functions
createRatingContext
(_options?: RatingContextOptions) => ContextTrinity<R>Creates a rating context for dependency injection.