Flowbite Vue 3Vue Rating - Flowbite
Default rating
Use this simple example of a star rating component for showing review results.
vue
<script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<Rating :rating="4" />
</template><script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<Rating :rating="4" />
</template>Rating with text
If you also want to show a text near the stars you can use this example as a reference.
vue
<script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<Rating :rating="4">
<template #besideText>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
</template>
</Rating>
</template><script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<Rating :rating="4">
<template #besideText>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
</template>
</Rating>
</template>4.95 out of 5
Rating count
Aggregate more results by using this example to show the amount of reviews and the average score.
vue
<script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<Rating
:rating="1"
:scale="1"
review-text="73 reviews"
review-link="#"
>
<template #besideText>
<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
</template>
</Rating>
</template><script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<Rating
:rating="1"
:scale="1"
review-text="73 reviews"
review-link="#"
>
<template #besideText>
<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
</template>
</Rating>
</template>4.95
73 reviewsStar sizes
Check out the different sizing options for the star review component from small, medium, and large.
vue
<script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<!-- Small -->
<Rating size="sm" :rating="4" />
<!-- Medium -->
<Rating size="md" :rating="4" />
<!-- Large -->
<Rating size="lg" :rating="4" />
</template><script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<!-- Small -->
<Rating size="sm" :rating="4" />
<!-- Medium -->
<Rating size="md" :rating="4" />
<!-- Large -->
<Rating size="lg" :rating="4" />
</template>