Closed
Description
What problem does this feature solve?
Use case:
I'm developing a Server-Side Renderer for Vue (which works with Express, Koa & etc. Will increase migration to Vue). For the SSR's head management to work, it needs a stable API to render VNodes to text.
The way my Vue SSR package will function:
master.vue
<template>
<div id="app">
<slot name="content"></slot>
</div>
</template>
<script>
export default {
created: function(){
if(this.$isServer){
this.$ssrContext.head = "HEAD HERE" // Something needed like: renderVNodesToString(this.$slots.head)
}
},
}
</script>home.vue
<template>
<master>
<template slot="content">
Hello World
</template>
<template slot="head">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Hello</title>
</template>
</master>
</template>
<script>
import master from "layouts/master.vue"
export default {
components: {
master
}
}
</script>My goal is getting home.vue's head slot rendered into a string and injecting it into the this.$ssrContext so it can be read and injected on the server-side
in master.vue, I can access this.$slots.head with no issue, and it contains the correct VNodes
my question is, how can I render them into a string? a way to basically do:
this.$ssrContext.head = renderVNodesToString(this.$slots.head)From my research, I have been unable to find an easy way to do this.
To understand how the renderer works
const renderer = createBundleRenderer(bundle.server, {
runInNewContext: false,
inject: false,
template: `<!DOCTYPE html>
<html>
<head>
{{{ head }}}
{{{ renderResourceHints() }}}
{{{ renderStyles() }}}
</head>
<body>
<!--vue-ssr-outlet-->
<script>${ bundle.client }</script>
</body>
</html>`
})This is the code for the serverbundlerenderer
What does the proposed API look like?
/**
* @param {VNode}
*
* @returns {string} - VNode rendered to a html string
*/
Vue.renderVNode = function(VNode){
//...
}