Dropzone is not defined when used inside a component

Question

Im currently trying to import vue2-dropzone into my Laravel project so it is using Laravel mix.

I am importing it in my bootstrap.js as below:

import vueDropzone from "vue2-dropzone";
Vue.component('vueDropzone', vueDropzone)

I then want to be able to use in one of my components which is inside a file called "CreatePersonalExpense.vue". This component is accessed using Vue router.

Below is a snippet of how it is being used in my component:

<template>

<div class="form-row py-2">
    <div class="col-md-12">
        <h4>Upload</h4>
        <vue-dropzone v-on:vdropzone-sending="sendingFiles" id="drop1" ref="myVueDropzone" @vdropzone-complete-multiple="afterAllFilesUploaded" :options="dropOptions"></vue-dropzone>
    </div>
</div>

</template>

<script>
    export default {

        data() {
            return {
                type: "personal",
                id: "",
                total: "",
                files: {
                },
                dropOptions: {
                    url: '/api/expenses/files',
                    autoProcessQueue: false,
                    uploadMultiple: true,
                    headers: { "x-csrf-token": document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
                    params: {}
                },
                errors: new Errors(),
                form: new Form(),
            }
        },

        components: {
            vueDropzone
        }
}
</script>

However the dropzone is not recognised and I get the error:

Uncaught ReferenceError: vueDropzone is not defined

However if I were to import the dropzone directly into this Vue component by putting import vueDropzone from "vue2-dropzone"; at the beginning of the script tag, dropzone works fine. Why can't I just include it in the bootstrap.js file and have it work for there?

Answer 1

If you already register vueDropzone in bootstrap.js, you don't need to register it again in your component. You should remove this in CreatePersonalExpense.vue

components: {
  vueDropzone
}

vueDropzone is an undefined variable. Just remove it and it should work.

Answer 2

Try defining as below =>

Vue.component('vue-dropzone', vueDropzone)