Setup Nuxt Studio

Install

Add the Nuxt Studio module to your project:

pnpm add nuxt-studio@alpha

npm install nuxt-studio@alpha

yarn add nuxt-studio@alpha

bun add nuxt-studio@alpha

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

npx nuxi module add nuxt-studio@alpha

Configure

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

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: '')
    }
  }
})

GitHub OAuth App

Nuxt Studio uses GitHub OAuth for authentication.

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:

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.

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
    }
  }
})

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>

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

Development mode

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

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)