Jantho1990

<star-rating :rating="7"/>

Jantho1990

<template>
  <div class="star-rating">
    <font-awesome-icon
      class="star"
      icon="star"
      v-for="fs in fullStars"
      :key="`fs${fs}`"
    />

    <font-awesome-layers

Jantho1990

<font-awesome-layers
  class="star"
  v-for="hs in halfStars"
  :key="`hs${hs}`"
>
  <font-awesome-icon icon="star-half"/>
  <font-awesome-icon
    flip="horizontal" 
    :icon="['far', 'star-half']"
  />

Jantho1990

<template>
  <div>
    <h2>These are my children:</h2>
    <ul>
      <slot></slot>
    </ul>
  </div>
</template>

<script>

Jantho1990

<template>
  <div class="star-rating">
    <font-awesome-icon
      class="star"
      icon="star"
      v-for="fs in fullStars"
      :key="`fs${fs}`"
    />
    
    <font-awesome-layers

Jantho1990

<template>
  <div class="star-rating">
    <font-awesome-icon
      class="star"
      icon="star"
      v-for="(fs, i) in fullStars"
      :key="`fs${i}`"
    />
  </div>
</template>

Jantho1990

<script>
export default {
  // ...
  computed: {
    fullStars () {
      let { rating, starRatio } = this
      return Math.floor(rating / starRatio)
    },
    halfStars () {
      let { rating, starRatio } = this

Jantho1990

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <star-rating/>
  </div>
</template>

<script>
import StarRating from './components/StarRating'
// ...

Jantho1990

<template>
  <div class="star-rating">
    <font-awesome-icon class="star" icon="star"/>
  </div>
</template>

Jantho1990

<script>
import {
  FontAwesomeIcon,
  FontAwesomeLayers
} from '@fortawesome/vue-fontawesome'

export default {
  name: "StarRating",
  components: {
    FontAwesomeIcon,