Very basic vuejs usage of uppy

uppy-vue-example

<template>
    <div :id="uppyId">
        <div class="ThumbnailContainer" v-if="collection === 'thumbnail'">
            <button id="open-thumbnail-modal" class="button">Select file</button>

        </div>
        <div class="DashboardContainer" v-else></div>
    </div>
</template>

<script>
    const Uppy = require('uppy/lib/core');
    const Dashboard = require('uppy/lib/plugins/Dashboard');
    const XHRUpload = require('uppy/lib/plugins/XHRUpload');

    export default {
        props: {
            modelClass: {
                type: String,
                required: true
            },
            modelId: {
                type: String,
                required: true
            },
            collection: {
                type: String,
                required: true
            },
            endpoint: {
                type: String,
                required: false,
                default() {
                    return '/upload'
                }
            }
        },

        data() {
            return {}
        },

        computed: {
            uppyId() {
                return this.modelClass + '-' + this.modelId + '-' + this.collection;
            }
        },

        mounted() {
            const uppy = Uppy({
                id: this.uppyId,
                autoProceed: false,
                debug: true,
                restrictions: {
                    maxFileSize: false,
                    allowedFileTypes: ['image/*', 'application/pdf']
                },
                meta: {
                    modelClass: this.modelClass,
                    modelId: this.modelId,
                    collection: this.collection
                },
                onBeforeFileAdded: (currentFile, files) => Promise.resolve(),
                onBeforeUpload: (files, done) => Promise.resolve(),
            });
            if (this.collection === 'thumbnail') {
                uppy.use(Dashboard, {
                    trigger: '#open-thumbnail-modal',
                    metaFields: [
                        {id: 'owner', name: 'Owner', placeholder: 'name of the photographer/owner'},
                        {id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'},
                        {id: 'order', name: 'Order', placeholder: 'order'},
                    ]
                })
            } else {
                uppy.use(Dashboard, {
                    inline: true,
                    target: '.DashboardContainer',
                    replaceTargetContent: true,
                    note: 'Images and PDF only.',
                    maxHeight: 500,
                    metaFields: [
                        {id: 'owner', name: 'Owner', placeholder: 'name of the photographer/owner'},
                        {id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'},
                        {id: 'order', name: 'Order', placeholder: 'order'},
                    ]
                })
            }
            uppy.use(XHRUpload, {
                endpoint: this.endpoint,
                headers: {
                    'X-CSRF-TOKEN': window.csrfToken
                },
            })
            uppy.run();
        },

        methods: {}
    }
</script>

<style src="uppy/dist/uppy.css"></style>

Hi 👋 just wanted to mention have have an official Vue.js integration for Uppy in the works now. It's not to late to influence how it looks, so feel free to weigh in over at this PR transloadit/uppy#2500.