Skip to main content
skill CX Codex

nuxt-studio — Claude Code skill: self-hosted Nuxt Content editor

Walks you through self-hosted Nuxt Studio: auth, media, drafts and Git publishing. Useful when the content editor has to live on your own domain.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add onmax/nuxt-skills --skill nuxt-studio -a claude-code
Open on GitHub

What nuxt-studio does

The skill keeps the split clear: Nuxt Studio handles editing and publishing, Nuxt Content handles collections, queries, parsing and rendering. The agent first inspects the installed nuxt-studio and @nuxt/content versions, the deployment mode, the repository provider and the auth provider. Setup is understood once the editor route, the Git target and the login callback all point at the same deployment.

From there it routes you into three references: configuration (install, repository settings, OAuth or custom auth, editor filters, environment variables), live editing (visual and MDC editing, schema forms, drafts, media, AI assistance) and deployment (SSR, Git publishing, branch strategy, conflicts, monorepos). Collection and schema changes stay inside the nuxt-content skill.

Baseline setup is npx nuxt module add nuxt-studio, the module goes into modules next to @nuxt/content, and studio.repository takes the provider, owner, repo and branch. The editor runs at /_studio. One thing to plan for: supported CI providers can infer repository metadata, but auth credentials stay explicit deployment secrets — for GitHub that means NUXT_STUDIO_AUTH_GITHUB_CLIENT_ID and NUXT_STUDIO_AUTH_GITHUB_CLIENT_SECRET. Verify in two passes: local editing against the filesystem first, then production login and one publish cycle on an SSR-capable deployment.

What it helps with

  • wire a self-hosted content editor into a Nuxt Content project
  • set up GitHub OAuth or custom authentication for the editor
  • give editors visual and MDC editing with schema forms
  • take a draft from edit to commit on the right branch
  • handle conflicts and monorepos when publishing through Git

Example prompts for the agent

  • Add nuxt-studio to my Nuxt Content project and point it at a GitHub repo
  • Set up OAuth login for Nuxt Studio and the production environment variables
  • Walk me through a publish cycle: draft, commit to main, rebuilt site

How to install nuxt-studio

1Skills CLI (Vercel)

npx skills add onmax/nuxt-skills --skill nuxt-studio -a claude-code

2Manually: put the files in place

~/.claude/skills/nuxt-studio/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nuxt-studio/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about nuxt-studio

How do I install nuxt-studio in Claude?

Run npx skills add onmax/nuxt-skills --skill nuxt-studio -a claude-code. The skill lands at ~/.claude/skills/nuxt-studio/SKILL.md.

What does the nuxt-studio skill do?

It guides configuration and operation of the self-hosted Nuxt Studio editor for Nuxt Content: install, repository settings, OAuth or custom auth, media, drafts, Git publishing and SSR deployment.

What does Nuxt Studio need to run?

The nuxt-studio module alongside @nuxt/content, plus explicit auth credentials stored as deployment secrets. For GitHub those are NUXT_STUDIO_AUTH_GITHUB_CLIENT_ID and NUXT_STUDIO_AUTH_GITHUB_CLIENT_SECRET.

Source text

SKILL.md · MIT
---
name: nuxt-studio
description: Configure and operate the self-hosted Nuxt Studio editor for Nuxt Content. Use when working with nuxt-studio installation, editor customization, OAuth or custom authentication, media, drafts, Git publishing, or production deployment.
license: MIT
---

# Nuxt Studio

Nuxt Studio owns content editing and publishing. Nuxt Content owns collections, queries, parsing, and rendering.

## Workflow

1. Inspect the installed `nuxt-studio` and `@nuxt/content` versions, deployment mode, repository provider, and authentication provider. Setup is understood when the editor route, Git target, and login callback all point at the same deployment.
2. Open the smallest matching guide below and keep collection/schema changes within the `nuxt-content` boundary.
3. Verify local editing against the filesystem, then verify production login and one publish cycle on an SSR-capable deployment. The work is complete when the commit reaches the configured branch and the rebuilt site exposes it.

## Routing

| Task                                                                                      | Open                                         |
| ----------------------------------------------------------------------------------------- | -------------------------------------------- |
| Install, repository settings, OAuth/custom auth, editor filters, or environment variables | [Configuration](references/configuration.md) |
| Visual/MDC editing, schema forms, drafts, media, or AI assistance                         | [Live editing](references/live-editing.md)   |
| SSR deployment, Git publishing, branch strategy, conflicts, or monorepos                  | [Deployment](references/deployment.md)       |
| Collections, validators, queries, hooks, or rendering                                     | `nuxt-content` skill                         |

## Baseline

```bash
npx nuxt module add nuxt-studio
```

```ts
export default defineNuxtConfig({
  modules: ['@nuxt/content', 'nuxt-studio'],
  studio: {
    repository: {
      provider: 'github',
      owner: 'your-org',
      repo: 'your-repo',
      branch: 'main',
    },
  },
})
```

```bash
NUXT_STUDIO_AUTH_GITHUB_CLIENT_ID=<client-id>
NUXT_STUDIO_AUTH_GITHUB_CLIENT_SECRET=<client-secret>
```

Studio runs at `/_studio` by default. Supported CI providers can infer repository metadata, but authentication credentials remain explicit deployment secrets.

© onmax · MIT · onmax/nuxt-skills

Similar skills

Everything for Frontend and UI →

From the same set8

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor