Issue #2204Opened August 20, 2019by pouyamiralayi1 reactions

[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: qbtn

now the problem is this:

qbtn

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)

artfAugust 24, 20191 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.