fix: docs tab repeats the package name twice in the header

app/components/Package/Header.vue

@@ -132,15 +132,10 @@ useCommandPaletteContextCommands(
 )
 
 // Docs URL: use our generated API docs
-const docsLink = computed(() => {
-  if (!props.resolvedVersion) return null
+const docsLink = computed((): RouteLocationRaw | null => {
+  if (!props.pkg?.name || !props.resolvedVersion) return null
 
-  return {
-    name: 'docs' as const,
-    params: {
-      path: [props.pkg?.name ?? '', 'v', props.resolvedVersion] satisfies [string, string, string],
-    },
-  }
+  return docsRoute(props.pkg.name, props.resolvedVersion)
 })
 
 const codeLink = computed((): RouteLocationRaw | null => {

app/composables/useCommandPalettePackageCommands.ts

@@ -37,15 +37,7 @@ export function useCommandPalettePackageCommands(
       const { org, name } = splitPackageName(resolvedContext.packageName)
       if (!name) return []
 
-      const docsPath: [string, ...string[]] = org
-        ? [org, name, 'v', resolvedContext.resolvedVersion]
-        : [name, 'v', resolvedContext.resolvedVersion]
-      const docsLink = {
-        name: 'docs' as const,
-        params: {
-          path: docsPath,
-        },
-      }
+      const docsLink = docsRoute(resolvedContext.packageName, resolvedContext.resolvedVersion)
       const codeLink = {
         name: 'code' as const,
         params: {

app/composables/usePackageRoute.ts

@@ -27,11 +27,11 @@ export function usePackageRoute() {
     if (Array.isArray(params.path)) {
       const segments = params.path.filter(Boolean)
       const scoped = segments[0]?.startsWith('@') ?? false
-      const prefixLength = scoped ? 2 : 1
-      const org = scoped ? segments[0] : undefined
-      const name = segments.slice(scoped ? 1 : 0, prefixLength).join('/')
-      const version = segments[prefixLength] === 'v' ? (segments[prefixLength + 1] ?? null) : null
-      return { org, name, version }
+      const nameLength = scoped && !segments[0]?.includes('/') ? 2 : 1
+      const fullName = segments.slice(0, nameLength).join('/')
+      const version = segments[nameLength] === 'v' ? (segments[nameLength + 1] ?? null) : null
+      const { org, name } = splitPackageName(fullName)
+      return { org: org || undefined, name, version }
     }
 
     const org = typeof params.org === 'string' ? params.org : undefined

app/pages/package-docs/[...path].vue

@@ -9,29 +9,10 @@ definePageMeta({
   scrollMargin: 180,
 })
 
-const route = useRoute('docs')
 const router = useRouter()
 const { t } = useI18n()
 
-const parsedRoute = computed(() => {
-  const segments = route.params.path?.filter(Boolean)
-  const vIndex = segments.indexOf('v')
-
-  if (vIndex === -1 || vIndex >= segments.length - 1) {
-    return {
-      packageName: segments.join('/'),
-      version: null as string | null,
-    }
-  }
-
-  return {
-    packageName: segments.slice(0, vIndex).join('/'),
-    version: segments.slice(vIndex + 1).join('/'),
-  }
-})
-
-const packageName = computed(() => parsedRoute.value.packageName)
-const requestedVersion = computed(() => parsedRoute.value.version)
+const { packageName, requestedVersion } = usePackageRoute()
 
 // Validate package name on server-side for early error detection
 if (import.meta.server && packageName.value) {
@@ -49,12 +30,8 @@ if (import.meta.server && !requestedVersion.value && packageName.value) {
   const version = await fetchLatestVersion(packageName.value)
   if (version) {
     setResponseHeader(useRequestEvent()!, 'Cache-Control', 'no-cache')
-    const pathSegments = [...packageName.value.split('/'), 'v', version]
     app.runWithContext(() =>
-      navigateTo(
-        { name: 'docs', params: { path: pathSegments as [string, ...string[]] } },
-        { redirectCode: 302 },
-      ),
+      navigateTo(docsRoute(packageName.value, version), { redirectCode: 302 }),
     )
   }
 }
@@ -63,8 +40,7 @@ watch(
   [requestedVersion, latestVersion, packageName],
   ([version, latest, name]) => {
     if (!version && latest && name) {
-      const pathSegments = [...name.split('/'), 'v', latest]
-      router.replace({ name: 'docs', params: { path: pathSegments as [string, ...string[]] } })
+      router.replace(docsRoute(name, latest))
     }
   },
   { immediate: true },
@@ -125,15 +101,7 @@ const versionUrlPattern = computed(
 )
 
 function docsVersionRoute(version: string): RouteLocationRaw {
-  const name = pkg.value?.name || packageName.value
-  const [firstSegment = name, ...remainingSegments] = name.split('/')
-
-  return {
-    name: 'docs',
-    params: {
-      path: [firstSegment, ...remainingSegments, 'v', version],
-    },
-  }
+  return docsRoute(pkg.value?.name || packageName.value, version)
 }
 
 useCommandPaletteVersionCommands(commandPalettePackageContext, docsVersionRoute)

app/utils/router.ts

@@ -30,6 +30,24 @@ export function packageRoute(
   }
 }
 
+/**
+ * Docs tab route (`/package-docs/...`).
+ *
+ * The docs route uses a single catch-all `path` param. Emit the scoped name as
+ * two segments (`["@org", "name", ...]`) rather than one (`["@org/name", ...]`),
+ * so the URL keeps a literal slash instead of a `%2F`-encoded one.
+ */
+export function docsRoute(packageName: string, version?: string | null): RouteLocationRaw {
+  const { org, name } = splitPackageName(packageName)
+  const nameSegments = org ? [org, name] : [name]
+  const path = version ? [...nameSegments, 'v', version.replace(/\s+/g, '')] : nameSegments
+
+  return {
+    name: 'docs',
+    params: { path: path as [string, ...string[]] },
+  }
+}
+
 /** Full version history page (`/package/.../versions`) */
 export function packageVersionsRoute(packageName: string): RouteLocationRaw {
   const { org, name } = splitPackageName(packageName)

test/nuxt/composables/use-package-route.spec.ts

@@ -80,6 +80,25 @@ describe('usePackageRoute', () => {
       expect(orgName.value).toBeNull()
     })
 
+    it('parses a scoped package whose full name is a single %2F-encoded segment', async () => {
+      await useRouter().push({
+        name: 'docs',
+        params: { path: ['@vitest/pretty-format', 'v', '4.1.10'] },
+      })
+      const { packageName, requestedVersion, orgName } = usePackageRoute()
+      expect(packageName.value).toBe('@vitest/pretty-format')
+      expect(requestedVersion.value).toBe('4.1.10')
+      expect(orgName.value).toBe('vitest')
+    })
+
+    it('parses a scoped single-segment name with no version', async () => {
+      await useRouter().push({ name: 'docs', params: { path: ['@vitest/pretty-format'] } })
+      const { packageName, requestedVersion, orgName } = usePackageRoute()
+      expect(packageName.value).toBe('@vitest/pretty-format')
+      expect(requestedVersion.value).toBeNull()
+      expect(orgName.value).toBe('vitest')
+    })
+
     it('parses an unscoped package with no version', async () => {
       const { packageName, requestedVersion, orgName } = await at('/package-docs/nuxt')
       expect(packageName.value).toBe('nuxt')
@@ -112,6 +131,22 @@ describe('usePackageRoute', () => {
       expect(packageName.value).toBe('nuxt')
       expect(requestedVersion.value).toBe('4.2.0')
     })
+
+    it('round-trips a package literally named "v" via docsRoute', async () => {
+      await useRouter().push(docsRoute('v', '1.0.0'))
+      const { packageName, requestedVersion, orgName } = usePackageRoute()
+      expect(packageName.value).toBe('v')
+      expect(requestedVersion.value).toBe('1.0.0')
+      expect(orgName.value).toBeNull()
+    })
+
+    it('round-trips a scoped package whose name is "v" via docsRoute', async () => {
+      await useRouter().push(docsRoute('@org/v', '1.0.0'))
+      const { packageName, requestedVersion, orgName } = usePackageRoute()
+      expect(packageName.value).toBe('@org/v')
+      expect(requestedVersion.value).toBe('1.0.0')
+      expect(orgName.value).toBe('org')
+    })
   })
 
   describe('diff route (`versionRange` param)', () => {

test/unit/app/utils/router.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { docsRoute } from '~/utils/router'
+
+describe('docsRoute', () => {
+  it('emits a scoped name as two path segments (literal slash, not %2F)', () => {
+    // A single "@org/name" segment would be URL-encoded to "@org%2Fname"; the
+    // docs route must keep the scope slash literal by splitting it into two.
+    expect(docsRoute('@vitest/pretty-format', '4.1.10')).toEqual({
+      name: 'docs',
+      params: { path: ['@vitest', 'pretty-format', 'v', '4.1.10'] },
+    })
+  })
+
+  it('handles an unscoped name with a version', () => {
+    expect(docsRoute('nuxt', '4.2.0')).toEqual({
+      name: 'docs',
+      params: { path: ['nuxt', 'v', '4.2.0'] },
+    })
+  })
+
+  it('omits the version marker when no version is given', () => {
+    expect(docsRoute('@vitest/pretty-format')).toEqual({
+      name: 'docs',
+      params: { path: ['@vitest', 'pretty-format'] },
+    })
+  })
+
+  it('strips whitespace from the version', () => {
+    expect(docsRoute('nuxt', ' 4.2.0 ')).toEqual({
+      name: 'docs',
+      params: { path: ['nuxt', 'v', '4.2.0'] },
+    })
+  })
+
+  it('keeps a package literally named "v" separate from the version marker', () => {
+    expect(docsRoute('v', '1.0.0')).toEqual({
+      name: 'docs',
+      params: { path: ['v', 'v', '1.0.0'] },
+    })
+  })
+
+  it('handles a scoped package whose name is "v"', () => {
+    expect(docsRoute('@org/v', '1.0.0')).toEqual({
+      name: 'docs',
+      params: { path: ['@org', 'v', 'v', '1.0.0'] },
+    })
+  })
+})