crbtc.org/pages/event/[slug].vue

<script setup>
  const { path } = useRoute()

  const { data, error } = await useAsyncData(`content-${path}`, () => {
    return queryContent().where({ _path: path }).findOne()
  })

  if (error.value) {
    showError(
      createError({
        statusCode: 404,
        statusMessage: 'Not Found',
      })
    )
  }

  import { format } from "date-fns";

  let formatDate = (date) => {
    date = new Date(date)
    return new Date(
      date.valueOf() + date.getTimezoneOffset() * 60 * 1000
    )
  }
  
  let date = formatDate(data.value.date)
  data.value.date = format(date, 'EEE, MMMM do')

</script>

<template>
  <div class="event" :id="data.slug">
    <div class="hero">
      <h3>{{ data.title }}</h3>
      <h4><b>Location</b>: {{ data.location}}</h4>
      <h4><b>Address</b>: {{ data.address }}</h4>
      <h4><b>Date</b>: {{ data.date }} · {{ data.time }}</h4>
    </div>
    <ContentDoc class="details" />
  </div>
</template>