Setup Nuxt Studio

Install

Add the Nuxt Studio module to your project:

pnpm add nuxt-studio

npm install nuxt-studio

yarn add nuxt-studio

bun 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:

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

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)