Skip to main content

​
Nuxt Studio

The Nuxt Studio module is a browser-based interface for editing your Nuxt Content website directly in production. Access it through GitHub, GitLab or Google authentication on your deployed site, and start managing content without any local development tools.
Visit the Nuxt Studio documentation to learn how to install and configure the module.

​
What is Nuxt Studio?

Nuxt Studio provides visual editing directly in production for Nuxt Content-powered websites. Originally offered as a standalone premium platform, Studio is now a free, open-source, and self-hostable Nuxt module. It enables your entire team—developers and non-technical editors alike—to create and update content safely without leaving your live website. No Git commands, no terminal access, no local development setup required.

​
Key Benefits

No Technical Knowledge Required

Content editors can manage documentation without knowing Markdown, Git, or terminal commands.

Real-time Preview

See your changes instantly on the production website before committing them.

Secure Authentication

OAuth authentication with GitHub, GitLab, and Google, plus support for custom auth flows.

Git Integration

All changes are committed to your Git repository, leveraging your existing CI/CD pipeline.

​
Current Features

​
Editors

​
TipTap Visual Editor

Rich Markdown editor with full MDC component support. Edit your content visually without writing raw Markdown:
  • Rich text formatting (bold, italic, headings, lists)
  • Insert and configure MDC components
  • Edit component props through visual interface
  • Drag and drop content blocks
  • Live preview of changes

​
Monaco Code Editor

Advanced code editor for developers who prefer working with raw code:
  • Full syntax highlighting for Markdown (MDC)
  • Support for YAML and JSON files
  • IntelliSense and autocomplete
  • Multi-cursor editing
  • Git diff visualization

​
Form-based Editor

Edit YAML, JSON, and frontmatter using auto-generated forms based on collection schemas:
  • Type-safe field validation
  • Dropdown selectors for predefined values
  • Date and time pickers
  • Boolean toggles and checkboxes
  • Array and object editing

​
Vue Component Props Editor

Visual interface to edit Vue component props directly from the editor:
  • Auto-detected prop types
  • Visual controls for each prop type
  • Live component preview
  • Validation and error handling

​
Content Management

1

File Management

Create, edit, rename, and delete content files in the content/ directory:
  • Tree view of content structure
  • Drag and drop to reorganize files
  • Duplicate files and folders
  • File search and filtering
2

Media Management

Centralized media library with support for multiple formats:Supported formats:
  • Images: JPEG, PNG, GIF, WebP, AVIF, SVG
  • Videos: MP4, WebM
  • Documents: PDF
Features:
  • Upload via drag and drop
  • Organize with folders
  • Insert into content with one click
  • Preview and metadata viewing
3

Real-time Preview

Instantly preview content changes on your production website:
  • Live preview pane
  • Responsive preview (mobile, tablet, desktop)
  • Navigation between pages
  • Component interaction testing

​
Authentication & Security

​
Multi-provider Authentication

Secure OAuth authentication with popular providers:

GitHub

Authenticate with GitHub OAuth

GitLab

Authenticate with GitLab OAuth

Google

Authenticate with Google OAuth

​
Custom Authentication

Utilities to implement custom authentication flows:
  • Password-based authentication
  • SSO (Single Sign-On) integration
  • LDAP integration
  • Custom OAuth providers
  • API key authentication

​
Git Integration

Studio commits content changes directly from production:
  • Commit workflow:
    1. Edit content in Studio
    2. Preview changes in real-time
    3. Commit with descriptive message
    4. Changes pushed to Git repository
    5. CI/CD pipeline deploys changes
Studio doesn’t deploy directly. It commits to your Git repository, and your existing CI/CD pipeline (Vercel, Netlify, etc.) handles the deployment.

​
Development Mode

Edit content and media files directly from your local filesystem using the Studio interface: 
npm run dev
Then navigate to the Studio route (typically /api/studio) and authenticate. Changes are immediately reflected in your local files.
Development mode is perfect for testing Studio features locally before deploying to production.

​
Internationalization Support

Full i18n support for 17 languages:

Arabic

AR

Bulgarian

BG

German

DE

English

EN

Spanish

ES

Persian

FA

Finnish

FI

French

FR

Indonesian

ID

Italian

IT

Japanese

JA

Dutch

NL

Polish

PL

Portuguese (Brazil)

PT-BR

Ukrainian

UA

Chinese (Simplified)

ZH

Chinese (Traditional)

ZH-TW

​
Upcoming Features

​
Collections View

Manage and navigate all content collections from a unified interface:
  • List view of all documents in a collection
  • Sortable and filterable columns
  • Bulk operations (delete, move, publish)
  • Collection-level settings

​
Media Optimization

Optimize images and media assets directly within the editor:
  • Automatic image compression
  • Format conversion (JPEG → WebP, PNG → AVIF)
  • Responsive image generation
  • Alt text and metadata editing
  • CDN integration

​
AI Content Assistant

Get smart, AI-powered suggestions to improve and speed up content creation:
  • Grammar and spelling corrections
  • Tone and style suggestions
  • Content summarization
  • Auto-generate meta descriptions
  • Suggest related content links
  • Translation assistance
AI features will be optional and configurable, respecting your privacy and data policies.

​
Community-driven Features

Have an idea for Studio? The project is open-source and welcomes contributions:

​
Installation

1

Install the module

Add the Studio module to your Docus project:
npm install @nuxtjs/studio
2

Configure the module

Add Studio to your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
  extends: ['docus'],
  modules: ['@nuxtjs/studio']
})
3

Configure authentication

Set up OAuth authentication in your environment variables:
.env
# GitHub OAuth
NUXT_STUDIO_GITHUB_CLIENT_ID=your_github_client_id
NUXT_STUDIO_GITHUB_CLIENT_SECRET=your_github_client_secret

# GitLab OAuth (optional)
NUXT_STUDIO_GITLAB_CLIENT_ID=your_gitlab_client_id
NUXT_STUDIO_GITLAB_CLIENT_SECRET=your_gitlab_client_secret

# Google OAuth (optional)
NUXT_STUDIO_GOOGLE_CLIENT_ID=your_google_client_id
NUXT_STUDIO_GOOGLE_CLIENT_SECRET=your_google_client_secret
4

Deploy and access Studio

Deploy your site and navigate to the Studio route:
https://your-site.com/api/studio
Authenticate and start editing!
For detailed installation instructions and advanced configuration, visit the official Nuxt Studio documentation.

​
Use Cases

Non-Technical Editors

Allow content writers and editors to manage documentation without technical knowledge.

Quick Fixes

Fix typos and update content directly in production without a full development cycle.

Collaborative Editing

Multiple team members can edit content simultaneously with Git conflict resolution.

Visual Component Configuration

Configure component props visually without writing code or understanding MDC syntax.

​
Best Practices

1

Use branch protection

Configure branch protection rules in GitHub/GitLab to require reviews before merging Studio commits to production.
2

Set up staging environment

Deploy a staging site where content editors can preview changes before committing to production.
3

Define content schemas

Use Nuxt Content schemas to provide type-safe editing and validation in Studio’s form-based editor.
4

Document component usage

Provide clear documentation for content editors on how to use custom components in Studio.

​
Next Steps

Studio Documentation

Read the complete Nuxt Studio documentation

Troubleshooting

Common issues and solutions when working with Docus

Build docs developers (and LLMs) love

Get started for freeTalk to us