title: Render VNode to html string
body: <p>I'm developing a Vue server-side templating engine, and part of the package includes a head management system.</p>
  
  <p>I'm developing a Server-Side Renderer for Vue and for the SSR's head management to work, it needs a way to render <code>VNode</code>s to text.</p>
  
  <p><strong>My Question:</strong>
  how can I render VNode(s) into a string? For example:</p>
  
  <p><code>this.$ssrContext.head = renderVNodesToString(this.$slots.head)</code></p>
  
  <p><strong>Example use case:</strong></p>
  
  <p><code>master.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;slot name="content"&gt;&lt;/slot&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      created: function(){
          if(this.$isServer){
              var VNodesToRender = this.$slots.head
              this.$ssrContext.head = 'rendered VNode here'
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><code>home.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;master&gt;
          &lt;template slot="content"&gt;
              Hello World
          &lt;/template&gt;
          &lt;template slot="head"&gt;
              &lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
              &lt;title&gt;Hello&lt;/title&gt;
          &lt;/template&gt;
      &lt;/master&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import master from "layouts/master.vue"
  
  export default {
      components: {
          master
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My goal is getting <code>home.vue</code>'s <code>head</code> slot rendered into a string and injecting it into the <code>this.$ssrContext</code> so it can be read and injected on the server-side</p>
  
  <p>in <code>master.vue</code>, I can access <code>this.$slots.head</code> with no issue, and it contains the correct <code>VNode</code>s</p>
  
  <p><strong>Where the string is used</strong></p>
  
  <p>in <code>{{{ head }}}</code></p>
  
  <pre><code>const renderer = createBundleRenderer(bundle.server, {
      runInNewContext: false,
      inject: false,
      template: `&lt;!DOCTYPE html&gt;
          &lt;html&gt;
              &lt;head&gt;
                  {{{ head }}}
                  {{{ renderResourceHints() }}}
                  {{{ renderStyles() }}}
              &lt;/head&gt;
              &lt;body&gt;
                  &lt;!--vue-ssr-outlet--&gt;
                  &lt;script&gt;${ bundle.client }&lt;/script&gt;
              &lt;/body&gt;
         &lt;/html&gt;`
  })
  </code></pre>
  
  <p><strong>Note:</strong>
  This question is not like:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/50556294/vuejs-render-vnode">VueJS Render VNode</a></li>
  <li><a href="https://stackoverflow.com/questions/51368392/understanding-vnodes">Understanding Vnodes</a></li>
  <li><a href="https://stackoverflow.com/questions/49352525/can-you-render-vnodes-in-a-vue-template">Can you render VNodes in a Vue template?</a></li>
  </ol>
  
  <p>as it requires a string output, which is passed to the SSR</p>