Nuxt Studio
Self-hosted, open-source CMS module for editing Nuxt Content websites in production.
When to Use
Working with:
- Installing and configuring
nuxt-studio module
- Authentication providers (GitHub, GitLab, Google OAuth, SSO, custom)
- Git provider setup (GitHub, GitLab, branch config)
- Visual content editing (MDC components, YAML/JSON forms, frontmatter)
- Media management (public dir, NuxtHub blob, S3, R2)
- Publishing flow (draft layer, conflict detection, CI/CD rebuild)
- AI-powered content assistance (Vercel AI Gateway)
For content collections/queries: use nuxt-content skill
For NuxtHub storage/database: use nuxthub skill
For Nuxt basics: use nuxt skill
Available Guidance
Read specific files based on current work:
- references/configuration.md - Module setup, auth providers, Git providers, environment variables
- references/live-editing.md - Visual editor, media management, MDC components, AI features
- references/deployment.md - SSR requirements, Git publishing, branch strategies, CI/CD
Loading Files
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
Key Concepts
| Concept |
Purpose |
| Auth providers |
Control who can access Studio (GitHub, GitLab, Google, SSO) |
| Git providers |
Handle publishing commits to your repository |
| Draft layer |
IndexedDB-backed local storage for unpublished changes |
| Media manager |
Upload/browse files in /public or external blob storage |
| Visual editor |
TipTap-based WYSIWYG with MDC component support |
| Publishing |
Commits drafts to Git, triggers CI/CD rebuild |
Quick Start
npx nuxt module add nuxt-studio
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content', 'nuxt-studio'],
studio: {
repository: {
provider: 'github',
owner: 'your-username',
repo: 'your-repo',
branch: 'main',
},
},
})
# .env
STUDIO_GITHUB_CLIENT_ID=<client_id>
STUDIO_GITHUB_CLIENT_SECRET=<client_secret>
Access Studio at https://your-site.com/_studio (default route).
Official Documentation
Token Efficiency
Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.
1---2name: nuxt-studio3description: Use when working with Nuxt Studio, the self-hosted open-source CMS for Nuxt Content sites - provides visual editing, media management, Git-based publishing, auth providers, and AI content assistance4license: MIT5---6
7# Nuxt Studio
8
9Self-hosted, open-source CMS module for editing Nuxt Content websites in production.
10
11## When to Use
12
13Working with:
14
15- Installing and configuring `nuxt-studio` module
16- Authentication providers (GitHub, GitLab, Google OAuth, SSO, custom)
17- Git provider setup (GitHub, GitLab, branch config)
18- Visual content editing (MDC components, YAML/JSON forms, frontmatter)
19- Media management (public dir, NuxtHub blob, S3, R2)
20- Publishing flow (draft layer, conflict detection, CI/CD rebuild)
21- AI-powered content assistance (Vercel AI Gateway)
22
23**For content collections/queries:** use `nuxt-content` skill
24**For NuxtHub storage/database:** use `nuxthub` skill
25**For Nuxt basics:** use `nuxt` skill
26
27## Available Guidance
28
29Read specific files based on current work:
30
31- **[references/configuration.md](references/configuration.md)** - Module setup, auth providers, Git providers, environment variables
32- **[references/live-editing.md](references/live-editing.md)** - Visual editor, media management, MDC components, AI features
33- **[references/deployment.md](references/deployment.md)** - SSR requirements, Git publishing, branch strategies, CI/CD
34
35## Loading Files
36
37**Consider loading these reference files based on your task:**
38
39- [ ] [references/configuration.md](references/configuration.md) - if installing, configuring auth/git providers, or setting env vars
40- [ ] [references/live-editing.md](references/live-editing.md) - if working with content editor, media, components, or AI features
41- [ ] [references/deployment.md](references/deployment.md) - if deploying, configuring branches, or troubleshooting publish flow
42
43**DO NOT load all files at once.** Load only what's relevant to your current task.
44
45## Key Concepts
46
47| Concept | Purpose |
48| -------------- | ----------------------------------------------------------- |
49| Auth providers | Control who can access Studio (GitHub, GitLab, Google, SSO) |
50| Git providers | Handle publishing commits to your repository |
51| Draft layer | IndexedDB-backed local storage for unpublished changes |
52| Media manager | Upload/browse files in `/public` or external blob storage |
53| Visual editor | TipTap-based WYSIWYG with MDC component support |
54| Publishing | Commits drafts to Git, triggers CI/CD rebuild |
55
56## Quick Start
57
58```bash
59npx nuxt module add nuxt-studio
60```
61
62```ts
63// nuxt.config.ts
64export default defineNuxtConfig({
65 modules: ['@nuxt/content', 'nuxt-studio'],
66 studio: {
67 repository: {
68 provider: 'github',
69 owner: 'your-username',
70 repo: 'your-repo',
71 branch: 'main',
72 },
73 },
74})
75```
76
77```bash
78# .env
79STUDIO_GITHUB_CLIENT_ID=<client_id>
80STUDIO_GITHUB_CLIENT_SECRET=<client_secret>
81```
82
83Access Studio at `https://your-site.com/_studio` (default route).
84
85## Official Documentation
86
87- Nuxt Studio: https://nuxt.studio
88- Setup: https://nuxt.studio/setup
89- GitHub: https://github.com/nuxt-content/nuxt-studio
90
91## Token Efficiency
92
93Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.
om-scogo