title: Rendering Vue 3 component into HTML string
body: <p>I am working on a vue.js project(version 3). I come to a situation where I want to use the rendered HTML view of a component to my current component's method.</p>
  <p>I created the following SVG component in my Vue project.</p>
  <p><em><strong>CircleWithTextSvg.vue</strong></em></p>
  <pre><code>&lt;template&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xml:space=&quot;preserve&quot; style=&quot;shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd&quot; width=&quot;20&quot; height=&quot;20&quot;&gt;
          &lt;g id=&quot;UrTavla&quot;&gt;
              &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;10&quot; stroke=&quot;gray&quot; stroke-width=&quot;1&quot; :fill=&quot;fill&quot; /&gt;
              &lt;text x=&quot;50%&quot; y=&quot;50%&quot; text-anchor=&quot;middle&quot; stroke=&quot;black&quot; stroke-width=&quot;1px&quot; dy=&quot;.3em&quot;&gt;{{text}}&lt;/text&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: {
              text: { 
                  type: String, 
                  default: &quot;1&quot;
              },
              fill: { 
                  type: String, 
                  default: &quot;white&quot;
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>This component basically renders a circle with text inside.
  If I use this component in my main component's template section like the following then it works fine(obviously)</p>
  <p><em><strong>MainComponent.vue</strong></em></p>
  <pre><code>&lt;template&gt;
      &lt;circle-with-text-svg /&gt;
  &lt;/template&gt;
  </code></pre>
  <p>But I want to send this SVG component rendered output as an option to the third party.</p>
  <p><em><strong>Real Use Case:-</strong></em> Actually, I created this separate component to show as a marker on my leaflet map. The problem is now I want to use this SVG component inside my MainComponent's method so I can use it as an option to L.divIcon</p>
  <p>When I try the following</p>
  <pre><code>export default {
      methods: {
          generateMap(element) {
              // ...
              let icon = L.divIcon({ 
                  html: &lt;circle-with-text-svg 
                      fill=&quot;'#D3D5FF'&quot;
                      text=&quot;1&quot; /&gt;, 
                  iconSize: [10, 10]
              });
              // ...
          }
      }
  }
  </code></pre>
  <p>Then it gives the errors</p>
  <blockquote>
  <p>Support for the experimental syntax 'JSX isn't currently enabled</p>
  </blockquote>
  <p>In the react, we can simply use the component inside the template of another component normally. but how can we achieve this in vue.js</p>
  <p>By looking at the error, it seems like JSX experimental is not enabled.</p>
  <p>Can someone address me how can I achieve this?</p>