Vue.js Vue2-Dropzoneをインストールしてファイルのアップロードフォームを表示する

vue create vueapp

npm i -S vue2-dropzone

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
  </div>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

export default {
  name: 'app',
  components: {    
    vueDropzone: vue2Dropzone
  },
  data: function () {
    return {
      dropzoneOptions: {
          url: 'https://httpbin.org/post',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { "My-Awesome-Header": "header value" },
          dictDefaultMessage:"<i class='fa fa-cloud-upload'></i>ファイルをアップする"
      }
    }
  }
}
</script>

<style>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin:  0 auto;
  color: #2c3e50;
  margin-top: 60px;
  width: 800px;
}
</style>