Nuxt/docs/components/organisms/SectionContentItem.vue

<template>
  <component
    :is="component"
    :to="to"
    :aria-label="title"
    class="flex flex-col items-center transition duration-200 p-6 rounded-md"
    :class="hoverClass"
  >
    <InjectComponent
      :component="image"
      class="mb-4 transition duration-200 text-primary group-hover:text-primary-400"
      :class="imageClass"
    >
      <img loading="lazy" :src="image" :alt="`A ${title} image`">
    </InjectComponent>
    <h3 class="relative inline-flex mb-1 text-center text-body-lg items-center lg:text-body-xl font-bold">
      {{ title }}
      <span v-if="soon" class="absolute -right-48px inline-flex items-center mt-1px px-1.5 py-0.5 rounded text-xs font-medium font-mono bg-cloud-surface dark:bg-sky-dark dark:text-white">soon</span>
    </h3>
    <p class="text-center text-sm lg:text-base mb-4">
      {{ description }}
    </p>
  </component>
</template>

<script>
import { defineComponent, computed } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    image: {
      type: String,
      default: ''
    },
    imageClass: {
      type: String,
      default: ''
    },
    soon: {
      type: Boolean,
      default: false
    },
    hoverClass: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    to: {
      type: String,
      default: ''
    },
    linkName: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    const component = computed(() => {
      if (props.to && !props.linkName) {
        return 'Link'
      }
      return 'div'
    })

    return { component }
  }
})
</script>