From nuxt-studio
Sets up Nuxt Studio module for visual content editing and CMS in Nuxt 3+ sites with @nuxt/content, covering installation, OAuth authentication (GitHub/GitLab/Google), Cloudflare subdomain deployment, and Monaco/TipTap editor config.
npx claudepluginhub secondsky/claude-skills --plugin nuxt-studioThis skill uses the workspace's default tool permissions.
Nuxt Studio is a free, open-source visual content editor for Nuxt Content websites that enables content editing directly in production. It provides multiple editor types (Monaco code editor, TipTap visual WYSIWYG editor, Form-based editor), OAuth authentication (GitHub/GitLab/Google), and Git-based content management with commit integration.
references/cloudflare-deployment.mdreferences/editor-configuration.mdreferences/oauth-providers.mdreferences/subdomain-setup.mdreferences/troubleshooting.mdscripts/check-prerequisites.shscripts/test-oauth.shscripts/validate-config.shtemplates/nuxt.config.tstemplates/studio-auth-github.tstemplates/studio-auth-gitlab.tstemplates/studio-auth-google.tstemplates/wrangler.tomlGenerates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Nuxt Studio is a free, open-source visual content editor for Nuxt Content websites that enables content editing directly in production. It provides multiple editor types (Monaco code editor, TipTap visual WYSIWYG editor, Form-based editor), OAuth authentication (GitHub/GitLab/Google), and Git-based content management with commit integration.
Primary use case: Add visual CMS capabilities to existing Nuxt Content websites, typically deployed to a subdomain like studio.domain.com or cms.domain.com.
Use this skill when users need to:
Before proceeding with Studio setup, verify these requirements:
Check Nuxt Content installation:
# Verify @nuxt/content is installed
grep "@nuxt/content" package.json
# Check nuxt.config.ts for content module
grep "modules.*content" nuxt.config.ts
If Nuxt Content is not installed, install it first:
npx nuxi module add content
Install the latest beta version (v1.0.0-beta.3 as of December 2025):
npx nuxi module add nuxt-studio@beta
This adds @nuxt/studio to devDependencies and configures the module in nuxt.config.ts.
Check that nuxt.config.ts includes the Studio module:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/content',
'@nuxt/studio' // Added automatically
]
})
Run the development server to test Studio locally:
npm run dev
# or
bun dev
Access Studio at http://localhost:3000/_studio (development mode).
Studio requires OAuth authentication for production deployments. Choose one provider:
For detailed OAuth setup instructions for each provider, load references/oauth-providers.md.
Environment variables pattern (all providers):
# GitHub
NUXT_OAUTH_GITHUB_CLIENT_ID=your_client_id
NUXT_OAUTH_GITHUB_CLIENT_SECRET=your_client_secret
# GitLab
NUXT_OAUTH_GITLAB_CLIENT_ID=your_client_id
NUXT_OAUTH_GITLAB_CLIENT_SECRET=your_client_secret
# Google
NUXT_OAUTH_GOOGLE_CLIENT_ID=your_client_id
NUXT_OAUTH_GOOGLE_CLIENT_SECRET=your_client_secret
Callback URL pattern:
https://studio.yourdomain.com/api/auth/callback/[provider]
Replace [provider] with: github, gitlab, or google.
For complete OAuth app creation steps, consult references/oauth-providers.md.
Studio works excellently on Cloudflare Pages and Workers. Use the Cloudflare deployment for:
studio.domain.com)nuxt.config.tswrangler.toml for Workers deployment (optional)For complete Cloudflare deployment instructions, load references/cloudflare-deployment.md.
Set the Cloudflare Pages preset:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content', '@nuxt/studio'],
nitro: {
preset: 'cloudflare-pages'
}
})
For Workers deployment with custom subdomain routing, see references/cloudflare-deployment.md.
Studio provides three editor types that can be configured per content type:
// nuxt.config.ts
export default defineNuxtConfig({
studio: {
editor: {
default: 'tiptap' // or 'monaco' or 'form'
}
}
})
For detailed editor configuration options, load references/editor-configuration.md.
Deploy Studio to a subdomain for production use:
Common patterns:
studio.yourdomain.comcms.yourdomain.comedit.yourdomain.comadmin.yourdomain.comFor complete subdomain setup with Cloudflare, load references/subdomain-setup.md.
Error: Authentication loop or "redirect_uri_mismatch" error
Cause: OAuth app callback URL doesn't match actual deployment URL
Solution:
Ensure OAuth app callback URL is:
https://studio.yourdomain.com/api/auth/callback/[provider]
Not:
https://yourdomain.com/api/auth/callback/[provider]
Error: Cannot find module '@nuxt/studio'
Cause: Studio module not installed or installed incorrectly
Solution:
npx nuxi module add nuxt-studio@beta
# or
npm install -D @nuxt/studio
Error: Build fails with "Incompatible module" or runtime errors
Cause: Nitro preset not configured for Cloudflare
Solution:
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
preset: 'cloudflare-pages'
}
})
Error: Redirects to login repeatedly after successful OAuth
Cause: Session cookies not persisting due to domain mismatch
Solution:
NUXT_PUBLIC_STUDIO_URL environment variable matches deployment URLError: Studio loads on main domain instead of subdomain
Cause: DNS/wrangler configuration incorrect
Solution:
wrangler.toml routes configurationFor complete error catalog and solutions, load references/troubleshooting.md.
The skill includes working configuration templates:
templates/nuxt.config.ts: Complete Studio module configurationtemplates/wrangler.toml: Cloudflare Workers deployment configtemplates/studio-auth-github.ts: GitHub OAuth implementationtemplates/studio-auth-gitlab.ts: GitLab OAuth implementationtemplates/studio-auth-google.ts: Google OAuth implementationUse these as starting points for your Studio setup.
npx nuxi module add nuxt-studio@betanpm run devhttp://localhost:3000/_studioBefore deploying Studio to production:
Load reference files when working on specific aspects:
references/oauth-providers.md for detailed GitHub/GitLab/Google OAuth app creationreferences/cloudflare-deployment.md for complete Cloudflare Pages/Workers setup with wrangler, custom domains, and environment variablesreferences/editor-configuration.md for Monaco/TipTap/Form editor customizationreferences/subdomain-setup.md for DNS and routing configurationreferences/troubleshooting.md for comprehensive error solutions and debuggingUse the included scripts for common operations:
scripts/check-prerequisites.sh: Verify Nuxt Content and version requirementsscripts/validate-config.sh: Check nuxt.config.ts Studio configurationscripts/test-oauth.sh: Test OAuth environment variables setupRun scripts with:
bash $CLAUDE_PLUGIN_ROOT/skills/nuxt-studio/scripts/script-name.sh
This skill works well with:
For the latest version information, check: https://github.com/nuxt-content/studio/releases
Next steps: After Studio is configured, test the deployment thoroughly, ensure OAuth authentication works correctly, and verify that content editing and Git commits function as expected.