# Build Imgur-style image hosting with Nuxt and Vercel Blob **Author:** Anshuman Bhardwaj --- Build an image host where anyone can paste a screenshot and get a shareable link back in seconds. The app pairs a [Nuxt](https://vercel.com/docs/frameworks/full-stack/nuxt) frontend with [Vercel Blob](https://vercel.com/docs/vercel-blob) for storage, uploads files directly from the browser to Vercel Blob, then serves public blob URLs through Vercel’s CDN. In this guide, you'll start with a Nuxt project, add a paste/drop/browse uploader, mint client-upload tokens in a server route, then make the sharing layer production-ready with random image names, ISR preview pages, edge caching, and [Vercel Web Analytics](https://vercel.com/docs/analytics) custom events. Deploy the template now, or follow the steps below to build it. ## Quick start with an AI coding agent ### Vercel plugin The [Vercel Plugin](https://vercel.com/docs/agent-resources/vercel-plugin) turns your AI coding agent (e.g., OpenAI Codex, Claude Code, or Cursor) into a Vercel expert. It adds skills, slash commands, and current knowledge of the tools this template uses, including Vercel Blob and Web Analytics. The plugin is optional; it isn't required to use the template or to follow this guide. `npx plugins add vercel/vercel-plugin` ## Prerequisites Before you begin, make sure you have: - Node.js 22+ and a package manager (e.g., [pnpm](https://pnpm.io/)) - A [Vercel account](https://vercel.com/signup) - Vercel CLI installed (`npm i -g vercel`) ## How it works The app is a single Nuxt project with a browser uploader and two server routes: - The uploader page at `/` accepts images by paste, drag and drop, or file picker. - A server route at `/api/upload` mints short-lived client-upload tokens with `handleUpload`. - The browser uploads the file directly to Vercel Blob with `upload`, so image bytes never pass through your server. - Every upload gets a random 10-character name, and the app hands out its own `/i/` preview link instead of the storage URL. - A metadata route at `/api/image/` resolves blob details with `head()` and caches responses on the CDN. - Preview pages render with ISR, and Vercel Web Analytics tracks uploads, rejections, and link copies. ## Steps ### 1\. Create the project Start from an empty workspace. Scaffold a Nuxt app, then add the storage, naming, and analytics dependencies: `npx nuxi@latest init nuxt-imgur-clone cd nuxt-imgur-clone pnpm add @vercel/blob nanoid @vercel/analytics` The Nuxt app owns everything: the uploader UI, the preview pages, and the server routes that talk to Vercel Blob. Nuxt only loads `.env` by default, and the Vercel CLI writes environment variables to `.env.local`. Point the dev script at that file so local development picks up the Blob token: `{ "scripts": { "build": "nuxt build", "dev": "nuxt dev --dotenv .env.local", "generate": "nuxt generate", "preview": "nuxt preview" } }` At this point, the repository has the same shape the rest of the guide assumes: `app/` for pages, `server/api/` for server routes, and `shared/utils/` for code that runs on both sides. ### 2\. Create a Blob store Link the project and create a public Blob store from the CLI: `vercel link vercel blob create-store goodimg-images --access public --yes` The `create-store` command creates the store, connects it to the linked project, and pulls the development environment variables into `.env.local`, including `BLOB_READ_WRITE_TOKEN`. If you need to refresh them later, run: `vercel env pull .env.local` `BLOB_READ_WRITE_TOKEN` is the only environment variable the app needs. The server uses it to sign client-upload tokens. ### 3\. Define the image rules once Uploads are validated in the browser and enforced on the server, so both sides need the same rules. Nuxt auto-imports everything in `shared/utils/` into both the app and the server: `import { customAlphabet } from 'nanoid' export const ALLOWED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', ] as const export const MAX_IMAGE_SIZE = 10 * 1024 * 1024` For consistency and to avoid exposing original filenames, the app generates a random 10-character alphanumeric name with [nanoid](https://github.com/ai/nanoid): ``const EXTENSIONS: Record = { 'image/png': 'png', 'image/jpeg': 'jpg', 'image/gif': 'gif', 'image/webp': 'webp', } export const IMAGE_NAME_RE = /^[A-Za-z0-9]{10}\.(png|jpg|gif|webp)$/ const nanoid = customAlphabet( '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', 10, ) export function newImageName(contentType: string): string { return `${nanoid()}.${EXTENSIONS[contentType] ?? 'png'}` } export function isAllowedImageType(type: string | undefined | null): boolean { return !!type && (ALLOWED_IMAGE_TYPES as readonly string[]).includes(type) } export function formatBytes(bytes: number): string { if (bytes < 1024) return `${bytes} B` if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB` return `${(bytes / (1024 * 1024)).toFixed(1)} MB` }`` ### 4\. Mint client-upload tokens in a server route Files larger than 4.5 MB cannot pass through a Vercel Function request body, so the browser uploads directly to Blob instead. That flow is secured by a token exchange: the browser asks your server for permission, and the server answers with a short-lived signed token that encodes exactly what the client is allowed to upload. `handleUpload` from `@vercel/blob/client` implements this. In Nuxt, it lives in a Nitro route at `server/api/upload.post.ts`: `import { handleUpload, type HandleUploadBody } from '@vercel/blob/client' import { toWebRequest } from 'h3' export default defineEventHandler(async (event) => { const body = (await readBody(event)) as HandleUploadBody try { return await handleUpload({ body, request: toWebRequest(event), onBeforeGenerateToken: async (pathname) => { if (!IMAGE_NAME_RE.test(pathname)) { throw new Error('Invalid image name') } return { allowedContentTypes: [...ALLOWED_IMAGE_TYPES], maximumSizeInBytes: MAX_IMAGE_SIZE, cacheControlMaxAge: 60 * 60 * 24 * 365, } }, }) } catch (error) { throw createError({ statusCode: 400, statusMessage: error instanceof Error ? error.message : 'Upload failed', }) } })` The restrictions returned from `onBeforeGenerateToken` are embedded inside the signed token itself. Vercel Blob enforces them at upload time, so even a client that bypasses the UI cannot push an SVG, an oversized file, or a hand-picked filename into the store. Uploads here are anonymous by design, Imgur-style. If your app has users, authenticate them inside `onBeforeGenerateToken` before returning a token. To learn more, see [authenticating client uploads](https://vercel.com/docs/vercel-blob/client-upload#authenticating-client-uploads). ### 5\. Build the uploader page The uploader at `app/pages/index.vue` is a small state machine. One `status` ref drives which card is on screen: `interface GalleryItem { src: string // object URL for the local thumbnail href: string // the /i/ share link } type Status = 'idle' | 'drag' | 'uploading' | 'done' type UploadMethod = 'paste' | 'drop' | 'browse' const status = ref('idle') const progress = ref(0) const previewSrc = ref('') const pageUrl = ref('') const errorMsg = ref('') const gallery = ref([]) // derived from status: highlight the dropzone and swap its label while dragging const dragging = computed(() => status.value === 'drag') const dropTitle = computed(() => dragging.value ? 'Release to upload' : 'Drag & drop your image here', )` The idle and drag states share one dropzone, which is a `