Static GitHub Issues

[675] Help needed: Nuxt and vue-dropzone

prev: SSR only serves static page, never hydrates in IE11.
next: google tag manager example

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!

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c584">#c584</a>)</em></sub></div>