nuxt-studio

Configure and operate the self-hosted Nuxt Studio editor for Nuxt Content sites.

704|35|Updated Dec 11, 2025
One-click install
npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt-studio
Source: https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt-studio
Command: npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Setting up the self-hosted Nuxt Studio editor involves coordinating module configuration, OAuth authentication, Git repository targeting, and SSR deployment, and misalignment between any of these pieces breaks login or publishing.

Core Features & Use Cases

  • Module and repository configuration: Install nuxt-studio, set the editor route, and point it at a GitHub or GitLab repository with branch and monorepo rootDir support.
  • Authentication setup: Configure GitHub, GitLab, or Google OAuth with the correct NUXT_STUDIO_AUTH_ environment variables and callback URLs.
  • Live editing and publishing: Work with visual/MDC editors, schema-driven forms, drafts, media libraries, and the Git-based publish cycle on SSR deployments.
  • Use Case: A team wants non-developers to edit Nuxt Content pages in production. Use this Skill to wire Studio to the content repository, configure GitHub OAuth, and verify one full publish cycle from draft to deployed commit.

Quick Start

Set up Nuxt Studio in my Nuxt Content project with GitHub OAuth and verify that publishing a draft commits to the main branch.

Frequently Asked Questions about nuxt-studio

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Nuxt Studio with Nuxt Content?

Install the module with npx nuxt module add nuxt-studio, register both @nuxt/content and nuxt-studio in nuxt.config, and configure studio.repository with your Git provider, owner, repo, and branch. Studio then runs at the /_studio route by default.

How do I configure GitHub OAuth for Nuxt Studio?

Set NUXT_STUDIO_AUTH_GITHUB_CLIENT_ID and NUXT_STUDIO_AUTH_GITHUB_CLIENT_SECRET as deployment environment variables. The OAuth callback uses /__nuxt_studio/auth/github, so the GitHub app's callback URL must match the deployed origin.

Does Nuxt Studio work with static or prerendered sites?

Studio requires an SSR-capable deployment built with nuxt build because authentication and publishing need server routes. Content pages can still be prerendered through Nitro hybrid rendering while Studio and auth routes stay server-backed.

Why does Nuxt Studio login fail in production?

Login failures usually come from a mismatched OAuth callback URL, wrong deployed origin, or missing provider environment variables. Verify the callback path /__nuxt_studio/auth/<provider> matches the OAuth app configuration and that secrets are set on the deployment.

Can Nuxt Studio publish to a different branch or monorepo directory?

Yes. Set studio.repository.branch to a preview branch and use rootDir to point at the Nuxt app inside a monorepo. Studio commits to that branch and your normal pull-request workflow promotes changes to main.

How does Nuxt Studio handle media uploads?

By default, media files live in the project's public/ directory and follow the same draft and Git publish cycle as content. For larger libraries, enable NuxtHub blob storage with studio.media.external to store uploads in Vercel Blob, S3, or Cloudflare R2 instead of Git.