Setup Nuxt Studio

Installation

Install Nuxt Studio using the Nuxt CLI within your project:

npx nuxt module add nuxt-studio@beta

Development mode

When running locally, any file changes will be synchronized in real time with your local filesystem.

Production mode

Studio's main advantage is publishing content changes directly from your production website. This requires two configurations:

1. Git Provider

Configure where your content is stored and where changes will be committed:

export default defineNuxtConfig({
  studio: {
    repository: {
      provider: 'github', // 'github' or 'gitlab'
      owner: 'your-username',
      repo: 'your-repo',
      branch: 'main'
    }
  }
})

2. Auth Provider

Configure how users authenticate to access Studio. Choose from GitHub, GitLab, Google OAuth, or custom authentication:

# Example with GitHub OAuth
STUDIO_GITHUB_CLIENT_ID=<your_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_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
    }
  }
})

Open Studio

Once deployed, open Studio 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

Options

Add the module to your nuxt.config.ts and configure your repository based on your Git provider:

Admin route

Customize the login route using the route option:

export default defineNuxtConfig({
  studio: {
    route: '/admin', // default: '/_studio'
  }
})

Repository

Use the repository option to specify your git repository to sync in production mode.

export default defineNuxtConfig({
  studio: {
    repository: {
      provider: 'github', // 'github' or 'gitlab', default: 'github'
      owner: 'your-username', // your GitHub/GitLab username or organization
      repo: 'your-repo', // your repository name
      branch: 'main', // the branch to commit to (default: main)
    }
  }
})

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

Internationalization

Nuxt Studio includes built-in internationalization support with the following languages available:

• 🇬🇧 English (default)
• 🇸🇦 Arabic
• 🇧🇬 Bulgarian
• 🇩🇪 German
• 🇪🇸 Spanish
• 🇮🇷 Farsi
• 🇫🇮 Finnish
• 🇫🇷 French
• 🇮🇩 Indonesian
• 🇮🇹 Italian
• 🇯🇵 Japanese
• 🇳🇱 Dutch
• 🇵🇱 Polish
• 🇧🇷 Portuguese (Brazil)
• 🇺🇦 Ukrainian
• 🇨🇳 Chinese

Set your preferred language using the i18n option:

export default defineNuxtConfig({
  studio: {
    i18n: {
      defaultLocale: 'fr' // 'en', 'fr' or 'de'
    }
  }
})

This will translate:

• All UI elements and labels
• Monaco editor snippets and code completion
• Contextual messages and notifications

Dev mode

If you want to test your production setup locally, disable the dev option:

export default defineNuxtConfig({
  studio: {
    dev: false
  }
})

Make sure to configure your OAuth provider to redirect to your local dev server (usually http://localhost:3000).