[Feature] custom processor callback for components generated from Vue
Question
Hello there! i recently ran into this new awesome feature introduced here here you can have some processing done on the react generated element which is awesome. for the moment i am working on some third party components that use vue as their compiler. the current approach i am dealing with is as below that is working fine:
script: function () {
const appl = new Vue({
el: '#ccid',
data: {
message: 'button'
},
template: '<q-btn>{{message}}</q-btn>'
}).$mount()
$(this).append(appl.$el);
}
it will result something like this:

now the problem is this:

when you resize, it will resize the wrapper element, not the vue rendered one. if there was a way to process this iniside the component (like the way this new feature is doing it), it would be recognized by the editor and would be part of the model. is there any workaround for this?
thanks in advance.
Answers (1)
mmm probably I didn't describe it correctly, especially with this:
// By default, GrapesJS supports already React Element
I need to correct it with
// By default, GrapesJS supports already elements generated from React JSX preset
So the point of this feature is simply to understand objects generated from JSX and transform them into GrapesJS component definition objects and NOT for understanding React/Vue components itself
In your example, you successfully load a Vue component but you can't edit it as it's not part of the editor, it's more like a static content for the editor. You might probably need some custom CSS to make those buttons expand to the wrapper.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1341
[Question] How to work with Custom Components
Hello, I have some questions and issues about and with the grapes editorProblem 1 In a component, which class is there extended? Is it real...
Issue #3459
BUG: DomComponents' Config Incorrect
Version: 0.17.3 What is the expected behavior? The documentation says that I can configure the wrapper element via the configuration: https...
Issue #2181
global functions/variables
Hello there! recently i noticed this issue. I think it would be beneficial to have this feature. in contrast to the suggested approach by @...
Issue #3130
[Question] Standard approach in slight restructuring the HTML toolbar & badge
Version: 0.15.10 This question is intended to validate if there is a proper way to extend the current https://github.com/artf/grapesjs/blob...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.