[Question] Make the whole canvas a Vue / React element

Thanks @noogen for your detailed reply.

Yh, think you are right and stick with components - I'm not too sure if the ToHtml if the right solution is for me or not, because I don't want to manage two types of system, on rending correctly within the editor, and one in production, using the tags.

So, I'm now loading in a new script 'widgets.js' and then running a function which is within it 'vue_load_contact_form()', with a required parameter - which seems to work quite nicely :)

I now need to work out the best way to do all the scripts within on 'load' page event, so I don't slow down page rendering too much.

script: function(){
   const app1El = document.createElement("div");
   app1El.id = 'app';
   this.appendChild(app1El);
   window.vue_load_contact_form(<?php echo $StorePage->get_client_id(); ?>);
}

Again, thanks for your solution.

My answer is to best stick with custom scripts. I've done custom components using lodash template here: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L2. A string is expected from thetoHtml method - https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/traits.js#L126 - so you're not going to be able to have Virtual Dom.

The toHtml method is use to generate the HTML for both displaying in the editor and what you get when calling editor.genHtml() method. As a result, I create a separate command get-usable-html to give me the HTML I want here: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L197; the method/command convert custom component tagName to the native html component tagName. And since it's only for use to display in the editor, is it really that beneficial for it to be a Vue component?

grapesjs doesn't understand templating and because of the behavior I just described, this make grapejs a popular editor for generating templates. It means you can generate html that has custom component name and template expressions such as the common mustache { expression. This is what issue 275 is demonstrating with {{ message }} which you may have misunderstood?

If you search through the issue, you will find many people use it as email template editor. Example:

Dear {{ firstname }}, 
... omitted ...
Thanks,

 {{ site_url }}

And the template get evaluated for each user during the email process on some later server process. Wouldn't it be bad if these expression removed because they get evaluated in the grapesjs editor? This is also why I chose the uncommon <% as expression for my usage of the lodash.template library instead of the mustache { expression.