File Storage
Setup
Enable file storage in your Nuxt Convex project.
Convex provides built-in file storage. Enable it in your config to auto-scaffold the required functions.
Enable Storage
Add the storage option to your Nuxt configuration:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-convex'],
convex: {
storage: true,
},
})
This creates convex/_hub/storage.ts with generateUploadUrl, getUrl, and remove functions.
You can customize the auto-scaffolded functions in
convex/_hub/storage.ts after generation.Add Schema
Add the uploads table to your schema:
convex/schema.ts
import { defineSchema, defineTable } from 'convex/server'
import { v } from 'convex/values'
export default defineSchema({
uploads: defineTable({
storageId: v.id('_storage'),
name: v.string(),
type: v.string(),
url: v.optional(v.string()),
userId: v.string(),
createdAt: v.number(),
}).index('by_user', ['userId']),
})
Auto-Scaffolded Functions
The module creates these Convex functions:
| Function | Description |
|---|---|
_hub.storage.generateUploadUrl | Get a URL for direct upload |
_hub.storage.getUrl | Get the public URL for a file |
_hub.storage.remove | Delete a file from storage |
Composables
Two composables are available when storage is enabled:
| Composable | Purpose |
|---|---|
useConvexStorage | Low-level storage operations |
useConvexUpload | File upload with progress tracking |
Both are auto-imported when storage is enabled.
Next Steps
- Learn useConvexStorage for low-level operations
- Learn useConvexUpload for file uploads with progress
See the Convex file storage documentation for more details.