How to pass a bound value into a markdown link or, alternately, as a property to a custom inline link component?

[grosenberg]

Trying to provide a mailto link in a markdown document using bound values. The bound values are email and elink. In a markdown document,

{{ email }} correctly renders as the correct email address ([email protected])
{{ elink }} correctly renders as the email address prefixed with mailto: (mailto:[email protected])

The problem arises when using the bound values in a markdown link: [{{ email }}]({{ elink }}). There is no bound value expansion and no rendering as a link. It is rendered as the unaltered literal [{{ email }}]({{ elink }}).

So, first question, is there a way to pass a bound value into a markdown link?

---

I have tried to create a custom component (Mailto.vue) that would support mailto link creation using an inline syntax of

:mailto{label={{ email }} href={{ elink }})

This winds up being rendered as the simple text: } [email protected]}

context/components/Mailto.vue

<template>
  <a
    :href="href"
    :target="target">
    <slot mdc-unwrap="p">{{ label }}</slot>
  </a>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue';

  const props = defineProps({
    label: {
      type: String,
      default: '',
    },
    href: {
      type: String,
      default: '',
    },
    target: {
      type: String as PropType<string | undefined>,
      default: undefined,
      required: false,
    },
  });
</script>

So, second question, is there a way to fix the component to properly render a link from the bound values?

Thanks.,.

[grosenberg]

In Trying to make binding-data-in-markdown work with markdown links #2792 the recommendation is to use a v2 transformer. The v3 doc has dropped the transformer section.

What is the recommended v3 way to do early binding?