NuxtHub Image Gallery

NuxtHub Image Gallery is a starter template for building an image gallery application with NuxtHub Blob storage, image filters, and password-protected uploads. It is built on Nuxt and runs on Cloudflare's edge network through NuxtHub.

What is NuxtHub Image Gallery?

NuxtHub Image Gallery is an open-source starter template provided by NuxtHub that demonstrates how to use the NuxtHub Blob storage API in a full app. It accepts image uploads through an admin panel protected by an admin password, stores them in cloud blobs powered by Cloudflare R2, and displays them in a custom carousel. It runs on Nuxt 3, uses NuxtUI v3 for interface components, and can be deployed to Cloudflare Pages or via the NuxtHub CLI.

Key Features

These are the template's main capabilities, drawn from the README and stack:

• Image upload and display — Uses the hubBlob() composable to upload and list images, with an admin panel protected by the NUXT_ADMIN_PASSWORD environment variable (defaults to "admin").
• Image filters — Apply a variety of filters to images before saving; the saved image includes the applied filter.
• Cloud storage — File blobs are stored in NuxtHub Blob, which is backed by Cloudflare R2, so images are served from global edge storage.
• Custom carousel — A reusable carousel component is included and can be adapted for in-house use.
• View Transition API — Uses the browser View Transitions API for animated transitions between image states, implemented with Vue's transition support.
• Authentication — Integrates nuxt-auth-utils for session-based auth, with NUXT_SESSION_PASSWORD for session encryption (auto-generated in development if not set).
• Modern stack — Built with Nuxt, NuxtUI v3 (which uses Radix Vue and Tailwind CSS v4), Nuxt Fonts for font optimization, VueUse composables, ESLint with the Nuxt config, and TypeScript.

Who is it for?

The template suits developers and hobbyists who want a functional image gallery without building storage and auth from scratch.

• Nuxt developers who want a working reference for NuxtHub Blob integration and authentication in a real app.
• Indie hackers who need a ready-made image gallery to deploy to Cloudflare free tier with zero configuration.
• App builders who want a starting point for apps that manage user-uploaded media, such as portfolios, photo albums, or product galleries.
• Designers/UI developers who want to see NuxtUI components and Tailwind CSS v4 in a functional project.

What can you do with NuxtHub Image Gallery?

Here are concrete tasks you can accomplish with this template:

• Photo portfolio owners: upload and display a collection of images with an admin panel, without building custom storage logic, since blobs are handled by NuxtHub Blob.
• Prototypers: deploy a functional image gallery to Cloudflare in minutes to test features like filters, carousels, and viewing transitions.
• Learners: study a complete Nuxt edge application that combines authenticated uploads, remote storage, and a UI component library with TypeScript.

How does NuxtHub Image Gallery work?

The template follows the standard Nuxt development flow: clone the repository, install dependencies with pnpm (run corepack enable pnpm if pnpm is not installed), then start with pnpm dev. The admin panel is reached via the app and requires NUXT_ADMIN_PASSWORD (defaults to "admin" if not provided). For production deployment, run npx nuxthub deploy to deploy to Cloudflare for free with zero configuration, or set up Cloudflare Pages CI. Remote storage can be connected locally with pnpm dev --remote.

FAQ

Here are answers to common questions about running and deploying NuxtHub Image Gallery.

Does NuxtHub Image Gallery require a paid plan?

No. The template itself is free and open-source, and NuxtHub lets you deploy to Cloudflare for free with zero configuration. Any Cloudflare R2 storage costs depend on your usage and Cloudflare's free tier.

What storage does NuxtHub Image Gallery use?

It uses NuxtHub Blob, which is powered by Cloudflare R2. The hubBlob() composable handles listing and uploading blobs.

What environment variables do I need?

NUXT_ADMIN_PASSWORD sets the password for the admin panel and defaults to "admin". NUXT_SESSION_PASSWORD is used by nuxt-auth-utils for session encryption and is auto-generated in development mode if not provided.

How do I deploy the template?

Run npx nuxthub deploy from the project root to deploy to your Cloudflare account free of charge. NuxtHub also supports deploying via Cloudflare Pages CI; see the NuxtHub deployment documentation for options.