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.

webprogrammer
  • 2,393
  • 3
  • 21
  • 27

2 Answers2

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
Leon
  • 171
  • 4
  • 1
    It sounds good for me. Do you have some idea how could be splitted string from question? I mean what delimiter should I use? – webprogrammer Jan 23 '20 at 14:28
  • 1
    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. – Leon Jan 23 '20 at 14:40
  • I have voted up your answer. It give me some interesting idea. – webprogrammer Jan 23 '20 at 17:14
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...

ivan
  • 51
  • 5
  • What type of functionality this 'stringifyed' component provides? May be there is some workaround – ivan Jan 23 '20 at 12:22
  • This question is related to my previous question https://stackoverflow.com/questions/59849554/how-to-insert-vue-component-into-contenteditable-div . – webprogrammer Jan 23 '20 at 12:23