Box.vue

<template>
  <component
    :is="to ? 'nuxt-link' : 'div'"
    :to="to"
    class="block rounded p-4"
    :class="computedClass"
  >
    <slot />
  </component>
</template>

<script>
export default {
  name: 'Box',
  props: {
    to: {
      type: [String, Object],
      default: null,
    },
    color: {
      type: String,
      default: null,
    },
  },
  computed: {
    computedClass() {
      let classes = ''
      if (this.color) {
        classes += `bg-${this.color}-100 dark:bg-${this.color}-900`
      } else {
        classes = `border dark:border-gray-700`
      }
      if (this.to)
        classes +=
          ' transition transform hover:shadow-xl hover:-translate-y-0.5 is-box-with-link'
      return classes
    },
  },
}
</script>

<style lang="postcss" scoped>
.is-box-with-link {
  text-decoration: none !important;
  color: currentColor !important;
  font-weight: normal !important;
}
</style>