nuxt-rating

🌠 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

1. 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

1. Add nuxt-rating to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-rating"],
});

1. 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>