NuxtHub Extended

Extended DevTools for NuxtHub applications. Inspect and manage KV Storage, Blob Storage, and Cache directly from Nuxt DevTools.

Features

• KV Storage — View, create, edit, and delete key-value pairs with JSON support
• Blob Storage — Browse folders, upload files, preview images, and download blobs
• Cache — Inspect Nitro cache entries grouped by handler type

Screenshots

KV Storage

View and manage all your KV entries. Supports JSON values with syntax highlighting.

Blob Storage

File browser with folder navigation, drag-and-drop upload, and image preview.

Cache

Inspect Nitro cache entries grouped by nitro:handlers and nitro:functions.

Installation

Note

This module is not yet published to npm. Install from pkg.pr.new:

pnpm add -D https://pkg.pr.new/onmax/nuxthub-extended/@nuxthub/extended@main

[!INFO] I would like to add this to NuxtHub core, see nuxt-hub/core#774.

Add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxthub/core', '@nuxthub/extended'],
  hub: {
    kv: true,
    blob: true,
    cache: true,
  },
})

Usage

Open Nuxt DevTools (Shift + Alt + D) and look for the KV, Blob, and Cache tabs in the sidebar. Each tab appears only when the corresponding feature is enabled in your hub config.

KV Storage

• Add Key — Create new entries with optional TTL
• Edit — Click any row to modify the value
• Delete — Remove individual keys or clear all
• Search — Filter keys by name

Blob Storage

• Upload — Click the upload button or drag files into the browser
• Navigate — Click folders to browse nested paths
• Preview — Click files to preview images, videos, or audio
• Download — Download any file with one click

Cache

• Inspect — View cached responses grouped by prefix
• Delete — Remove individual cache entries
• Clear All — Purge the entire cache

Requirements

• Nuxt 4+
• @nuxthub/core >= 0.10.0

Try it Locally

Clone the repo and run the playground to test the DevTools:

git clone https://github.com/onmax/nuxthub-extended.git
cd nuxthub-extended
pnpm install
pnpm dev

Open http://localhost:3000 and press Shift + Alt + D to open DevTools. Click "Seed Test Data" to populate sample data, then explore the KV, Blob, and Cache tabs.

Development

# Install dependencies
pnpm install

# Start playground
pnpm dev

# Run linter
pnpm lint

# Run tests
pnpm test

License

MIT