refactor: use module to inject double route

Author: danielroe

app/components/PackageCard.vue

@@ -27,7 +27,7 @@ const emit = defineEmits<{
         class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
       >
         <NuxtLink
-          :to="{ name: 'package', params: getPackagePageParams(result.package.name) }"
+          :to="getPackageRoute(result.package.name, result.package.version)"
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="focus-visible:outline-none decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"

app/components/PackageDependencies.vue

@@ -59,7 +59,7 @@ const sortedOptionalDependencies = computed(() => {
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
           <NuxtLink
-            :to="{ name: 'package', params: getPackagePageParams(dep) }"
+            :to="getPackageRoute(dep)"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
@@ -75,7 +75,7 @@ const sortedOptionalDependencies = computed(() => {
               <span class="i-carbon-warning-alt w-3 h-3 block" />
             </span>
             <NuxtLink
-              :to="{ name: 'package', params: getPackagePageParams(dep, version) }"
+              :to="getPackageRoute(dep, version)"
               class="font-mono text-xs text-right truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
@@ -114,7 +114,7 @@ const sortedOptionalDependencies = computed(() => {
         >
           <div class="flex items-center gap-2 min-w-0">
             <NuxtLink
-              :to="{ name: 'package', params: getPackagePageParams(peer.name) }"
+              :to="getPackageRoute(peer.name)"
               class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
             >
               {{ peer.name }}
@@ -128,10 +128,7 @@ const sortedOptionalDependencies = computed(() => {
             </span>
           </div>
           <NuxtLink
-            :to="{
-              name: 'package',
-              params: getPackagePageParams(peer.name, peer.version),
-            }"
+            :to="getPackageRoute(peer.name, peer.version)"
             class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
             :title="peer.version"
           >
@@ -170,13 +167,13 @@ const sortedOptionalDependencies = computed(() => {
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
           <NuxtLink
-            :to="{ name: 'package', params: getPackagePageParams(dep) }"
+            :to="getPackageRoute(dep)"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
           </NuxtLink>
           <NuxtLink
-            :to="{ name: 'package', params: getPackagePageParams(dep, version) }"
+            :to="getPackageRoute(dep, version)"
             class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
             :title="version"
           >

app/components/PackageInstallScripts.vue

@@ -69,7 +69,7 @@ const isExpanded = shallowRef(false)
           class="flex items-center justify-between py-0.5 text-sm gap-2"
         >
           <NuxtLink
-            :to="{ name: 'package', params: getPackagePageParams(dep) }"
+            :to="getPackageRoute(dep)"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}

app/components/PackageVersions.vue

@@ -38,10 +38,7 @@ function hasProvenance(version: PackumentVersion | undefined): boolean {
 
 // Build route object for package version link
 function versionRoute(version: string): RouteLocationRaw {
-  return {
-    name: 'package',
-    params: getPackagePageParams(props.packageName, version),
-  }
+  return getPackageRoute(props.packageName, version)
 }
 
 // Version to tags lookup (supports multiple tags per version)

app/composables/usePackageRoute.ts

@@ -1,5 +1,17 @@
-export function getPackagePageParams(pkg: string, version: string | null = null) {
+export function getPackageRoute(pkg: string, version: string | null = null) {
   const [org, name] = pkg.startsWith('@') ? pkg.split('/') : [null, pkg]
+  if (version) {
+    return {
+      name: 'package-version',
+      params: { org, name, version },
+    } as const
+  }
 
-  return { org, name, version }
+  return {
+    name: 'package',
+    params: {
+      org,
+      name,
+    },
+  } as const
 }

app/pages/[...package].vue app/pages/[[org]]/[name].vueapp/pages/[...package].vue renamed to app/pages/[[org]]/[name].vue

@@ -8,25 +8,11 @@ import { areUrlsEquivalent } from '#shared/utils/url'
 
 definePageMeta({
   name: 'package',
-  /**
-   * Supported patterns:
-   *   /nuxt → packageName: "nuxt", requestedVersion: null
-   *   /nuxt/v/4.2.0 → packageName: "nuxt", requestedVersion: "4.2.0"
-   *   /@nuxt/kit → packageName: "@nuxt/kit", requestedVersion: null
-   *   /@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", requestedVersion: "1.0.0"
-   *   /axios@1.13.3 → packageName: "axios", requestedVersion: "1.13.3"
-   *   /@nuxt/kit@1.0.0 → packageName: "@nuxt/kit", requestedVersion: "1.0.0"
-   */
-  path: '/:org(@[^/]+/)?:name([^@/]+):version()?',
-  alias: [
-    '/:org(@[^/]+/)?:name([^@/]+)/v/:version()?',
-    '/package/:org(@[^/]+/)?:name([^@/]+):version()?',
-    '/package/:org(@[^/]+/)?:name([^@/]+)/v/:version()?',
-  ],
 })
 
-const route = useRoute('package')
-
+// the syntax for matching is complex, so we implement in modules/routing.ts
+// which injects a second identical route with required versions
+const route = useRoute('package-version')
 const router = useRouter()
 
 const orgName = computed(() => route.params.org)

app/pages/code/[...path].vue

@@ -220,10 +220,7 @@ const orgName = computed(() => {
 
 // Build route object for package link (with optional version)
 function packageRoute(ver?: string | null) {
-  return {
-    name: 'package' as const,
-    params: getPackagePageParams(packageName.value, ver),
-  }
+  return getPackageRoute(packageName.value, ver)
 }
 
 // Format file size

app/pages/index.vue

@@ -96,7 +96,7 @@ defineOgImageComponent('Default')
           :key="pkg"
         >
           <NuxtLink
-            :to="{ name: 'package', params: getPackagePageParams(pkg) }"
+            :to="getPackageRoute(pkg)"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"
           >
             <span

modules/routing.ts

@@ -0,0 +1,34 @@
+import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'routing-extensions',
+  },
+  setup() {
+    const nuxt = useNuxt()
+
+    /**
+     * Supported patterns:
+     *   /nuxt → packageName: "nuxt", requestedVersion: null
+     *   /nuxt/v/4.2.0 → packageName: "nuxt", requestedVersion: "4.2.0"
+     *   /@nuxt/kit → packageName: "@nuxt/kit", requestedVersion: null
+     *   /@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", requestedVersion: "1.0.0"
+     *   /axios@1.13.3 → packageName: "axios", requestedVersion: "1.13.3"
+     *   /@nuxt/kit@1.0.0 → packageName: "@nuxt/kit", requestedVersion: "1.0.0"
+     */
+
+    nuxt.hook('pages:resolved', pages => {
+      const packagePage = pages.find(page => page.name === 'package')
+      if (packagePage) {
+        packagePage.path = '/:org(@[^/]+)?/:name'
+        packagePage.alias = ['/package/:org(@[^/]+)?/:name']
+      }
+      pages.push({
+        ...packagePage,
+        name: 'package-version',
+        path: '/:org(@[^/]+)?/:name/v/:version',
+        alias: ['/:org(@[^/]+)?/:name@:version', '/package/:org(@[^/]+)?/:name/v/:version'],
+      })
+    })
+  },
+})