perf: use vue router to parse package page paths

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: { package: result.package.name.split('/') } }"
+          :to="{ name: 'package', params: parsePackageRouteParams(result.package.name) }"
           :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: { package: dep.split('/') } }"
+            :to="{ name: 'package', params: parsePackageRouteParams(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: { package: [...dep.split('/'), 'v', version] } }"
+              :to="{ name: 'package', params: { ...parsePackageRouteParams(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: { package: peer.name.split('/') } }"
+              :to="{ name: 'package', params: parsePackageRouteParams(peer.name) }"
               class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
             >
               {{ peer.name }}
@@ -170,13 +170,13 @@ const sortedOptionalDependencies = computed(() => {
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
           <NuxtLink
-            :to="{ name: 'package', params: { package: dep.split('/') } }"
+            :to="{ name: 'package', params: parsePackageRouteParams(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: { package: [...dep.split('/'), 'v', version] } }"
+            :to="{ name: 'package', params: { ...parsePackageRouteParams(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: { package: dep.split('/') } }"
+            :to="{ name: 'package', params: parsePackageRouteParams(dep) }"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}

app/components/PackageVersions.vue

@@ -40,7 +40,7 @@ function hasProvenance(version: PackumentVersion | undefined): boolean {
 function versionRoute(version: string): RouteLocationRaw {
   return {
     name: 'package',
-    params: { package: [...props.packageName.split('/'), 'v', version] },
+    params: { ...parsePackageRouteParams(props.packageName), version },
   }
 }
 

app/composables/usePackageRoute.ts

@@ -0,0 +1,5 @@
+export function parsePackageRouteParams(pkg: string) {
+  const [org, name] = pkg.startsWith('@') ? pkg.split('/') : [null, pkg]
+
+  return { org, name }
+}

app/pages/[...package].vue

@@ -8,65 +8,37 @@ import { areUrlsEquivalent } from '#shared/utils/url'
 
 definePageMeta({
   name: 'package',
-  alias: ['/package/: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')
 
 const router = useRouter()
 
-// Parse package name and optional version from URL
-// 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"
-const parsedRoute = computed(() => {
-  const segments = route.params.package || []
-
-  // Find the /v/ separator for version
-  const vIndex = segments.indexOf('v')
-  if (vIndex !== -1 && vIndex < segments.length - 1) {
-    return {
-      packageName: segments.slice(0, vIndex).join('/'),
-      requestedVersion: segments.slice(vIndex + 1).join('/'),
-    }
-  }
-
-  // Parse @ versioned package
-  const fullPath = segments.join('/')
-  const versionMatch = fullPath.match(/^(@[^/]+\/[^/]+|[^/]+)@([^/]+)$/)
-  if (versionMatch) {
-    const [, packageName, requestedVersion] = versionMatch as [string, string, string]
-    return {
-      packageName,
-      requestedVersion,
-    }
-  }
-
-  return {
-    packageName: fullPath,
-    requestedVersion: null as string | null,
-  }
-})
-
-const packageName = computed(() => parsedRoute.value.packageName)
-const requestedVersion = computed(() => parsedRoute.value.requestedVersion)
+const orgName = computed(() => route.params.org)
+const requestedVersion = computed(() => route.params.version || null)
+const packageName = computed(() =>
+  orgName.value ? `${orgName.value}/${route.params.name}` : route.params.name,
+)
 
 if (import.meta.server) {
   assertValidPackageName(packageName.value)
 }
 
-// Extract org name from scoped package (e.g., "@nuxt/kit" -> "nuxt")
-const orgName = computed(() => {
-  const name = packageName.value
-  if (!name.startsWith('@')) return null
-  const match = name.match(/^@([^/]+)\//)
-  return match ? match[1] : null
-})
-
 const { data: pkg, status, error, resolvedVersion } = usePackage(packageName, requestedVersion)
 
 const { data: downloads } = usePackageDownloads(packageName, 'last-week')

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

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

app/pages/index.vue

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