2

Is it possible to parse string with components inside to template in vue.js? Example of string:

"Some text, some <b>bold text</b>, and inserted image from this 
component <vue-simple-image :src='images/my_image_name.png' />, another text and html tags."

It looks like I need store such strings to database to use them later for recreating user input from vue-wysiwyg editor.

4
  • 1
    Have you tried this? github.com/alexjoverm/v-runtime-template Commented Jan 23, 2020 at 14:25
  • @phuwin, no, I didn't see it. Commented Jan 23, 2020 at 14:29
  • That might help with your case. Cheers! Commented Jan 23, 2020 at 14:29
  • @phuwin. ok, I will check it. Thank you! Commented Jan 23, 2020 at 14:30

2 Answers 2

1

In the strict sense you asked the question, I do not think this is possible. There is a v-html directive, that can render html for you but not components. This is also considered an anti-pattern, as the vue guide states:

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

You could look into dynamic components in order to render vue components based on user input. You could parse the wysiwyg user input, split the string on recognized vue-component tags (so you have an array of pieces of elements with sequences of regular html and elements that are single vue-components), and then use a template with v-for looping to render this. (non-working pseudocode) example:

<div id="renderedWysiwygInput">
  <div v-for="elem in splitInput">
   <component v-if="stringIsVueComponent(element)" v-bind:is="element"></component>
   <div v-else v-html="element"></div>
  </div>
</div>

You'll have to work this example out a bit more though to account for the possibility of input inside the vue components themselves, for example if you are filling slots. I would try to limit what kind of input you are going to support to keep it manageable.

Sign up to request clarification or add additional context in comments.

3 Comments

It sounds good for me. Do you have some idea how could be splitted string from question? I mean what delimiter should I use?
You could do it either in the front-end or the backend, depending on whether you want to save the input on your server and in what form. I'd start with some google searching on parsing HTML in javascript, there have to be libraries for that. You can try to do your own splitting on the tags using the "<" and ">" characters or use Regular expressions. How to do such splitting efficiently is such a separate subject that you could ask a new question for that.
I have voted up your answer. It give me some interesting idea.
0

No, this is not possible, because Vue component is not just an html piece, it is a js class. So you need to register it properly and so on...

2 Comments

What type of functionality this 'stringifyed' component provides? May be there is some workaround
This question is related to my previous question stackoverflow.com/questions/59849554/… .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.