BlogNextPrev.vue

<template>
  <div class="border-t-2 mt-8 flex justify-between text-2xl font-semibold">
    <nuxt-link v-if="prev" :to="prev.path" class="group prev-blog flex-1 py-8">
      <fa icon="chevron-left" class="text-gray-300 mr-3 transition" />
      <span class="group-hover:text-hover">
        {{ prev.title }}
      </span>
    </nuxt-link>

    <nuxt-link
      v-if="next"
      :to="next.path"
      class="group next-blog flex-1 py-8 text-right"
    >
      <span v-prevent-last-char-break class="group-hover:text-hover">
        {{ next.title }}
      </span>
      <fa icon="chevron-right" class="text-gray-300 ml-3 transition" />
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: 'AppNextPrev',
  props: {
    prev: {
      type: Object,
      default: null,
    },
    next: {
      type: Object,
      default: null,
    },
  },
}
</script>

<style lang="postcss" scoped>
.group.prev-blog:hover >>> .fa-chevron-left {
  transform: translateX(-0.5em);
}
.group.next-blog:hover >>> .fa-chevron-right {
  transform: translateX(0.5em);
}
</style>