To use GitHub as your Git provider, you need to create a GitHub OAuth application.
Go to GitHub Developer Settings and click New OAuth App
Fill in the required fields:
https://yourdomain.comhttps://yourdomain.com:note If you want to try studio locally, set the callback url to your local url http://localhost:3000After creating the OAuth app, you'll receive:
Add the GitHub OAuth credentials to your deployment platform's environment variables or in your .env file in local
STUDIO_GITHUB_CLIENT_ID=<your_github_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_github_client_secret>
/_studio (or on the route you've configured) to start editing.To use GitLab as your Git provider, you need to create a GitLab OAuth application.
Go to your GitLab User Settings → Applications (or your group/organization settings) and create a New Application.
Fill in the required fields:
https://yourdomain.com/__nuxt_studio/auth/gitlabapi (required for publication) http://localhost:3000/__nuxt_studio/auth/gitlabAfter creating the OAuth application, you'll receive:
Add the GitLab OAuth credentials to your deployment platform's environment variables or in your .env file in local
STUDIO_GITLAB_APPLICATION_ID=<your_gitlab_application_id>
STUDIO_GITLAB_APPLICATION_SECRET=<your_gitlab_secret>
/_studio (or on the route you've configured) to start editing.By default, Studio uses your deployment URL as the OAuth redirect URL. If you need to customize it you can specify a custom redirect URL:
# Using GitHub provider
STUDIO_GITHUB_REDIRECT_URL=https://custom-domain.com
# Using GitLab provider
STUDIO_GITLAB_REDIRECT_URL=https://custom-domain.com
By default, Studio commits changes to the branch specified in your configuration (typically main). However, you can configure Studio to work with a staging or preview branch instead.
This is useful when you want to review changes on a preview environment before merging to production. You can currently handle pull requests manually from GitHub, but automatic PR creation is included in our roadmap and will be implemented in a future release.
Update your nuxt.config.ts to target your staging branch.
export default defineNuxtConfig({
studio: {
repository: {
owner: 'your-username',
repo: 'your-repo',
branch: PROCESS.ENV.STUDIO_BRANCH_NAME, // Target your staging branch instead of main
}
}
})
Configure your hosting platform to deploy the staging branch to a preview URL (e.g., staging.yourdomain.com).
Create a new OAuth App specifically for your staging environment and use your staging URL as callback URL.
Configure your staging deployment env varibales with the staging OAuth credentials.
STUDIO_GITHUB_CLIENT_ID=<your_staging_github_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_staging_github_client_secret>
STUDIO_GITHUB_BRANCH_NAME=<your_staging_branch_name>
Navigate to https://staging.yourdomain.com/_studio to edit content. All commits will be pushed to your configured staging branch.
Once you're satisfied with changes on your staging branch, create a pull request from your staging branch to your main branch on GitHub to deploy to production.