Nuxt/docs/components/atoms/SectionButton.vue

<template>
  <!-- eslint-disable-next-line vue/require-component-is -->
  <component
    v-bind="linkProps"
    :aria-label="ariaLabel"
    class="font-medium rounded-md"
    :class="[
      iconLeft || iconRight ? 'inline-flex items-center px-4 py-2.5' : 'px-4 py-2.5',
      { 'text-md 2xl:text-base ': size === 'lg' },
      { 'text-sm 2xl:text-md ': size === 'md' },
      { 'text-xs 2xl:text-sm ': size === 'sm' }
    ]"
  >
    <div v-if="iconLeft" class="h-full flex items-center justify-center">
      <Component :is="iconLeft" class="mr-2" :class="{ 'w-5 h-5': size === 'lg' }" />
    </div>
    <slot />
    <div v-if="iconRight" class="h-full flex items-center justify-center">
      <Component :is="iconRight" class="ml-2" :class="{ 'w-5 h-5': size === 'lg' }" />
    </div>
  </component>
</template>

<script>
import { defineComponent, computed } from '@nuxtjs/composition-api'
export default defineComponent({
  props: {
    to: {
      type: String,
      default: ''
    },
    href: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'lg',
      validator (value) {
        return ['sm', 'md', 'lg'].includes(value)
      }
    },
    iconLeft: {
      type: String,
      default: null
    },
    iconRight: {
      type: String,
      default: null
    },
    ariaLabel: {
      type: String,
      default: null
    }
  },
  setup (props) {
    const linkProps = computed(() => {
      const { to, href } = props
      if (to?.length) {
        return {
          is: 'Link',
          to
        }
      } else if (href?.length) {
        return {
          is: 'Link',
          static: true,
          to: '',
          href,
          blank: true
        }
      } else {
        return {
          is: 'button'
        }
      }
    })

    return {
      linkProps
    }
  }
})
</script>