Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ssr] Add Vue function to render VNode to html string

See original GitHub issue

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){
    //...
}

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:23 (4 by maintainers)

Top GitHub Comments

3reactions

posvacommented, Dec 16, 2018

Technically, you should be able to do this by using a function that returns the vnode and render using what Vue already exports (https://ssr.vuejs.org/guide/#rendering-a-vue-instance). Not sure of the utility of a feature like this. FYI you can use https://ssr.vuejs.org/guide/#rendering-a-vue-instance 🙂

1reaction

yyx990803commented, Jan 16, 2019

You’re right. The usage example makes it much clearer. Let’s consider adding this to 2.6.

Top Results From Across the Web

Render Functions & JSX | Vue.js

The render() function has access to the component instance via this . In addition to returning a single vnode, you can also return...

Render VNode to html string - Stack Overflow

I'm developing a Server-Side Renderer for Vue and for the SSR's head management to work, it needs a way to render VNode s...

[Solved]-How to render a Vue VNode to a String-Vue.js

Uses Vue.extend to construct one SVG component constructor, inside render function of the constructor, it renders slots.default . Next step is create its ......

How to render an HTML String with custom Vue Components

does is pretty smart. He uses the Vue compiler to compile the html string and then pass this compiled output to the render...

Vue.js Render Functions — Advanced Features

A render function is a method of a component that gives us an alternative way to create HTML elements via the creation of...