Vue has full support for web components so we can use the <file-pond> custom element as if it was a Vue component.

The example below is also suitable for use with Nuxt.

<script type="importmap">
    {
        "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
    }
</script>

<div id="app">
    <form @submit="handleSubmit" method="POST">
        <file-pond ref="pondRef" @change="handleChange">
            <label for="my-file">Drop files here, or <u>browse</u></label>
            <input id="my-file" type="file" name="files" required />
        </file-pond>

        <button type="submit">Upload</button>
    </form>
</div>

<script type="module">
    import { createApp } from 'vue';

    // filepond imports
    import { defineFilePond } from 'filepond';
    import { locale } from 'filepond/locales/en-gb.js';

    // defines <file-pond> element
    defineFilePond({
        locale,
    });

    // create the Vue app
    createApp({
        methods: {
            handleChange(e) {
                console.log('change', e);
            },
            handleSubmit(e) {
                e.preventDefault();
                console.log('submit', this.$refs.pondRef.entries);
            },
        },
    }).mount('#app');
</script>