Recently, I attempted to integrate the GrapesJS editor into my Vue.js project, but encountered some difficulties. The editor was not visible in the browser, and the designated tag for the editor appeared empty. Here 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>
I experimented with this setup in another Vue 3 project (which uses the < script> syntax) and it functioned properly:
<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>
In my current project, I also tested the < script> version which worked fine. I suspect the issue may be related to the < script setup> syntax.
If anyone can offer insight into why the editor is not loading in the first case and suggest a solution, I would greatly appreciate it.