Tui.image-editor: Layout is entirely broken, what am I doing wrong?

[samirph]

Version

3.4.0

Development Environment

Ubuntu 18.04
Nuxt.js v2.3.4
Vuetify v1.3.15

Current Behavior

I loaded the editor into my Nuxt.js application but the layout is entirely broken.

My initialization code with a hardcoded image for testing

// Write example code
import Vue from 'vue'
import whiteTheme from 'tui-image-editor/examples/js/theme/white-theme'
var ImageEditor = require('tui-image-editor');

var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
     includeUI: {
         loadImage: {
             path: 'https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=1200&w=1200',
             name: 'SampleImage'
         },
         theme: whiteTheme,
         initMenu: 'filter',
         menuBarPosition: 'bottom'
     },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
    }
});

Vue.prototype.$imageEditor = instance

Expected Behavior

A layout working like it is shown in the docs

[hzeeli]

import 'tui-image-editor/dist/tui-image-editor.css';

[samirph]

thank you

[klaveren]

For Nuxtjs import as a Global CSS in nuxt.config.js

  /*
   ** Global CSS
   */
  css: [
    'tui-image-editor/dist/tui-image-editor.css',
  ],