0

So lately i have been trying to add grapesjs editor in my vuejs project, and things didn't go as planned, i can't see the editor in the browser, and the tag that is supposed to contain the editor is empty. This is my editor configuration:

<template>
  <div ref="canvas"></div>
</template>

<script setup>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

const canvas = ref(null)
const editor = grapesjs.init(
  {
    container: canvas.value,
    fromElement: true, // Load existing HTML from the container
    storageManager: {
        type: "local", // Enable saving and loading from local storage
        autosave: true, // Enable autosave
        autoload: true, // Load previously saved data
    },
    canvas: {
        styles: [
            // Custom canvas styles
        ],
        scripts: [
            // custom scripts
        ],
    },
    plugins: ["gjs-preset-webpage"],
    pluginsOpts: {
        "gjs-preset-webpage": {
            // Options for the preset plugin
        },
    },
});
</script>

Note: i have tried this configuration in another vue3 project(that uses < script> syntax btw) and it worked:

<template>
    <div ref="editor"></div>
</template>

<script>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

export default {
    name: app,
    data() {
        return {};
    },
    mounted() {
        const editor = grapesjs.init({
            container: this.$refs.editor,
            fromElement: true, // Load existing HTML from the container
            storageManager: {
                type: "local", // Enable saving and loading from local storage
                autosave: true, // Enable autosave
                autoload: true, // Load previously saved data
            },
            canvas: {
                styles: [
                    // Custom canvas styles
                ],
                scripts: [
                    // custom scripts
                ],
            },
            plugins: ["gjs-preset-webpage"],
            pluginsOpts: {
                "gjs-preset-webpage": {
                    // Options for the preset plugin
                },
            },
        });
    },
};
</script>

I have tried < script> version in my current project as well and it works, i'm kinda sure the issue is related to the < script setup> syntaxe.

Can anyone please tell me what could be the reason the editor is not loaded int the first case and how could i resolve this issue?

mouse
  • 15
  • 2
  • It's supposed to be done in onMounted, that's all. Consider posting a self-answer instead of making it a part of the question. It's unknown why it didn't work previously for you. – Estus Flask Jul 07 '23 at 13:50
  • thank you for your answer, i have moved my edit to a self answer. – mouse Jul 08 '23 at 11:57

1 Answers1

1

I have added onMounted hook, and now it works, i genuely don't know how or why because i tried this several times and it didn't work, i was confused how it didn't work for a whole day, now it worked.

I will let this post so anyone that encounters the same problem could find it useful. here's the code now:

<template>
  <div ref="canvas"></div>
</template>

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

const canvas = ref(null);
let editor
onMounted(() => {
   editor = grapesjs.init({
    container: canvas.value,
    fromElement: true,
    storageManager: {
      type: 'local',
      autosave: true,
      autoload: true,
    },
    canvas: {
      styles: [],
      scripts: [],
    },
    plugins: ['gjs-preset-webpage'],
    pluginsOpts: {
      'gjs-preset-webpage': {},
    },
  });
});
</script>
mouse
  • 15
  • 2