Setup Nuxt Studio

Installation

Install Nuxt Studio using the Nuxt CLI within your project:

npx nuxt module add nuxt-studio

Development mode

Previous section is enough to be able to edit your content. Just click on the floating button on the bottom left of your page.

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:

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

# Example with GitHub OAuth
STUDIO_GITHUB_CLIENT_ID=<your_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_client_secret>

export default defineNuxtConfig({
nitro: {
prerender: {
  // Pre-render the homepage
  routes: ['/'],
  // Then crawl all the links on the page
  crawlLinks: true
}
}
})

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.

When deploying on supported platforms, the repository details are automatically detected from CI environment variables:

Auto-detection only applies when owner and repo are not explicitly set. Any manually configured values always take precedence.

To override or for unsupported platforms, configure the repository manually:

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
• 🇰🇷 Korean
• 🇨🇿 Czech
• 🇳🇴 Norwegian (Bokmål)
• 🇳🇴 Norwegian (Nynorsk)
• 🇷🇺 Russian
• 🇹🇼 Taiwan (Chinese Traditional)
• 🇰🇭 Khmer

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

Components Meta

You can control which components are visible in Nuxt Studio using the meta.components option in your nuxt.config.ts. This is useful if you want to hide specific components or only show a subset.

export default defineNuxtConfig({
  studio: {
    meta: {
      components: {
        // White-list: If defined, ONLY these components will be visible
        include: ['Content*', 'MySpecificComponent'],

        // Black-list: These components will be hidden
        exclude: ['HiddenComponent', 'content/prose/**']
      }
    }
  }
})

Patterns support glob syntax (*, **) and can match against:

• Component Name: e.g. Button, Content*
• File Path: If the pattern contains a /, e.g. content/prose/**