All UI-Components appear left aligned

[Mungo64]

Version

toast-ui.vue-image-editor 1.0.2

"@toast-ui/vue-image-editor": "^1.0.2",
"axios": "^0.18.1",
"moment": "^2.24.0",
"vue": "^2.6.6",
"vue-router": "^3.0.1",
"vuetify": "^1.5.5",
"vuex": "^3.1.0"

Development Environment

windows 10 - 64 , chrome

when the page with the editor opens it looks like this:

All elements are on the left side of the screen

<template>
    <v-container class="imageEditorApp">
        <tui-image-editor :include-ui="useDefaultUI" :options="options"></tui-image-editor>
    </v-container>
</template>

<script>

import { ImageEditor } from '@toast-ui/vue-image-editor';

export default {
    components: {
        'tui-image-editor': ImageEditor
    },
    data() {
        return {
            useDefaultUI: true,
            options: { // for tui-image-editor component's "options" prop
                usageStatistics: false,
                cssMaxWidth: 700,
                cssMaxHeight: 500,
                menuBarPosition: 'bottom'
            }
        };
    }
}

</script>

[naveenkumarmark]

Hi @Mungo64, verify that you have installed all the css and js files of vue-image-editor.
This appears due to the css style issue.

[DAVIDSystems]

@naveenkumarmark
Thanks, that pointed me in the right direction. Actually i was not aware, that i had to install the non vue image editor too.

npm install --save tui-image-editor

The solution was to add this two lines before the editor import command
.....
// Load Style Code
import 'tui-image-editor/dist/tui-image-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
...
import { ImageEditor } from '@toast-ui/vue-image-editor';