Using FilePond to upload files with Vue or Nuxt

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

We can import the filepond/types/vue module to type the custom element.

<script setup lang="ts">
    // FilePond imports
    import { defineFilePond } from 'filepond';
    import { locale } from 'filepond/locales/en-gb.js';

    // Optionally import Vue <file-pond> component types
    import 'filepond/types/vue';

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

    function handleChange(e: Event) {
        console.log('change', e);
    }

    function handleSubmit(e: Event) {
        e.preventDefault();
        console.log('submit', e);
    }
</script>

<template>
    <form @submit="handleSubmit" method="POST">
        <label for="my-file">Documents</label>
        <file-pond @change="handleChange">
            <input id="my-file" type="file" name="files" required multiple />
        </file-pond>

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

Browser version.

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

<div id="app">
    <form @submit="handleSubmit" method="POST">
        <label for="my-file">Documents</label>
        <file-pond ref="pondRef" @change="handleChange">
            <input id="my-file" type="file" name="files" required multiple />
        </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.currentEntries);
            },
        },
    }).mount('#app');
</script>