Experience Editor Issues with VUEJS


Nowadays Vuejs is most commonly used framework for front end development and I found it quick and well performing in terms of front end development. Anyway we are not here to talk about VueJs on Sitecore blogging site.

I am sharing/writing this because recently I faced few challenges because of VueJs. And it was hard to understand that the issues was because of VueJs. While debugging some of the Experience Editor bugs I found that many of the functionality stopped working if we are using VueJs components in our .cshtml files.

Our solution/website was working fine until we were using without the custom VueJs components but after putting/using the actual use of VueJs I found that Experience Editor was completely broken and I was even not able to add/remove the components on pages from Experience Editor. And I was able to see issue in consol there was a call for Palette.aspx page and it was throwing an error of “PlaceholderKey“.

3lOoP

Firstly I thought may be I am missing any dll or may be something wrong with my Sitecore I replaced every dll as well as Sitecore and Sitecore_Files folders with the blank installation but I didn’t help.

After digging over to internet I found that both Experience Editor as well as VueJs both uses key attribute over the elements for there own work. And after digging into render HTML in EE I found that  <Code> element was missing the key attribute.

After looming into more articles over the internet I found that we need to follow some instructions if we are using VUeJs as front end and yes specially if we are using VueJs components – I followed the steps given below –

  1. Install a plugin which is given on npm –

               npm install –save-dev vue-scexpeditor

 

If installation successfully done then we need to add below given code to index.js file under src folder.

Placed the below line to top of the file after vue import –

import SitecoreExpEditorPlugin from ‘vue-scexpeditor’;

After that plcaed the below code to just before init of VueJs –

import SitecoreExpEditorPlugin from ‘vue-scexpeditor’;

Normally it should work but in my case it was not working I need to do some additional steps to make it working as below –

Placed below code just before init VueJs –

if(typeof Sitecore !== ‘undefined’) {
    document.querySelectorAll(‘code[type=”text/sitecore”]’).forEach(el => el.setAttribute(‘v-pre’, ”));
    Vue.use(SitecoreExpEditorPlugin);
    // eslint-disable-next-line no-undef
    if(Sitecore.PageModes.ChromeManager) {
        // eslint-disable-next-line no-undef
        Sitecore.PageModes.ChromeManager.resetChromes();
    }
}

See below image if you have any confusion about placing the code line in Index.Js file –

vuejs_test
After adding these code line we were able enjoy the Experience Editor features.
This article is mainly if you are using VueJs components and facing the issue in Experience Editor there can be several other reason for Experience Editor issue or we can say similar issues.
Hope it can save some of your debug time.

 

 

This entry was posted in Sitecore, Sitecore Experience Editor, VueJs and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s