First-class Vue 3 component via `multipleupload/vue`

A Composition-API-based Vue wrapper that exposes the core as a single-file component. Mounts on onMounted, tears down on onBeforeUnmount, and emits every core event as a kebab-case Vue event. Works with both <script setup> and Options API. Optional peer dependency - non-Vue consumers don't pull anything.

Subpath import: multipleupload/vue ships in the same npm package as the core - no separate install.

Install

npm install multipleupload vue

`<script setup>` usage

<script setup>
import { MultipleUpload } from 'multipleupload/vue';
import 'multipleupload/multipleupload.css';

const options = {
 uploadUrl: '/api/upload',
 multiple: true,
 autoUpload: false,
 strategy: 'chunked',
 chunkSize: 5 * 1024 * 1024,
 chunkConcurrency: 4
};

function onComplete(task, result) {
 console.log('uploaded', result.fileGuid, result.fileName);
}
function onProgress(task) {
 console.log(task.fileName, task.progress + '%');
}
</script>

<template>
 <MultipleUpload
 :options="options"
 @task-complete="onComplete"
 @task-progress="onProgress"
 @error="(err) => console.error(err)"
 />
</template>

Imperative access via template ref

<script setup>
import { ref } from 'vue';
import { MultipleUpload } from 'multipleupload/vue';

const upRef = ref(null);

function startUpload() { upRef.value?.upload(); }
function pauseAll() { upRef.value?.pauseAll(); }
function getInstance() { return upRef.value?.instance; } // full core API
</script>

<template>
 <MultipleUpload ref="upRef" :options="{ uploadUrl: '/api/upload', autoUpload: false }" />
 <button @click="startUpload">Start upload</button>
 <button @click="pauseAll">Pause all</button>
</template>

Emitted events

All core events are emitted as kebab-case Vue events:

task-added, task-removed, task-started, task-progress, task-complete,
task-failed, task-cancelled, task-paused, task-resumed,
queue-complete, all-complete, progress, state-restored, error

Reactive progress recipe

<script setup>
import { ref } from 'vue';
import { MultipleUpload } from 'multipleupload/vue';

const overall = ref(0);
</script>

<template>
 <MultipleUpload
 :options="{ uploadUrl: '/api/upload', multiple: true }"
 @progress="(o) => overall = o.progress"
 />
 <div class="progress">
 <div :style="{ width: overall + '%' }">{{ overall }}%</div>
 </div>
</template>

Nuxt 3 / SSR friendly

The wrapper only touches DOM inside onMounted, so it's safe under Nuxt 3 server rendering. Wrap in <ClientOnly> if your project disables hydration for upload widgets:

<ClientOnly>
 <MultipleUpload :options="options" @task-complete="onComplete" />
</ClientOnly>

First-class Vue 3 component via multipleupload/vue