Plugins
Overview
Understanding the plugin system in Nuxt Upload Kit.
Plugins
Nuxt Upload Kit uses a plugin architecture that allows you to extend and customize every aspect of the upload process.
Plugin Types
There are two types of plugins:
Processing Plugins
Processing plugins handle file validation and transformation:
- Validators - Check files before adding (size, type, count)
- Processors - Transform files (compression, thumbnails)
import { PluginImageCompressor } from "nuxt-upload-kit"
const uploader = useUploadKit({
plugins: [PluginImageCompressor({ quality: 0.8 })],
})
Storage Plugins
Storage plugins handle uploading, downloading, and deleting files from remote storage:
import { PluginAzureDataLake } from "nuxt-upload-kit"
const uploader = useUploadKit({
storage: PluginAzureDataLake({
sasURL: "https://...",
path: "uploads",
}),
})
Only one storage plugin can be active at a time. Use the
storage option instead of adding storage plugins to the plugins array.Built-in Plugins
Validators
| Plugin | Description |
|---|---|
ValidatorMaxFiles | Limits the number of files |
ValidatorMaxFileSize | Limits individual file size |
ValidatorAllowedFileTypes | Restricts MIME types |
ValidatorDuplicateFile | Prevents duplicate files |
Processors
| Plugin | Description |
|---|---|
PluginThumbnailGenerator | Generates preview thumbnails |
PluginImageCompressor | Compresses images before upload |
PluginVideoCompressor | Compresses videos using FFmpeg |
Storage
| Plugin | Description |
|---|---|
PluginAzureDataLake | Azure Data Lake Storage |
Plugin Lifecycle
Plugins hook into different stages of the file lifecycle:
File Selected
↓
┌─────────────────────┐
│ 1. VALIDATE │ ← ValidatorMaxFiles, ValidatorMaxFileSize, etc.
│ Check if file │
│ should be added │
└─────────────────────┘
↓
┌─────────────────────┐
│ 2. PREPROCESS │ ← PluginThumbnailGenerator
│ Immediate UI │
│ preparation │
└─────────────────────┘
↓
File Added to List
↓
User Clicks Upload
↓
┌─────────────────────┐
│ 3. PROCESS │ ← PluginImageCompressor, PluginVideoCompressor
│ Transform file │
│ before upload │
└─────────────────────┘
↓
┌─────────────────────┐
│ 4. UPLOAD │ ← PluginAzureDataLake (or custom uploadFn)
│ Send to server │
└─────────────────────┘
↓
┌─────────────────────┐
│ 5. COMPLETE │ ← Post-upload processing
│ Cleanup, notify │
└─────────────────────┘
Using Built-in Validators via Options
The easiest way to add validation is through options:
const uploader = useUploadKit({
maxFiles: 10, // Auto-adds ValidatorMaxFiles
maxFileSize: 50 * 1024 * 1024, // Auto-adds ValidatorMaxFileSize
allowedFileTypes: ["image/*"], // Auto-adds ValidatorAllowedFileTypes
thumbnails: true, // Auto-adds PluginThumbnailGenerator
imageCompression: true, // Auto-adds PluginImageCompressor
})
Adding Plugins Manually
For more control, add plugins directly:
import { ValidatorMaxFiles, ValidatorDuplicateFile, PluginImageCompressor } from "nuxt-upload-kit"
const uploader = useUploadKit({
plugins: [
ValidatorMaxFiles({ maxFiles: 10 }),
ValidatorDuplicateFile(),
PluginImageCompressor({
maxWidth: 2048,
quality: 0.8,
}),
],
})
Plugin Execution Order
Plugins execute in the order they're added. This matters for:
- Validators - First failing validator stops the process
- Processors - Each processor receives the output of the previous one
const uploader = useUploadKit({
plugins: [
// 1. First, check file count
ValidatorMaxFiles({ maxFiles: 10 }),
// 2. Then, check file size
ValidatorMaxFileSize({ maxFileSize: 50 * 1024 * 1024 }),
// 3. Finally, check file type
ValidatorAllowedFileTypes({ allowedFileTypes: ["image/*"] }),
],
})
Runtime Plugin Addition
Add plugins after initialization:
const uploader = useUploadKit()
// Add based on user preference
if (userPreferences.compressImages) {
uploader.addPlugin(PluginImageCompressor({ quality: 0.8 }))
}