Nuxt Studio by secondsky/claude-skills
npx skills add https://github.com/secondsky/claude-skills --skill 'Nuxt Studio'Nuxt Studio 是一个免费、开源的 Nuxt Content 网站可视化内容编辑器,支持在生产环境中直接编辑内容。它提供多种编辑器类型(Monaco 代码编辑器、TipTap 可视化所见即所得编辑器、基于表单的编辑器)、OAuth 身份验证(GitHub/GitLab/Google)以及基于 Git 的内容管理,并集成了提交功能。
主要使用场景:为现有的 Nuxt Content 网站添加可视化 CMS 功能,通常部署到子域名,例如 studio.domain.com 或 cms.domain.com。
当用户需要时使用此技能:
在继续 Studio 设置之前,请验证以下要求:
检查 Nuxt Content 安装:
# 验证 @nuxt/content 是否已安装
grep "@nuxt/content" package.json
# 检查 nuxt.config.ts 中的 content 模块
grep "modules.*content" nuxt.config.ts
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
如果未安装 Nuxt Content,请先安装:
npx nuxi module add content
安装最新的 beta 版本(截至 2025 年 12 月为 v1.0.0-beta.3):
npx nuxi module add nuxt-studio@beta
这会将 @nuxt/studio 添加到 devDependencies 并在 nuxt.config.ts 中配置该模块。
检查 nuxt.config.ts 是否包含 Studio 模块:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/content',
'@nuxt/studio' // 自动添加
]
})
运行开发服务器以在本地测试 Studio:
npm run dev
# 或
bun dev
在 http://localhost:3000/_studio 访问 Studio(开发模式)。
Studio 在生产部署中需要 OAuth 身份验证。选择一个提供商:
有关每个提供商的详细 OAuth 设置说明,请加载 references/oauth-providers.md。
环境变量模式(所有提供商):
# 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
回调 URL 模式:
https://studio.yourdomain.com/api/auth/callback/[provider]
将 [provider] 替换为:github、gitlab 或 google。
有关完整的 OAuth 应用创建步骤,请查阅 references/oauth-providers.md。
Studio 在 Cloudflare Pages 和 Workers 上运行良好。使用 Cloudflare 部署可实现:
studio.domain.com)nuxt.config.ts 中为 Cloudflare 配置 Nitro presetwrangler.toml 用于 Workers 部署(可选)有关完整的 Cloudflare 部署说明,请加载 references/cloudflare-deployment.md。
设置 Cloudflare Pages preset:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content', '@nuxt/studio'],
nitro: {
preset: 'cloudflare-pages'
}
})
有关使用自定义子域名路由的 Workers 部署,请参阅 references/cloudflare-deployment.md。
Studio 提供三种编辑器类型,可按内容类型进行配置:
// nuxt.config.ts
export default defineNuxtConfig({
studio: {
editor: {
default: 'tiptap' // 或 'monaco' 或 'form'
}
}
})
有关详细的编辑器配置选项,请加载 references/editor-configuration.md。
将 Studio 部署到子域名以供生产使用:
常见模式:
studio.yourdomain.comcms.yourdomain.comedit.yourdomain.comadmin.yourdomain.com有关使用 Cloudflare 的完整子域名设置,请加载 references/subdomain-setup.md。
错误:身份验证循环或 "redirect_uri_mismatch" 错误
原因:OAuth 应用回调 URL 与实际部署 URL 不匹配
解决方案:
确保 OAuth 应用回调 URL 是:
https://studio.yourdomain.com/api/auth/callback/[provider]
而不是:
https://yourdomain.com/api/auth/callback/[provider]
错误:Cannot find module '@nuxt/studio'
原因:Studio 模块未安装或安装不正确
解决方案:
npx nuxi module add nuxt-studio@beta
# 或
npm install -D @nuxt/studio
错误:构建失败,出现 "Incompatible module" 或运行时错误
原因:Nitro preset 未为 Cloudflare 配置
解决方案:
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
preset: 'cloudflare-pages'
}
})
错误:OAuth 成功后重复重定向到登录页面
原因:由于域名不匹配,会话 cookie 未持久化
解决方案:
NUXT_PUBLIC_STUDIO_URL 环境变量是否与部署 URL 匹配错误:Studio 在主域名而非子域名上加载
原因:DNS/wrangler 配置不正确
解决方案:
wrangler.toml 路由配置有关完整的错误目录和解决方案,请加载 references/troubleshooting.md。
此技能包含可用的配置模板:
templates/nuxt.config.ts:完整的 Studio 模块配置templates/wrangler.toml:Cloudflare Workers 部署配置templates/studio-auth-github.ts:GitHub OAuth 实现templates/studio-auth-gitlab.ts:GitLab OAuth 实现templates/studio-auth-google.ts:Google OAuth 实现将这些作为您 Studio 设置的起点。
npx nuxi module add nuxt-studio@betanpm run devhttp://localhost:3000/_studio在将 Studio 部署到生产环境之前:
在处理特定方面时加载参考文件:
references/oauth-providers.md 以获取详细的 GitHub/GitLab/Google OAuth 应用创建说明references/cloudflare-deployment.md 以获取包含 wrangler、自定义域名和环境变量的完整 Cloudflare Pages/Workers 设置references/editor-configuration.md 以获取 Monaco/TipTap/Form 编辑器自定义说明references/subdomain-setup.md 以获取 DNS 和路由配置说明references/troubleshooting.md 以获取全面的错误解决方案和调试指南使用包含的脚本执行常见操作:
scripts/check-prerequisites.sh:验证 Nuxt Content 和版本要求scripts/validate-config.sh:检查 nuxt.config.ts Studio 配置scripts/test-oauth.sh:测试 OAuth 环境变量设置运行脚本:
bash $CLAUDE_PLUGIN_ROOT/skills/nuxt-studio/scripts/script-name.sh
此技能可与以下技能良好协作:
有关最新版本信息,请查看:https://github.com/nuxt-content/studio/releases
后续步骤:配置 Studio 后,彻底测试部署,确保 OAuth 身份验证正常工作,并验证内容编辑和 Git 提交功能按预期运行。
每周安装次数
–
仓库
GitHub 星标数
93
首次出现时间
–
安全审计
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.
Weekly Installs
–
Repository
GitHub Stars
93
First Seen
–
Security Audits
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
109,600 周安装