Type checking components in markdown

// components/content/media.vue
<script setup lang="ts">
    import { Image } from "@unpic/vue"

    export interface Props {
        src: string
        alt: string
        layout: "fixed" | "fullWidth" | "constrained"
        width: string | number
        height: string | number
        caption?: string
        decoding?: "async" | "sync"
        loading?: "lazy" | "eager" | "auto"
        fetchpriority?: "low" | "high"
        imgClass?: string
    }

    const props = withDefaults(defineProps<Props>(), {
        layout: "fixed",
        decoding: "async",
        loading: "lazy",
    })
</script>

<template>
    <figure>
        <Image
            :src="props.src"
            :alt="props.alt"
            :layout="props.layout"
            :width="props.width"
            :height="props.height"
            :loading="props.loading"
            :decoding="props.decoding"
            :fetchpriority="props.fetchpriority"
            :class="props.imgClass"
        />
        <figcaption v-if="props.caption" v-html="props.caption" />
    </figure>
</template>

// components/content/media.vue
<script setup lang="ts">
    import { Image } from "@unpic/vue"

    export interface Props {
        src: string
        alt: string
        layout: "fixed" | "fullWidth" | "constrained"
        width: string | number
        height: string | number
        caption?: string
        decoding?: "async" | "sync"
        loading?: "lazy" | "eager" | "auto"
        fetchpriority?: "low" | "high"
        imgClass?: string
    }

    const props = withDefaults(defineProps<Props>(), {
        layout: "fixed",
        decoding: "async",
        loading: "lazy",
    })
</script>

<template>
    <figure>
        <Image
            :src="props.src"
            :alt="props.alt"
            :layout="props.layout"
            :width="props.width"
            :height="props.height"
            :loading="props.loading"
            :decoding="props.decoding"
            :fetchpriority="props.fetchpriority"
            :class="props.imgClass"
        />
        <figcaption v-if="props.caption" v-html="props.caption" />
    </figure>
</template>

::media
---
src: "https://images.unsplash.com/photo-1677249490921-3246e81f19e3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" 
alt: "crystal" 
imgClass: "foobar"
height: 600
width: 600
caption: "Photo by <a href='https://unsplash.com/@stas_r?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Stanislav Rozhkov</a> on <a href='https://unsplash.com/photos/TnREirV-BUA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>. Processed by <a href='https://github.com/ascorbic/unpic-img'>unpic-img</a>"
---
::

::media
---
src: "https://images.unsplash.com/photo-1677249490921-3246e81f19e3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" 
alt: "crystal" 
imgClass: "foobar"
height: 600
width: 600
caption: "Photo by <a href='https://unsplash.com/@stas_r?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Stanislav Rozhkov</a> on <a href='https://unsplash.com/photos/TnREirV-BUA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>. Processed by <a href='https://github.com/ascorbic/unpic-img'>unpic-img</a>"
---
::

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["@nuxt/content"]
  }
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["@nuxt/content"]
  }
}