Display a DocumentFragment in Vue

Question

I am using a library (prosemirror) that gives me a DocumentFragment out of json I get from the database. Now I want to display it in my component. How? Two hours of googling gave me nothing.

  resolveContent: function () {
    let contentNode = schema.nodeFromJSON(content)
    let fragment = DOMSerializer.fromSchema(schema).serializeFragment(contentNode.content)
    return fragment
  }

Using this in my component like

  p(v-html="resolveContent()")

or

  p {{resolveContent()}}

Prints

  [object DocumentFragment]

Answer 1

To handle DocumentFragment within Vue.js, you will need to wait until Vue's mounted hook fires. I would create a wrapper component which "renders" simply an empty <div/>. Then, hook in to mounted and insert the fragment using standard DOM commands (eg. Node.appendChild())

const FragmentBootstrapper = Vue.extend({
  mounted() {
    const fragment = resolveContent()

    this.$el.appendChild(fragment)
  },
  render(h) {
    return h("div") // becomes `this.$el`
  }
}

This may feel weird at first, but it makes the most sense when you consider that Vue is a rendering layer abstraction. Thus, during its own rendering hook, it expects to only deal with its own VDOM. It provides the mounted hook in order to support various use-cases, namely this one.