The TimeLimit component is a versatile Vue.js component designed to display content only within a specified time range. This component is particularly useful in scenarios where you need to show or hide elements based on time constraints, such as limited-time offers, event announcements, or scheduled content.

TimeLimit.vue

<script setup lang="ts">
const props = defineProps<{
  startAt?: Date | number
  endAt?: Date | number
  now?: Date | number
}>()

const isBetween = computed(() => {
  const now = props.now ?? Date.now()
  const startAt = props.startAt ?? now
  const endAt = props.endAt ?? now
  return now >= startAt && now <= endAt
})
</script>

<template>
  <slot v-if="isBetween"></slot>
</template>