Sitecore with VueJS: Reserved Attributes and Ignored Elements

VueJS Strips Reserved Attributes on Ignored Elements

Experience Editor is what makes Sitecore EXTRA amazing as a CMS. Don't get me wrong it has alot to offer but the "oohhh ahhh WWoooWws" happen when it starts showing off what it can do through the experience editor.

One of the gotchas I ran into when connecting Sitecore and VueJS (and I'm sure its the same for any framework that crawls the DOM to figure out what it should be doing) is that sometimes attributes can conflict with each other. In VueJS world it thinks its a vuejs attribute and will remove it from the dom and try to use it. Unfortunately even on ignored elements it will still strip its reserved attributes...

Which breaks the experience editor with sitecore...

The Problem

VueJS removes Sitecore's attributes like "key" from the DOM even on elements that are marked to be ignored. There could be other conflicts but this is the one that got me.

The Solution

To make these conflicting elements not conflict, DUH!

What we know:

• There is no configuration to change sitecore to use different attributes and sitecore doesnt use scoped attributes e.g: namespace-attrname
• It would be a huge amount of effort and might ruin the upgrade path to try and alter such an integrated keyword in Sitecore's experience editor
• There is no configuration to change VueJS to use scoped keywords eg: vue-reservedkeywordname
• Vue has events that fire at the beginning of processing and just at the end of processing
• Vue has an ignoredElements configuration but some special attributes still get parsed out (like "key")

Approach:

• Javascript module that alters reserved attributes on vue component
• It should not crawl over every single element...it needs to be focused and specialized for performance reasons
• We'll only look at elements that have been marked to be ignored use the 
• Because we don't really know all the conflicts we'll make the list of attributes expandable
• It will change the attribute names before VueJS processes its components and put them back to their original name's when its finished (this is only for elements vuejs shouldnt have been messing with in the first place)

Implementation:

The Module:

/**
 * Author: Robert Guyett
 * Purpose: Resolves conflict with the "key" attribute between Sitecore's Experience Editor and VueJS
 * for Elements that VueJS should be ignoring
 */
import Vue from 'vue';

const reservedAttributes = ['key'];
const attrPrefix = 'data-';
export default {
    /**
     * Usage: Used just before vue is initialized in the root vueJS beforeCreate() event
     * This ads "data-" in front of any attribute marked as reserved by VueJS
     * NOTE: the reserved attributes doesnt tie into vuejs. its just an array of reserved attributes "reservedAttributes"
     */
    protectAttributes: () => {
        let reservedElements = [...Vue.config.ignoredElements];
        reservedElements.forEach(reservedEl => {
            [...document.querySelectorAll(reservedEl)].forEach(element => {
                if(element.hasAttributes() === false) {
                    return;
                }

                let elAttrNames = element.getAttributeNames();
                reservedAttributes.forEach(attrName => {
                    if(elAttrNames.includes(attrName)) {
                        // give the attribute a prefix
                        element.setAttribute(attrPrefix + attrName, element.getAttribute(attrName));
                    }
                });
            });
        });
    },
    /**
     * Usage: Used right after everything is mounted in the root VueJS mounted() event
     * This puts everything back the way it was
     */
    persistAttributes: () => {
        let reservedElements = [...Vue.config.ignoredElements];
        reservedElements.forEach(reservedEl => {
            [...document.querySelectorAll(reservedEl)].forEach(element => {
                if(element.hasAttributes() === false) {
                    return;
                }

                let elAttrNames = element.getAttributeNames();
                reservedAttributes.forEach(attrName => {
                    if(elAttrNames.includes(attrPrefix + attrName)) {
                        // set the attribute name back to the original value without the prefix
                        element.setAttribute(attrName, element.getAttribute(attrPrefix + attrName));
                    }
                });
            });
        });
    }
};

Usage:

import ignoredElementFix from './ignoredElementsFix'

export default new Vue({
    el: '#app',
    beforeCreate() {
        ignoredElementFix.protectAttributes();
    },
    mounted() {
        ignoredElementFix.persistAttributes();
    }
});