Sitecore with VueJS: Html Fragment Module

Sitecore Module for VueJS

I recently worked on a Sitecore 9.1 project where we got the chance to use a front end framework called VueJS. If you haven't had the chance to work with VueJS you should check them out https://vuejs.org/. It was very nice to work with once we got through some of the kinks. One of those issues was that VueJS is driven by javascript (duh!)...not HTML....You know what likes to spit out HTML though? Sitecore!

The Challenge

How do we make it so we can use Sitecore's placeholders and Sitecore's render methods with all of the nesting glory that can be done with them into a VueJS template?

The Solution

To make a VueJS component that accepts the same formats Sitecore uses of course! Under the hood, Sitecore renders a begin tag element and an end tag element.

What we know:

• The most basic render method just takes those two properties and slaps them together to form a whole html element.
• VueJS utilizes a simple tree structure for components that requires each component have exactly one root element

Approach:

• VueJS component that translates Sitecore render into a "dynamic" VueJS component (yes, i said that right)
• The "dynamic" component will be "mounted" to the current VueJS component (which is our Sitecore VueJS component...yes...component-ception!)
• To support anything that might get put between the begin tag and endtag we'll add some VueJS <slot> support

Implementation:

// Author: Robert Guyett
// Purpose: Workaround for Issue https://github.com/vuejs/vue/issues/7431
import Vue from 'vue';

const component = {
    functional: true,
    props: {
        html: {
            type: String,
            required: false,
            default: ''
        },
        begintag: {
            type: String,
            required: false,
            default: ''
        },
        endtag: {
            type: String,
            required: false,
            default: ''
        }
    },
    render(createElement, ctx) {
        let html = ctx.props.html;
        let addHtmlAsChild = true; // in case we ever want to add the html after the slot, we have granular control (maybe make it a property?) -rlg
        let begintag = ctx.props.begintag;
        let endtag = ctx.props.endtag;
        var generatedTemplate = '';

        if(begintag === '') {
            generatedTemplate = `${html}`;
            addHtmlAsChild = false;
        } else if(begintag !== '' && endtag === '') {
            generatedTemplate = `${begintag}`;
            addHtmlAsChild = false;
        } else {
            generatedTemplate = `${begintag}${endtag}`;
            addHtmlAsChild = false;
        }

        let component = new Vue({
            template: `

${generatedTemplate}
`
        });

        // add our default slot as a child node if applicable
        let defaultSlot = ctx.slots().default;
        if(typeof (defaultSlot) !== 'undefined') {
            component.$slots = { default: defaultSlot };
        }

        // initialize the component to get our virtual node
        var node = component.$mount()._vnode;
        node.children = node.children || [];

        // add html prop as a child if applicable
        if(addHtmlAsChild === true && html !== '') {
            var htmlNode = new Vue({
                template: html
            }).$mount()._vnode;
            node.children.push(htmlNode);
        }

        return node.children;
    }
};
Vue.component('html-fragment', component); // globally register this component
export default component;

Final Notes:

This is one way to get Sitecore's data into VueJS but it doesnt really allow us to manipulate that data like we would want to in the experience editor and do personalization with VueJS.