Get Started

Overview

Get started with Nuxt Upload Kit in your Nuxt application.

Getting Started

Experimental Module — This module is under active development and the API may change between versions. Use in production at your own risk.

Get started with Nuxt Upload Kit by installing the module and adding it to your Nuxt configuration.

Terminal

pnpm add nuxt-upload-kit

Or use your preferred package manager: npm install nuxt-upload-kit or yarn add nuxt-upload-kit

Add nuxt-upload-kit to the modules section of your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-upload-kit"],
})

The useUploadKit composable is now auto-imported and ready to use:

app.vue

<script setup>
const uploader = useUploadKit({
  maxFiles: 10,
  thumbnails: true,
})
</script>

Nuxt Upload Kit has optional peer dependencies for advanced features.

For video compression support using FFmpeg in the browser:

Terminal

pnpm add @ffmpeg/ffmpeg @ffmpeg/util

For Azure Data Lake storage support:

Terminal

pnpm add @azure/storage-file-datalake

Nuxt Upload Kit is written in TypeScript and ships with full type definitions. Types are automatically available when you use the module.

You can also import types directly if needed:

import type { UploadFile, UploadOptions, ProcessingPlugin, StoragePlugin } from "nuxt-upload-kit"

If you encounter issues during installation:

Clear your package manager cache and reinstall:

rm -rf node_modules pnpm-lock.yaml
pnpm install

If issues persist, please open an issue with your environment details and error messages.

Configuration

Configure Nuxt Upload Kit to fit your application needs.