Header.vue

<script setup>
defineProps({
  image: {
    type: String,
    default: "",
  },
  title: {
    type: [String, Object],
    default: "",
    text: String,
    variant: {
      validator(value) {
        return ["h1", "h2", "h3", "h4", "h5", "h6"].includes(value);
      },
    },
    class: {
      type: String,
      default: "",
    },
  },
  description: {
    type: [String, Object],
    default: "",
    text: String,
    class: String,
  },
  mask: {
    type: String,
    default: "mask bg-gradient-success opacity-4",
  },
  center: {
    type: Boolean,
    default: false,
  },
  minHeight: {
    type: String,
    default: " min-vh-75",
  },
  fullWidth: {
    type: Boolean,
    default: false,
  },
});
</script>
<template>
  <header class="header-2">
    <div
      class="page-header"
      :class="minHeight"
      :style="`background-image: url(${image})`"
      loading="lazy"
      v-if="title"
    >
      <span :class="mask"></span>
      <div :class="fullWidth ? 'w-100' : 'container'">
        <div class="row">
          <div
            :class="`${$attrs.class ?? 'col-lg-7'} ${
              center ? 'text-center mx-auto' : ''
            }`"
          >
            <component
              :is="title.variant ? title.variant : 'h1'"
              class="text-white"
              :class="title.class"
            >
              {{ typeof title == "object" ? title.text : title }}
            </component>
            <p class="lead text-white" :class="description.class">
              {{
                typeof description == "object" ? description.text : description
              }}
            </p>
            <slot />
          </div>
        </div>
      </div>
    </div>
    <slot v-else />
  </header>
</template>