fix: use unique keys for modules

[aidanhibbard]

🔗 Linked issue

Resolves 2164

❓ 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

Uses unique keys for modules rendering to resolve issues including improper links in some cases.

[vercel]

@aidanhibbard 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 ModuleItem usage in the module grid was modified: the v-for iterator was changed from (module, index) to module, and the component :key now uses module.name instead of the loop index. The is-added binding was changed from modulesToAdd.includes(module) to modulesToAdd.some(m => m.name === module.name). Event handling for add/remove remains but the add/remove comparisons now use module.name equality.

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 'fix: use unique keys for modules' directly describes the main change in the pull request, which involves switching from index-based to unique module name-based keys in the module grid rendering.
Description check	✅ Passed	The description is directly related to the changeset, explaining that unique keys are used for module rendering to resolve issues with improper links, with a screenshot demonstrating the problem.
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

🤖 Fix all issues with AI agents

In `@app/pages/modules/index.vue`:
- Around line 259-261: The add/remove tracking logic is inconsistent: the
is-added check uses object identity while removal uses name matching, causing
incorrect UI when module references change; update the is-added binding and
add/remove handlers for the module list (variables/components: displayedModules,
modulesToAdd, the is-added prop, and the `@add/`@remove handlers) to use
name-based matching (e.g., use modulesToAdd.some(m => m.name === module.name)
for is-added, push by module name or object, and filter by m.name !==
module.name on remove) and either validate/document that module.name is unique
(used as slug) so name-based identity is safe.

🧹 Nitpick comments (1)

app/pages/modules/index.vue (1)

262-265: Align selection checks with name-based add/remove.
@remove now uses name matching, but :is-added and @add still depend on object identity. If module objects are re-instantiated (e.g., after refetch or filter rebuild), the UI can show “not added” and allow duplicates. Consider switching to name-based checks and de-duping on add.

♻️ Suggested adjustment

-            :is-added="modulesToAdd.includes(module)"
-            `@add`="modulesToAdd.push(module)"
+            :is-added="modulesToAdd.some(m => m.name === module.name)"
+            `@add`="modulesToAdd.some(m => m.name === module.name) || modulesToAdd.push(module)"
             `@remove`="modulesToAdd = modulesToAdd.filter(m => m.name !== module.name)"

[vercel]

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

Project	Deployment	Review	Updated (UTC)
nuxt	Ready	Preview, Comment	Jan 26, 2026 3:40pm

[atinux]

The main issue here is that this page is pre-rendered, so changing this will create and hydration mismatch.

See https://nuxt-git-fork-aidanhibbard-main-nuxt-js.vercel.app/modules?category=Security

[aidanhibbard]

@atinux

Heard, will pick this back up later today. Appreciate the catch :)

[aidanhibbard]

@atinux

What would be your ideal here? Do we want to call init modules on mounted, and, or add the ClientOnly barrier? I guess I didn't realize there are pre-rendered pages.