Setup Nuxt Studio

Installation

Install Nuxt Studio using the Nuxt CLI within your project:

npx nuxt module add nuxt-studio@alpha

Development mode

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

The publish system is only available in production mode. Use your current workflow (git command, IDE, GitHub Desktop...) to commit your changes.

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.

In order to publish changes in production, you need to configure the git repository:

export default defineNuxtConfig({
  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')
    }
  }
})

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.

Once your OAuth app is setup, you should have your environment variables set in your hosting provider.

STUDIO_GITHUB_CLIENT_ID=<your_github_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_github_client_secret>

STUDIO_GITLAB_APPLICATION_ID=<your_gitlab_application_id>
STUDIO_GITLAB_APPLICATION_SECRET=<your_gitlab_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)
• 🇫🇷 French
• 🇩🇪 German

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 use test locally your production setup, disable the dev option:

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

Make sure to create another GitHub/GitLab OAuth app that redirects to your local dev server (usually http://localhost:3000).