Nuxt Studio

Visual edition in production for your Nuxt Content website.

Originally offered as a standalone premium platform at https://nuxt.studio, 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 - WYSIWYG 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
• 🔄 Real-time Preview - See your changes instantly on your production website
• 🔐 Multi-provider Authentication - Secure OAuth-based login with GitHub, GitLab, and Google
• 📝 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
• 🌍 16 Languages - Full i18n support (AR, BG, DE, EN, ES, FA, FI, FR, ID, IT, JA, NL, PL, PT-BR, UA, ZH)

Coming in Beta:

• 🎨 Vue Component Props Editor - Visual interface for editing Vue component props and slots

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@beta

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 OAuth authentication.

Choose your Oauth provider

Browse the official documentation to configure the provider you want to use.

Deployment

Nuxt Studio requires server-side routes for authentication. Your site must be deployed on a platform that supports SSR using nuxt build.

If you want to pre-render all your pages, use hybrid rendering:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/'],
      crawlLinks: true
    }
  }
})

Open Studio

Once deployed, log in Studio by navigating to your configured route (default: /_studio):

1. Click the button corresponding to your Oauth provider if it does not directly redirect to the OAuth app authorization page
2. Authorize the OAuth application
3. You'll be redirected back to Studio ready to edit your content

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 - Alpha (Current)

• 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 (16 languages)

🚧 Phase 2 - Beta (In Development)

• Vue Component props editor (visual interface)
• Provide utilities to allow users to handle their own authentication

🔮 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.