[V3] Live rendering and re-rendering of an MDC string

[rutbergphilip]

Hi all,

I've seen somewhat similar topics but I'm not sure if there was ever an answer.

I'm afraid I already know the answer but I'm curious to know if it's at all possible to bind the MDC component to a string that will be updated in real time? Essentially what I want is to have a text field where I can write the markdown and have the MDC render this live for me to see.

Thanks.

[rutbergphilip]

Well, after some more testing I've actually managed to solve the problem myself.

If it helps anyone else, here's my solution:

<script lang="ts" setup>
import { parseMarkdown } from '@nuxtjs/mdc/runtime';

const mdc = ref('# Hello!');
const binding = ref(mdc.value);

const { data: ast } = await useAsyncData(() => parseMarkdown(unref(mdc)));

watch(mdc, async (newValue) => {
  binding.value = newValue;
  ast.value = await parseMarkdown(newValue);
});
</script>

<template>
  <div class="flex h-screen w-full items-center justify-center gap-4">
    <UTextarea v-model="mdc" size="xl" />
    <div class="border-gray border-1 p-4">
      <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
    </div>
  </div>
</template>