[Vuejs]-Intergrating GrapesJs with Vue3

by

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

Leave a comment