onmax/nuxthub

Utilisé pour construire des applications NuxtHub v0.10.6 — fournit des API de base de données (Drizzle ORM avec SQLite/PostgreSQL/MySQL), de stockage KV, de stockage blob et de cache. Couvre la configuration, la définition de schémas, les migrations, le déploiement multi-cloud (Cloudflare, Vercel) et les nouveaux imports de modules virtuels hub:db, hub:kv et hub:blob.

Qu'est-ce que nuxthub ?

Cette compétence (skill) est conçue pour les développeurs utilisant NuxtHub v0.10.6, une plateforme qui intègre des services backend directement dans Nuxt. Elle offre un accès simplifié à des bases de données via Drizzle ORM (supportant SQLite, PostgreSQL et MySQL), ainsi qu'à un stockage clé-valeur (KV), un stockage blob et des API de cache. L'utilisateur peut configurer ces services, définir des schémas de base de données, effectuer des migrations et déployer son application sur plusieurs clouds comme Cloudflare et Vercel. Les modules virtuels hub:db, hub:kv et hub:blob sont utilisés pour importer ces fonctionnalités de manière transparente dans le code Nuxt. Cette compétence est particulièrement utile pour les applications NuxtHub qui nécessitent une persistance des données, une mise en cache distribuée ou un stockage de fichiers, et elle simplifie le développement full-stack en unifiant l'accès à ces ressources.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/onmax/nuxt-skills/tree/main/skills/nuxthub

Installed? Explore more Développement et programmation skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait nuxthub ?

Utilisé pour construire des applications NuxtHub v0.10.6 — fournit des API de base de données (Drizzle ORM avec SQLite/PostgreSQL/MySQL), de stockage KV, de stockage blob et de cache. Couvre la configuration, la définition de schémas, les migrations, le déploiement multi-cloud (Cloudflare, Vercel) et les nouveaux imports de modules virtuels hub:db, hub:kv et hub:blob.

Utilisation

Pour utiliser cette compétence, assurez-vous d'avoir NuxtHub v0.10.6 installé dans votre projet Nuxt. Importez les modules virtuels comme suit :

import { hubDatabase } from 'hub:db';
import { hubKV } from 'hub:kv';
import { hubBlob } from 'hub:blob';

Configuration

créez un fichier nuxt.config.ts avec les options suivantes :

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

Base de données

Définissez vos schémas avec Drizzle ORM :

// server/database/schema.ts
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';

export const users = sqliteTable('users', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
});

Migrations

Exécutez les migrations avec :

npx nuxthub db:migrate

Déploiement multi-cloud

Déployez sur Cloudflare :

npx nuxthub deploy --provider cloudflare

Déployez sur Vercel :

npx nuxthub deploy --provider vercel

Stockage KV

Utilisez hubKV pour un stockage clé-valeur :

const kv = await hubKV();
await kv.set('key', 'value');
const value = await kv.get('key');

Stockage blob

Utilisez hubBlob pour le stockage de fichiers :

const blob = await hubBlob();
await blob.put('myfile.txt', 'contenu du fichier');
const content = await blob.get('myfile.txt');

API de cache

Le cache est activé globalement avec hub.cache: true. Utilisez-le pour mettre en cache des réponses ou des données fréquemment utilisées.

Références

Individual skills in this repo

This repo contains 15 individual skills — each has its own dedicated page.

onmax/document-writer

Use when writing blog posts or documentation markdown files - provides writing style guide (active voice, present tense), content structure patterns, and MDC component usage. Overrides brevity rules for proper grammar. Use nuxt-content for MDC syntax, nuxt-ui for component props.

onmax/motion

Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt

onmax/nuxt

Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.

onmax/nuxt-better-auth

Use when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Auth plugins integration.

onmax/nuxt-content

Use when working with Nuxt Content v3, markdown content, or CMS features in Nuxt - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integration

onmax/nuxt-modules

Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.

onmax/nuxt-seo

Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.

onmax/nuxt-ui

Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

onmax/pnpm

Use when managing Node.js dependencies with pnpm - install packages, configure monorepo workspaces, set up pnpm catalogs, resolve dependency conflicts with overrides, patch third-party packages, and configure CI pipelines for pnpm projects

onmax/reka-ui

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.

onmax/ts-library

Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.

onmax/vite

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

onmax/vitest

Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel

onmax/vue

Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance

onmax/vueuse

Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.

Skills associés