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 repository based on your Git provider:

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    'nuxt-studio'
  ],
  
  studio: {
    // Studio admin route (default: '/_studio')
    route: '/_studio',
    
    // Git repository configuration (owner and repo are required)
    repository: {
      provider: 'github', // 'github' or 'gitlab'
      owner: 'your-username', // your GitHub/GitLab username or organization
      repo: 'your-repo', // your repository name
      branch: 'main', // the branch to commit to (default: main)
    }
  }
})

Options

Root directory default: ''

If your Nuxt Content application is in a monorepo or subdirectory, specify the rootDir option to point to the correct location.

export default defineNuxtConfig({
  studio: {
    repository: {
      ...
      rootDir: 'docs'
    }
  }
})

Private Repository Access default: true

By default, Studio requests access to both public and private repositories.

Setting private: false limits the OAuth scope to public repositories only, which may be preferable for security or compliance reasons when working with public repositories.

export default defineNuxtConfig({
  studio: {
    repository: {
      ...
      private: false
    }
  }
})

Dev mode

🚀 That’s all you need to enable Studio in local.

Once your project is running locally, any file changes will be synchronized in real time with the file system.

Production mode

While Nuxt Studio can be useful during development (especially with the upcoming Studio editor) its main advantage is the ability to publish changes directly from your production website.

OAuth Configuration

To enable this Nuxt Studio supports authentication through both GitHub and GitLab OAuth providers allowing you to log in and publish updates from production.

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 the login button 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