Vue and Uppy setup with all Socials

[leslieborst]

Hi! I am using Vue to set up Uppy and I cant seem to figure out how to set up all the social options. The example on Uppy’s site only shows for one which is Webcam and when i tried to set up others it just breaks. Just not sure where I put the other socials at in the uppy init stuff. Any help is appreciated! <3

I tried doing another .use after the current one, i tried doing a comma after Webcam and neither of those work.

<template>
    
    <dashboard :uppy="uppy" :plugins="['Webcam']"/>
</template>

<script>

    import { Dashboard } from '@uppy/vue';

    import '@uppy/core/dist/style.css';
    import '@uppy/dashboard/dist/style.css';
    import '@uppy/provider-views/dist/style.css';

    import Uppy from '@uppy/core';
    import Webcam from '@uppy/webcam';
    import Dropbox from '@uppy/dropbox';

    export default {
        name: 'App',
        components: {
            Dashboard
        },
        computed: {
            uppy: () => new Uppy().use(Webcam)
            
        },
        beforeDestroy () {
            this.uppy.close()
        }
        
    }

</script>

[ajkachnic]

@leslieborst

<template>
    
    <dashboard :uppy="uppy" :plugins="['Webcam']"/>
</template>

<script>

    import { Dashboard } from '@uppy/vue';

    import '@uppy/core/dist/style.css';
    import '@uppy/dashboard/dist/style.css';
    import '@uppy/provider-views/dist/style.css';

    import Uppy from '@uppy/core';
    import Webcam from '@uppy/webcam';
    import Dropbox from '@uppy/dropbox';

    export default {
        name: 'App',
        components: {
            Dashboard
        },
        computed: {
            uppy: () => new Uppy().use(Webcam)
            
        },
        beforeDestroy () {
            this.uppy.close()
        }
        
    }

</script>

Hi - I’m Andrew. Given this simple example, adding a second plugin would look something like this:

<template>
    <dashboard :uppy="uppy" :plugins="['Webcam', 'Instagram']"/>
</template>

<script>

    import { Dashboard } from '@uppy/vue';

    import '@uppy/core/dist/style.css';
    import '@uppy/dashboard/dist/style.css';
    import '@uppy/provider-views/dist/style.css';

    import Uppy from '@uppy/core';
    import Webcam from '@uppy/webcam';
    import Instagram from '@uppy/instagram';
    import Dropbox from '@uppy/dropbox';

    export default {
        name: 'App',
        components: {
            Dashboard
        },
        computed: {
            uppy: () => new Uppy().use(Webcam).use(Instagram)
            
        },
        beforeDestroy () {
            this.uppy.close()
        }
        
    }

</script>

The trick is to set both the :plugins attribute, and add the plugin to the Uppy instance. The :plugins part is for Dashboard to know which plugins to display, and the uppy.use() part is for Uppy itself.

So, the :plugins part only applies for UI Plugins (like Webcam, Instagram, etc), and not for other plugins.

Admittedly, the docs could probably cover this better (I believe it’s just a small note right now). Let know me if you have any more trouble!

- Andrew

[leslieborst]

Hello Andrew!

Thank you so much for the help! This was part of what I needed unfortunately I am still getting the error that it does not work. It seems some urls are missing like I am missing some big part of how to set this up in Vue?