VueJS Render VNode

Question

tl;dr:

Given a VueJS VNode object, how do I get the HTML element that would be generated if it were rendered?

e.g.:

> temp1         


        

Answer 1

I ran into the same issue wanting to do basically the same thing with a row details template for DataTables.net.

One solution could be to create a generic component that renders out a VNode and instantiate that programmatically. Here is how my setup for a dynamic detail row that I insert using datatable's row.child() API.

RenderNode.js

export default {
    props: ['node'],
    render(h, context) {
        return this.node ? this.node : ''
    }
}

Datatables.vue

Include the renderer component from above

import Vue from 'vue'
import nodeRenderer from './RenderNode'

Instantiate and mount the renderer to get the compiled HTML

// Assume we have `myVNode` and want its compiled HTML

const DetailConstructor = Vue.extend(nodeRenderer)

const detailRenderer = new DetailConstructor({
    propsData: {
        node: myVNode
    }
})

detailRenderer.$mount()    
// detailRenderer.$el is now a compiled DOM element 
row.child(detailRenderer.$el).show()