feat: use router for import links in package code

[bluwy]

Currently the import links in the package code page are raw anchor tags which aren't handled by Nuxt, which means they are handled by the browser and does a full page load when clicked.

I added some client-side code to attach click listeners and call navigateTo so that it uses our router for snappier navigation. I'm not sure if this is the best way but it might be the least complicated.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 10, 2026 1:51am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 10, 2026 1:51am
npmx-lunaria	Ignored		Feb 10, 2026 1:51am

[codecov]

Codecov Report

❌ Patch coverage is 46.15385% with 7 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Code/Viewer.vue	46.15%	6 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The change modifies the Code Viewer component to implement client-side navigation for import links. A new handleImportLinkNavigate function is introduced that attaches click listeners to anchor elements with the import-link class. When clicked, these links prevent their default browser behaviour and instead utilise Nuxt's navigateTo for routing. A watcher is added to the html prop to ensure the navigation handler runs again whenever the HTML content updates. No public APIs or component signatures are altered.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the problem (raw anchor tags causing full page loads) and the solution (client-side navigation via navigateTo), directly matching the changeset.

_{✏️ 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

---

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

[coderabbitai]

Actionable comments posted: 1

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

cat -n app/components/Code/Viewer.vue | sed -n '55,85p'

Repository: npmx-dev/npmx.dev

Length of output: 1006

---

🏁 Script executed:

head -n 61 app/components/Code/Viewer.vue | tail -n 40

Repository: npmx-dev/npmx.dev

Length of output: 1141

---

🏁 Script executed:

# Check if there are any other uses of addEventListener on import-link anchors
rg "import-link" app/components/Code/Viewer.vue

Repository: npmx-dev/npmx.dev

Length of output: 204

---

🏁 Script executed:

head -n 30 app/components/Code/Viewer.vue

Repository: npmx-dev/npmx.dev

Length of output: 836

---

🏁 Script executed:

# Verify the full component structure to check Vue Composition API usage
wc -l app/components/Code/Viewer.vue && echo "---" && tail -n 30 app/components/Code/Viewer.vue

Repository: npmx-dev/npmx.dev

Length of output: 911

---

🏁 Script executed:

head -n 100 app/components/Code/Viewer.vue | grep -E "^import|^const.*useTemplateRef|^const.*navigateTo"

Repository: npmx-dev/npmx.dev

Length of output: 102

---

🏁 Script executed:

sed -n '1,15p' app/components/Code/Viewer.vue

Repository: npmx-dev/npmx.dev

Length of output: 399

---

Preserve modified and auxiliary link behaviour before intercepting clicks.

Currently, all anchor clicks are prevented and routed via navigateTo, which blocks ctrl/cmd‑click, middle‑click, target="_blank", and download behaviours. Add guards so normal browser behaviour is preserved for these cases.

🔧 Suggested fix

   anchors.forEach(anchor => {
     // NOTE: We do not need to remove previous listeners because we re-create the entire HTML content on each html update
     anchor.addEventListener('click', event => {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey ||
+        (anchor.getAttribute('target') && anchor.getAttribute('target') !== '_self') ||
+        anchor.hasAttribute('download')
+      ) {
+        return
+      }
       const href = anchor.getAttribute('href')
       if (href) {
         event.preventDefault()
         navigateTo(href)
       }
     })
   })

[bluwy]

This is sort of true I think, should we handle this? @danielroe

[coderabbitai]

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

[bluwy]

I've made a fix locally. I'm not sure how merge queues work, so I'll wait for this to merge then send a follow-up PR.