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 conflict...
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 ...