Vue.js Star Rating Component
Published: 2023-10-16 13:04:00



A Vue.js component for creating a star rating system, allowing users to rate items or content.

## Features

- Customizable star rating with a specified number of stars.
- Supports both clicking and hover interactions for setting the rating.
- Emits the selected rating for parent component communication.
- Easily integrate into your Vue.js application.

## Usage

### Installation

1. Ensure you have Vue.js installed in your project.
2. Copy the `StarRating.vue` component into your project.

### Example

```vue
<template>
  <div>
    <star-rating v-model="userRating" :max-stars="5" @ratingData="updateRating" />
    <p>Selected rating: {{ userRating }}</p>
  </div>
</template>

<script>
import StarRating from "./StarRating.vue";

export default {
  data() {
    return {
      userRating: 0,
    };
  },
  components: {
    StarRating,
  },
  methods: {
    updateRating(newRating) {
      // Handle the new rating as needed.
      this.userRating = newRating;
    },
  },
};
</script>
```
### Component Code

``` js
<template>
  <div class="star-rating">
    <div
      v-for="i in maxStars"
      :key="i"
      @click="setRating(i)"
      @mouseover="hoverRating(i)"
      @mouseleave="resetHover"
      :class="['star', i <= (isHovered ? hoverValue : rating) ? 'filled' : '']"
    >
      ★
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    maxStars: {
      type: Number,
      default: 5,
    },
  },
  setup(props, { emit }) {
    const rating = ref(props.value);
    const isHovered = ref(false);
    const hoverValue = ref(0);

    const setRating = (newRating) => {
      rating.value = newRating;
      emit('ratingData', newRating);
    };

    const hoverRating = (value) => {
      if (isHovered.value) {
        hoverValue.value = value;
      }
    };

    const resetHover = () => {
      hoverValue.value = 0;
    };

    return {
      rating,
      isHovered,
      hoverRating,
      resetHover,
      setRating,
    };
  },
};
</script>

<style scoped>
.star-rating {
  display: inline-block;
}

.star {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  margin: 2px;
  color: rgb(222, 222, 222);
}

.filled {
  color: gold;
}
</style>

```

### Component Explanation

- The component consists of a group of stars, each of which can be clicked to set a rating.
- Stars change color on hover and remain filled or unfilled based on the selected rating.
- Emits the `ratingData` event to send the selected rating to the parent component.
- Supports a `maxStars` prop for specifying the maximum number of stars.
- Utilizes Vue 3 Composition API for state management with `ref`.

### Styling

- Stars are styled with a base color of gray and turn gold when filled.
- Adjustable font size and cursor styles for user interaction.

## Props

- `value` (Number): Represents the current rating.
- `maxStars` (Number): Specifies the maximum number of stars (default: 5).

## Events

- `ratingData`: Emits the selected rating to the parent component.

## Methods

- `setRating(newRating)`: Sets the current rating and emits the `ratingData` event.
- `hoverRating(value)`: Tracks the hovered rating during a hover interaction.
- `resetHover()`: Resets the hover value after the mouse leaves the star.

## Author

Created by Tahsin Abrar