From abf8e592c017f5f55d8a780e2dfdca0e433cd00c Mon Sep 17 00:00:00 2001
From: abeer0 <47961062+iiio2@users.noreply.github.com>
Date: Wed, 11 Nov 2026 03:13:55 +0000
Subject: [PATCH 01/10] chore: fix typo in code comment (#3417)

---
 server/api/auth/atproto.get.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/api/auth/atproto.get.ts b/server/api/auth/atproto.get.ts
index 0b58fcc9a1..6888f75b74 100644
--- a/server/api/auth/atproto.get.ts
+++ b/server/api/auth/atproto.get.ts
@@ -193,7 +193,7 @@ function decodeOAuthState(event: H3Event, state: string | null): OAuthStateData
     })
   }
 
-  // The state sting was encoded using encodeOAuthState. No need to protect
+  // The state string was encoded using encodeOAuthState. No need to protect
   // against JSON parsing since the StateStore should ensure it's integrity.
   const decoded = JSON.parse(state) as { data: OAuthStateData; id: string }
   const requestCookieName = `${OAUTH_REQUEST_COOKIE_PREFIX}_${decoded.id}`

From 4b9eb84618a1c74e3c9d0bbbbb96bb9b5fabb56c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 12 Nov 2026 13:15:39 +0000
Subject: [PATCH 02/10] perf: sample 10% of speed insights events (#3436)

---
 app/plugins/vercel-speed-insights.client.ts | 8 ++++++++
 nuxt.config.ts                              | 1 -
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 app/plugins/vercel-speed-insights.client.ts

diff --git a/app/plugins/vercel-speed-insights.client.ts b/app/plugins/vercel-speed-insights.client.ts
new file mode 100644
index 0000000000..2b29d88f58
--- /dev/null
+++ b/app/plugins/vercel-speed-insights.client.ts
@@ -0,0 +1,8 @@
+import { injectSpeedInsights } from '@vercel/speed-insights/nuxt/runtime'
+
+export default defineNuxtPlugin({
+  env: { islands: false },
+  setup() {
+    injectSpeedInsights({ sampleRate: 0.1 })
+  },
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d9aefa1624..ac06bfcb0c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,7 +6,6 @@ const isStorybook = process.env.STORYBOOK === 'true' || process.env.VITEST_STORY
 
 export default defineNuxtConfig({
   modules: [
-    '@vercel/speed-insights',
     '@unocss/nuxt',
     'nuxt-og-image',
     '@nuxtjs/html-validator',

From b077cb7cdbbfb6259b2244d14d02eef50c198b02 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 12 Nov 2026 13:16:14 +0000
Subject: [PATCH 03/10] perf: ignore query in payload isr cache keys (#3437)

---
 nuxt.config.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index ac06bfcb0c..851e7175d0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -216,10 +216,17 @@ export default defineNuxtConfig({
       passQuery: true,
       allowQuery: ['activeTab'],
     }),
-    '/package/:name/_payload.json': getISRConfig(300, { fallback: 'json' }),
-    '/package/:name/v/:version/_payload.json': getISRConfig(300, { fallback: 'json' }),
-    '/package/:org/:name/_payload.json': getISRConfig(300, { fallback: 'json' }),
-    '/package/:org/:name/v/:version/_payload.json': getISRConfig(300, { fallback: 'json' }),
+    // payloads do not depend on the query, including the `_b` build id
+    '/package/:name/_payload.json': getISRConfig(300, { fallback: 'json', allowQuery: [] }),
+    '/package/:name/v/:version/_payload.json': getISRConfig(300, {
+      fallback: 'json',
+      allowQuery: [],
+    }),
+    '/package/:org/:name/_payload.json': getISRConfig(300, { fallback: 'json', allowQuery: [] }),
+    '/package/:org/:name/v/:version/_payload.json': getISRConfig(300, {
+      fallback: 'json',
+      allowQuery: [],
+    }),
     // infinite cache (versioned - doesn't change)
     '/package-code/**': {
       headers: { 'Cache-Control': 'public, s-maxage=31536000, stale-while-revalidate=31536000' },

From 030933df8153631b55db5bb34f8535a0b25224c2 Mon Sep 17 00:00:00 2001
From: Alec Lloyd Probert <55991794+graphieros@users.noreply.github.com>
Date: Thu, 12 Nov 2026 18:16:46 +0000
Subject: [PATCH 04/10] feat(a11y): replace hidden data tables with togglable
 tables for charts (#3430)

---
 app/components/Compare/FacetBarChart.vue      |   1 +
 app/components/Compare/FacetScatterChart.vue  |   3 +
 .../Package/DailyDownloadsHeatmap.vue         | 397 +++++++-----
 app/components/Package/TimelineChart.vue      |   6 +
 app/components/Package/TrendsChart.vue        | 591 ++++++++++--------
 app/components/Package/TrendsDataTable.vue    | 113 ++++
 .../Package/VersionDistribution.vue           |   3 +
 i18n/locales/en.json                          |   2 +
 i18n/locales/fr-FR.json                       |   2 +
 i18n/schema.json                              |   6 +
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  10 +-
 pnpm-workspace.yaml                           |   2 +-
 test/nuxt/a11y.spec.ts                        | 179 ++++++
 14 files changed, 874 insertions(+), 443 deletions(-)
 create mode 100644 app/components/Package/TrendsDataTable.vue

diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index bc52fda4f2..79e373888d 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -142,6 +142,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
     a11y: {
+      includeTable: true,
       translations: {
         keyboardNavigation: $t('package.trends.chart_assistive_text.keyboard_navigation_vertical'),
         tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 634a2cbaab..dd87cd8a91 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -136,6 +136,9 @@ function buildExportFilename(extension: string): string {
 
 const config = computed<VueUiScatterConfig>(() => {
   return {
+    a11y: {
+      includeTable: true,
+    },
     theme: isDarkMode.value ? 'dark' : '',
     userOptions: {
       buttons: {
diff --git a/app/components/Package/DailyDownloadsHeatmap.vue b/app/components/Package/DailyDownloadsHeatmap.vue
index ab4bdef01b..0991d6fb1d 100644
--- a/app/components/Package/DailyDownloadsHeatmap.vue
+++ b/app/components/Package/DailyDownloadsHeatmap.vue
@@ -26,6 +26,13 @@ type DailyDataPoint = {
 
 const props = defineProps<{ packageName: string }>()
 const chartRef = useTemplateRef('chartRef')
+const showDataTable = shallowRef(false)
+const chartPanel = useTemplateRef('chartPanel')
+const { height: renderedChartHeight } = useElementSize(chartPanel)
+const lastChartHeight = shallowRef(0)
+watch(renderedChartHeight, height => {
+  if (height > 0) lastChartHeight.value = height
+})
 
 const { locale, localeProperties } = useI18n()
 const isRTL = computed(() => localeProperties.value.dir === 'rtl')
@@ -219,6 +226,40 @@ const heatmap = computed(() => {
 
 const dataset = computed<VueUiHeatmapDatasetItem[]>(() => heatmap.value.dataset)
 
+const tableRows = computed(() => {
+  const yesterday = addDays(toUtcDay(new Date()), -1)
+  const { weekStarts, dataset: rows, reportedDates, anomalousDates } = heatmap.value
+  const maximum = Math.max(0, ...rows.flatMap(row => row.values))
+
+  return weekStarts.flatMap((weekStart, weekIndex) =>
+    WEEK_DAYS.flatMap((_, dayIndex) => {
+      const date = addDays(parseIsoDate(weekStart), dayIndex)
+      if (date > yesterday) return []
+      const key = toIsoDate(date)
+      const rawValue = rows[dayIndex]?.values[weekIndex] ?? 0
+      const value =
+        reportedDates.has(key) && !anomalousDates.has(key) && rawValue > 0 ? rawValue : null
+      return [
+        {
+          date: date.getTime(),
+          value,
+          color:
+            value == null
+              ? colors.value.bg
+              : `color-mix(in srgb, ${accent.value} ${maximum > 0 ? (value / maximum) * 100 : 0}%, ${colors.value.bg})`,
+        },
+      ]
+    }),
+  )
+})
+
+const tableDataset = computed(() => [
+  {
+    name: props.packageName,
+    series: tableRows.value.map(row => row.value),
+  },
+])
+
 function computeMinMax(value: number, maxVal: number, date: string | null) {
   return {
     value: compactNumberFormatter.value.format(value),
@@ -607,174 +648,208 @@ function getLegendContent(svg: VueUiHeatmapSvgSlotProps['svg']) {
     </div>
     <SkeletonBlock v-else-if="isLoading" class="aspect-[676/172]" />
     <div v-else-if="source.length" class="w-full overflow-visible">
-      <ClientOnly>
-        <div>
-          <VueUiHeatmap ref="chartRef" :dataset="dataset" :config="config" class="[direction:ltr]">
-            <!-- Keyboard navigation hint -->
-            <template #hint="{ isVisible }">
-              <p
-                v-if="isVisible"
-                class="text-accent text-xs -mt-5 text-center px-2"
-                aria-hidden="true"
-              >
-                {{ $t('package.trends.downloads_heatmap.nav_hint') }}
-              </p>
-            </template>
-
-            <template #svg="{ svg }">
-              <template v-for="cell in svg.cells" :key="cell.datapoint.id">
-                <g v-if="isUnrecorded(cell)" pointer-events="none">
-                  <rect
-                    :x="cell.x + 2"
-                    :y="cell.y + 2"
-                    :width="Math.max(0, cell.width - 4)"
-                    :height="Math.max(0, cell.height - 4)"
-                    :fill="colors.bg"
-                  />
-                  <path
-                    :d="getMissingDaySymbol(cell)"
-                    :stroke="isDarkMode ? colors.borderHover : colors.border"
-                    stroke-linecap="round"
-                    :stroke-width="showUnknownDay(cell) ? 1.5 : 2"
-                    fill="none"
-                  />
-                </g>
+      <div class="flex justify-end mb-3">
+        <SettingsToggle v-model="showDataTable" :label="$t('package.trends.table_view')" />
+      </div>
+      <PackageTrendsDataTable
+        v-if="showDataTable"
+        :dataset="tableDataset"
+        :package-names="[packageName]"
+        :dates="tableRows.map(row => row.date)"
+        :metric-label="$t('package.trends.items.downloads')"
+        :date-formatter="tooltipDateFormatter"
+        :max-height="lastChartHeight || 269"
+      >
+        <template #before-value="{ index }">
+          <span
+            class="h-3.5 w-3.5 shrink-0 border border-border inline-flex items-center justify-center"
+            :style="{ backgroundColor: tableRows[index]?.color }"
+            aria-hidden="true"
+          >
+            <span
+              v-if="tableRows[index]?.value == null"
+              class="i-lucide:x h-3 w-3 text-fg-subtle"
+            />
+          </span>
+        </template>
+      </PackageTrendsDataTable>
+      <div v-else ref="chartPanel">
+        <ClientOnly>
+          <div>
+            <VueUiHeatmap
+              ref="chartRef"
+              :dataset="dataset"
+              :config="config"
+              class="[direction:ltr]"
+            >
+              <!-- Keyboard navigation hint -->
+              <template #hint="{ isVisible }">
+                <p
+                  v-if="isVisible"
+                  class="text-accent text-xs -mt-5 text-center px-2"
+                  aria-hidden="true"
+                >
+                  {{ $t('package.trends.downloads_heatmap.nav_hint') }}
+                </p>
               </template>
 
-              <!-- BOTTOM LEGEND -->
-              <template v-for="legend in [getLegendContent(svg)]" :key="'legend'">
-                <!-- Anomalies -->
-                <path v-bind="legend.anomalies.marker" />
-                <text v-bind="legend.anomalies.text">
-                  {{ $t('package.trends.downloads_heatmap.legend.anomalies') }}
-                </text>
-
-                <!-- Max -->
-                <rect v-bind="legend.max.marker" />
-                <text v-bind="legend.max.text">
-                  {{
-                    $t('package.trends.downloads_heatmap.legend.max', {
-                      value: minMax.max.value,
-                      date: minMax.max.date,
-                    })
-                  }}
-                </text>
-
-                <!-- Min -->
-                <rect v-bind="legend.min.marker" />
-                <text v-bind="legend.min.text">
-                  {{
-                    $t('package.trends.downloads_heatmap.legend.min', {
-                      value: minMax.min.value,
-                      date: minMax.min.date,
+              <template #svg="{ svg }">
+                <template v-for="cell in svg.cells" :key="cell.datapoint.id">
+                  <g v-if="isUnrecorded(cell)" pointer-events="none">
+                    <rect
+                      :x="cell.x + 2"
+                      :y="cell.y + 2"
+                      :width="Math.max(0, cell.width - 4)"
+                      :height="Math.max(0, cell.height - 4)"
+                      :fill="colors.bg"
+                    />
+                    <path
+                      :d="getMissingDaySymbol(cell)"
+                      :stroke="isDarkMode ? colors.borderHover : colors.border"
+                      stroke-linecap="round"
+                      :stroke-width="showUnknownDay(cell) ? 1.5 : 2"
+                      fill="none"
+                    />
+                  </g>
+                </template>
+
+                <!-- BOTTOM LEGEND -->
+                <template v-for="legend in [getLegendContent(svg)]" :key="'legend'">
+                  <!-- Anomalies -->
+                  <path v-bind="legend.anomalies.marker" />
+                  <text v-bind="legend.anomalies.text">
+                    {{ $t('package.trends.downloads_heatmap.legend.anomalies') }}
+                  </text>
+
+                  <!-- Max -->
+                  <rect v-bind="legend.max.marker" />
+                  <text v-bind="legend.max.text">
+                    {{
+                      $t('package.trends.downloads_heatmap.legend.max', {
+                        value: minMax.max.value,
+                        date: minMax.max.date,
+                      })
+                    }}
+                  </text>
+
+                  <!-- Min -->
+                  <rect v-bind="legend.min.marker" />
+                  <text v-bind="legend.min.text">
+                    {{
+                      $t('package.trends.downloads_heatmap.legend.min', {
+                        value: minMax.min.value,
+                        date: minMax.min.date,
+                      })
+                    }}
+                  </text>
+                </template>
+
+                <!-- Print watermark-->
+                <g
+                  v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
+                  v-html="
+                    drawSmallNpmxLogoAndTaglineWatermark({
+                      svg: {
+                        ...svg,
+                      },
+                      colors: watermarkColors,
+                      translateFn: $t,
                     })
-                  }}
-                </text>
+                  "
+                />
               </template>
 
-              <!-- Print watermark-->
-              <g
-                v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
-                v-html="
-                  drawSmallNpmxLogoAndTaglineWatermark({
-                    svg: {
-                      ...svg,
-                    },
-                    colors: watermarkColors,
-                    translateFn: $t,
-                  })
-                "
-              />
-            </template>
-
-            <!-- Custom tooltip -->
-            <template #tooltip="{ datapoint, seriesIndex, series }">
-              <div class="px-1 text-start font-mono">
-                <div class="mt-0.5 text-xs text-gray-900 dark:text-gray-100">
-                  {{ getTooltipDate(datapoint, seriesIndex, series) }}
-                </div>
-                <div class="mt-2 flex items-center gap-2">
-                  <span
-                    class="h-3.5 w-3.5 shrink-0 relative"
-                    :style="{
-                      backgroundColor: datapoint.color,
-                      border: `0.5px solid ${adaptColorToBackground(datapoint.color, {
-                        dark: isDarkMode ? '#3A3A3A' : '#6A6A6A',
-                        light: isDarkMode ? '#6A6A6A' : '#CCCCCC',
-                      })}`,
-                    }"
-                  >
-                    <svg
-                      v-if="
-                        !isUnknownTooltipDay(datapoint, seriesIndex, series) && !datapoint.value
-                      "
-                      viewBox="0 0 16 16"
-                      class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 w-full p-0.25"
+              <!-- Custom tooltip -->
+              <template #tooltip="{ datapoint, seriesIndex, series }">
+                <div class="px-1 text-start font-mono">
+                  <div class="mt-0.5 text-xs text-gray-900 dark:text-gray-100">
+                    {{ getTooltipDate(datapoint, seriesIndex, series) }}
+                  </div>
+                  <div class="mt-2 flex items-center gap-2">
+                    <span
+                      class="h-3.5 w-3.5 shrink-0 relative"
+                      :style="{
+                        backgroundColor: datapoint.color,
+                        border: `0.5px solid ${adaptColorToBackground(datapoint.color, {
+                          dark: isDarkMode ? '#3A3A3A' : '#6A6A6A',
+                          light: isDarkMode ? '#6A6A6A' : '#CCCCCC',
+                        })}`,
+                      }"
                     >
-                      <path
-                        d="M8 8 1 1M8 8 15 15M1 15 15 1"
-                        :stroke="isDarkMode ? colors.borderHover : colors.border"
-                        stroke-width="2"
-                        fill="none"
-                      />
-                    </svg>
-                  </span>
-                  <span class="text-sm text-gray-700 dark:text-gray-300">
-                    {{
-                      isUnknownTooltipDay(datapoint, seriesIndex, series)
-                        ? '-'
-                        : compactNumberFormatter.format(Number(datapoint.value) || 0)
-                    }}
-                  </span>
+                      <svg
+                        v-if="
+                          !isUnknownTooltipDay(datapoint, seriesIndex, series) && !datapoint.value
+                        "
+                        viewBox="0 0 16 16"
+                        class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 w-full p-0.25"
+                      >
+                        <path
+                          d="M8 8 1 1M8 8 15 15M1 15 15 1"
+                          :stroke="isDarkMode ? colors.borderHover : colors.border"
+                          stroke-width="2"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                    <span class="text-sm text-gray-700 dark:text-gray-300">
+                      {{
+                        isUnknownTooltipDay(datapoint, seriesIndex, series)
+                          ? '-'
+                          : compactNumberFormatter.format(Number(datapoint.value) || 0)
+                      }}
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </template>
-
-            <!-- Chart context menu -->
-            <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
-              <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
-            </template>
-            <template #optionCsv>
-              <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
-            </template>
-            <template #custom-menu-before>
-              <ChartCopyPngButton
-                :copied="copiedPng"
-                :copying="isCopyingPng"
-                @click="copyChartPng"
-              />
-            </template>
-            <template #optionFullscreen="{ isFullscreen }">
-              <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
-            </template>
-            <template #optionImg>
-              <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
-            </template>
-            <template #optionSvg>
-              <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
-            </template>
-
-            <template #optionAltCopy>
-              <span
-                class="w-6 h-6"
-                :class="
-                  copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
-                "
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-
-            <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
-              <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
-            </template>
-          </VueUiHeatmap>
-        </div>
-        <template #fallback>
-          <SkeletonBlock class="aspect-[676/172]" />
-        </template>
-      </ClientOnly>
+              </template>
+
+              <!-- Chart context menu -->
+              <template #menuIcon="{ isOpen }">
+                <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+                <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
+              </template>
+              <template #optionCsv>
+                <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
+              </template>
+              <template #custom-menu-before>
+                <ChartCopyPngButton
+                  :copied="copiedPng"
+                  :copying="isCopyingPng"
+                  @click="copyChartPng"
+                />
+              </template>
+              <template #optionFullscreen="{ isFullscreen }">
+                <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
+              </template>
+              <template #optionImg>
+                <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
+              </template>
+              <template #optionSvg>
+                <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
+              </template>
+
+              <template #optionAltCopy>
+                <span
+                  class="w-6 h-6"
+                  :class="
+                    copied
+                      ? 'i-lucide:check text-accent'
+                      : 'i-lucide:person-standing text-fg-subtle'
+                  "
+                  style="pointer-events: none"
+                  aria-hidden="true"
+                />
+              </template>
+
+              <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
+                <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
+              </template>
+            </VueUiHeatmap>
+          </div>
+          <template #fallback>
+            <SkeletonBlock class="aspect-[676/172]" />
+          </template>
+        </ClientOnly>
+      </div>
     </div>
     <p v-else class="py-6 text-sm text-fg-subtle">
       {{ $t('package.trends.no_data') }}
diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue
index 89f27934ed..f312cbfce1 100644
--- a/app/components/Package/TimelineChart.vue
+++ b/app/components/Package/TimelineChart.vue
@@ -451,6 +451,9 @@ const xAxisLabelsModulo = computed(() => {
 
 const config = computed<VueUiXyConfig>(() => {
   return {
+    a11y: {
+      includeTable: true,
+    },
     theme: isDarkMode.value ? 'dark' : '',
     transitions: {
       pauseOnDatasetChange: true, // prevents transitions on axis labels when switching from install size to dependencies
@@ -721,6 +724,9 @@ const indexSelection = computed(() => {
 })
 
 const stackbarConfig = computed<VueUiStackbarConfig>(() => ({
+  a11y: {
+    includeTable: true,
+  },
   theme: isDarkMode.value ? 'dark' : '',
   useCssAnimation: false,
   userOptions: {
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 09acdd2877..a8789c36c3 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -83,6 +83,14 @@ const isZoomed = shallowRef(false)
 const zoomStartIndex = shallowRef(0)
 const zoomEndIndex = shallowRef<number | null>(null)
 
+const showDataTable = shallowRef(false)
+const chartPanel = useTemplateRef('chartPanel')
+const { height: renderedChartHeight } = useElementSize(chartPanel)
+const lastChartHeight = shallowRef(0)
+watch(renderedChartHeight, height => {
+  if (height > 0) lastChartHeight.value = height
+})
+
 const chartRef = useTemplateRef('chartRef')
 const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
 
@@ -219,6 +227,10 @@ const normalisedDataset = computed(() => {
   return data
 })
 
+const hasEstimatedTableEndpoint = computed(
+  () => supportsEstimation.value && !isEndDateOnPeriodEnd.value,
+)
+
 function getPackageNameForSeriesIndex(index: number): string {
   return (
     effectivePackageNamesForMetric.value[index] ??
@@ -1658,7 +1670,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
     :aria-busy="activeMetricState.pending ? 'true' : 'false'"
   >
     <TabRoot
-      v-if="isMultiPackageMode"
+      v-if="isMultiPackageMode && !showDataTable"
       v-model="chartLayout"
       id-prefix="chart-layout"
       class="mt-4 mb-8"
@@ -1905,294 +1917,323 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
       {{ $t('package.trends.title') }} — {{ activeMetricDef?.label }}
     </h2>
 
+    <div v-if="chartData.dataset" class="flex justify-end mb-3">
+      <SettingsToggle v-model="showDataTable" :label="$t('package.trends.table_view')" />
+    </div>
+
     <!-- Chart panel (active metric) -->
     <div role="region" aria-labelledby="trends-chart-title">
-      <ClientOnly v-if="chartData.dataset">
-        <div
-          v-if="isSparklineLayout"
-          id="split-chart-layout-panel"
-          :role="isMultiPackageMode ? 'tabpanel' : undefined"
-          :aria-labelledby="isMultiPackageMode ? 'split-chart-layout-tab' : undefined"
-        >
-          <ChartSplitSparkline
-            :dataset="normalisedDataset"
-            :dates="chartData.dates"
-            :datetimeFormatterOptions
-            :showLastDatapointEstimation="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd"
-            :granularity="selectedGranularity"
-            :large-package-series="largePackageSeries"
-          />
-        </div>
-
-        <div
-          :data-pending="pending"
-          :data-minimap-visible="maxDatapoints > 6"
-          v-else
-          id="combined-chart-layout-panel"
-          :role="isMultiPackageMode ? 'tabpanel' : undefined"
-          :aria-labelledby="isMultiPackageMode ? 'combined-chart-layout-tab' : undefined"
-        >
-          <VueUiXy
-            ref="chartRef"
-            :dataset="normalisedDataset"
-            :config="chartConfig"
-            :class="{
-              '[direction:ltr]': true,
-              'no-transition': isResizing,
-            }"
-            @zoomStart="setZoomStart"
-            @zoomEnd="setZoomEnd"
-            @zoomReset="resetZoomTracking"
+      <PackageTrendsDataTable
+        v-if="showDataTable && chartData.dataset"
+        :dataset="normalisedDataset"
+        :package-names="effectivePackageNamesForMetric"
+        :dates="chartData.dates"
+        :metric-label="activeMetricDef?.label ?? ''"
+        :date-formatter="tooltipDateFormatter"
+        :max-height="lastChartHeight || chartHeight"
+        :estimated-last-value="hasEstimatedTableEndpoint"
+      />
+      <div v-else-if="chartData.dataset" ref="chartPanel">
+        <ClientOnly>
+          <div
+            v-if="isSparklineLayout"
+            id="split-chart-layout-panel"
+            :role="isMultiPackageMode ? 'tabpanel' : undefined"
+            :aria-labelledby="isMultiPackageMode ? 'split-chart-layout-tab' : undefined"
           >
-            <!-- Keyboard navigation hint -->
-            <template #hint="{ isVisible }">
-              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
-                {{ $t('compare.packages.line_chart_nav_hint') }}
-              </p>
-            </template>
-
-            <!-- Injecting custom svg elements on the bottom layer -->
-            <template #svg-underlayer="{ svg }">
-              <g v-if="!pending && isDownloadsMetric" pointer-events="none" aria-hidden="true">
-                <template v-for="(gap, index) in getDownloadChartGaps(svg)" :key="index">
-                  <defs>
-                    <pattern
-                      :id="`${gapPatternId}-${index}`"
-                      width="6"
-                      height="6"
-                      patternUnits="userSpaceOnUse"
-                      patternTransform="rotate(45)"
-                    >
-                      <line
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="10"
-                        :stroke="colors.borderHover"
-                        stroke-width="5"
-                      />
-                    </pattern>
-                  </defs>
-                  <rect
-                    :x="gap.x"
-                    :y="gap.y"
-                    :width="gap.width"
-                    :height="gap.height"
-                    :fill="`url(#${gapPatternId}-${index})`"
-                    opacity="0.45"
-                  />
-                  <line
-                    v-for="x in [gap.x, gap.x + gap.width]"
-                    :key="x"
-                    :x1="x"
-                    :x2="x"
-                    :y1="gap.y"
-                    :y2="gap.y + gap.height"
-                    :stroke="colors.borderHover"
-                    stroke-width="0.5"
-                  />
-                </template>
-              </g>
-            </template>
-
-            <!-- Injecting custom svg elements on the top layer -->
-            <template #svg="{ svg }">
-              <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
-              <g
-                v-if="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd && !isZoomed"
-                v-html="drawEstimationLine(svg)"
-              />
+            <ChartSplitSparkline
+              :dataset="normalisedDataset"
+              :dates="chartData.dates"
+              :datetimeFormatterOptions
+              :showLastDatapointEstimation="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd"
+              :granularity="selectedGranularity"
+              :large-package-series="largePackageSeries"
+            />
+          </div>
 
-              <!-- Flat dashed tail for large packages when the final downloads bucket has no data -->
-              <g v-if="!pending && isDownloadsMetric" v-html="drawNoDataTail(svg)" />
-
-              <!-- Asterisk explaination for the last label value when the last value is null -->
-              <g v-if="!pending && isDownloadsMetric && selectedGranularity === 'daily'">
-                <text
-                  :x="svg.drawingArea.left"
-                  :y="svg.height - 12"
-                  :fill="colors.fgSubtle"
-                  :font-size="16"
-                  text-anchor="start"
+          <div
+            :data-pending="pending"
+            :data-minimap-visible="maxDatapoints > 6"
+            v-else
+            id="combined-chart-layout-panel"
+            :role="isMultiPackageMode ? 'tabpanel' : undefined"
+            :aria-labelledby="isMultiPackageMode ? 'combined-chart-layout-tab' : undefined"
+          >
+            <VueUiXy
+              ref="chartRef"
+              :dataset="normalisedDataset"
+              :config="chartConfig"
+              :class="{
+                '[direction:ltr]': true,
+                'no-transition': isResizing,
+              }"
+              @zoomStart="setZoomStart"
+              @zoomEnd="setZoomEnd"
+              @zoomReset="resetZoomTracking"
+            >
+              <!-- Keyboard navigation hint -->
+              <template #hint="{ isVisible }">
+                <p
+                  v-if="isVisible"
+                  class="text-accent text-xs -mt-6 text-center"
+                  aria-hidden="true"
                 >
-                  {{ $t('package.trends.last_recorded_value') }}
-                </text>
-              </g>
-
-              <!-- Last value label for all other cases -->
-              <g v-if="!pending" v-html="drawLastDatapointLabel(svg)" />
-
-              <!-- Inject legend during SVG print only -->
-              <g v-if="svg.isPrintingSvg" v-html="drawSvgPrintLegend(svg)" />
-
-              <!-- Inject npmx logo & tagline during SVG and PNG print -->
-              <g
-                v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
-                v-html="
-                  drawNpmxLogoAndTaglineWatermark({
-                    svg,
-                    colors: watermarkColors,
-                    translateFn: $t,
-                    positioning: 'bottom',
-                  })
-                "
-              />
+                  {{ $t('compare.packages.line_chart_nav_hint') }}
+                </p>
+              </template>
+
+              <!-- Injecting custom svg elements on the bottom layer -->
+              <template #svg-underlayer="{ svg }">
+                <g v-if="!pending && isDownloadsMetric" pointer-events="none" aria-hidden="true">
+                  <template v-for="(gap, index) in getDownloadChartGaps(svg)" :key="index">
+                    <defs>
+                      <pattern
+                        :id="`${gapPatternId}-${index}`"
+                        width="6"
+                        height="6"
+                        patternUnits="userSpaceOnUse"
+                        patternTransform="rotate(45)"
+                      >
+                        <line
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="10"
+                          :stroke="colors.borderHover"
+                          stroke-width="5"
+                        />
+                      </pattern>
+                    </defs>
+                    <rect
+                      :x="gap.x"
+                      :y="gap.y"
+                      :width="gap.width"
+                      :height="gap.height"
+                      :fill="`url(#${gapPatternId}-${index})`"
+                      opacity="0.45"
+                    />
+                    <line
+                      v-for="x in [gap.x, gap.x + gap.width]"
+                      :key="x"
+                      :x1="x"
+                      :x2="x"
+                      :y1="gap.y"
+                      :y2="gap.y + gap.height"
+                      :stroke="colors.borderHover"
+                      stroke-width="0.5"
+                    />
+                  </template>
+                </g>
+              </template>
+
+              <!-- Injecting custom svg elements on the top layer -->
+              <template #svg="{ svg }">
+                <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
+                <g
+                  v-if="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd && !isZoomed"
+                  v-html="drawEstimationLine(svg)"
+                />
 
-              <!-- Overlay covering the chart area to hide line resizing when switching granularities recalculates VueUiXy scaleMax when estimation lines are necessary -->
-              <rect
-                v-if="pending"
-                :x="svg.drawingArea.left - 3"
-                :y="svg.drawingArea.top - 12"
-                :width="svg.drawingArea.width + 15"
-                :height="svg.drawingArea.height + 48"
-                :fill="colors.bg"
-              />
-            </template>
-
-            <!-- Subtle gradient applied for a unique series (chart modal) -->
-            <template #area-gradient="{ series: chartModalSeries, id: gradientId }">
-              <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
-                <stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
-                <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
-              </linearGradient>
-            </template>
-
-            <!-- Custom legend for multiple series -->
-            <template #legend="{ legend }">
-              <div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
-                <template v-if="isMultiPackageMode">
-                  <button
-                    v-for="datapoint in legend"
-                    :key="datapoint.name"
-                    :aria-pressed="datapoint.isSegregated"
-                    :aria-label="datapoint.name"
-                    type="button"
-                    class="flex shrink-0 items-center gap-1 whitespace-nowrap"
-                    @click="datapoint.segregate()"
+                <!-- Flat dashed tail for large packages when the final downloads bucket has no data -->
+                <g v-if="!pending && isDownloadsMetric" v-html="drawNoDataTail(svg)" />
+
+                <!-- Asterisk explaination for the last label value when the last value is null -->
+                <g v-if="!pending && isDownloadsMetric && selectedGranularity === 'daily'">
+                  <text
+                    :x="svg.drawingArea.left"
+                    :y="svg.height - 12"
+                    :fill="colors.fgSubtle"
+                    :font-size="16"
+                    text-anchor="start"
                   >
-                    <div class="h-3 w-3 shrink-0">
-                      <svg viewBox="0 0 2 2" class="w-full">
-                        <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
-                      </svg>
-                    </div>
+                    {{ $t('package.trends.last_recorded_value') }}
+                  </text>
+                </g>
+
+                <!-- Last value label for all other cases -->
+                <g v-if="!pending" v-html="drawLastDatapointLabel(svg)" />
+
+                <!-- Inject legend during SVG print only -->
+                <g v-if="svg.isPrintingSvg" v-html="drawSvgPrintLegend(svg)" />
+
+                <!-- Inject npmx logo & tagline during SVG and PNG print -->
+                <g
+                  v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
+                  v-html="
+                    drawNpmxLogoAndTaglineWatermark({
+                      svg,
+                      colors: watermarkColors,
+                      translateFn: $t,
+                      positioning: 'bottom',
+                    })
+                  "
+                />
 
-                    <span
-                      class="shrink-0 whitespace-nowrap"
-                      :style="{
-                        textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                      }"
+                <!-- Overlay covering the chart area to hide line resizing when switching granularities recalculates VueUiXy scaleMax when estimation lines are necessary -->
+                <rect
+                  v-if="pending"
+                  :x="svg.drawingArea.left - 3"
+                  :y="svg.drawingArea.top - 12"
+                  :width="svg.drawingArea.width + 15"
+                  :height="svg.drawingArea.height + 48"
+                  :fill="colors.bg"
+                />
+              </template>
+
+              <!-- Subtle gradient applied for a unique series (chart modal) -->
+              <template #area-gradient="{ series: chartModalSeries, id: gradientId }">
+                <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
+                  <stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
+                  <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
+                </linearGradient>
+              </template>
+
+              <!-- Custom legend for multiple series -->
+              <template #legend="{ legend }">
+                <div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
+                  <template v-if="isMultiPackageMode">
+                    <button
+                      v-for="datapoint in legend"
+                      :key="datapoint.name"
+                      :aria-pressed="datapoint.isSegregated"
+                      :aria-label="datapoint.name"
+                      type="button"
+                      class="flex shrink-0 items-center gap-1 whitespace-nowrap"
+                      @click="datapoint.segregate()"
                     >
-                      {{ datapoint.name }}
-                    </span>
-                  </button>
-                </template>
-
-                <!-- Single series legend (no user interaction) -->
-                <template v-else-if="legend.length > 0">
-                  <div class="flex shrink-0 items-center gap-1 whitespace-nowrap">
-                    <div class="h-3 w-3 shrink-0">
-                      <svg viewBox="0 0 2 2" class="w-full">
-                        <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="legend[0]?.color" />
-                      </svg>
+                      <div class="h-3 w-3 shrink-0">
+                        <svg viewBox="0 0 2 2" class="w-full">
+                          <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
+                        </svg>
+                      </div>
+
+                      <span
+                        class="shrink-0 whitespace-nowrap"
+                        :style="{
+                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
+                        }"
+                      >
+                        {{ datapoint.name }}
+                      </span>
+                    </button>
+                  </template>
+
+                  <!-- Single series legend (no user interaction) -->
+                  <template v-else-if="legend.length > 0">
+                    <div class="flex shrink-0 items-center gap-1 whitespace-nowrap">
+                      <div class="h-3 w-3 shrink-0">
+                        <svg viewBox="0 0 2 2" class="w-full">
+                          <rect
+                            x="0"
+                            y="0"
+                            width="2"
+                            height="2"
+                            rx="0.3"
+                            :fill="legend[0]?.color"
+                          />
+                        </svg>
+                      </div>
+                      <span class="shrink-0 whitespace-nowrap">
+                        {{ legend[0]?.name }}
+                      </span>
                     </div>
-                    <span class="shrink-0 whitespace-nowrap">
-                      {{ legend[0]?.name }}
+                  </template>
+
+                  <!-- Estimation extra legend item -->
+                  <div
+                    class="flex shrink-0 items-center gap-1 whitespace-nowrap"
+                    v-if="supportsEstimation || hasDashedSegments"
+                  >
+                    <svg viewBox="0 0 20 2" width="20" class="shrink-0">
+                      <line
+                        x1="0"
+                        y1="1"
+                        x2="20"
+                        y2="1"
+                        :stroke="colors.fg"
+                        stroke-dasharray="4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span class="shrink-0 whitespace-nowrap text-fg-subtle">
+                      {{ $t('package.trends.legend_estimation') }}
                     </span>
                   </div>
-                </template>
-
-                <!-- Estimation extra legend item -->
-                <div
-                  class="flex shrink-0 items-center gap-1 whitespace-nowrap"
-                  v-if="supportsEstimation || hasDashedSegments"
-                >
-                  <svg viewBox="0 0 20 2" width="20" class="shrink-0">
-                    <line
-                      x1="0"
-                      y1="1"
-                      x2="20"
-                      y2="1"
-                      :stroke="colors.fg"
-                      stroke-dasharray="4"
-                      stroke-linecap="round"
-                    />
-                  </svg>
-                  <span class="shrink-0 whitespace-nowrap text-fg-subtle">
-                    {{ $t('package.trends.legend_estimation') }}
-                  </span>
                 </div>
-              </div>
-            </template>
-
-            <!-- Custom minimap reset button -->
-            <template #reset-action="{ reset: resetMinimap }">
-              <button
-                type="button"
-                aria-label="reset minimap"
-                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-16 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
-                style="pointer-events: all !important"
-                @click="resetMinimap"
-              >
-                <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
-              </button>
-            </template>
-
-            <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
-              <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
-            </template>
-            <template #optionCsv>
-              <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
-            </template>
-            <template #custom-menu-before>
-              <ChartCopyPngButton
-                :copied="copiedPng"
-                :copying="isCopyingPng"
-                @click="copyChartPng"
-              />
-            </template>
-            <template #optionFullscreen="{ isFullscreen }">
-              <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
-            </template>
-            <template #optionImg>
-              <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
-            </template>
-            <template #optionSvg>
-              <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
-            </template>
-            <template #optionStack="{ isStack }">
-              <span
-                v-if="isStack"
-                class="i-lucide:layers-2 text-fg-subtle w-6 h-6 pointer-events-none"
-                aria-hidden="true"
-              />
-              <span
-                v-else
-                class="i-lucide:chart-line text-fg-subtle w-6 h-6 pointer-events-none"
-                aria-hidden="true"
-              />
-            </template>
+              </template>
+
+              <!-- Custom minimap reset button -->
+              <template #reset-action="{ reset: resetMinimap }">
+                <button
+                  type="button"
+                  aria-label="reset minimap"
+                  class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-16 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                  style="pointer-events: all !important"
+                  @click="resetMinimap"
+                >
+                  <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
+                </button>
+              </template>
+
+              <template #menuIcon="{ isOpen }">
+                <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+                <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
+              </template>
+              <template #optionCsv>
+                <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
+              </template>
+              <template #custom-menu-before>
+                <ChartCopyPngButton
+                  :copied="copiedPng"
+                  :copying="isCopyingPng"
+                  @click="copyChartPng"
+                />
+              </template>
+              <template #optionFullscreen="{ isFullscreen }">
+                <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
+              </template>
+              <template #optionImg>
+                <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
+              </template>
+              <template #optionSvg>
+                <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
+              </template>
+              <template #optionStack="{ isStack }">
+                <span
+                  v-if="isStack"
+                  class="i-lucide:layers-2 text-fg-subtle w-6 h-6 pointer-events-none"
+                  aria-hidden="true"
+                />
+                <span
+                  v-else
+                  class="i-lucide:chart-line text-fg-subtle w-6 h-6 pointer-events-none"
+                  aria-hidden="true"
+                />
+              </template>
 
-            <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
-              <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
-            </template>
-            <template #optionAltCopy>
-              <span
-                class="w-6 h-6"
-                :class="
-                  copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
-                "
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-          </VueUiXy>
-        </div>
+              <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
+                <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
+              </template>
+              <template #optionAltCopy>
+                <span
+                  class="w-6 h-6"
+                  :class="
+                    copied
+                      ? 'i-lucide:check text-accent'
+                      : 'i-lucide:person-standing text-fg-subtle'
+                  "
+                  style="pointer-events: none"
+                  aria-hidden="true"
+                />
+              </template>
+            </VueUiXy>
+          </div>
 
-        <template #fallback>
-          <div class="min-h-[260px]" />
-        </template>
-      </ClientOnly>
+          <template #fallback>
+            <div class="min-h-[260px]" />
+          </template>
+        </ClientOnly>
+      </div>
 
       <div
         v-if="!chartData.dataset && !activeMetricState.pending"
@@ -2212,7 +2253,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
     </div>
 
     <!-- Chart embedding -->
-    <div v-if="isDownloadsMetric && !!chartData.dataset && !hideControls">
+    <div v-if="isDownloadsMetric && !!chartData.dataset && !hideControls" class="mt-4">
       <div class="flex flex-col gap-2">
         <button
           type="button"
diff --git a/app/components/Package/TrendsDataTable.vue b/app/components/Package/TrendsDataTable.vue
new file mode 100644
index 0000000000..0fffda8961
--- /dev/null
+++ b/app/components/Package/TrendsDataTable.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const props = defineProps<{
+  dataset: { name: string; series: (number | null | undefined)[] }[]
+  packageNames: string[]
+  dates: number[]
+  metricLabel: string
+  dateFormatter: Intl.DateTimeFormat
+  estimatedLastValue?: boolean
+  maxHeight: number
+}>()
+
+const tableNumberFormatter = useCompactNumberFormatter()
+const estimationNoteId = useId()
+
+function isEstimatedValue(index: number, seriesIndex: number): boolean {
+  const series = props.dataset[seriesIndex]?.series ?? []
+  return !!props.estimatedLastValue && index === series.length - 1 && series[index] != null
+}
+
+const hasEstimatedValues = computed(() =>
+  props.dataset.some(
+    (series, index) =>
+      series.series.length <= props.dates.length &&
+      isEstimatedValue(series.series.length - 1, index),
+  ),
+)
+</script>
+
+<template>
+  <div
+    class="overflow-auto rounded-md border border-border focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
+    :style="{ maxHeight: `${maxHeight}px` }"
+    tabindex="0"
+    role="region"
+    :aria-label="$t('package.trends.chart_assistive_text.table_caption')"
+  >
+    <table class="w-full border-separate border-spacing-0 text-start text-sm font-mono">
+      <caption class="sr-only">
+        {{
+          $t('package.trends.title')
+        }}
+        —
+        {{
+          metricLabel
+        }}
+      </caption>
+      <thead class="sticky top-0 z-1 bg-bg-subtle">
+        <tr>
+          <th
+            :colspan="dataset.length + 1"
+            scope="colgroup"
+            class="border-b border-border bg-bg-subtle px-3 py-3 text-start text-xs font-medium text-fg-muted"
+          >
+            {{ metricLabel }}
+          </th>
+        </tr>
+        <tr>
+          <th
+            scope="col"
+            class="border-b border-border bg-bg-subtle px-3 py-3 text-start text-xs font-medium text-fg-muted"
+          >
+            {{ $t('package.trends.date') }}
+          </th>
+          <th
+            v-for="(series, index) in dataset"
+            :key="index"
+            scope="col"
+            class="border-b border-border bg-bg-subtle px-3 py-3 text-end text-xs font-medium text-fg-muted whitespace-nowrap"
+          >
+            {{ packageNames[index] ?? series.name }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(date, index) in dates"
+          :key="date"
+          class="[&:not(:last-child)>*]:border-b [&>*]:border-border hover:bg-bg-subtle"
+        >
+          <th scope="row" class="px-3 py-2 text-start font-normal whitespace-nowrap">
+            {{ dateFormatter.format(date) }}
+          </th>
+          <td
+            v-for="(series, seriesIndex) in dataset"
+            :key="seriesIndex"
+            :aria-describedby="isEstimatedValue(index, seriesIndex) ? estimationNoteId : undefined"
+            class="px-3 py-2 text-end tabular-nums whitespace-nowrap"
+          >
+            <span class="inline-flex items-center justify-end gap-2">
+              <slot name="before-value" :index="index" :series-index="seriesIndex" />
+              <span>
+                {{
+                  series.series[index] == null
+                    ? $t('package.trends.no_data_short')
+                    : tableNumberFormatter.format(series.series[index])
+                }}
+              </span>
+              <span
+                v-if="isEstimatedValue(index, seriesIndex)"
+                class="text-xs text-fg-subtle"
+                aria-hidden="true"
+                >*</span
+              >
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="hasEstimatedValues" :id="estimationNoteId" class="px-3 py-2 text-xs text-fg-subtle">
+      * {{ $t('package.trends.legend_estimation') }}
+    </p>
+  </div>
+</template>
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 25e92855d1..05ea134e82 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -156,6 +156,9 @@ const isOrderedByDownloads = computed(
 )
 
 const barConfig = computed<VueUiHorizontalBarConfig>(() => ({
+  a11y: {
+    includeTable: true,
+  },
   userOptions: {
     buttons: {
       pdf: false,
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index babf83d554..acb9f3e050 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -779,9 +779,11 @@
         "table_available": "A data table for this chart is available below.",
         "table_caption": "Chart data table"
       },
+      "table_view": "Table view",
       "chart_view_toggle": "Toggle view",
       "chart_view_combined": "Combined view",
       "chart_view_split": "Split view",
+      "date": "Date",
       "granularity": "Granularity",
       "granularity_daily": "Daily",
       "granularity_weekly": "Weekly",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 4a1c6efd80..909d3f375a 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -649,9 +649,11 @@
         "table_available": "Un tableau de données pour ce graphique est disponible ci-dessous.",
         "table_caption": "Tableau de données du graphique"
       },
+      "table_view": "Afficher le tableau",
       "chart_view_toggle": "Changer de vue",
       "chart_view_combined": "Vue groupée",
       "chart_view_split": "Vue séparée",
+      "date": "Date",
       "granularity": "Granularité",
       "granularity_daily": "Par Jour",
       "granularity_weekly": "Par Semaine",
diff --git a/i18n/schema.json b/i18n/schema.json
index cb101c8a59..fcc89367f2 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2341,6 +2341,9 @@
               },
               "additionalProperties": false
             },
+            "table_view": {
+              "type": "string"
+            },
             "chart_view_toggle": {
               "type": "string"
             },
@@ -2350,6 +2353,9 @@
             "chart_view_split": {
               "type": "string"
             },
+            "date": {
+              "type": "string"
+            },
             "granularity": {
               "type": "string"
             },
diff --git a/package.json b/package.json
index 57243f1d29..d4d7c45d72 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "vite-plugin-pwa": "2.0.0",
     "vite-plus": "catalog:vite-plus",
     "vue": "3.5.42",
-    "vue-data-ui": "3.28.7",
+    "vue-data-ui": "3.29.1",
     "vue-router": "5.2.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62df4acf20..5808e48986 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,8 +277,8 @@ importers:
         specifier: 3.5.42
         version: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
       vue-data-ui:
-        specifier: 3.28.7
-        version: 3.28.7(vue@3.5.42)
+        specifier: 3.29.1
+        version: 3.29.1(vue@3.5.42)
       vue-router:
         specifier: 5.2.0
         version: 5.2.0(@voidzero-dev/vite-plus-core@1.4.0)(@vue/compiler-sfc@3.5.42)(esbuild@0.28.1)(rolldown@1.2.4)(rollup@4.62.2)(vue@3.5.42)(webpack@5.108.4)
@@ -10806,8 +10806,8 @@ packages:
   vue-component-type-helpers@3.3.12:
     resolution: {integrity: sha512-HwCqmgTfLFskQc4P5TRnbduCMyPat2Ezu0elLWOGn0dD/6BKHP15B5bxce6aDi+E4kblPtru8amIBQzu0Di3qQ==}
 
-  vue-data-ui@3.28.7:
-    resolution: {integrity: sha512-QZP0SYW/7RoKVdvER1hDcQSnXfkIIpqde3zc6X6m0c8mP0UNS5MwP+/VJtDtsfnijhWz8BTDUZG7ij6Rwx+M+A==}
+  vue-data-ui@3.29.1:
+    resolution: {integrity: sha512-jEYmsZH94Pv6bHWlDf3tgzvJdCAxcNSLuL/4GuwQ5TrXHLmvwXxcID7HYyDbGnQUwXXMIBqrWD96qTZnoc+cbg==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: 3.5.42
@@ -23846,7 +23846,7 @@ snapshots:
 
   vue-component-type-helpers@3.3.12: {}
 
-  vue-data-ui@3.28.7(vue@3.5.42):
+  vue-data-ui@3.29.1(vue@3.5.42):
     dependencies:
       vue: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c7e313844c..35041352bb 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -51,7 +51,7 @@ minimumReleaseAgeExclude:
   - '@nuxt/nitro-server@4.5.2'
   - '@nuxt/schema@4.5.2'
   - '@nuxt/vite-builder@4.5.2'
-  - vue-data-ui@3.28.7
+  - vue-data-ui@3.29.1
 
 minimumReleaseAgeExcludePrune: true
 
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 742cdbc569..f17d325cd4 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -283,6 +283,7 @@ import {
   PackageInstallDropdown,
   PackageInstallAdditionalCommands,
   PackageSecurityDowngradeAlert,
+  PackageTrendsDataTable,
   PackageManagerSelect,
   PackageMetricsBadges,
   PackagePlaygrounds,
@@ -1352,6 +1353,78 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
+    it('hides layout tabs in table view and restores them when returning to the chart', async () => {
+      const useChartsMock = vi.mocked(useCharts)
+      const originalUseCharts = useChartsMock.getMockImplementation()!
+      useChartsMock.mockImplementation(() => ({
+        ...originalUseCharts(),
+        fetchPackageDownloadEvolution: vi.fn().mockResolvedValue(mockWeeklyDownloads),
+      }))
+      const wrapper = await mountSuspended(PackageTrendsChart, {
+        props: {
+          weeklyDownloads: mockWeeklyDownloads,
+          packageNames: ['vue', 'nuxt'],
+        },
+      })
+      await flushPromises()
+      await vi.waitFor(() => {
+        expect(wrapper.find('input[role="switch"]').exists()).toBe(true)
+      })
+      useChartsMock.mockImplementation(originalUseCharts)
+      expect(wrapper.find('#combined-chart-layout-tab').exists()).toBe(true)
+      const toggle = wrapper.get('input[role="switch"]')
+      await toggle.setValue(true)
+      expect(wrapper.find('table').exists()).toBe(true)
+      expect(wrapper.find('#combined-chart-layout-tab').exists()).toBe(false)
+      expect(wrapper.find('#split-chart-layout-tab').exists()).toBe(false)
+      const results = await runAxe(wrapper)
+      expect(results.violations).toEqual([])
+      await toggle.setValue(false)
+      expect(wrapper.find('#combined-chart-layout-tab').exists()).toBe(true)
+      expect(wrapper.find('#combined-chart-layout-panel').exists()).toBe(true)
+      wrapper.unmount()
+    })
+
+    it('labels the incomplete monthly endpoint in table view even with prediction disabled', async () => {
+      const useChartsMock = vi.mocked(useCharts)
+      const originalUseCharts = useChartsMock.getMockImplementation()!
+      useChartsMock.mockImplementation(() => ({
+        ...originalUseCharts(),
+        fetchPackageDownloadEvolution: vi.fn().mockResolvedValue([
+          { month: '2026-01', timestamp: Date.UTC(2026, 0, 1), value: 100 },
+          { month: '2026-02', timestamp: Date.UTC(2026, 1, 1), value: 200 },
+        ]),
+      }))
+      let wrapper: VueWrapper | undefined
+      try {
+        wrapper = await mountSuspended(PackageTrendsChart, {
+          props: { packageName: 'vue', permalink: true },
+          route: '/?granularity=monthly&start=2026-01-01&end=2026-02-15',
+        })
+        await flushPromises()
+        await vi.waitFor(() => {
+          expect(wrapper!.find('input[role="switch"]').exists()).toBe(true)
+        })
+        await wrapper.findAll('input[type="range"]').at(-1)!.setValue('0')
+        await wrapper.get('input[role="switch"]').setValue(true)
+        expect(wrapper.get('tbody').text()).toContain('*')
+        expect(wrapper.text()).toContain('* Estimation')
+        expect(wrapper.get('tbody tr').text()).not.toContain('Estimation')
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
+
+        await wrapper.findAll('input[type="date"]')[1]!.setValue('2026-02-28')
+        await flushPromises()
+        await vi.waitFor(() => {
+          expect(wrapper!.get('tbody').text()).not.toContain('*')
+          expect(wrapper!.text()).not.toContain('* Estimation')
+        })
+      } finally {
+        wrapper?.unmount()
+        useChartsMock.mockImplementation(originalUseCharts)
+      }
+    })
+
     describe('PackageTimelineChart', () => {
       it('should have no accessibility violations', async () => {
         const wrapper = await mountSuspended(PackageTimelineChart, {
@@ -1778,6 +1851,46 @@ describe('component accessibility audits', () => {
       const results = await runAxe(wrapper)
       expect(results.violations).toEqual([])
     })
+    it('has an accessible table view with heatmap markers and can return to the chart', async () => {
+      const yesterday = new Date()
+      yesterday.setUTCDate(yesterday.getUTCDate() - 1)
+      const day = yesterday.toISOString().slice(0, 10)
+      useChartsMock.mockImplementation(() => ({
+        ...originalUseCharts(),
+        fetchPackageDownloadEvolution: vi
+          .fn()
+          .mockResolvedValue([{ day, timestamp: yesterday.getTime(), value: 1234 }]),
+      }))
+
+      const wrapper = await mountSuspended(DailyDownloadsHeatmap, {
+        props: { packageName: 'vue' },
+      })
+      await flushPromises()
+      const toggle = wrapper.get('input[role="switch"]')
+      expect(wrapper.text()).toContain('Table view')
+      await toggle.setValue(true)
+
+      expect(wrapper.find('[data-test-id="vue-ui-heatmap-stub"]').exists()).toBe(false)
+      const table = wrapper.get('table')
+      expect(table.get('caption').text()).toContain('Downloads')
+      const rows = table.findAll('tbody tr')
+      const lastRow = rows.at(-1)!
+      expect(lastRow.get('th[scope="row"]').text()).toContain(String(yesterday.getUTCFullYear()))
+      expect(lastRow.get('td').text()).toBe('1.2K')
+      expect(lastRow.get('td [aria-hidden="true"]').attributes('style')).toContain(
+        'background-color',
+      )
+      expect(table.text()).toContain('No data')
+      expect(wrapper.get('[role="region"]').attributes('tabindex')).toBe('0')
+
+      const results = await runAxe(wrapper)
+      expect(results.violations).toEqual([])
+
+      await toggle.setValue(false)
+      expect(wrapper.find('table').exists()).toBe(false)
+      expect(wrapper.find('[data-test-id="vue-ui-heatmap-stub"]').exists()).toBe(true)
+      wrapper.unmount()
+    })
   })
 
   describe('TabRoot + TabList + TabItem + TabPanel', () => {
@@ -4341,6 +4454,72 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageTrendsDataTable', () => {
+    it.each([1, 2])('has accessible headers and scrolling with %i packages', async count => {
+      const component = await mountSuspended(PackageTrendsDataTable, {
+        props: {
+          dataset: [
+            { name: 'vue', series: [1234, null] },
+            { name: 'nuxt', series: [0, 5678] },
+          ].slice(0, count),
+          packageNames: ['vue', 'nuxt'].slice(0, count),
+          dates: [Date.UTC(2026, 0, 1), Date.UTC(2026, 0, 8)],
+          metricLabel: 'Downloads',
+          dateFormatter: new Intl.DateTimeFormat('en', { timeZone: 'UTC' }),
+          maxHeight: 300,
+        },
+      })
+
+      expect(component.attributes('role')).toBe('region')
+      expect(component.attributes('tabindex')).toBe('0')
+      expect(component.attributes('aria-label')).toBe('Chart data table')
+      expect(component.get('caption').text()).toContain('Downloads')
+      expect(component.get('th[scope="colgroup"]').attributes('colspan')).toBe(String(count + 1))
+      expect(component.findAll('th[scope="col"]')).toHaveLength(count + 1)
+      expect(component.findAll('th[scope="row"]')).toHaveLength(2)
+      expect(component.text()).toContain('No data')
+      expect(
+        component
+          .get('tbody tr')
+          .findAll('td')
+          .map(cell => cell.text()),
+      ).toEqual(['1.2K', '0'].slice(0, count))
+
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+      component.unmount()
+    })
+    it.each([false, true])('labels estimated endpoints only when enabled (%s)', async estimated => {
+      const component = await mountSuspended(PackageTrendsDataTable, {
+        props: {
+          dataset: [
+            { name: 'vue', series: [100, 200] },
+            { name: 'nuxt', series: [100, null] },
+          ],
+          packageNames: ['vue', 'nuxt'],
+          dates: [Date.UTC(2026, 0, 1), Date.UTC(2026, 1, 1)],
+          metricLabel: 'Downloads',
+          dateFormatter: new Intl.DateTimeFormat('en', { timeZone: 'UTC' }),
+          maxHeight: 300,
+          estimatedLastValue: estimated,
+        },
+      })
+      const rows = component.findAll('tbody tr')
+      expect(rows[0]!.text()).not.toContain('Estimation')
+      expect(rows[1]!.findAll('td')[0]!.text()).toBe(estimated ? '200*' : '200')
+      expect(rows[1]!.findAll('td')[1]!.text()).toBe('No data')
+      expect(component.find('p').exists()).toBe(estimated)
+      expect(rows[0]!.get('td').attributes('aria-describedby')).toBeUndefined()
+      expect(rows[1]!.findAll('td')[1]!.attributes('aria-describedby')).toBeUndefined()
+      expect(rows[1]!.get('td').attributes('aria-describedby')).toBe(
+        component.element.querySelector('p')?.id,
+      )
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+      component.unmount()
+    })
+  })
+
   describe('PackageSecurityDowngradeAlert', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageSecurityDowngradeAlert, {

From 25fcd858422e9433b23c138b3326fcc3a75622c5 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 13 Nov 2026 07:41:18 +0000
Subject: [PATCH 05/10] perf: stop loading sponsor logos on every page (#3439)

---
 app/assets/logos/sponsors/index.ts | 13 ++++++++++++-
 app/assets/logos/sponsors/names.ts | 10 ++++++++++
 app/components/About/LogoList.vue  |  2 +-
 app/components/AppFooter.vue       |  7 ++++---
 4 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/logos/sponsors/names.ts

diff --git a/app/assets/logos/sponsors/index.ts b/app/assets/logos/sponsors/index.ts
index c872c03f07..94322d5d85 100644
--- a/app/assets/logos/sponsors/index.ts
+++ b/app/assets/logos/sponsors/index.ts
@@ -1,3 +1,4 @@
+import type { FOOTER_SPONSOR_NAMES } from './names'
 import LogoVercel from './vercel.svg'
 import LogoVercelLight from './vercel-light.svg'
 import LogoVoidZero from './void-zero.svg'
@@ -99,4 +100,14 @@ export const SPONSORS = {
       url: 'https://badrap.io/',
     },
   ],
-}
+} as const
+
+type Names<T extends readonly { name: string }[]> = { [K in keyof T]: T[K]['name'] }
+type IsEqual<A, B> =
+  (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? true : false
+
+// Update FOOTER_SPONSOR_NAMES in ./names.ts when changing the sponsors above.
+true satisfies IsEqual<
+  readonly [...Names<typeof SPONSORS.gold>, ...Names<typeof SPONSORS.silver>],
+  typeof FOOTER_SPONSOR_NAMES
+>
diff --git a/app/assets/logos/sponsors/names.ts b/app/assets/logos/sponsors/names.ts
new file mode 100644
index 0000000000..8342137336
--- /dev/null
+++ b/app/assets/logos/sponsors/names.ts
@@ -0,0 +1,10 @@
+export const FOOTER_SPONSOR_NAMES = [
+  'Vercel',
+  'CodeRabbit',
+  'VoidZero',
+  'vlt',
+  'Netlify',
+  'Bluesky',
+  'Chromatic',
+  'Badrap',
+] as const
diff --git a/app/components/About/LogoList.vue b/app/components/About/LogoList.vue
index 03945b705c..9ff39b6876 100644
--- a/app/components/About/LogoList.vue
+++ b/app/components/About/LogoList.vue
@@ -17,7 +17,7 @@ type GroupItem = {
 }
 
 const props = defineProps<{
-  list: (BaseItem | GroupItem)[]
+  list: readonly (BaseItem | GroupItem)[]
 }>()
 </script>
 
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 67590100ee..6814e2feeb 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
-import { SPONSORS } from '~/assets/logos/sponsors'
+import { FOOTER_SPONSOR_NAMES } from '~/assets/logos/sponsors/names'
 
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
@@ -38,8 +38,9 @@ const socialLinks = computed(() => [
 ])
 
 const sponsorList = computed(() => {
-  const names = [...SPONSORS.gold, ...SPONSORS.silver].map(s => s.name)
-  return new Intl.ListFormat(locale.value, { style: 'long', type: 'conjunction' }).format(names)
+  return new Intl.ListFormat(locale.value, { style: 'long', type: 'conjunction' }).format(
+    FOOTER_SPONSOR_NAMES,
+  )
 })
 
 const footerSections = computed<Array<{ label: string; links: FooterLink[] }>>(() => [

From b5720d5cfc1e350ccfbdf4448a19692317cc8fd5 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 13 Nov 2026 07:41:40 +0000
Subject: [PATCH 06/10] perf: serve module replacements as static json (#3441)

---
 .../npm/useReplacementDependencies.ts         |  7 +-
 app/composables/useCompareReplacements.ts     |  7 +-
 app/composables/useModuleReplacement.ts       |  7 +-
 app/utils/module-replacements.ts              | 17 ++++
 modules/module-replacements.ts                | 88 +++++++++++++++++++
 server/api/replacements/[...pkg].get.ts       | 16 ----
 shared/utils/module-replacements.ts           | 13 +++
 .../use-compare-replacements.spec.ts          | 37 +++++---
 .../use-module-replacement.spec.ts            | 33 +++++++
 .../use-replacement-dependencies.spec.ts      | 47 ++++++++--
 test/unit/modules/module-replacements.spec.ts | 73 +++++++++++++++
 11 files changed, 294 insertions(+), 51 deletions(-)
 create mode 100644 modules/module-replacements.ts
 delete mode 100644 server/api/replacements/[...pkg].get.ts
 create mode 100644 shared/utils/module-replacements.ts
 create mode 100644 test/nuxt/composables/use-module-replacement.spec.ts
 create mode 100644 test/unit/modules/module-replacements.spec.ts

diff --git a/app/composables/npm/useReplacementDependencies.ts b/app/composables/npm/useReplacementDependencies.ts
index b362556c2e..7f24e457a5 100644
--- a/app/composables/npm/useReplacementDependencies.ts
+++ b/app/composables/npm/useReplacementDependencies.ts
@@ -1,4 +1,4 @@
-import type { ModuleReplacement, ModuleReplacementMapping } from 'module-replacements'
+import type { ModuleReplacement } from 'module-replacements'
 import { parseDependencyVersion } from '#shared/utils/npm'
 
 async function fetchReplacements(
@@ -13,10 +13,7 @@ async function fetchReplacements(
   const results = await Promise.all(
     names.map(async name => {
       try {
-        const response = await $fetch<{
-          mapping: ModuleReplacementMapping
-          replacement: ModuleReplacement
-        } | null>(`/api/replacements/${name}`)
+        const response = await fetchModuleReplacement(name)
         const replacement = response?.replacement ?? null
         return { name, replacement }
       } catch {
diff --git a/app/composables/useCompareReplacements.ts b/app/composables/useCompareReplacements.ts
index c578e06c5a..35ac6123be 100644
--- a/app/composables/useCompareReplacements.ts
+++ b/app/composables/useCompareReplacements.ts
@@ -1,4 +1,4 @@
-import type { ModuleReplacement, ModuleReplacementMapping } from 'module-replacements'
+import type { ModuleReplacement } from 'module-replacements'
 import { NO_DEPENDENCY_ID } from '#shared/utils/compare'
 import { parsePackageSpec } from '#shared/utils/parse-package-param'
 
@@ -53,10 +53,7 @@ export function useCompareReplacements(packageNames: MaybeRefOrGetter<string[]>)
       const results = await Promise.all(
         namesToCheck.map(async name => {
           try {
-            const result = await $fetch<{
-              mapping: ModuleReplacementMapping
-              replacement: ModuleReplacement
-            } | null>(`/api/replacements/${name}`)
+            const result = await fetchModuleReplacement(name)
             return { name, replacement: result?.replacement ?? null, failed: false as const }
           } catch {
             return { name, failed: true as const }
diff --git a/app/composables/useModuleReplacement.ts b/app/composables/useModuleReplacement.ts
index 3299e5d8b0..e1bbc44fde 100644
--- a/app/composables/useModuleReplacement.ts
+++ b/app/composables/useModuleReplacement.ts
@@ -1,7 +1,6 @@
-import type { ModuleReplacement, ModuleReplacementMapping } from 'module-replacements'
-
 export function useModuleReplacement(packageName: MaybeRefOrGetter<string>) {
-  return useLazyFetch<{ mapping: ModuleReplacementMapping; replacement: ModuleReplacement } | null>(
-    () => `/api/replacements/${toValue(packageName)}`,
+  return useLazyAsyncData(
+    () => `module-replacement:${toValue(packageName)}`,
+    () => fetchModuleReplacement(toValue(packageName)),
   )
 }
diff --git a/app/utils/module-replacements.ts b/app/utils/module-replacements.ts
index c412c85fcf..44e85588bc 100644
--- a/app/utils/module-replacements.ts
+++ b/app/utils/module-replacements.ts
@@ -1,4 +1,21 @@
 import type { ModuleReplacement } from 'module-replacements'
+import type { ModuleReplacementResponse } from '#shared/utils/module-replacements'
+
+/**
+ * Fetch the module replacement for `name`. Packages without one resolve to `null` without a request;
+ * in the browser the data comes from static files generated at build time.
+ */
+export async function fetchModuleReplacement(
+  name: string,
+): Promise<ModuleReplacementResponse | null> {
+  const { replacementNames, replacementsBaseURL } = await import('#module-replacements')
+  if (!replacementNames.has(name)) return null
+  if (import.meta.server) {
+    const { getModuleReplacement } = await import('#shared/utils/module-replacements')
+    return getModuleReplacement(name)
+  }
+  return $fetch<ModuleReplacementResponse>(`${replacementsBaseURL}/${name}.json`)
+}
 
 export function getReplacementDescription(replacement: ModuleReplacement): string {
   if (replacement.type === 'documented') return ''
diff --git a/modules/module-replacements.ts b/modules/module-replacements.ts
new file mode 100644
index 0000000000..bf8a96cc96
--- /dev/null
+++ b/modules/module-replacements.ts
@@ -0,0 +1,88 @@
+import { createHash } from 'node:crypto'
+import { mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { all } from 'module-replacements'
+import { addTemplate, defineNuxtModule } from 'nuxt/kit'
+import { getModuleReplacement } from '#shared/utils/module-replacements'
+
+export const REPLACEMENTS_BASE_URL = '/_replacements'
+
+interface VercelRoute {
+  src?: string
+  handle?: string
+  status?: number
+  headers?: Record<string, string>
+}
+
+/**
+ * Exposes the names of packages that have a module replacement, and the base URL of their
+ * build-time JSON files, as `#module-replacements`.
+ */
+export default defineNuxtModule({
+  meta: {
+    name: 'module-replacements',
+  },
+  setup(_, nuxt) {
+    const names = Object.keys(all.mappings)
+    const hash = createHash('sha256').update(JSON.stringify(all)).digest('hex').slice(0, 12)
+    const baseURL = `${REPLACEMENTS_BASE_URL}/${hash}`
+
+    addTemplate({
+      filename: 'module-replacements.ts',
+      write: true,
+      getContents: () =>
+        [
+          `export const replacementNames: ReadonlySet<string> = new Set(${JSON.stringify(names)})`,
+          `export const replacementsBaseURL = ${JSON.stringify(baseURL)}`,
+        ].join('\n'),
+    })
+    nuxt.options.alias['#module-replacements'] = join(nuxt.options.buildDir, 'module-replacements')
+
+    // oxlint-disable-next-line eslint/no-underscore-dangle
+    if (nuxt.options._prepare) {
+      return
+    }
+
+    const publicDir = resolve(nuxt.options.rootDir, 'node_modules/.cache/module-replacements')
+    rmSync(publicDir, { recursive: true, force: true })
+    for (const name of names) {
+      const file = join(publicDir, hash, `${name}.json`)
+      mkdirSync(dirname(file), { recursive: true })
+      writeFileSync(file, JSON.stringify(getModuleReplacement(name)))
+    }
+
+    nuxt.hook('nitro:config', nitroConfig => {
+      nitroConfig.publicAssets ||= []
+      nitroConfig.publicAssets.push({
+        dir: publicDir,
+        baseURL: REPLACEMENTS_BASE_URL,
+        fallthrough: false,
+        maxAge: 60 * 60 * 24 * 365,
+      })
+    })
+
+    nuxt.hook('nitro:init', nitro => {
+      if (!nitro.options.preset.startsWith('vercel')) {
+        return
+      }
+      nitro.hooks.hook('compiled', () => {
+        addNotFoundRoute(resolve(nitro.options.output.dir, 'config.json'))
+      })
+    })
+  },
+})
+
+/** Responds to misses under the replacements base with a 404 from the CDN. */
+export function addNotFoundRoute(configPath: string) {
+  const config = JSON.parse(readFileSync(configPath, 'utf-8')) as { routes: VercelRoute[] }
+  const index = config.routes.findIndex(route => route.handle === 'filesystem')
+  if (index === -1) {
+    throw new Error('[module-replacements] could not find the filesystem route')
+  }
+  config.routes.splice(index + 1, 0, {
+    src: `^${REPLACEMENTS_BASE_URL}/.*$`,
+    status: 404,
+    headers: { 'cache-control': 'no-store' },
+  })
+  writeFileSync(configPath, JSON.stringify(config, null, 2))
+}
diff --git a/server/api/replacements/[...pkg].get.ts b/server/api/replacements/[...pkg].get.ts
deleted file mode 100644
index 3cabb56268..0000000000
--- a/server/api/replacements/[...pkg].get.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { all, type ModuleReplacement, type ModuleReplacementMapping } from 'module-replacements'
-
-export default defineEventHandler(
-  (event): { mapping: ModuleReplacementMapping; replacement: ModuleReplacement } | null => {
-    const pkg = getRouterParam(event, 'pkg')
-    if (!pkg) return null
-    if (!Object.hasOwn(all.mappings, pkg)) return null
-    const mapping = all.mappings[pkg]
-    if (!mapping) return null
-    const replacementId = mapping.replacements[0]
-    if (!replacementId) return null
-    const replacement = all.replacements[replacementId]
-    if (!replacement) return null
-    return { mapping, replacement }
-  },
-)
diff --git a/shared/utils/module-replacements.ts b/shared/utils/module-replacements.ts
new file mode 100644
index 0000000000..5862ca1f4d
--- /dev/null
+++ b/shared/utils/module-replacements.ts
@@ -0,0 +1,13 @@
+import { all, type ModuleReplacement, type ModuleReplacementMapping } from 'module-replacements'
+
+export interface ModuleReplacementResponse {
+  mapping: ModuleReplacementMapping
+  replacement: ModuleReplacement
+}
+
+export function getModuleReplacement(name: string): ModuleReplacementResponse | null {
+  const mapping = Object.hasOwn(all.mappings, name) ? all.mappings[name] : undefined
+  const replacementId = mapping?.replacements[0]
+  const replacement = replacementId ? all.replacements[replacementId] : undefined
+  return mapping && replacement ? { mapping, replacement } : null
+}
diff --git a/test/nuxt/composables/use-compare-replacements.spec.ts b/test/nuxt/composables/use-compare-replacements.spec.ts
index a387bab29b..eddfb6b010 100644
--- a/test/nuxt/composables/use-compare-replacements.spec.ts
+++ b/test/nuxt/composables/use-compare-replacements.spec.ts
@@ -50,7 +50,7 @@ describe('useCompareReplacements', () => {
       vi.stubGlobal(
         '$fetch',
         vi.fn().mockImplementation((url: string) => {
-          if (url.includes('/api/replacements/array-includes')) {
+          if (url.includes('/array-includes.json')) {
             return Promise.resolve({
               mapping: { replacements: ['Array.prototype.includes'] },
               replacement: {
@@ -89,7 +89,7 @@ describe('useCompareReplacements', () => {
       vi.stubGlobal(
         '$fetch',
         vi.fn().mockImplementation((url: string) => {
-          if (url.includes('/api/replacements/is-even')) {
+          if (url.includes('/is-even.json')) {
             return Promise.resolve({
               mapping: { replacements: ['snippet::is-even'] },
               replacement: {
@@ -119,7 +119,7 @@ describe('useCompareReplacements', () => {
       vi.stubGlobal(
         '$fetch',
         vi.fn().mockImplementation((url: string) => {
-          if (url.includes('/api/replacements/moment')) {
+          if (url.includes('/moment.json')) {
             return Promise.resolve({
               mapping: { replacements: ['date-fns'] },
               replacement: {
@@ -151,7 +151,7 @@ describe('useCompareReplacements', () => {
       vi.stubGlobal(
         '$fetch',
         vi.fn().mockImplementation((url: string) => {
-          if (url.includes('/api/replacements/is-odd')) {
+          if (url.includes('/is-odd.json')) {
             return Promise.resolve({
               mapping: { replacements: ['snippet::is-odd'] },
               replacement: {
@@ -162,7 +162,7 @@ describe('useCompareReplacements', () => {
               } satisfies ModuleReplacement,
             })
           }
-          if (url.includes('/api/replacements/lodash')) {
+          if (url.includes('/lodash.json')) {
             return Promise.resolve({
               mapping: { replacements: ['native'] },
               replacement: {
@@ -173,7 +173,7 @@ describe('useCompareReplacements', () => {
               } satisfies ModuleReplacement,
             })
           }
-          if (url.includes('/api/replacements/array-map')) {
+          if (url.includes('/array-map.json')) {
             return Promise.resolve({
               mapping: { replacements: ['Array.prototype.map'] },
               replacement: {
@@ -235,13 +235,13 @@ describe('useCompareReplacements', () => {
       vi.stubGlobal('$fetch', fetchMock)
 
       const { noDepSuggestions, infoSuggestions, replacements } =
-        await useCompareReplacementsInComponent(['some-package'])
+        await useCompareReplacementsInComponent(['is-odd'])
 
       await vi.waitFor(() => {
         expect(fetchMock).toHaveBeenCalledTimes(1)
       })
 
-      expect(replacements.value.has('some-package')).toBe(false)
+      expect(replacements.value.has('is-odd')).toBe(false)
       expect(noDepSuggestions.value).toHaveLength(0)
       expect(infoSuggestions.value).toHaveLength(0)
     })
@@ -291,25 +291,38 @@ describe('useCompareReplacements', () => {
 
       vi.stubGlobal('$fetch', fetchMock)
 
-      const packageNames = ref(['react'])
+      const packageNames = ref(['moment'])
       const { replacements } = await useCompareReplacementsInComponent(packageNames)
 
       await vi.waitFor(() => {
-        expect(replacements.value.has('react')).toBe(true)
+        expect(replacements.value.has('moment')).toBe(true)
       })
 
       packageNames.value = []
       await nextTick()
-      packageNames.value = ['react']
+      packageNames.value = ['moment']
 
       await vi.waitFor(() => {
         expect(fetchMock).toHaveBeenCalledTimes(1)
       })
     })
 
+    it('does not request packages without a module replacement', async () => {
+      const fetchMock = vi.fn().mockResolvedValue(null)
+
+      vi.stubGlobal('$fetch', fetchMock)
+
+      const { replacements } = await useCompareReplacementsInComponent(['react'])
+
+      await vi.waitFor(() => {
+        expect(replacements.value.get('react')).toBeNull()
+      })
+      expect(fetchMock).not.toHaveBeenCalled()
+    })
+
     it('caches replacement data and does not refetch', async () => {
       const fetchMock = vi.fn().mockImplementation((url: string) => {
-        if (url.includes('/api/replacements/is-even')) {
+        if (url.includes('/is-even.json')) {
           return Promise.resolve({
             mapping: { replacements: ['snippet::is-even'] },
             replacement: {
diff --git a/test/nuxt/composables/use-module-replacement.spec.ts b/test/nuxt/composables/use-module-replacement.spec.ts
new file mode 100644
index 0000000000..c187440d13
--- /dev/null
+++ b/test/nuxt/composables/use-module-replacement.spec.ts
@@ -0,0 +1,33 @@
+import { expect, it, vi } from 'vite-plus/test'
+import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
+import { replacementsBaseURL } from '#module-replacements'
+
+it('only requests packages that have a module replacement', async () => {
+  const requested: string[] = []
+  for (const name of ['is-even', 'react', 'is-odd']) {
+    registerEndpoint(`${replacementsBaseURL}/${name}.json`, () => {
+      requested.push(name)
+      return {
+        mapping: { replacements: [`snippet::${name}`] },
+        replacement: { id: `snippet::${name}`, type: 'simple', example: 'example' },
+      }
+    })
+  }
+
+  const name = ref('is-even')
+  const wrapper = await mountSuspended(
+    defineComponent({
+      setup() {
+        const { data, status } = useModuleReplacement(name)
+        return () => h('div', `${status.value}:${data.value?.replacement.id ?? 'none'}`)
+      },
+    }),
+  )
+
+  await vi.waitFor(() => expect(wrapper.text()).toBe('success:snippet::is-even'))
+  name.value = 'react'
+  await vi.waitFor(() => expect(wrapper.text()).toBe('success:none'))
+  name.value = 'is-odd'
+  await vi.waitFor(() => expect(wrapper.text()).toBe('success:snippet::is-odd'))
+  expect(requested).toEqual(['is-even', 'is-odd'])
+})
diff --git a/test/nuxt/composables/use-replacement-dependencies.spec.ts b/test/nuxt/composables/use-replacement-dependencies.spec.ts
index e2ef8b87ab..7c2c505a4f 100644
--- a/test/nuxt/composables/use-replacement-dependencies.spec.ts
+++ b/test/nuxt/composables/use-replacement-dependencies.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vite-plus/test'
 import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
 import type { ModuleReplacement } from 'module-replacements'
+import { replacementsBaseURL } from '#module-replacements'
 
 const SIMPLE_REPLACEMENT: ModuleReplacement = {
   id: 'snippet::is-even',
@@ -62,8 +63,10 @@ async function mountWithDeps(deps: Record<string, string> | undefined) {
 
 describe('useReplacementDependencies', () => {
   it('returns replacements for dependencies that have them', async () => {
-    registerEndpoint('/api/replacements/is-even', () => ({ replacement: SIMPLE_REPLACEMENT }))
-    registerEndpoint('/api/replacements/picoquery', () => null)
+    registerEndpoint(`${replacementsBaseURL}/is-even.json`, () => ({
+      replacement: SIMPLE_REPLACEMENT,
+    }))
+    registerEndpoint(`${replacementsBaseURL}/picoquery.json`, () => null)
 
     const replacements = await mountWithDeps({
       'is-even': '^1.0.0',
@@ -78,6 +81,25 @@ describe('useReplacementDependencies', () => {
     expect(replacements.value['picoquery']).toBeUndefined()
   })
 
+  it('only requests dependencies that have a replacement', async () => {
+    const requested: string[] = []
+    registerEndpoint(`${replacementsBaseURL}/is-even.json`, () => {
+      requested.push('is-even')
+      return { replacement: SIMPLE_REPLACEMENT }
+    })
+    registerEndpoint(`${replacementsBaseURL}/picoquery.json`, () => {
+      requested.push('picoquery')
+      return null
+    })
+
+    const replacements = await mountWithDeps({ 'is-even': '^1.0.0', 'picoquery': '^1.0.0' })
+
+    await vi.waitFor(() => {
+      expect(replacements.value['is-even']).toBeDefined()
+    })
+    expect(requested).toEqual(['is-even'])
+  })
+
   it('returns empty object for undefined dependencies', async () => {
     const replacements = await mountWithDeps(undefined)
 
@@ -95,11 +117,13 @@ describe('useReplacementDependencies', () => {
   })
 
   it('handles multiple dependencies with replacements', async () => {
-    registerEndpoint('/api/replacements/is-even', () => ({ replacement: SIMPLE_REPLACEMENT }))
-    registerEndpoint('/api/replacements/array-includes', () => ({
+    registerEndpoint(`${replacementsBaseURL}/is-even.json`, () => ({
+      replacement: SIMPLE_REPLACEMENT,
+    }))
+    registerEndpoint(`${replacementsBaseURL}/array-includes.json`, () => ({
       replacement: NATIVE_REPLACEMENT,
     }))
-    registerEndpoint('/api/replacements/picoquery', () => null)
+    registerEndpoint(`${replacementsBaseURL}/picoquery.json`, () => null)
 
     const replacements = await mountWithDeps({
       'is-even': '^1.0.0',
@@ -121,21 +145,26 @@ describe('useReplacementDependencies', () => {
   })
 
   it('handles fetch errors gracefully', async () => {
-    registerEndpoint('/api/replacements/failing-package', () => {
+    let failedRequests = 0
+    registerEndpoint(`${replacementsBaseURL}/is-odd.json`, () => {
+      failedRequests++
       throw new Error('Network error')
     })
-    registerEndpoint('/api/replacements/is-even', () => ({ replacement: SIMPLE_REPLACEMENT }))
+    registerEndpoint(`${replacementsBaseURL}/is-even.json`, () => ({
+      replacement: SIMPLE_REPLACEMENT,
+    }))
 
     const replacements = await mountWithDeps({
-      'failing-package': '^1.0.0',
+      'is-odd': '^1.0.0',
       'is-even': '^1.0.0',
     })
 
     await vi.waitFor(() => {
+      expect(failedRequests).toBeGreaterThan(0)
       expect(replacements.value['is-even']).toBeDefined()
     })
 
-    expect(replacements.value['failing-package']).toBeUndefined()
+    expect(replacements.value['is-odd']).toBeUndefined()
     expect(replacements.value['is-even']?.type).toBe('simple')
   })
 })
diff --git a/test/unit/modules/module-replacements.spec.ts b/test/unit/modules/module-replacements.spec.ts
new file mode 100644
index 0000000000..06924fd7ea
--- /dev/null
+++ b/test/unit/modules/module-replacements.spec.ts
@@ -0,0 +1,73 @@
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join, resolve } from 'node:path'
+import { all } from 'module-replacements'
+import type { NitroConfig } from 'nitropack'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
+
+const { addTemplate } = vi.hoisted(() => ({ addTemplate: vi.fn() }))
+
+vi.mock('nuxt/kit', () => ({
+  addTemplate,
+  defineNuxtModule: <T>(module: T) => module,
+}))
+
+import { getModuleReplacement } from '../../../shared/utils/module-replacements'
+import moduleReplacements, { addNotFoundRoute } from '../../../modules/module-replacements'
+
+describe('module-replacements', () => {
+  let rootDir: string
+
+  beforeEach(() => {
+    rootDir = mkdtempSync(resolve(tmpdir(), 'module-replacements-'))
+    addTemplate.mockClear()
+  })
+
+  afterEach(() => {
+    rmSync(rootDir, { recursive: true, force: true })
+  })
+
+  it('writes a static JSON file per replacement under a content-hashed base', async () => {
+    const hooks: Record<string, (config: NitroConfig) => void> = {}
+    const nuxt = {
+      options: { alias: {}, buildDir: join(rootDir, '.nuxt'), rootDir, dev: false },
+      hook: (name: string, fn: (config: NitroConfig) => void) => {
+        hooks[name] = fn
+      },
+    }
+    // @ts-expect-error partial module and nuxt mocks
+    await moduleReplacements.setup({}, nuxt)
+
+    const nitroConfig: NitroConfig = {}
+    hooks['nitro:config']!(nitroConfig)
+    const [asset] = nitroConfig.publicAssets!
+    expect(asset).toMatchObject({ baseURL: '/_replacements', fallthrough: false })
+
+    const template = addTemplate.mock.calls[0]![0].getContents() as string
+    const baseURL = template.match(/replacementsBaseURL = "([^"]+)"/)![1]!
+    expect(baseURL).toMatch(/^\/_replacements\/[\da-f]{12}$/)
+
+    for (const name of ['is-even', '@babel/plugin-proposal-object-rest-spread']) {
+      const file = join(asset!.dir!, baseURL.replace('/_replacements/', ''), `${name}.json`)
+      expect(JSON.parse(readFileSync(file, 'utf-8'))).toEqual(getModuleReplacement(name))
+    }
+    expect(getModuleReplacement('is-even')?.mapping).toEqual(all.mappings['is-even'])
+  })
+
+  it('answers misses under the base with a 404 after the filesystem check', () => {
+    const configPath = join(rootDir, 'config.json')
+    writeFileSync(
+      configPath,
+      JSON.stringify({ routes: [{ src: '/a' }, { handle: 'filesystem' }, { src: '/(.*)' }] }),
+    )
+
+    addNotFoundRoute(configPath)
+
+    expect(JSON.parse(readFileSync(configPath, 'utf-8')).routes).toEqual([
+      { src: '/a' },
+      { handle: 'filesystem' },
+      { src: '^/_replacements/.*$', status: 404, headers: { 'cache-control': 'no-store' } },
+      { src: '/(.*)' },
+    ])
+  })
+})

From f4188b357e0625b43e4a451c5a466785cd37d6a2 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 13 Nov 2026 07:41:50 +0000
Subject: [PATCH 07/10] perf: load web analytics from the vercel observability
 path (#3440)

---
 app/plugins/vercel-analytics.client.ts     |  8 +++--
 modules/vercel-analytics.ts                | 37 ++++++++++++++++++++++
 nuxt.config.ts                             |  7 ----
 test/unit/modules/vercel-analytics.spec.ts | 34 ++++++++++++++++++++
 4 files changed, 77 insertions(+), 9 deletions(-)
 create mode 100644 modules/vercel-analytics.ts
 create mode 100644 test/unit/modules/vercel-analytics.spec.ts

diff --git a/app/plugins/vercel-analytics.client.ts b/app/plugins/vercel-analytics.client.ts
index f6180c3bf9..fa74a47adb 100644
--- a/app/plugins/vercel-analytics.client.ts
+++ b/app/plugins/vercel-analytics.client.ts
@@ -1,3 +1,5 @@
+import { vercelAnalytics } from '#vercel-analytics'
+
 export default defineNuxtPlugin({
   enforce: 'pre',
   env: { islands: false },
@@ -11,8 +13,10 @@ export default defineNuxtPlugin({
     }
 
     useScript({
-      'src': '/_v/script.js',
-      'data-endpoint': '/_v',
+      'src': vercelAnalytics.scriptSrc ?? '/_vercel/insights/script.js',
+      'data-view-endpoint': vercelAnalytics.viewEndpoint,
+      'data-event-endpoint': vercelAnalytics.eventEndpoint,
+      'data-session-endpoint': vercelAnalytics.sessionEndpoint,
     })
   },
 })
diff --git a/modules/vercel-analytics.ts b/modules/vercel-analytics.ts
new file mode 100644
index 0000000000..d440d10141
--- /dev/null
+++ b/modules/vercel-analytics.ts
@@ -0,0 +1,37 @@
+import process from 'node:process'
+import { join } from 'node:path'
+import { addTemplate, defineNuxtModule } from 'nuxt/kit'
+import { withLeadingSlash } from 'ufo'
+
+/**
+ * Exposes the Web Analytics paths that Vercel provides at build time as `#vercel-analytics`.
+ */
+export default defineNuxtModule({
+  meta: {
+    name: 'vercel-analytics',
+  },
+  setup(_, nuxt) {
+    addTemplate({
+      filename: 'vercel-analytics.ts',
+      write: true,
+      getContents: () =>
+        `export const vercelAnalytics: Partial<Record<'scriptSrc' | 'viewEndpoint' | 'eventEndpoint' | 'sessionEndpoint', string>> = ${JSON.stringify(getVercelAnalyticsConfig(process.env.VITE_VERCEL_OBSERVABILITY_CLIENT_CONFIG))}`,
+    })
+    nuxt.options.alias['#vercel-analytics'] = join(nuxt.options.buildDir, 'vercel-analytics')
+  },
+})
+
+export function getVercelAnalyticsConfig(clientConfig: string | undefined) {
+  try {
+    const analytics = JSON.parse(clientConfig || '{}').analytics ?? {}
+    const config: Record<string, string> = {}
+    for (const key of ['scriptSrc', 'viewEndpoint', 'eventEndpoint', 'sessionEndpoint']) {
+      if (typeof analytics[key] === 'string' && analytics[key]) {
+        config[key] = withLeadingSlash(analytics[key])
+      }
+    }
+    return config
+  } catch {
+    return {}
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 851e7175d0..5c7f2fec77 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -259,13 +259,6 @@ export default defineNuxtConfig({
     '/sponsors': { prerender: true },
     '/tools': { prerender: true },
     '/tools/deps-stats': { prerender: true },
-    // proxy for insights
-    '/_v/script.js': {
-      proxy: 'https://npmx.dev/_vercel/insights/script.js',
-    },
-    '/_v/view': { proxy: 'https://npmx.dev/_vercel/insights/view' },
-    '/_v/event': { proxy: 'https://npmx.dev/_vercel/insights/event' },
-    '/_v/session': { proxy: 'https://npmx.dev/_vercel/insights/session' },
     // lunaria status.json
     '/lunaria/status.json': {
       headers: {
diff --git a/test/unit/modules/vercel-analytics.spec.ts b/test/unit/modules/vercel-analytics.spec.ts
new file mode 100644
index 0000000000..74ecd9cfd9
--- /dev/null
+++ b/test/unit/modules/vercel-analytics.spec.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from 'vite-plus/test'
+
+vi.mock('nuxt/kit', () => ({
+  addTemplate: vi.fn(),
+  defineNuxtModule: <T>(module: T) => module,
+}))
+
+import { getVercelAnalyticsConfig } from '../../../modules/vercel-analytics'
+
+describe('getVercelAnalyticsConfig', () => {
+  it('reads the analytics paths from the Vercel client config as absolute paths', () => {
+    const clientConfig = JSON.stringify({
+      analytics: {
+        scriptSrc: 'abc/script.js',
+        viewEndpoint: 'abc/view',
+        eventEndpoint: 'abc/event',
+        sessionEndpoint: '/abc/session',
+      },
+      speedInsights: { scriptSrc: 'def/script.js', endpoint: 'def/vitals' },
+    })
+
+    expect(getVercelAnalyticsConfig(clientConfig)).toEqual({
+      scriptSrc: '/abc/script.js',
+      viewEndpoint: '/abc/view',
+      eventEndpoint: '/abc/event',
+      sessionEndpoint: '/abc/session',
+    })
+  })
+
+  it('returns no paths without a valid client config', () => {
+    expect(getVercelAnalyticsConfig(undefined)).toEqual({})
+    expect(getVercelAnalyticsConfig('not json')).toEqual({})
+  })
+})

From 7d6dfc85f00b0feb5da889cdbfcaa387dfb8cf3c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 13 Nov 2026 07:42:38 +0000
Subject: [PATCH 08/10] perf: share one dependency analysis request across
 components (#3442)

---
 app/composables/useDependencyAnalysis.ts      |  1 +
 .../use-dependency-analysis.spec.ts           | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 test/nuxt/composables/use-dependency-analysis.spec.ts

diff --git a/app/composables/useDependencyAnalysis.ts b/app/composables/useDependencyAnalysis.ts
index 5de41ee261..4bdffe147d 100644
--- a/app/composables/useDependencyAnalysis.ts
+++ b/app/composables/useDependencyAnalysis.ts
@@ -20,6 +20,7 @@ export function useDependencyAnalysis(
     {
       server: false,
       lazy: true,
+      dedupe: 'defer',
     },
   )
 }
diff --git a/test/nuxt/composables/use-dependency-analysis.spec.ts b/test/nuxt/composables/use-dependency-analysis.spec.ts
new file mode 100644
index 0000000000..07227049d9
--- /dev/null
+++ b/test/nuxt/composables/use-dependency-analysis.spec.ts
@@ -0,0 +1,23 @@
+import { expect, it, vi } from 'vite-plus/test'
+import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
+
+it('sends one request when several components use the same analysis', async () => {
+  let requests = 0
+  registerEndpoint('/api/registry/vulnerabilities/shared-analysis/v/1.0.0', () => {
+    requests++
+    return { vulnerablePackages: [] }
+  })
+
+  const Consumer = defineComponent({
+    setup() {
+      const { data } = useDependencyAnalysis('shared-analysis', '1.0.0')
+      return () => h('div', data.value ? 'loaded' : 'pending')
+    },
+  })
+  const wrapper = await mountSuspended(
+    defineComponent({ render: () => [h(Consumer), h(Consumer), h(Consumer)] }),
+  )
+
+  await vi.waitFor(() => expect(wrapper.text()).toBe('loadedloadedloaded'))
+  expect(requests).toBe(1)
+})

From ed7be46fb4cfeb917e112ac398ba8c15cd588167 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 13 Nov 2026 07:43:11 +0000
Subject: [PATCH 09/10] perf: render package pages in full for crawlers on isr
 miss (#3443)

---
 modules/isr-fallback.ts                | 40 +++++++++++-
 test/unit/modules/isr-fallback.spec.ts | 89 ++++++++++++++++++++++++++
 2 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 test/unit/modules/isr-fallback.spec.ts

diff --git a/modules/isr-fallback.ts b/modules/isr-fallback.ts
index 3040973ddb..a37c9fe0a4 100644
--- a/modules/isr-fallback.ts
+++ b/modules/isr-fallback.ts
@@ -1,8 +1,19 @@
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { mkdirSync, readFileSync, symlinkSync, writeFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { defineNuxtModule } from 'nuxt/kit'
 import { provider } from 'std-env'
 
+const PACKAGE_FUNCTION = 'package/[...]-isr'
+const CRAWLER_FUNCTION = 'package/[...]-isr-crawler'
+const CRAWLER_USER_AGENT =
+  '.*(?:[Bb]ot|[Cc]rawl|[Ss]pider|Slurp|facebookexternalhit|Mediapartners|ia_archiver|embedly).*'
+
+interface VercelRoute {
+  src?: string
+  dest?: string
+  has?: Array<{ type: string; key: string; value?: string }>
+}
+
 export default defineNuxtModule({
   meta: {
     name: 'isr-fallback',
@@ -33,7 +44,34 @@ export default defineNuxtModule({
           writeFileSync(outputPath, spaTemplate)
           writeFileSync(outputPath.replace(htmlFallback, jsonFallback), '[{}]')
         }
+        addCrawlerFunction(resolve(nitro.options.output.dir))
       })
     })
   },
 })
+
+export function addCrawlerFunction(outputDir: string) {
+  const functionsDir = resolve(outputDir, 'functions')
+  const { fallback: _, ...prerenderConfig } = JSON.parse(
+    readFileSync(resolve(functionsDir, `${PACKAGE_FUNCTION}.prerender-config.json`), 'utf-8'),
+  )
+  writeFileSync(
+    resolve(functionsDir, `${CRAWLER_FUNCTION}.prerender-config.json`),
+    JSON.stringify(prerenderConfig, null, 2),
+  )
+  symlinkSync('./../__fallback.func', resolve(functionsDir, `${CRAWLER_FUNCTION}.func`))
+
+  const configPath = resolve(outputDir, 'config.json')
+  const config = JSON.parse(readFileSync(configPath, 'utf-8')) as { routes: VercelRoute[] }
+  const index = config.routes.findIndex(route => route.dest?.startsWith(`/${PACKAGE_FUNCTION}?`))
+  const route = config.routes[index]
+  if (!route?.dest) {
+    throw new Error(`[isr-fallback] could not find the route to /${PACKAGE_FUNCTION}`)
+  }
+  config.routes.splice(index, 0, {
+    ...route,
+    dest: route.dest.replace(`/${PACKAGE_FUNCTION}?`, `/${CRAWLER_FUNCTION}?`),
+    has: [{ type: 'header', key: 'user-agent', value: CRAWLER_USER_AGENT }],
+  })
+  writeFileSync(configPath, JSON.stringify(config, null, 2))
+}
diff --git a/test/unit/modules/isr-fallback.spec.ts b/test/unit/modules/isr-fallback.spec.ts
new file mode 100644
index 0000000000..41902ed747
--- /dev/null
+++ b/test/unit/modules/isr-fallback.spec.ts
@@ -0,0 +1,89 @@
+import { mkdirSync, mkdtempSync, readFileSync, realpathSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { resolve } from 'node:path'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
+
+vi.mock('nuxt/kit', () => ({
+  defineNuxtModule: <T>(module: T) => module,
+}))
+
+import { addCrawlerFunction } from '../../../modules/isr-fallback'
+
+describe('addCrawlerFunction', () => {
+  let dir: string
+  const humanRoute = {
+    src: '(?<__isr_route>/package/(?:.*))',
+    dest: '/package/[...]-isr?__isr_route=$__isr_route',
+  }
+  const prerenderConfig = {
+    expiration: 300,
+    fallback: 'spa.prerender-fallback.html',
+    allowQuery: ['activeTab', '__isr_route'],
+  }
+
+  const readJSON = (path: string) => JSON.parse(readFileSync(resolve(dir, path), 'utf-8'))
+
+  beforeEach(() => {
+    dir = mkdtempSync(resolve(tmpdir(), 'isr-fallback-'))
+    mkdirSync(resolve(dir, 'functions/package'), { recursive: true })
+    mkdirSync(resolve(dir, 'functions/__fallback.func'))
+    writeFileSync(
+      resolve(dir, 'functions/package/[...]-isr.prerender-config.json'),
+      JSON.stringify(prerenderConfig),
+    )
+    writeFileSync(
+      resolve(dir, 'config.json'),
+      JSON.stringify({ routes: [{ handle: 'filesystem' }, humanRoute, { src: '/(.*)' }] }),
+    )
+  })
+
+  afterEach(() => {
+    rmSync(dir, { recursive: true, force: true })
+  })
+
+  it('adds a package page function without a fallback', () => {
+    addCrawlerFunction(dir)
+
+    const { fallback: _, ...expected } = prerenderConfig
+    expect(readJSON('functions/package/[...]-isr-crawler.prerender-config.json')).toEqual(expected)
+    expect(readJSON('functions/package/[...]-isr.prerender-config.json')).toEqual(prerenderConfig)
+    expect(realpathSync(resolve(dir, 'functions/package/[...]-isr-crawler.func'))).toBe(
+      realpathSync(resolve(dir, 'functions/__fallback.func')),
+    )
+  })
+
+  it('routes crawler user agents to it and leaves other requests on the fallback', () => {
+    addCrawlerFunction(dir)
+
+    const { routes } = readJSON('config.json') as {
+      routes: Array<{ dest?: string; has?: Array<{ value: string }> }>
+    }
+    expect(routes).toHaveLength(4)
+    expect(routes[2]).toEqual(humanRoute)
+
+    const select = (userAgent: string) =>
+      routes
+        .slice(1, 3)
+        .find(route => !route.has || route.has.every(c => new RegExp(c.value).test(userAgent)))
+        ?.dest
+
+    for (const userAgent of [
+      'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',
+      'Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)',
+      'facebookexternalhit/1.1',
+      'Mozilla/5.0 (compatible; Yahoo! Slurp)',
+    ]) {
+      expect(select(userAgent)).toBe('/package/[...]-isr-crawler?__isr_route=$__isr_route')
+    }
+    expect(
+      select(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36',
+      ),
+    ).toBe(humanRoute.dest)
+  })
+
+  it('throws when the package page route is missing', () => {
+    writeFileSync(resolve(dir, 'config.json'), JSON.stringify({ routes: [] }))
+    expect(() => addCrawlerFunction(dir)).toThrow(/could not find the route/)
+  })
+})

From e5098b83827e49eb0936cb0f7fed6e49b7652108 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 13 Nov 2026 07:44:07 +0000
Subject: [PATCH 10/10] perf: prefetch payload routes on interaction only
 (#3444)

---
 app/components/DependencyPathPopup.vue        |  1 +
 .../DepsStats/DependencyStatsPanel.vue        |  1 +
 app/components/Diff/SidebarPanel.vue          |  1 +
 app/components/Header/PackagesDropdown.vue    |  1 +
 app/components/Link/Base.vue                  |  8 ++++++++
 app/components/Package/ClaimPackageModal.vue  |  1 +
 app/components/Package/DeprecatedTree.vue     |  1 +
 .../Package/Install/AdditionalCommands.vue    |  2 ++
 app/components/Package/LikeCard.vue           |  2 +-
 app/components/Package/VulnerabilityTree.vue  |  2 ++
 .../[packageName]/v/[versionRange].vue        |  4 ++--
 app/pages/leaderboard/likes.vue               |  3 +++
 app/pages/package-docs/[...path].vue          |  1 +
 app/pages/package/[[org]]/[name]/versions.vue |  1 +
 test/nuxt/components/LinkBase.spec.ts         | 20 +++++++++++++++++++
 15 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 test/nuxt/components/LinkBase.spec.ts

diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
index 9d0f40ba4d..55fee01416 100644
--- a/app/components/DependencyPathPopup.vue
+++ b/app/components/DependencyPathPopup.vue
@@ -99,6 +99,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
                   parsePackageString(pathItem).version,
                 )
               "
+              prefetch-on="interaction"
               class="hover:underline"
               :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
               @click="closePopup"
diff --git a/app/components/DepsStats/DependencyStatsPanel.vue b/app/components/DepsStats/DependencyStatsPanel.vue
index 7dd1cacdea..df4052a76f 100644
--- a/app/components/DepsStats/DependencyStatsPanel.vue
+++ b/app/components/DepsStats/DependencyStatsPanel.vue
@@ -84,6 +84,7 @@ function formatFacetValue(value: FacetValue): string {
       <h2 class="font-mono text-lg font-medium truncate">
         <NuxtLink
           :to="packageRoute(packageName, resolvedVersion)"
+          prefetch-on="interaction"
           class="text-fg hover:text-accent transition-colors"
         >
           {{ packageName }}
diff --git a/app/components/Diff/SidebarPanel.vue b/app/components/Diff/SidebarPanel.vue
index 2b3745fa3f..3a71e70379 100644
--- a/app/components/Diff/SidebarPanel.vue
+++ b/app/components/Diff/SidebarPanel.vue
@@ -153,6 +153,7 @@ function handleFileSelect(file: FileChange) {
 
               <NuxtLink
                 :to="packageRoute(dep.name)"
+                prefetch-on="interaction"
                 class="font-mono hover:text-fg transition-colors truncate min-w-0"
               >
                 {{ dep.name }}
diff --git a/app/components/Header/PackagesDropdown.vue b/app/components/Header/PackagesDropdown.vue
index 3f70c648f2..1dc8854c30 100644
--- a/app/components/Header/PackagesDropdown.vue
+++ b/app/components/Header/PackagesDropdown.vue
@@ -95,6 +95,7 @@ function handleKeydown(event: KeyboardEvent) {
             <li v-for="pkg in packages" :key="pkg">
               <NuxtLink
                 :to="packageRoute(pkg)"
+                prefetch-on="interaction"
                 class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
               >
                 {{ pkg }}
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 561273154c..64906a147c 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -61,6 +61,13 @@ const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 
+const router = useRouter()
+const prefetchOn = computed(() => {
+  if (!props.to || isLinkExternal.value || isLinkAnchor.value) return undefined
+  const { path } = router.resolve(props.to)
+  return getRouteRules({ path }).payload ? 'interaction' : undefined
+})
+
 /** size is only applicable for button like links */
 const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
@@ -122,6 +129,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
         variant === 'button-primary',
     }"
     :to="to"
+    :prefetch-on="prefetchOn"
     :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"
     :target="isLinkExternal ? '_blank' : undefined"
   >
diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
index d7d8b4fbed..ff9e66c1a5 100644
--- a/app/components/Package/ClaimPackageModal.vue
+++ b/app/components/Package/ClaimPackageModal.vue
@@ -176,6 +176,7 @@ const previewPackageJson = computed(() => {
       <div class="flex gap-3">
         <NuxtLink
           :to="packageRoute(packageName)"
+          prefetch-on="interaction"
           class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
           @click="close"
         >
diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index 178e5bf1a3..1d417606e4 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/app/components/Package/DeprecatedTree.vue
@@ -88,6 +88,7 @@ function getDepthStyle(depth: DependencyDepth) {
 
               <NuxtLink
                 :to="packageRoute(pkg.name, pkg.version)"
+                prefetch-on="interaction"
                 class="font-mono text-sm font-medium hover:underline truncate py-4"
                 :class="getDepthStyle(pkg.depth).text"
               >
diff --git a/app/components/Package/Install/AdditionalCommands.vue b/app/components/Package/Install/AdditionalCommands.vue
index 712ddb2b3b..edec59dd4c 100644
--- a/app/components/Package/Install/AdditionalCommands.vue
+++ b/app/components/Package/Install/AdditionalCommands.vue
@@ -204,6 +204,7 @@ function copyCreateCommand() {
         >
         <NuxtLink
           :to="packageRoute(typesPackageName!)"
+          prefetch-on="interaction"
           class="shrink-0 text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-accent/70 rounded select-none -m-1 p-1"
           :title="$t('package.get_started.view_types', { package: typesPackageName })"
         >
@@ -273,6 +274,7 @@ function copyCreateCommand() {
         >
           <NuxtLink
             :to="packageRoute(createPackageInfo.packageName)"
+            prefetch-on="interaction"
             class="mb-0.5 inline-flex items-center justify-center min-w-5 min-h-5 -m-1 p-1 text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
           >
             <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
diff --git a/app/components/Package/LikeCard.vue b/app/components/Package/LikeCard.vue
index d21036722f..3567864f43 100644
--- a/app/components/Package/LikeCard.vue
+++ b/app/components/Package/LikeCard.vue
@@ -70,7 +70,7 @@ const likeAction = async () => {
 </script>
 
 <template>
-  <NuxtLink :to="packageRoute(name)">
+  <NuxtLink :to="packageRoute(name)" prefetch-on="interaction">
     <BaseCard class="font-mono flex justify-between min-w-0">
       <span class="truncate min-w-0" :title="name">{{ name }}</span>
       <div class="flex items-center gap-4 justify-between shrink-0">
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index bca8eb312d..d335a64718 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -127,6 +127,7 @@ function getDepthStyle(depth: string | undefined) {
 
                 <NuxtLink
                   :to="packageRoute(pkg.name, pkg.version)"
+                  prefetch-on="interaction"
                   class="font-mono text-sm font-medium hover:underline truncate shrink min-w-0"
                   :class="getDepthStyle(pkg.depth).text"
                 >
@@ -163,6 +164,7 @@ function getDepthStyle(depth: string | undefined) {
                 <NuxtLink
                   v-if="vuln.fixedIn"
                   :to="packageRoute(pkg.name, vuln.fixedIn)"
+                  prefetch-on="interaction"
                   class="shrink-0 font-mono text-emerald-600 dark:text-emerald-400 hover:underline"
                   :title="$t('package.vulnerabilities.fixed_in_title', { version: vuln.fixedIn })"
                 >
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
index 3da147500d..943ac57b72 100644
--- a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
+++ b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -162,7 +162,7 @@ useSeoMeta({
           }}...{{ $t('compare.version_invalid_url_format.to_version') }}</code
         >
       </i18n-t>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">{{
+      <NuxtLink :to="packageRoute(packageName)" prefetch-on="interaction" class="btn">{{
         $t('compare.version_back_to_package')
       }}</NuxtLink>
     </div>
@@ -176,7 +176,7 @@ useSeoMeta({
     <!-- Error state -->
     <div v-else-if="compareStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('compare.version_error_message') }}</p>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">{{
+      <NuxtLink :to="packageRoute(packageName)" prefetch-on="interaction" class="btn">{{
         $t('compare.version_back_to_package')
       }}</NuxtLink>
     </div>
diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index a7a431f887..d1bbeac05a 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -146,6 +146,7 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
 
               <NuxtLink
                 :to="packageRoute(entry.packageName)"
+                prefetch-on="interaction"
                 class="leaderboard-package-link block w-full rounded-lg no-underline text-inherit hover:no-underline focus-visible:outline-none"
               >
                 <BaseCard
@@ -247,6 +248,7 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
 
               <NuxtLink
                 :to="packageRoute(entry.packageName)"
+                prefetch-on="interaction"
                 class="leaderboard-package-link block h-full w-full rounded-lg no-underline text-inherit hover:no-underline focus-visible:outline-none"
               >
                 <BaseCard
@@ -334,6 +336,7 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
           >
             <NuxtLink
               :to="packageRoute(entry.packageName)"
+              prefetch-on="interaction"
               class="leaderboard-package-link block w-full rounded-lg no-underline hover:no-underline focus-visible:outline-none"
             >
               <BaseCard
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
index 8712e97255..956c33d202 100644
--- a/app/pages/package-docs/[...path].vue
+++ b/app/pages/package-docs/[...path].vue
@@ -207,6 +207,7 @@ const stickyStyle = computed(() => {
               <NuxtLink
                 v-if="packageName"
                 :to="packageRoute(packageName)"
+                prefetch-on="interaction"
                 class="link-subtle font-mono text-sm"
               >
                 {{ $t('package.docs.view_package') }}
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 658e25a48f..0de6cf02ec 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -273,6 +273,7 @@ const flatItems = computed<FlatItem[]>(() => {
         <div class="flex items-center gap-2 min-w-0">
           <NuxtLink
             :to="packageRoute(packageName)"
+            prefetch-on="interaction"
             class="text-lg font-medium hover:text-fg-muted transition-colors min-w-0 truncate"
             :title="packageName"
             dir="ltr"
diff --git a/test/nuxt/components/LinkBase.spec.ts b/test/nuxt/components/LinkBase.spec.ts
new file mode 100644
index 0000000000..6dc240a1e8
--- /dev/null
+++ b/test/nuxt/components/LinkBase.spec.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vite-plus/test'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { LinkBase } from '#components'
+
+async function getPrefetchOn(to: string) {
+  const wrapper = await mountSuspended(LinkBase, { props: { to }, slots: { default: () => 'x' } })
+  return wrapper.findComponent({ name: 'NuxtLink' }).props('prefetchOn')
+}
+
+describe('LinkBase', () => {
+  it('prefetches cached payload routes on interaction only', async () => {
+    expect(await getPrefetchOn('/package/vue')).toBe('interaction')
+    expect(await getPrefetchOn('/package/@vue/core/v/3.5.0')).toBe('interaction')
+  })
+
+  it('keeps the default prefetch behaviour for other routes', async () => {
+    expect(await getPrefetchOn('/org/vue')).toBeUndefined()
+    expect(await getPrefetchOn('/about')).toBeUndefined()
+  })
+})