Studio Playground
Studio

Setup

Learn how to install and configure Nuxt Studio to edit your content in production with GitHub authentication.
This documentation covers only the new open-source Nuxt Studio module. Click here to view the documentation for the legacy standalone platform.

Install

Add the Nuxt Studio module to your project:

pnpm add nuxt-studio

Alternatively, use the Nuxt CLI to automatically add the module:

npx nuxi module add nuxt-studio

Configure

Add the module to your nuxt.config.ts and configure your GitHub repository:

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    'nuxt-studio'
  ],
  
  studio: {
    // Studio admin route (default: '/_studio')
    route: '/_studio',
    
    // GitHub repository configuration (required)
    repository: {
      provider: 'github', // only GitHub is currently supported
      owner: 'your-username', // your GitHub username or organization
      repo: 'your-repo', // your repository name
      branch: 'main', // the branch to commit to
      rootDir: '' // optional: if your Nuxt app is in a subdirectory
    }
  }
})
If your Nuxt Content application is in a monorepo or subdirectory, specify the rootDir option to point to the correct location.

Create GitHub OAuth App

Nuxt Studio uses GitHub OAuth for authentication.

If you changed the route option in your config, update the callback URL accordingly (the route set instead of /studio)

Navigate to GitHub Developer Settings

Go to GitHub Developer Settings and click New OAuth App

Configure the OAuth Application

Fill in the required fields:

  • Application name: Your app name
  • Homepage URL: Your production website homepage URL
  • Authorization callback URL: https://yourdomain.com/_studio/auth/github:tip If you want to try studio on project running in local, you can simply set the callback url to your local url http://localhost:3000.

Copy Your Credentials

After creating the OAuth app, you'll receive:

  • A Client ID (visible immediately)
  • A Client Secret (click Generate a new client secret)

Set your environment Variables

Add the GitHub OAuth credentials to your deployment platform's environment variables or in your .env file in local

.env
STUDIO_GITHUB_CLIENT_ID=your_github_client_id
STUDIO_GITHUB_CLIENT_SECRET=your_github_client_secret

Deployment

The new Nuxt Studio module requires a server-side route for authentication. While static generation remains supported with Nuxt hybrid rendering, your site must be deployed on a platform that supports server-side rendering (SSR).

Accessing Studio

After deployment, access the Studio interface by navigating to your configured route (default: /_studio):

  1. Click Login with GitHub 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
Secure OAuth-based login with Google should be available quickly in the Beta release.

Development mode

Nuxt Studio includes an experimental development mode that enables real-time file system synchronization:

nuxt.config.ts
export default defineNuxtConfig({
  studio: {
    development: {
      sync: true // Enable development mode
    }
  }
})

When enabled, Nuxt Studio will:

  • ✅ Write changes directly to your local content/ directory
  • ✅ Write media changes to your local public/ directory
  • ❌ Listen for file system changes and update the editor
  • ❌ Commit changes to your repository (use your classical workflow instead)

Introduction

Learn what the new Nuxt Studio module is and how it differs from the previous hosted platform.

Synchronization

Understand how Nuxt Studio synchronizes content between your production website and your GitHub repository.