Rendering a Vue component when not editing

[jondavidpass]

Hi all,

I want to render a Vue component as a Node when the content is not editable. I am using a node view for the editor but I'm not really understanding how I can render a Vue component when not editing. I think previously in v1 you could just return a component from view().

Maybe I'm missing something obvious in the docs but I'm a little lost so any guidance would be much appreciated. 🙏

[hanspagel]

You can still render node views, it’s same as before. You can set the editor to editable: false to render the output including the Vue components.

If you want to render Vue components from the JSON follow #1221, I know there is someone working on it right now.

Someone wrote just today:

I hacked together a proof of concept using the Nuxt Content component, just need to add support for marks 🥳

[jondavidpass]

Right, I think that maybe helps me. We're storing as HTML though so I might have to go down a different path. Maybe I can store them as some arbitrary element that my editor code swaps out at render?

Thinking like:

    const videos = document.querySelectorAll('[data-video-src]');
    videos.forEach(el => {
        const src = el.getAttribute('data-video-src');
        const app = createApp(VideoComponent, { src });
        app.mount(el);
    });

Maybe that is too messy. They don't need to be reactive so it's an option(?)

[hanspagel]

That sounds too messy. :) You shouldn’t mess with the ProseMirror rendering like that.

If you have the chance to render your HTML on the server side (including tags like <my-video-component>), you can just mount Vue on that output.

[jondavidpass]

Yeah that might be the play. I'll see how I go!