Rating

Star rating with hover preview, half-star, emojis, color maps, animations, and custom icons.

3

<template>
  <VxRating v-model="rating" />
</template>

Half Stars

3.5

<template>
  <VxRating v-model="rating" allow-half />
</template>

Show Value, Count & Reviews

3/ 5(142)

<template>
  <VxRating v-model="rating" show-value show-count :review-count="142" />
</template>

Format Value

3.5 pts

<template>
  <VxRating v-model="rating" show-value :format-value="v => v.toFixed(1) + ' pts'" />
</template>

With Texts

Bad

<template>
  <VxRating :texts="['Terrible', 'Bad', 'OK', 'Good', 'Excellent']" />
</template>

Heart Icon

<template>
  <VxRating icon="heart" color="#ef4444" />
</template>

Thumb Icon

<template>
  <VxRating icon="thumb" color="#3b82f6" :max="3" />
</template>

Emoji Mode

😡

😕

😐

🙂

😍

💀

👎

👌

👍

🔥

<template>
  <VxRating :emojis="['😡', '😕', '😐', '🙂', '😍']" />
  <VxRating :emojis="['💀', '👎', '👌', '👍', '🔥']" />
</template>

Color Map

Different color per star level.

3

<template>
  <VxRating :color-map="['#ef4444', '#f97316', '#eab308', '#22c55e', '#10b981']" />
  <!-- 1 star = red, 2 = orange, 3 = yellow, 4 = green, 5 = emerald -->
</template>

Tooltip

Shows "3 / 5" on hover.

<template>
  <VxRating v-model="rating" tooltip />
</template>

Animation

bounce

pulse

<template>
  <VxRating animation="bounce" />
  <VxRating animation="pulse" />
</template>

Custom Icon (Slot)

<template>
  <VxRating v-model="rating">
    <template #icon="{ state, color }">
      <MyIcon :active="state !== 'empty'" :color="color" />
    </template>
  </VxRating>
</template>

Custom Colors

<template>
  <VxRating color="#22c55e" />
  <VxRating color="#f97316" inactive-color="#374151" />
</template>

Allow Clear

0

<template>
  <VxRating v-model="rating" allow-clear />
</template>

Max Stars

3/ 3

2/ 10

<template>
  <VxRating :max="3" />
  <VxRating :max="10" />
</template>

Sizes

xs

sm

default

lg

xl

<template>
  <VxRating size="xs" />
  <VxRating size="sm" />
  <VxRating />
  <VxRating size="lg" />
  <VxRating size="xl" />
</template>

Readonly & Disabled

readonly

4.5

disabled

<template>
  <VxRating :model-value="4.5" allow-half readonly show-value />
  <VxRating :model-value="3" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	number	0	Rating value (v-model)
max	number	5	Maximum stars
allowHalf	boolean	false	Half-star selection
allowClear	boolean	false	Click same to reset
disabled	boolean	false	Disable
readonly	boolean	false	Read only
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Size
color	string	'#facc15'	Active color
inactiveColor	string	''	Empty icon color
colorMap	string[]	—	Color per level (1=red, 2=orange...)
icon	'star' | 'heart' | 'thumb'	'star'	Built-in icon
customIcon	Component	—	Vue component as icon
emojis	string[]	—	Emoji per star (replaces icons)
showValue	boolean	false	Show numeric value
showCount	boolean	false	Show "/ max"
reviewCount	number | string	—	Show "(142)" review count
texts	string[]	—	Label per level
tooltip	boolean	false	Show "3 / 5" tooltip on hover
animation	'' | 'bounce' | 'pulse'	''	Click animation
formatValue	(v: number) => string	—	Custom value formatter

Events

Event	Type	Description
update:modelValue	(v: number)	Rating changed
change	(v: number)	Rating changed

Slots

Slot	Props	Description
icon	{ index, state, color, inactiveColor }	Custom icon. state: 'full' / 'half' / 'empty'