feat(oauth): gitlab support

[TotomInc]

• Integrate GitLab OAuth support on route /auth/gitlab
  • New server route handler for /__nuxt_studio/auth/gitlab which points to /server/routes/auth/gitlab.get runtime method
  • Update /auth/admin to redirect to the proper provider as defined in the module config
• Turn useGit into a shared composable, returns the proper git provider based on the module provider config
  • Added an abstract GitProvider interface
  • Add createGitLabProvider with methods to fetch, commit and push to remote repository
  • Updated createGitHubProvider with GitProvider abstract interface
  • This allows for easier implementation of Git providers in the future
  • Fetch GitLab files in base64, similar to GitHub provider
• Add gitlab provider in user & module config
• Add gitlab.applicationId, gitlab.applicationSecret and gitlab.instanceUrl module config properties with support for their own environment variables
• Ensure encoding is properly set on each fetched file
  • Add ternaries to determine if base64 decode should be used based on the file encoding (base64 or utf-8)
• Lot of variable renaming to ensure the context switch from GitHub-centric to "remote" in order to be more context agnostic
• Updated various parts of the UI to display proper Git provider details (e.g. icon, name)
  • Added useGitProviderIcon composable which returns the correct Git provider icon based on Studio user provider config

See #65 for context (fixes #65)

What's missing

• Test GitLab OAuth (working)
• Test GitLab commit/push
• Update studio front-end to be more agnostic toward Git providers
  • There's too much code specific to GitHub

[vercel]

@TotomInc is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
content-studio	Ready	Preview	Comment	Nov 14, 2025 2:54pm

[TotomInc]

Can someone from the core-team review this PR please?

I believe all the changes required for GitLab provider support is done. I've done testing on our company's GitLab self-hosted repository, and it works well:

• GitLab users can log-in with GitLab OAuth Application
• Users can correctly navigate on the website and edit content
• Nuxt Studio properly create git commits and push to the remote GitLab repository using GitLab API

Thanks! 🙂

cc @atinux @larbish @maximepvrt @farnabaz

[larbish]

Thanks a lot @TotomInc! I've already had a check at it and it looks pretty good to me! There is a refactor I would like to do before merging, I'll take care of it, just need to finish another big refactor I'm working on first 😄

[TotomInc]

Alright awesome @larbish, feel free to ping me if necessary or if I can give some help in getting this merged 🙂

[larbish]

I did a small refactor:

• move providers logic in a dedicated utils folder: utils/proviers/{provider}.ts
• create a null provider (empty mock) for devMode
• factorize code into a single useGitProvider composable

Ready to merge once @farnabaz validate the auth behaviour ✅

[vercel]

Translation calls are using incorrect Vue I18n syntax - named placeholders like {providerName} require object parameters, not positional arguments.

View Details

📝 Patch Details

diff --git a/src/app/src/components/content/ContentEditorConflict.vue b/src/app/src/components/content/ContentEditorConflict.vue
index f4ea501..57e05a9 100644
--- a/src/app/src/components/content/ContentEditorConflict.vue
+++ b/src/app/src/components/content/ContentEditorConflict.vue
@@ -118,7 +118,7 @@ useMonacoDiff(diffEditorRef, {
           </dl>
 
           <p class="text-muted text-xs mb-2">
-            {{ $t('studio.conflict.description', gitProvider.name) }}
+            {{ $t('studio.conflict.description', { providerName: gitProvider.name }) }}
           </p>
         </div>
       </div>
diff --git a/src/app/src/components/media/MediaEditorImage.vue b/src/app/src/components/media/MediaEditorImage.vue
index 65fe0b7..a7a67f3 100644
--- a/src/app/src/components/media/MediaEditorImage.vue
+++ b/src/app/src/components/media/MediaEditorImage.vue
@@ -145,7 +145,7 @@ const remotePath = computed(() => {
           :name="gitProvider.icon"
           class="w-3.5 h-3.5"
         />
-        <span>{{ $t('studio.media.providerPath', gitProvider.name) }}</span>
+        <span>{{ $t('studio.media.providerPath', { providerName: gitProvider.name }) }}</span>
       </div>
       <p class="text-xs font-mono text-highlighted truncate">
         {{ remoteFile.path }}
diff --git a/src/app/src/pages/error.vue b/src/app/src/pages/error.vue
index 77615a3..e73302a 100644
--- a/src/app/src/pages/error.vue
+++ b/src/app/src/pages/error.vue
@@ -66,7 +66,7 @@ function retry() {
 
       <UAlert
         icon="i-lucide-alert-triangle"
-        :title="$t('studio.publish.errorTitle', gitProvider.name)"
+        :title="$t('studio.publish.errorTitle', { providerName: gitProvider.name })"
         :description="errorMessage"
         color="error"
         variant="soft"

Analysis

Named placeholder syntax mismatch in Vue I18n translation calls

What fails: Three components pass string values to i18n translation functions that contain named placeholders like {providerName}, which causes the placeholders to remain substituted. The translation calls use $t('key', stringValue) syntax instead of the required $t('key', { providerName: stringValue }) object parameter syntax.

How to reproduce:

1. Run the project and navigate to a page that displays a content conflict (ContentEditorConflict.vue)
2. Observe the conflict description message
3. The provider name will not appear in the translated text - instead you'll see: "The content on differs from your website version." (with empty placeholder)

What happens vs expected behavior:

• Actual result: Placeholders render empty because Vue I18n doesn't recognize positional string arguments as named parameters

  • Line 121 ContentEditorConflict.vue: $t('studio.conflict.description', gitProvider.name) produces "The content on differs from..."
  • Line 148 MediaEditorImage.vue: $t('studio.media.providerPath', gitProvider.name) produces " path"
  • Line 69 error.vue: $t('studio.publish.errorTitle', gitProvider.name) produces "Error during publish"

• Expected result: According to Vue I18n message format syntax documentation, named placeholders require object parameters with matching property names:

  • Should be: $t('studio.conflict.description', { providerName: gitProvider.name }) → "The content on GitHub differs from..."
  • Should be: $t('studio.media.providerPath', { providerName: gitProvider.name }) → "GitHub path"
  • Should be: $t('studio.publish.errorTitle', { providerName: gitProvider.name }) → "Error during GitHub publish"

The correct pattern is already established in ItemActionsDropdown.vue line 48: t('studio.actions.confirmAction', { action: t(...) })