Vue integration?

[creativenoobie]

Hey,

I'm trying to integrate ContentTools with Vue using a single file component. I'm getting an error in node console [Vue warn]: Error in created hook: "ReferenceError: document is not defined"

Any ideas what might be wrong? Here's my Vue code:

    <div data-editable data-name="main-content">
        What are you waiting for? Start writing!
    </div>
</template>
<style scoped>
    /* Alignment styles for images, videos and iframes in editable regions */

    /* Center (default) */
    [data-editable] iframe,
    [data-editable] image,
    [data-editable] [data-ce-tag=img],
    [data-editable] img,
    [data-editable] video {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    /* Left align */
    [data-editable] .align-left {
        clear: initial;
        float: left;
        margin-right: 0.5em;
    }

    /* Right align */
    [data-editable].align-right {
        clear: initial;
        float: right;
        margin-left: 0.5em;
    }

    /* Alignment styles for text in editable regions */
    [data-editable] .text-center {
        text-align: center;
    }

    [data-editable] .text-left {
        text-align: left;
    }

    [data-editable] .text-right {
        text-align: right;
    }
</style>
<script>
  import ContentTools from 'ContentTools';
  export default {
    name: 'textEditor',
    data() {
      return {
        editing: false
      }
    },
    created() {
      let withIgnition = false;
      this.editor = ContentTools.EditorApp.get();
      this.editor.init('*[data-editable]', 'data-name');
      this.editor.start();
      console.log(this.editor.getState());
      this.editor.ignition().state('editing');
      console.log(this.editor.getState());
      this.editor.addEventListener('start', ev => this.editing = true );
      this.editor.addEventListener('stop', ev => this.editing = false );
    }
  }
</script>

Thanks!

[developer-rakeshpaul]

Could you please try with mounted() instead of created()

[matthelosh]

Could you please try with mounted() instead of created()

I did that. But there is no pencil button. End the contents are not editable. `

`