How to configure Croppie for vue 3 in laravel 8?

Question

In a vue page I added a ImageUpload component, following this tutorial: https://www.youtube.com/watch?v=kvNozA8M1HM

It works more or less. No errors, but it only shows my image and a ruler. I can zoom using the ruler, but it does not show boundaries, circle etc. It is completely different from the example in the tutorial... It is buggy, so to say.

<template>
    <div class="Image-Upload-wrapper Image-upload"> 
        <p> 
            This is image upload wrapper component
        </p>
            <div id="croppie"> </div>        


    </div>
</template>



<script>
//  uitleg over Croppie::https://www.youtube.com/watch?v=kvNozA8M1HM
import Croppie from 'croppie';

export default {
    props:[
        'imgUrl'
    ],

    mounted(){
        this.image = this.imgUrl   // als component is mounted, this.image definieren, en daartmee croppie in..
        this.setUpCroppie()
    },
    data(){
        return{
           image:null,
           croppie:null
        }
    },
    methods:{
        setUpCroppie(){
           let el = document.getElementById('croppie');
           this.croppie = new Croppie(el, {
               viewport:{width:200,height:200,type:'circle'},
               boundary:{ width:220,height:220},
               showZoomer:true,
               enableOrientation: true
           });
           this.croppie.bind({       
               url:this.image
           });
        }
    }
}
</script>

Is placed in parent as follows:

template>
<div>
    <h2>Cards 1</h2>
    
        <div class="form-group">
            <input type="text" class="form-control" :placeholder="card.title" v-model="card.title">
        </div>

        <div class="form-group">
            <textarea  class="form-control" :placeholder="card.description" v-model="card.description">
            </textarea>
        </div>
 
                

        <div id="preview" v-if="url" >
            <h4> Preview</h4>
            <ImageUpload  :imgUrl="url"></ImageUpload> 
            <!-- <img  class="img-circle" style="width:150px"  :src="url" /> -->
        </div>

        <input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">

        
        <button @click="editCard(currentSpelerCard)" class="btn btn-warning m-1" style="width:100px;color:black">  Save Card  </button>


    
</div>
</template>

In my package.json I have:

"croppie": "^2.6.5",

in webpack mix I have:

mix.js('resources/js/app.js', 'public/js')
mix.vue();
mix.sass('resources/sass/app.scss', 'public/css');

I have a feeling that something is wrong with the installation of croppie.

Does anyone know what could be the problem here?

Answer 1

Googloing on I found the remark:

"#Since this package also depends on croppie.css you have to import it in your app.js import 'croppie/croppie.css'"

I added the following line to bootstrap.js:

import 'croppie/croppie.css';