crbtc.org/pages/guide/[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',
      })
    )
  }
</script>

<template>
  <div class="guide" :id="data.slug">
    <div class="hero">
      <h3>{{ data.title }}</h3>
      <h4>Written by: {{ data.author }}</h4>
      <h4 v-if="data.updated < data.published">Updated: {{ data.updated }}</h4>
      <h4 v-if="data.published <= data.updated">Published: {{ data.published }}</h4>
      <img :src="'/img/guide/' + data.thumbnail" :alt="data.title + ' Thumbnail'" />
    </div>
    <ContentDoc class="content" />
  </div>
</template>