Studio

Setup Nuxt Studio

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

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

Terminal
npx nuxi module add nuxt-studio@alpha

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 (owner and repo are 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 (default: main)
      rootDir: '' // optional: if your Nuxt app is in a subdirectory (default: '')
    }
  }
})
If your Nuxt Content application is in a monorepo or subdirectory, specify the rootDir option to point to the correct location.

GitHub OAuth App

Nuxt Studio uses GitHub OAuth for authentication.

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: https://yourdomain.com
  • Authorization callback URL: https://yourdomain.com
If you want to try studio locally, 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

Nuxt Studio 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) using nuxt build command.

If you want to pre-render all your pages, use the following configuration:

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      // Pre-render the homepage
      routes: ['/'],
      // Then crawl all the links on the page
      crawlLinks: true
    }
  }
})

Working with Staging/Preview Branches

By default, Studio commits changes to the branch specified in your configuration (typically main). However, you can configure Studio to work with a staging or preview branch instead.

This is useful when you want to review changes on a preview environment before merging to production. You can currently handle pull requests manually from GitHub, but automatic PR creation is included in our roadmap and will be implemented in a future release.

Configure

Update your nuxt.config.ts to target your staging branch.

You can use environment variables to manage multiple branches for different environments.
nuxt.config.ts
export default defineNuxtConfig({
  studio: {
    repository: {
      owner: 'your-username',
      repo: 'your-repo',
      branch: PROCESS.ENV.STUDIO_GITHUB_BRANCH_NAME, // Target your staging branch instead of main
    }
  }
})

Deploy

Configure your hosting platform to deploy the staging branch to a preview URL (e.g., staging.yourdomain.com).

Create a Separate GitHub OAuth App

Create a new OAuth App specifically for your staging environment:

  • Application name: Your App Name (Staging)
  • Homepage URL: https://staging.yourdomain.com
  • Authorization callback URL: https://staging.yourdomain.com

Set Environment Variables

Configure your staging deployment with the staging OAuth credentials and your br

.env.staging
STUDIO_GITHUB_CLIENT_ID=<your_staging_github_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_staging_github_client_secret>
STUDIO_GITHUB_BRANCH_NAME=<your_staging_branch_name>

Access Studio on Staging

Navigate to https://staging.yourdomain.com/_studio to edit content. All commits will be pushed to your configured staging branch.

Merging to Production

Once you're satisfied with changes on your staging branch, create a pull request from your staging branch to your main branch on GitHub to deploy to production.

Pull Request Automation Coming Soon
Automatic pull request creation from Studio is planned for a future release. For now, you'll need to manually create PRs on GitHub to merge staging changes into your main branch.

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.
You can also use the shortcut + . to redirect to the Studio route.

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.