nuxt-rating
v0.0.15
Published
Display or retrieve a score on a fully customisable scale.
Downloads
1,811
Maintainers
Readme
🌠 NuxtRating
Features
- Use whatever you like as a star
- View or retrieve a note
- Customisable colors.
- Customisable number of stars.
- Create read-only stars.
- SSR Friendly.
Quick Setup
- Add
nuxt-rating
dependency to your project
# Using pnpm
pnpm add nuxt-rating
# Using yarn
yarn add nuxt-rating
# Using npm
npm install nuxt-rating
- Add
nuxt-rating
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-rating"],
});
- Use
nuxt-rating
component
<NuxtRating :read-only="false" :ratingValue="1.2" />
Props Explanation
The following props can be passed to customize the appearance and behavior of the component:
ratingCount
(optional, default: 5): The total number of rating levels available.ratingSize
(optional, default: "32px"): The size of the rating meter.activeColor
(optional, default: "#ffc700"): The color of the active rating level.inactiveColor
(optional, default: "gray"): The color of the inactive rating levels.ratingValue
(optional, default: 3.7): The initial rating value.ratingContent
(optional, default: "★"): The content to be displayed for each rating level.readOnly
(optional, default: true): Specifies whether the rating meter is read-only or interactive.
Events Explanation
The component emits the following events:
ratingSelected
: Triggered when a rating level is selected. The event payload is the selected rating value.ratingHovered
: Triggered when the mouse hovers over the rating meter. The event payload is the hovered rating value.
Full example (Nuxt 3)
<template>
<div>
<h1 style="margin-bottom: 0px;"> Nuxt 3 Rating Module </h1>
<NuxtRating
:read-only="false"
:rating-count="10"
:rating-size="'40px'"
:active-color="'red'"
:rating-value="1.2"
rating-content="🞺"
@rating-selected="logRating" />
</div>
</template>
<script lang="ts">
export default {
methods: {
logRating(event: number) {
console.log(event);
}
}
};
</script>