Nuxt UploadThing Module

Nuxt module for getting started with UploadThing in your Nuxt app.

• ✨  Release Notes

Quick Setup

1. Add @uploadthing/nuxt and uploadthing dependencies to your project

1# Using pnpm
2pnpm add -D @uploadthing/nuxt
3pnpm add uploadthing
4
5# Using yarn
6yarn add --dev @uploadthing/nuxt
7yarn add uploadthing
8
9# Using npm
10npm install --save-dev @uploadthing/nuxt
11npm install uploadthing
12
13# Using bun
14bun add -D @uploadthing/nuxt
15bun add uploadthing

2. Add @uploadthing/nuxt to the modules section of nuxt.config.ts

1export default defineNuxtConfig({
2  modules: ["@uploadthing/nuxt"],
3});

That's it! You can now use @uploadthing/nuxt in your Nuxt app ✨

Usage

For full documentation, see the UploadThing docs

1. Create an upload router in your app:

1// server/uploadthing.ts
2import { createUploadthing, UTFiles } from "uploadthing/h3";
3import type { FileRouter } from "uploadthing/h3";
4
5const f = createUploadthing();
6
7/**
8 * This is your Uploadthing file router. For more information:
9 * @see https://docs.uploadthing.com/api-reference/server#file-routes
10 */
11export const uploadRouter = {
12  videoAndImage: f({
13    image: {
14      maxFileSize: "4MB",
15      maxFileCount: 4,
16      acl: "public-read",
17    },
18    video: {
19      maxFileSize: "16MB",
20    },
21  })
22    .middleware(({ event, files }) => {
23      //           ^? H3Event
24
25      // Return some metadata to be stored with the file
26      return { foo: "bar" as const };
27    })
28    .onUploadComplete(({ file, metadata }) => {
29      //                       ^? { foo: "bar" }
30      console.log("upload completed", file);
31    }),
32} satisfies FileRouter;
33
34export type UploadRouter = typeof uploadRouter;

2. Mount a component in your app and start uploading files:

1<script setup lang="ts">
2const alert = (msg: string) => {
3  window.alert(msg);
4};
5</script>
6
7<template>
8  <div>Playground</div>
9  <UploadButton
10    :config="{
11      endpoint: 'videoAndImage',
12      onClientUploadComplete: (res) => {
13        console.log(`onClientUploadComplete`, res);
14        alert('Upload Completed');
15      },
16      onUploadBegin: () => {
17        console.log(`onUploadBegin`);
18      },
19    }"
20  />
21
22  <UploadDropzone
23    :config="{
24      endpoint: 'videoAndImage',
25      onClientUploadComplete: (res) => {
26        console.log(`onClientUploadComplete`, res);
27        alert('Upload Completed');
28      },
29      onUploadBegin: () => {
30        console.log(`onUploadBegin`);
31      },
32    }"
33  />
34</template>

Wow, that was easy!

Development

From workspace root:

1# Install dependencies
2pnpm install
3
4# Develop with the playground
5pnpm dev
6
7# Run ESLint
8pnpm lint