Embedding GrapesJS MJML in a Vue application

Question

I'm trying to integrate GrapesJS MJML into my Vue based application and I'm not able to configure it properly. The editor seems to be loaded, however, the result I'm getting is as follows:

https://i.stack.imgur.com/eELsI.jpg

MJML is not rendered properly
MJML blocks are not available

This is how I'm initializing the GrapesJS MJML in Vue:

<template>
    <section>
        <div id="gjs"></div>
        <div id="blocks"></div>
    </section>
</template>

<script>
    import grapesjs from 'grapesjs';
    import 'grapesjs-mjml';
    import 'grapesjs/dist/css/grapes.min.css';

    export default {
        name: 'dashboard',
        data: function () {
            return {
                editor: null
            }
        },
        mounted: function () {
            this.editor = grapesjs.init({
                fromElement: 1,
                container : '#gjs',
                plugins: ['grapesjs-mjml'],
                pluginsOpts: {
                    ['grapesjs-mjml']: {/* ...options */}
                },
                blockManager: {
                    appendTo: '#blocks',
                    blocks: [
                    ]
                }
            });
        }
    }
</script>

Should I load the blocks manually? All hints are welcome.

score 1 · Answer 1 · answered Nov 08 '19 at 08:42

1

It doesn't work, and I have been trying for months to get it working. The best you can do it convert the MJML components you need to HTML and make your own GrapesJS block.

answered Nov 08 '19 at 08:42

Amanze

288
2
11

Embedding GrapesJS MJML in a Vue application

1 Answers1