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.

Copy Markdown

Preview Intermediate Apr 5, 2026

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 // 4

Context / 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

API Reference

The following API details are for the createRating composable.

createRating

3 functions, 3 options, 6 properties, 5 methods