How to get Vue component to render in HTML?

[riccardostokker]

Sorry if this has already been asked, I couldn't find it anywhere.

So, I have a custom extension:

import { Node, Plugin } from 'tiptap';

import ServerImage from "~/components/images/ServerImage";

export default class ImageNode extends Node {

  get name() {
    return 'image'
  }

  get schema() {
    return {
      inline: true,
      attrs: {
        hash: {},
        width: {
          default: 256
        },
        float: {
          default: 'left'
        }
      },
      group: 'inline',
      selectable: true,
      draggable: true,
      parseDOM: [
        {
          tag: '.server-image',
          getAttrs: dom => ({
            hash: dom.getAttribute('hash'),
            width: dom.getAttribute('width'),
            float: dom.getAttribute('float')
          }),
        },
      ],
      toDOM: node => ['div', {class: 'server-image', ...node.attrs}],
    }
  }

  commands({ type }) {
    return attrs => (state, dispatch) => {
      const { selection } = state
      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
      const node = type.create(attrs)
      const transaction = state.tr.insert(position, node)
      dispatch(transaction)
    };
  }

  get view() {
    return {
      props: ['node', 'updateAttrs', 'view'],
      components: {ServerImage},
      computed: {
        hash: {
          get() {
            return this.node.attrs.hash
          },
          set(hash) {
            this.updateAttrs({
              hash,
            })
          },
        },
        width: {
          get() {
            return this.node.attrs.width
          },
          set(width) {
            this.updateAttrs({
              width,
            })
          },
        },
        float: {
          get() {
            return this.node.attrs.float
          },
          set(float) {
            this.updateAttrs({
              float,
            })
          },
        },
      },
      template: `
        <server-image :hash="hash" :width="width" :float="float" />
      `,
    }
  }

}

I have an editor component where I edit articles. The extension works just fine when I'm in the editor and I see things exactly as they should be, but when I export HTML (to be saved in a database) instead of getting the rendered server-image component I get whatever is produced by toDOM.

In the Editor:

Saved in the database, visible in the frontend:

<div class="server-image" hash="ed5eb4caf4b6352bd96a59cdd4a6710e" width="20%" float="right"></div>

Expected:

<img class="server-image" alt="..." src="..." srcset="..." style="...">

I suppose this is expected behavior, but how could I get the server-image component to render in the exported HTML, without having to painfully program the toDOM function to mirror my ServerImage component?

[hanspagel]

You could probably use the createElement function: https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

createElement(ServerImage, {
  props: {
    someProp: 'foobar'
  }
})

Hope that helps!

[riccardostokker]

Is there any example in the documentation/code? I'm having a hard time figuring out how to use that. Isn't createElement only callable from within component render functions?

[hanspagel]

Oh, yes! I was wrong. The toDOM is running through ProseMirror, not through Vue. So you need to rebuild your Vue component there. 😬