Nuxt Studio
Visual edition in production for your Nuxt Content website.
Originally offered as a standalone premium platform, Studio has evolved into a free, open-source, and self-hostable Nuxt module. Enable your entire team to edit website content right in production.
Current Features BETA
- 💻 Monaco Code Editor - Code editor for enhanced Markdown with MDC syntax, YAML, and JSON
- ✨ TipTap Visual Editor - Markdown editor with MDC component support (default mode)
- 📝 Form-based Editor - Edit YAML/JSON files and frontmatter with auto-generated forms based on collection schemas
- 🎨 Vue Component Props Editor - Visual interface for editing Vue component props directly in the editor
- 🔄 Real-time Preview - See your changes instantly on your production website
- 🔐 Multi-provider Authentication - Secure OAuth-based login with GitHub, GitLab, and Google
- 🔑 Custom Authentication - Utilities for implementing your own auth flow (password, SSO, LDAP)
- 📝 File Management - Create, edit, delete, and rename content files (
content/directory) - 🖼️ Media Management - Centralized media library with support for JPEG, PNG, GIF, WebP, AVIF, SVG, and more
- 🌳 Git Integration - Commit changes directly from your production website and just wait your CI/CD pipeline to deploy your changes
- 🚀 Development Mode - Directly edit your content files and media files in your local filesystem using the module interface
- 🌍 17 Languages - Full i18n support (AR, BG, DE, EN, ES, FA, FI, FR, ID, IT, JA, NL, PL, PT-BR, UA, ZH, ZH-TW)
Future Features:
- 📂 Collections view - View and manage your content collections in a unified interface
- 🖼️ Media optimization - Optimize your media files in the editor
- 🤖 AI Content Assistant — Receive smart, AI-powered suggestions to enhance your content creation flow
- 💡 Community-driven Features — Have an idea? Share your suggestions to shape the future of Nuxt Studio
Resources
Quick Setup
1. Install
Install the module in your Nuxt application:
npx nuxi module add nuxt-studio
2. Dev Mode
🚀 That's all you need to enable Studio locally!
Run your Nuxt app and you will see a floating button on bottom left for editing your content. Any file changes will be synchronized in real time with the file system.
Note: The publish system is only available in production mode. Use your classical workflow (IDE, CLI, GitHub Desktop...) to publish your changes locally.
3. Configure Production
Add it to your nuxt.config.ts and configure your repository:
export default defineNuxtConfig({
modules: [
'@nuxt/content',
'nuxt-studio'
],
studio: {
// Studio admin route (default: '/_studio')
route: '/_studio',
// Git repository configuration (owner and repo are required)
repository: {
provider: 'github', // 'github' or 'gitlab'
owner: 'your-username', // your GitHub/GitLab username or organization
repo: 'your-repo', // your repository name
branch: 'main', // the branch to commit to (default: main)
}
}
})
4. Production Mode
To enable publishing directly from your production website, you need to configure:
Git Provider
Configure where your content is stored (GitHub or GitLab repository). See the repository configuration above.
Auth Provider
Configure how users authenticate to access Studio. Choose from GitHub, GitLab, Google OAuth, or custom authentication.
# Example with GitHub OAuth
STUDIO_GITHUB_CLIENT_ID=<your_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_client_secret>
Deployment
Nuxt Studio requires server-side routes for authentication. Your site must be deployed on a platform that supports SSR using nuxt build.
Open Studio
Once deployed, navigate to your configured route (default: /_studio) and authenticate to start editing.
Configuration Options
export default defineNuxtConfig({
studio: {
// Studio admin login route
route: '/_studio', // default
// Git repository configuration
repository: {
provider: 'github', // 'github' or 'gitlab' (default: 'github')
owner: 'your-username', // your GitHub/GitLab owner (required)
repo: 'your-repo', // your repository name (required)
branch: 'main', // branch to commit to (default: 'main')
rootDir: '', // subdirectory for monorepos (default: '')
private: true, // request access to private repos (default: true)
},
}
})
Contributing
You can start contributing by cloning the repository and using the playground in dev mode (set dev option to true).
If you want to contribute with production mode you must create a local GitHub OAuth App (pointing to
http://localhost:3000as callback URL).
Development Setup
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Build the app and service worker
pnpm prepack
# Terminal 1: Start the playground
pnpm dev
# Terminal 2: Start the app dev server
pnpm dev:app
# Login at http://localhost:3000/admin
Project Structure
studio/
├── src/
│ ├── app/ # Studio editor Vue app
│ └── module/ # Nuxt module
├── playground/ # Development playground
│ ├── docus/ # Docus example
│ └── minimal/ # Minimal example
Testing
You can run a global command to test all needed check at once.
# Global verify running all needed commands
pnpm verify
Or run them one by one.
# Run tests
pnpm test
# Run type checking
pnpm typecheck
# Run linter
pnpm lint
Roadmap
✅ Phase 1 - Beta (Completed)
- Monaco code editor
- TipTap visual editor with MDC support (default mode)
- Editor mode switching (code ↔ visual/form)
- Form-based editor for YAML/JSON and frontmatter (schema-based)
- File operations (create, edit, delete, rename)
- Media management with visual picker
- Enhanced component slot editing
- GitHub authentication
- GitLab provider support
- Google OAuth authentication
- Development mode
- Git integration
- Real-time preview
- Internationalization (17 languages)
- Custom authentication utilities
- Vue Component props editor (visual interface)
- Span-style text formatting with toolbar button
- Binding extension for component prop editing
🔮 Future
- Advanced conflict resolution
- Pull request generation (from a branch to the main one)
- AI-powered content suggestions
- Media optimization
Links
License
Published under the MIT license.