fix: nav ordering with index and add sponsor badge on provider page nav

[RihanArfan]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Right now after clicking any provider the ordering becomes inconsistent from /deploy. This orders the nav bar the same as /deploy, and adds the missing sponsor badge to Vercel.

Existing:

Change:

[vercel]

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

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

The deploy page's left navigation now maps each item to include an optional badge property (set to "Sponsor" when provider.sponsor is truthy, otherwise undefined). The resulting items array is sorted by label using localeCompare('en') before being passed to UNavigationMenu. This changes the public shape of navigation items to optionally include badge?: string.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the two main changes: fixing navigation ordering and adding a sponsor badge on the provider page.
Description check	✅ Passed	The description clearly explains the problem (inconsistent ordering after clicking providers), the solution (sorting nav items to match /deploy), and includes before/after screenshots demonstrating the fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/pages/deploy/[slug].vue (1)

81-85: Extract the map/sort chain to a computed to keep the template lean.

The inline .map().sort() allocates a new array on every re-render triggered by anything in this component's reactive scope (e.g., route changes during navigation). A computed memoises the result and only re-runs when providers itself changes.

♻️ Proposed refactor

+const navItems = computed(() =>
+  providers.value.map(provider => ({
+    label: provider.title,
+    to: provider.path,
+    badge: provider.sponsor ? 'Sponsor' : undefined
+  })).sort((a, b) => a.label.localeCompare(b.label, 'en'))
+)

Then in the template:

-            :items="providers.map(provider => ({
-              label: provider.title,
-              to: provider.path,
-              badge: provider.sponsor ? 'Sponsor' : undefined
-            })).sort((a, b) => a.label.localeCompare(b.label))"
+            :items="navItems"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/pages/deploy/`[slug].vue around lines 81 - 85, Extract the inline
providers.map(...).sort(...) into a computed property (e.g., providerItems or
sortedProviderItems) that maps each provider to { label: provider.title, to:
provider.path, badge: provider.sponsor ? 'Sponsor' : undefined } and sorts by
label via localeCompare; ensure the computed depends on providers so it only
recalculates when providers changes, import computed from 'vue' if missing, and
replace the template binding :items="providers.map(...).sort(...)" with
:items="providerItems" (or your chosen computed name).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/pages/deploy/`[slug].vue:
- Around line 81-85: The sort comparator uses localeCompare without an explicit
locale which can cause SSR vs client ordering mismatches; update the comparator
in the items generation (the providers.map(...).sort(...) callback) to pass a
fixed locale and options (e.g., a.label.localeCompare(b.label, 'en', {
sensitivity: 'base' })) or use an Intl.Collator with a fixed locale to ensure
deterministic sorting between server and client.

---

Nitpick comments:
In `@app/pages/deploy/`[slug].vue:
- Around line 81-85: Extract the inline providers.map(...).sort(...) into a
computed property (e.g., providerItems or sortedProviderItems) that maps each
provider to { label: provider.title, to: provider.path, badge: provider.sponsor
? 'Sponsor' : undefined } and sorts by label via localeCompare; ensure the
computed depends on providers so it only recalculates when providers changes,
import computed from 'vue' if missing, and replace the template binding
:items="providers.map(...).sort(...)" with :items="providerItems" (or your
chosen computed name).

[vercel]

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this Vercel project: nuxt.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/deploy/[slug].vue (1)

81-85: LGTM — consider extracting the nav items to a computed property.

The badge and localeCompare('en') fix are correct. Two minor points worth noting:

1. Inline .map().sort() re-runs on every render. Extracting to a computed keeps the template clean and caches the result.

2. provider shadowing — the .map(provider => …) parameter silently shadows the outer provider page ref (line 11). Renaming the parameter (e.g. p or navProvider) removes the ambiguity.

♻️ Proposed refactor — computed nav items

In <script setup>:

+const navItems = computed(() =>
+  providers.value.map(p => ({
+    label: p.title,
+    to: p.path,
+    badge: p.sponsor ? 'Sponsor' : undefined
+  })).sort((a, b) => a.label.localeCompare(b.label, 'en'))
+)

In <template>:

-            :items="providers.map(provider => ({
-              label: provider.title,
-              to: provider.path,
-              badge: provider.sponsor ? 'Sponsor' : undefined
-            })).sort((a, b) => a.label.localeCompare(b.label, 'en'))"
+            :items="navItems"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/pages/deploy/`[slug].vue around lines 81 - 85, Extract the inline
providers.map(...).sort(...) into a computed property (e.g. navItems) in the
<script setup> and reference it as :items="navItems" in the template; inside the
computed, map over providers using a non-shadowing parameter name (e.g. p or
navProvider) to build objects from p.title, p.path and p.sponsor and then sort
by label with localeCompare('en'); this keeps the template clean, caches the
result, and avoids shadowing the outer provider ref.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/pages/deploy/`[slug].vue:
- Around line 81-85: Extract the inline providers.map(...).sort(...) into a
computed property (e.g. navItems) in the <script setup> and reference it as
:items="navItems" in the template; inside the computed, map over providers using
a non-shadowing parameter name (e.g. p or navProvider) to build objects from
p.title, p.path and p.sponsor and then sort by label with localeCompare('en');
this keeps the template clean, caches the result, and avoids shadowing the outer
provider ref.