@vasiliyrusin/v-node

Using VNodes in the template.

Install

npm i @vasiliyrusin/v-node

Import

Global import

import Vue from "vue";
import VNode from "@vasiliyrusin/v-node";

Vue.use(VNode);

Local import

import { VNode } from "@vasiliyrusin/v-node";

export default {
  name: "ComponentName",
  components: { VNode }
}

Example

In template

<template>
    <VNode :node="exampleJSX"></VNode>
    <VNode :node="exampleCreateElement"></VNode>
    <VNode :node="exampleCreateElementHack"></VNode>
</template>

<script>
    import { VNode } from "@vasiliyrusin/v-node";
    
    export default {
        name: "ExampleComponent",
        components: { VNode },
        computed: {
            exampleJSX () {
                return (<h1>Hello world!</h1>);
            },
    
            exampleCreateElement () {
                return this.$createElement("h1", "Hello world!");
            },
    
            // Not recommended to use it
            exampleCreateElementHack () {
                return [
                    this.$createElement("h1", "Hello world!"),
                    this.$createElement("h1", "Hello world!")
                ];
            }
        }
    }
</script>

Compile HTML as string

Also, you can use VNodeReactive if you need to mount component as root. For compile to HTML string for example.

<script>
    import Vue from "vue";
    import { VNodeReactive } from "@vasiliyrusin/v-node";
    
    export default {
        name: "ExampleComponent",
        mounted () {
            const VNodeReactiveCtor = Vue.extend(VNodeReactive);
    
            const exampleJSXvm = new VNodeReactiveCtor({
                propsData: {
                    node: this.exampleJSX
                }
            });
    
            exampleJSXvm.$mount().$el // compiled HTML;
        },
        computed: {
            exampleJSX () {
                return (<h1>Hello world!</h1>);
            }
        }
    }
</script>

Reactivity isn't necessary for using in template, because of it, global import doesn't include VNodeReactive.