Powerful File Uploads for your Nuxt Apps

A composable-first file upload manager with built-in validation, image compression, thumbnail generation, and cloud storage support. Production-ready in minutes.

Get Started

Everything you need for file uploads

Plugin Architecture

Extensible plugin system for validation, processing, and storage. Add only what you need, create custom plugins with ease.

Storage Adapters

S3-compatible (AWS, R2, Spaces, MinIO), Azure Data Lake, and Firebase Storage. Upload directly to the cloud with presigned URLs and automatic retry logic.

Image Compression

Compress images in the browser before upload. Reduce file sizes by up to 80% while maintaining visual quality.

Video Compression

FFmpeg-powered video transcoding in the browser. Resize, re-encode, and optimize videos before they hit your server.

Built-in Validation

Validate file type, size, count, and duplicates out of the box. Configurable limits with clear error messages.

Event System

Real-time progress tracking with a comprehensive event system. Hook into every stage of the upload lifecycle.

Simple API

Get up and running with just a few lines of code. The useUploadKit composable handles file state, validation, processing, and uploads — all reactively.

Read the docs

<script setup lang="ts">
const uploader = useUploadKit({
  maxFiles: 10,
  maxFileSize: 50 * 1024 * 1024,
  allowedFileTypes: ["image/*", "video/*"],
  thumbnails: true,
  imageCompression: { quality: 0.85 },
})

uploader.onUpload(async (file, onProgress) => {
  // Your upload logic here
  const response = await uploadToServer(file, onProgress)
  return response
})
</script>

<template>
  <input type="file" multiple @change="(e) => uploader.addFiles(e.target.files)" />

  <div v-for="file in uploader.files" :key="file.id">
    <img v-if="file.preview" :src="file.preview" />
    <span>{{ file.name }}</span>
    <progress :value="file.progress.percentage" max="100" />
  </div>

  <button @click="uploader.upload()">Upload</button>
</template>

Works with your favorite cloud providers

Built-in storage adapters handle authentication, chunked uploads, and error handling. Focus on your app, not infrastructure.

Azure Data Lake

Upload to Azure Data Lake Storage Gen2 with SAS token authentication, automatic retries, and progress tracking.

S3 Compatible

Upload to AWS S3, Cloudflare R2, DigitalOcean Spaces, MinIO, and more with presigned URLs.

Firebase Storage

Upload to Firebase Storage with Firebase SDK authentication and real-time progress tracking.

Extend with custom plugins

The plugin system lets you hook into validation, preprocessing, processing, and upload stages. Create reusable plugins for your specific needs.

Build a plugin

import { definePlugin } from "nuxt-upload-kit"

export const MyCustomPlugin = definePlugin((options) => ({
  name: "my-custom-plugin",

  hooks: {
    // Validate before adding
    "file:validate": async (file, context) => {
      if (file.name.includes("secret")) {
        return { valid: false, error: "No secrets allowed!" }
      }
      return { valid: true }
    },

    // Transform before upload
    "file:process": async (file, context) => {
      const processed = await transformFile(file)
      return processed
    },
  },
}))