Capital/pages/products/[...slug].vue

<template>
  <v-container class="content-container mx-auto">
    <v-card v-if="page" class="mb-5" :to="page._path">
      <v-card-text>
        <v-row>
          <v-col cols="12" md="4">
            <v-img :src="page.thumbnail" :aspect-ratio="16/9" class="rounded-md" cover />
          </v-col>
          <v-col cols="12" md="8" class="flex flex-col">
            <h2 class="text-xl">{{ page.title }}</h2>
            <span>{{ page.description }}</span>
            <v-chip
              v-if="page?.archived"
              label
              prepend-icon="mdi-archive"
              variant="text"
              color="warning"
              size="small"
              class="mx-[-6px]"
            >
              Archived
            </v-chip>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <article class="text-base prose xl:text-lg mx-auto">
      <content-doc>
        <template #empty>
          <v-empty-state
            icon="mdi-image-broken-variant"
            text="This product has no specific describe for it, yet."
            title="No Content"
            class="no-content-placeholder"
          >
            <template #actions>
              <v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
            </template>
          </v-empty-state>
        </template>
        <template #not-found>
          <v-empty-state
              icon="mdi-flask-empty-remove-outline"
              text="We haven't this product, yet."
              title="Not Found"
              class="no-content-placeholder"
          >
            <template #actions>
              <v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
            </template>
          </v-empty-state>
        </template>
      </content-doc>
    </article>
  </v-container>
</template>

<style scoped>
.no-content-placeholder {
  min-height: 0;
  max-height: 64rem;
}
</style>

<script setup lang="ts">
const route = useRoute();
const { data: page } = await useAsyncData('page', queryContent(route.path).findOne)
</script>

<style scoped>
.content-container {
  max-width: 65ch !important;
}
</style>