title: Nuxt render function for a string of HTML that contains Vue components
body: <p><strong>I'm trying to solve this for Nuxt</strong></p>
  
  <p><strong>Codesandbox of a WIP not working: <a href="https://codesandbox.io/s/zw26v3940m" rel="noreferrer">https://codesandbox.io/s/zw26v3940m</a></strong></p>
  
  <p>OK, so I have WordPress as a CMS, and it's outputting a bunch of HTML. A sample of the HTML looks like this:</p>
  
  <pre><code>'&lt;h2&gt;A heading tag&lt;/h2&gt;
  &lt;site-banner image="{}" id="123"&gt;Slot text here&lt;/site-banner&gt;
  &lt;p&gt;some text&lt;/p&gt;'
  </code></pre>
  
  <p>Notice that it contains a Vue component <code>&lt;site-banner&gt;</code> that has some props on it (the <code>image</code> prop is a JSON object I left out for brevity). That component is registered globally.</p>
  
  <p>I have a component that we wrote, called <code>&lt;wp-content&gt;</code> that works great in Vue, but doesn't work in Nuxt. Note the two render functions, one is for Vue the other is for Nuxt (obviously this is for examples sake, I wouldn't use both).</p>
  
  <pre><code>export default {
      props: {
          html: {
              type: String,
              default: ""
          }
      },
      render(h, context) {
          // Worked great in Vue
          return h({ template: this.html })
      }      
      render(createElement, context) {
          // Kind of works in Nuxt, but doesn't render Vue components at all
          return createElement("div", { domProps: { innerHTML: this.html } })
      } 
  }
  </code></pre>
  
  <p>So the last render function works in Nuxt except it won't actually render the Vue components in <code>this.html</code>, it just puts them on the page as HTML.</p>
  
  <p>So how do I do this in Nuxt? I want to take a string of HTML from the server, and render it on the page, and turn any registered Vue components into proper full-blown Vue components. Basically a little "VueifyThis(html)" factory.</p>