beta

Blob Storage

Upload, store and serve images, videos, music, documents and other unstructured data in your Nuxt application.

Getting Started

  1. Enable the blob storage in your NuxtHub project by adding the blob property to the hub object in your nuxt.config.ts file.
nuxt.config.ts
export default defineNuxtConfig({
  hub: {
    blob: true
  }
})
  1. Configure your production storage provider in Nitro
nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      BLOB: {
        driver: 'vercel-blob',
        access: 'public',
        /* any additional connector options */
      }
    }
  },

  hub: {
    blob: true,
  },
})
You can find the driver list on unstorage documentation with their configuration.

By default, NuxtHub will automatically use the filesystem during local development. You can modify this behaviour by specifying a different storage driver.

hubBlob()

Server composable that returns a set of methods to manipulate the blob storage.

list()

Returns a paginated list of blobs (metadata only).

server/api/files.get.ts
export default eventHandler(async () => {
  const { blobs } = await hubBlob().list({ limit: 10 })

  return blobs
})

Params

options
Object
The list options.

Return

Returns BlobListResult.

Return all blobs

To fetch all blobs, you can use a while loop to fetch the next page until the cursor is null.

let blobs = []
let cursor = null

do {
  const res = await hubBlob().list({ cursor })
  blobs.push(...res.blobs)
  cursor = res.cursor
} while (cursor)

serve()

Returns a blob's data and sets Content-Type, Content-Length and ETag headers.

export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)

  return hubBlob().serve(event, pathname)
})
To prevent XSS attacks, make sure to control the Content type of the blob you serve.

You can also set a Content-Security-Policy header to add an additional layer of security:

server/api/images/[...pathname].get.ts
export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)

  setHeader(event, 'Content-Security-Policy', 'default-src \'none\';')
  return hubBlob().serve(event, pathname)
})

Params

event
H3Event
Handler's event, needed to set headers.
pathname
String
The name of the blob to serve.

Return

Returns the blob's raw data and sets Content-Type and Content-Length headers.

head()

Returns a blob's metadata.

const metadata = await hubBlob().head(pathname)

Params

pathname
String
The name of the blob to serve.

Return

Returns a BlobObject.

get()

Returns a blob body.

const blob = await hubBlob().get(pathname)

Params

pathname
String
The name of the blob to serve.

Return

Returns a Blob or null if not found.

put()

Uploads a blob to the storage.

server/api/files.post.ts
export default eventHandler(async (event) => {
  const form = await readFormData(event)
  const file = form.get('file') as File

  if (!file || !file.size) {
    throw createError({ statusCode: 400, message: 'No file provided' })
  }

  ensureBlob(file, {
    maxSize: '1MB',
    types: ['image']
  })

  return hubBlob().put(file.name, file, {
    addRandomSuffix: false,
    prefix: 'images'
  })
})

See an example on the Vue side:

pages/upload.vue
<script setup lang="ts">
async function uploadImage (e: Event) {
  const form = e.target as HTMLFormElement

  await $fetch('/api/files', {
    method: 'POST',
    body: new FormData(form)
  }).catch((err) => alert('Failed to upload image:\n'+ err.data?.message))

  form.reset()
}
</script>

<template>
  <form @submit.prevent="uploadImage">
    <label>Upload an image: <input type="file" name="image"></label>
    <button type="submit">
      Upload
    </button>
  </form>
</template>

Params

pathname
String
The name of the blob to serve.
body
String | ReadableStream<any> | ArrayBuffer | ArrayBufferView | Blob
The blob's data.
options
Object
The put options. Any other provided field will be stored in the blob's metadata.

Return

Returns a BlobObject.

del()

Delete a blob with its pathname.

server/api/files/[...pathname].delete.ts
export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)

  await hubBlob().del(pathname)

  return sendNoContent(event)
})

You can also delete multiple blobs at once by providing an array of pathnames:

await hubBlob().del(['images/1.jpg', 'images/2.jpg'])
You can also use the delete() method as alias of del().

Params

pathname
String
The name of the blob to serve.

Return

Returns nothing.

handleUpload()

This is an "all in one" function to validate a Blob by checking its size and type and upload it to the storage.

This server util is made to be used with the useUpload() Vue composable.

It can be used to handle file uploads in API routes.

export default eventHandler(async (event) => {
  return hubBlob().handleUpload(event, {
    formKey: 'files', // read file or files form the `formKey` field of request body (body should be a `FormData` object)
    multiple: true, // when `true`, the `formKey` field will be an array of `Blob` objects
    ensure: {
      types: ['image/jpeg', 'image/png'], // allowed types of the file
    },
    put: {
      addRandomSuffix: true
    }
  })
})

Params

formKey
string
The form key to read the file from. Defaults to 'files'.
multiple
boolean
When true, the formKey field will be an array of Blob objects.
ensure
BlobEnsureOptions
See ensureBlob() options for more details.
put
BlobPutOptions
See put() options for more details.

Return

Returns a BlobObject or an array of BlobObject if multiple is true.

Throws an error if file doesn't meet the requirements.

handleMultipartUpload()

Handle the request to support multipart upload.

server/api/files/multipart/[action]/[...pathname].ts
export default eventHandler(async (event) => {
  return await hubBlob().handleMultipartUpload(event)
})
Make sure your route includes [action] and [...pathname] params.

On the client side, you can use the useMultipartUpload() composable to upload a file in parts.

<script setup lang="ts">
async function uploadFile(file: File) {
  const upload = useMultipartUpload('/api/files/multipart')

  const { progress, completed, abort } = upload(file)
}
</script>
See useMultipartUpload() on usage details.

Params

contentType
string
The content type of the blob.
contentLength
string
The content length of the blob.
addRandomSuffix
boolean
If true, a random suffix will be added to the blob's name. Defaults to false.

createMultipartUpload()

We suggest using handleMultipartUpload() method to handle the multipart upload request.

If you want to handle multipart uploads manually using this utility, keep in mind that you cannot use this utility for Vercel Blob due to payload size limit of Vercel functions. Consider using Vercel Blob Client SDK.

Start a new multipart upload.

server/api/files/multipart/[...pathname].post.ts
export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)

  const mpu = await hubBlob().createMultipartUpload(pathname)

  return {
    uploadId: mpu.uploadId,
    pathname: mpu.pathname,
  }
})

Params

pathname
String
The name of the blob to serve.
options
Object
The put options. Any other provided field will be stored in the blob's metadata.

Return

Returns a BlobMultipartUpload

resumeMultipartUpload()

We suggest using handleMultipartUpload() method to handle the multipart upload request.

Continue processing of unfinished multipart upload.

To upload a part of the multipart upload, you can use the uploadPart() method:

server/api/files/multipart/[...pathname].put.ts
export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)
  const { uploadId, partNumber } = getQuery(event)

  const stream = getRequestWebStream(event)!
  const body = await streamToArrayBuffer(stream, contentLength)

  const mpu = hubBlob().resumeMultipartUpload(pathname, uploadId)
  return await mpu.uploadPart(partNumber, body)
})

Complete the upload by calling complete() method:

server/api/files/multipart/complete.post.ts
export default eventHandler(async (event) => {
  const { pathname, uploadId } = getQuery(event)
  const parts = await readBody(event)

  const mpu = hubBlob().resumeMultipartUpload(pathname, uploadId)
  return await mpu.complete(parts)
})

If you want to cancel the upload, you need to call abort() method:

server/api/files/multipart/[...pathname].delete.ts
export default eventHandler(async (event) => {
  const { pathname } = getRouterParams(event)
  const { uploadId } = getQuery(event)

  const mpu = hubBlob().resumeMultipartUpload(pathname, uploadId)
  await mpu.abort()

  return sendNoContent(event)
})

A simple example of multipart upload in client with above routes:

utils/multipart-upload.ts
async function uploadLargeFile(file: File) {
  const chunkSize = 10 * 1024 * 1024 // 10MB

  const count = Math.ceil(file.size / chunkSize)
  const { pathname, uploadId } = await $fetch(
    `/api/files/multipart/${file.name}`,
    { method: 'POST' },
  )

  const uploaded = []

  for (let i = 0; i < count; i++) {
    const start = i * chunkSize
    const end = Math.min(start + chunkSize, file.size)
    const partNumber = i + 1
    const chunk = file.slice(start, end)

    const part = await $fetch(
      `/api/files/multipart/${pathname}`,
      {
        method: 'PUT',
        query: { uploadId, partNumber },
        body: chunk,
      },
    )

    uploaded.push(part)
  }

  return await $fetch(
    '/api/files/multipart/complete',
    {
      method: 'POST',
      query: { pathname, uploadId },
      body: { parts: uploaded },
    },
  )
}

Params

pathname
String
The name of the blob to serve.
uploadId
String
The upload ID of the multipart upload.

Return

Returns a BlobMultipartUpload

Params

event
H3Event required
The event to handle.

ensureBlob()

ensureBlob() is a handy util to validate a Blob by checking its size and type:

// Will throw an error if the file is not an image or is larger than 1MB
ensureBlob(file, { maxSize: '1MB', types: ['image']})

Params

file
Blob required
The file to validate.
options
Object required
Note that at least maxSize or types should be provided.

Return

Returns nothing.

Throws an error if file doesn't meet the requirements.

Vue Composables

The following composables are meant to be used in the Vue side of your application (not the server/ directory).

useUpload()

useUpload is to handle file uploads in your Nuxt application.

<script setup lang="ts">
const upload = useUpload('/api/blob', { method: 'PUT' })

async function onFileSelect({ target }: Event) {
  const uploadedFiles = await upload(target as HTMLInputElement)

  // file uploaded successfully
}
</script>

<template>
  <input
    accept="image/jpeg, image/png"
    type="file"
    name="file"
    multiple
    @change="onFileSelect"
  >
</template>

Params

apiBase
string required
The base URL of the upload API.
options
Object required
Optionally, you can pass Fetch options to the request. Read more about Fetch API here.

Return

Return a MultipartUpload function that can be used to upload a file in parts.

const { completed, progress, abort } = upload(file)
const data = await completed

useMultipartUpload()

Application composable that creates a multipart upload helper.

When you configure to use Vercel Blob, this utility will automatically use Vercel Blob Client SDK to upload the file.
utils/multipart-upload.ts
export const mpu = useMultipartUpload('/api/files/multipart')

Params

baseURL
string
The base URL of the multipart upload API handled by handleMultipartUpload().
options
The options for the multipart upload helper.

Return

Return a MultipartUpload function that can be used to upload a file in parts.

const { completed, progress, abort } = mpu(file)
const data = await completed

Storage Providers

NuxtHub supports multiple storage providers for blob storage. In development mode, NuxtHub automatically configures the filesystem (fs) driver for local development.

Filesystem (fs)

The filesystem driver stores blobs locally on your development machine.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      BLOB: {
        driver: 'fs',
        base: './.data/blob'
      }
    }
  }
})

Vercel Blob

For production deployments on Vercel, use the Vercel Blob driver.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      BLOB: {
        driver: 'vercel-blob',
        access: 'public'
      }
    }
  }
})

Cloudflare R2

For Cloudflare deployments, you can use Cloudflare R2 with either bindings (recommended) or the S3-compatible driver.

Using R2 Bindings (Recommended)

When deploying to Cloudflare Workers, use R2 bindings for optimal performance and integration.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      BLOB: {
        driver: 'cloudflare-r2',
        binding: 'BLOB'
      }
    }
  }
})

Make sure to configure the R2 binding in your wrangler.toml:

wrangler.toml
[[r2_buckets]]
binding = "BLOB"
bucket_name = "my-bucket"

Using S3-Compatible Driver

Alternatively, you can use the S3-compatible driver with Cloudflare R2. This is useful for deploying your project in different environments while still using Cloudflare R2.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      BLOB: {
        driver: 's3',
        accessKeyId: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID,
        secretAccessKey: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY,
        region: 'auto',
        endpoint: `https://${process.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
        bucket: process.env.CLOUDFLARE_R2_BUCKET_NAME
      }
    }
  }
})

Amazon S3

For AWS S3 storage, use the S3 driver.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      BLOB: {
        driver: 's3',
        accessKeyId: process.env.AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
        region: process.env.AWS_REGION,
        bucket: process.env.AWS_S3_BUCKET
      }
    }
  }
})
For additional storage providers and configuration options, see the unstorage documentation.
Other unstorage drivers do not support multipart upload. If you want to upload large files, consider using one of the above providers.

Types

BlobObject

interface BlobObject {
  pathname: string
  contentType: string | undefined
  size: number
  httpEtag: string
  uploadedAt: Date
  httpMetadata: Record<string, string>
  customMetadata: Record<string, string>
  url: string | undefined
}

BlobMultipartUpload

export interface BlobMultipartUpload {
  pathname: string
  uploadId: string
  uploadPart(
    partNumber: number,
    value: string | ReadableStream<any> | ArrayBuffer | ArrayBufferView | Blob
  ): Promise<BlobUploadedPart>
  abort(): Promise<void>
  complete(uploadedParts: BlobUploadedPart[]): Promise<BlobObject>
}

BlobUploadedPart

export interface BlobUploadedPart {
  partNumber: number;
  etag: string;
}

MultipartUploader

export type MultipartUploader = (file: File) => {
  completed: Promise<SerializeObject<BlobObject> | undefined>
  progress: Readonly<Ref<number>>
  abort: () => Promise<void>
}

BlobListResult

interface BlobListResult {
  blobs: BlobObject[]
  hasMore: boolean
  cursor?: string
  folders?: string[]
}

AI

Run machine learning models, such as LLMs, in Nuxt.

Cache

Learn how to cache Nuxt pages, API routes and functions in with NuxtHub cache storage.