nuxt-studio

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.

https://github.com/user-attachments/assets/39bf4250-e72b-45aa-bf6d-9441a38cb2d5

Current Features

• 💻 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
• 🧠 AI-powered content suggestions - Plug and play DX with the Vercel AI Gateway, let AI help you shape your content.
• 🔄 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
• 🌍 25 Languages - Full i18n support (AR, BG, BN, CS, DE, EN, ES, FA, FI, FR, ID, IT, JA, KO, NB-NO, NL, NN-NO, PL, PT-BR, RU, TH, 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

• 📖 Documentation
• 🎮 Live Demo

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.

📖 Git Providers Documentation

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>

📖 Auth Providers Documentation

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:3000 as 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 (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 (25 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

• 📖 Documentation
• 🐛 Report a Bug
• 💡 Feature Request
• 🗨️ Discussions
• 🆇 Twitter
• 🦋 Bluesky

License

Published under the MIT license.