using vue js with grapes js

[marwa1994]

can i use vue js inside grapes if yes can you give me the right way of importing it in my project

[ahmeddabak]

this would be a great idea,

i think you can create a vue s componets, like a timer component

<timer end="01-01-2018 00:00:00"><timer>

and then make a block in Grapejs using this timer tag, you just need to render the vue js component when its being dropped in the canvas.

i have found this solution to re-render the vue js components

https://stackoverflow.com/questions/32106155/can-you-force-vue-js-to-reload-re-render

so you can listen for when components added

editor.on('component:add', function() {
       // when new component added, re-render vue js components to normal html
       vm.$forceUpdate(); 
    });

i hope this would help you get started, and please post about progress 😄

[marwa1994]

I try this simple one but in console i have the error that vue is not identified in blocks i add { id: 'my-first-block', label: 'leadform', attributes: {class:'fa fa-link'}, content: '

'+ '

'+ ' {{value}} '+ '

'+ '

'+

         ' <script>'+
           'var s = document.createElement("script");'+
            's.type = "text/javascript";'+
            's.src = "./test.js";'+
            'document.body.appendChild(s);'+
        '</scr'+'ipt>'

      }

and i create test.js file new Vue({ el: '#hello', data: { value: 'hhh', }, });

[ahmeddabak]

i will try to do a project this evening, and share the code here

[artf]

thanks for the help @ahmeddabak really appreciate Anyway @marwa1994 I'd recommend to check out Components-&-JS which deeply explains how to deal with custom components containing javascript

[SimplyCorey]

Here is how I wrapped GrapesJS into a Vue Component.

<template>
    <div :id="id"></div>
</template>

<script>
    export default {
        props: {
            id: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                editor: null
            }
        },
        methods: {
            change() {
                this.$emit('change', this.editor.getHtml());
            },
        },
        mounted() {
            this.editor = grapesjs.init({
                container: '#editor',
                height: this.height,
                plugins: ['gjs-preset-newsletter'],
            });

            this.editor.on('change', this.change);
        }
    }
</script>

[desprit]

@SimplyCorey

Hi, thank you for sharing your code! Are you using webpack or is it just inline <src ...> in your index.html?

I was able to install grapesjs and import it with Webpack ProvidePlugin. And even initialize it inside my vue component. But I can't make basic-blocks component to work. Getting Plugin gjs-blocks-basic not found no matter how I import it.

Update. This works ok for me:

In webpack config:

plugins: [                                             
  new webpack.ProvidePlugin({                          
    grapesjs: resolve("path/to/grapes.min.js")
  }),                                                  
  ...
]

In Vue component or entry file:

require('grapesjs-blocks-basic')
require('grapesjs-plugin-forms')

[artf]

Close this as many of you give already good examples, thanks

[SimplyCorey]

@desprit I added grapesjs to the global window in my bootstrap file. window.grapesjs = require('grapesjs');

[sai-kishore]

@desprit I am getting grapesjs is not defined. Should I add the grapesjs in webpack base/dev/prod file? Can you share the project you have built?

[desprit]

@sai-kishore

Did you add grapesjs to webpack config file like I described above? https://github.com/artf/grapesjs/issues/275#issuecomment-329169718

[ionic666]

@desprit hello,i want to know how to import a plugin。 require('grapesjs-blocks-basic') did not work

[desprit]

@ionic666

Sorry for the late answer, are you still facing this issue?

[edatoprak]

Hi I want vue.js into grapes.js. Can you help me?

[unclejustin]

@edatoprak If you're trying to get Vue inside a block here is a very simplified version of how I did it.

// index.js
const editor = grapesjs.init({
  container: "#gjs",
  canvas: {
    scripts: [
      "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
    ]
  },
  fromElement: true,
  plugins: ["gjs-preset-webpage"],
  pluginsOpts: {
    "gjs-preset-webpage": {
      // options
    }
  }
});

editor.BlockManager.add("vueApp", {
  label: "Vue App",
  content: {
    script: function() {
      const app1El = document.createElement("div");
      app1El.id = "app";

      const app1Script = document.createElement("script");
      app1Script.type = "text/javascript";
      app1Script.src = "vueApp.js";

      this.appendChild(app1El);
      this.appendChild(app1Script);
    }
  }
});

// vueApp.js
(() => {
  const app1 = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!"
    },
    template: '<div>{{message}}</div>'
  });
})();

[edatoprak]

@unclejustin Thank you

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.