rowanwins / vue-dropzone

A Vue.js component for Dropzone.js - a drag’n’drop file uploads utility with image previews
https://rowanwins.github.io/vue-dropzone/docs/dist
MIT License
2.02k stars 1.4k forks source link

Register the Component #28

Closed ServerJunge closed 7 years ago

ServerJunge commented 7 years ago

Hi,

I understand how to npm install and how to import, but i don't know how to register the component. What is the path?

Thanks!

rowanwins commented 7 years ago

Hi @ServerJunge

The documentation shows you how to register the component....

<template>
  <div id="app">
    <p>Welcome to your Vue.js app!</p>
    <dropzone id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
  </div>
</template>

<script>
  import Dropzone from 'vue2-dropzone'

  export default {
    name: 'MainApp',
    components: {
      Dropzone
    }
  }
</script>

Let me know what bit in particular you are stuck on.

ServerJunge commented 7 years ago

Thanks for your answer. I have an app.js file where I import my plugins.

import Dropzone from 'vue2-dropzone'

Here is a part of my app.js with examples for other plugins.

// Import Plugins

import VueForm from 'vform' import VueBreadcrumbs from 'vue2-breadcrumbs' import Dropzone from 'vue2-dropzone'

// Install Plugins Vue.use(VueForm, {components: true}) Vue.use(VueBreadcrumbs)

// Set Components Vue.component('breadcrumb', require('./components/helper/Breadcrumb.vue')); Vue.component('profile-picture', require('./components/settings/Profile-Picture.vue'));

How to I set the dropzone component here?

rowanwins commented 7 years ago

mmm those look like components that are being registered globally,

perhaps try something lke

  import Dropzone from 'vue2-dropzone'
  Vue.use(Dropzone)

after you've done that you should be able to bring it in normally like

    <dropzone id="myVueDropzone" url="https://httpbin.org/post"></dropzone>

Cant say i've ever tried doing it this way

ServerJunge commented 7 years ago

Ah, i figured it out.

First you import the Dropzone import Dropzone from 'vue2-dropzone

And after that you can set it as a global component like so...

Vue.Component('dropzone', Dropzone)

delphist commented 7 years ago

Solution: Vue.component('dropzone', Dropzone)