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>