[Question] issue with css and icons

[raghuv9]

hey @artf i installed grapes js through npm [ "grapesjs": "^0.15.9"] and i'm using vue with grapes js , here is my code

---

import grapesjs from 'grapesjs'; import 'grapesjs/dist/css/grapes.min.css'; export default { data() { return { editor: null } }, methods: { change() { this.$emit('change', this.editor.getHtml()); }, }, mounted() { this.editor = grapesjs.init({ container : '#gjs' }) this.editor.on('change', this.change); } } i'm having issues with css as few icons are missing and remaining icons are not responding to any action. and there are no errors when i run npm and no errors in the browser console too. os-windows10 , node-13.0.1,npm:6.13.0

This how my ui looks like

[pouyamiralayi]

@raghuv9 creating a custom vue component for grapesjs:

import grapesjs from 'grapesjs'

const VueGrapesjs = {
  install (Vue, options = {}) {
    const config = {
      presets: []
    }

    const { presets } = Object.assign(config, options)

    if (presets.length) {
      presets.forEach((data) => {
        const {
          name,
          options = {},
          loader
        } = data

        grapesjs.plugins.add(name, (editor) => {
          loader(editor, options)
        })
      })
    }

    Vue.prototype.$grapesjs = grapesjs
  }
}

export default VueGrapesjs

and to actually use it:

<template>
  <div id="app">
    <grapesjs
      :options="gjsConfigs"
    />
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      gjsConfigs: {
        plugins: ['charts']
      }
    }
  }
}
</script>

check this repo for more info. cheers!