Home

Hi,

Thanks for that awesome framework.
I would like to use it with nuxt but within my current setup build is ok but I got nothing rendered for the dropzone (size 0x0 even if I set a size).
I’m pretty new to nuxtjs (and Vue).
Here is my setup:

nuxt.config.js:

module.exports = {
  head: {
    title: 'test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ]
  },
  plugins: [
    { src: '~plugins/vue-dropzone.js', ssr: false },
  ]
 }

plugins/vue-dropzone.js

import Dropzone from 'vue2-dropzone'
import Vue from 'vue'

Vue.use(Dropzone)

pages/index.vue

<template>
  <div id="app">
    <p>Welcome to your Vue.js app!</p>

    <dropzone id="myVueDropzone"  width="200px" height="80px" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess">
        <!-- Optional parameters if any! -->
        <input type="hidden" name="token" value="xxx">
    </dropzone>

  </div>
</template>

<script>
 

  export default {
    name: 'MainApp',
    methods: {
      'showSuccess': function (file) {
        console.log('A file was successfully uploaded')
      }
    },
  }
</script>

Thanks for the help!