Vuejs: How to use vue-email-editor?

Question

I'm trying to integrate vue-email-editor into my source. I followed the instructions but still can't integrate vue-email-editor. And here is how I do it and the error I'm getting:

Step 1: npm install vue-email-editor --save

Step 2: In App.vue

<template>
  <div id="app">
    <div class="container">
      <div id="bar">
        <h1>Vue Email Editor (Demo)</h1>

        <button v-on:click="saveDesign">Save Design</button>
        <button v-on:click="exportHtml">Export HTML</button>
      </div>

      <EmailEditor
        :appearance="appearance"
        :min-height="minHeight"
        :project-id="projectId"
        :locale="locale"
        :tools="tools"
        :options="options"
        ref="emailEditor"
        v-on:load="editorLoaded"
        v-on:ready="editorReady"
      />
    </div>
  </div>
</template>

<script>
  import { EmailEditor } from 'vue-email-editor';

  export default {
    name: 'app',
    components: {
      EmailEditor,
    },
    data() {
      return {
        minHeight: '1000px',
        locale: 'en',
        projectId: 0, // replace with your project id
        tools: {
          // disable image tool
          image: {
            enabled: false,
          },
        },
        options: {},
        appearance: {
          theme: 'dark',
          panels: {
            tools: {
              dock: 'right',
            },
          },
        },
      };
    },
    methods: {
      // called when the editor is created
      editorLoaded() {
        console.log('editorLoaded');
        // Pass your template JSON here
        // this.$refs.emailEditor.editor.loadDesign({});
      },
      // called when the editor has finished loading
      editorReady() {
        console.log('editorReady');
      },
      saveDesign() {
        this.$refs.emailEditor.editor.saveDesign((design) => {
          console.log('saveDesign', design);
        });
      },
      exportHtml() {
        this.$refs.emailEditor.editor.exportHtml((data) => {
          console.log('exportHtml', data);
        });
      },
    },
  };
</script>

And then I run source and get the error:

Uncaught TypeError: __webpack_modules__[moduleId] is not a function
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:166893:41)
    at app.js?id=ee06f5f7860fd239b953:186888:68
    at app.js?id=ee06f5f7860fd239b953:187073:2
    at ./node_modules/vue-email-editor/dist/vue-email-editor.common.js (app.js?id=ee06f5f7860fd239b953:187075:12)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./frontend/src/App.vue?vue&type=script&lang=js& (app.js?id=ee06f5f7860fd239b953:117639:74)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./frontend/src/App.vue?vue&type=script&lang=js& (app.js?id=ee06f5f7860fd239b953:110481:194)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./frontend/src/App.vue (app.js?id=ee06f5f7860fd239b953:110445:91)

Reference links : https://github.com/unlayer/vue-email-editor

I have searched a lot but there is not a solution that helps me to fix this error. If anyone has successfully integrated, please give me a solution to fix the above error. Thanks.

Answer 1

This issue is also reported here, and it says to downgrade the version to 1.0.0 to make it workable.

Here is the codesandbox demo of vue-email-editor with version 1.0.0.

(I could not create snippet because CDN of this library is not available.)