ATime.vue

<template>
  <time :datetime="isoRepresentation" :title="title">
    <slot :datetime="datetime" />
  </time>
</template>

<script lang="ts" setup>
import { parseISO } from 'date-fns'
import { computed } from 'vue'
import { useI18n } from '@/i18n'

const props = defineProps<{
  time: Date | string
}>()
const { locale } = useI18n()
const datetime = computed(() => (props.time instanceof Date ? props.time : parseISO(props.time)))
const isoRepresentation = computed(() =>
  typeof props.time === 'string' ? props.time : props.time.toISOString(),
)
const title = computed(() =>
  datetime.value.toLocaleString(locale.value, { dateStyle: 'full', timeStyle: 'medium' }),
)
</script>