How to disable prose components on a specific page?

[goodpixels]

Thanks for the great plugin and a highly responsive community!

I'm working on a blog and I've encountered the following scenario: on the blog category listing page I want to render the excerpt as a regular paragraph, but on the single post page I want to render it in large font.

I've created a custom Excerpt component (as mentioned here), and it works great.

However, I would only want to use it when rendering content via the single post page (/pages/blog/[...slug].vue), and when the same content is rendered on the blog category page (/pages/blog/index.vue), the excerpt should be rendered as a plain paragraph tag.

Here's my code:

/components/content/Excerpt.vue

<template>
  <p class="text-5xl">
    <ContentSlot
      :use="$slots.default"
      unwrap="p" />
  </p>
</template>

/pages/blog/index.vue

<template>
  <div>
    <Heading
      variant="title"
      class="mb-comfy"
      >Blog</Heading
    >
    <CategoryItems v-slot="{ items }">
      <ArticleSnippet
        v-for="item in items"
        :key="item._path"
        :doc="item" />
    </CategoryItems>
  </div>
</template>

/components/ArticleSnippet.vue

<script setup>
const props = defineProps({
  doc: Object,
})

const localePath = useLocalePath()
</script>

<template>
  <NuxtLink
    class="grid grid-cols-12 gap-x-normal"
    :to="localePath(doc._path)">
    <Heading>{{ doc.title }}</Heading>
    <ContentRenderer
      :value="doc"
      excerpt />
  </NuxtLink>
</template>

/content/blog/test-article.md

---
draft: false
title: Article title
---

::Excerpt
This is the intro paragraph.
::
<!--more-->
This is the actual content of the page.

Any idea how I can disable the Excerpt component on the blog category page?

Thank you!

[goodpixels]

UPDATE:

I kind of managed to get it working by checking route meta, but I don't like this approach, as it's quite flaky. Can anyone recommend a better way please?

Inside /pages/blog/index.vue:

<script setup>
definePageMeta({
  disableProseComponents: {
    excerpt: true
  }
})
</script>

<script setup>
const route = useRoute()
const isDisabled = computed(() => route.meta?.disableProseComponents?.excerpt)
</script>

<template>
  <p :variant="isDisabled ? 'text-sm' : 'text-5xl'">
    <ContentSlot
      :use="$slots.default"
      unwrap="p" />
  </p>
</template>