(Q&A and Idea) How do i set html default value in Vue dom?

[Nemure231]

Hi, i was planed to add milkdown it in vue/nuxt base project with html value. But i can't set the html value by just following the documentation example. How can i set the html value?

And i was thinking maybe this html value works in vue dom by wraping the editor in onMounted, but its still doesn't work.

Anyway, i also have idea about this. It's will be cool if we can write html value inside markdown with vue slots like this:

<Milkdown>
    <template #htmlValue>
           <div>
             <h1>Hello milkdown!</h1>
           </div>
     </template>
</Milkdown>

[Saul-Mirone]

The dom hasn't been rendered for vue in your case, move the markdown variable into onMounted:

<script setup lang="ts">
import { Milkdown, useEditor } from '@milkdown/vue';
import { defaultValueCtx, Editor, rootCtx } from '@milkdown/core';
import { nord } from '@milkdown/theme-nord'
import { commonmark } from '@milkdown/preset-commonmark'

useEditor((root) => {
  return Editor.make()
    .config(nord)
    .config((ctx) => {
      ctx.set(rootCtx, root)
      ctx.set(defaultValueCtx, {
        type: 'html',
        dom: document.querySelector('#pre'),
      })
    })
    .use(commonmark)
})
</script>

<template>
  <div id="pre">
    <h1>Milkdown Vue Commonmark</h1>
  </div>
  <Milkdown />
</template>

[Nemure231]

wow thank you, its really works!