Hydrate HTML with Vue-components


I want to build a diary-website where I can write diary-entries and highlight specific passages from the text that I find interesting, funny, or important. The way I imagine that is that I can select a passage from the text, which will open a modal where I can select tags I want to relate to that selection. The passage will then be surrounded by a <mark>-like object in a tag-specific color so that it stays highlighted later on. At the start and end of the <mark>-element, I would like to have some sort of “drawer” to expand and decrease the selected text. When I click on the mark, I want a modal to open where I can delete and edit the highlighted passage, so I think this would be a good use case for a component.


My goal is that the diary entry can consist of any valid HTML, which I can edit in an editor. This HTML could then be sent to the server easily and restored later on. That’s at least the functionality I’m dreaming of at the moment, but I can’t find a way to take HTML and hydrate it with Vue-components.
To overcome this problem, I thought of this solution:

Solution ?

Write a custom render function for HTML

This solution can be either pretty easy or super hard because I would have to come up with a solution to transform the whole HTML from my diary-entry and make components out of them. If I can extract the render-function from Vue and add my little flavor to it to add my custom component instead of a div, I would consider this a great solution.

Pros Cons
I can use any HTML in my diary entry to make it nice and engaging I guess I can’t use any part of Vue’s caching system because the render function would be reevaluated every time I change my text. But I’m not confident enough with the Vue-internals that I can be sure about that.
Very future proof because I can use the full power of HTML There might be no good way to store the data from the component in the HTML. This would make it hard to recreate the diary solely from the HTML later on and would make a second system to get that data necessary, which would lead to two separate data flows.

What do you think about this approach? Is there another way to achieve my goal that I didn’t think of? Do you know any Library that might solve this problem that I just didn’t see? Is it easier to rely on basic js for this part of my application?

If I have understood correctly your problem you want to insert a vue component inside an HTML text edited from an editor (something like ckeditor) right? So for example

  <strong>Hello</strong> <my-amazing-component>World</my-amazing-component>

And hydrate my-amazing-component right? Can’t you just render partially the page server side so when in the client vue mounts his istance it will handle them for you?

I only have very few experiences with SSR, but wouldn’t I have the same problem on the Server? I mean, wouldn’t I have to do the same steps (1. fetching the HMTL of the diary entry from my API and 2. hydrate the mark-components) on the server too?
Do you have any resources for me, which further illustrate your idea?
Thank you for your idea anyway :smile: