From c5ef7d8c90aba5121c8f39a6d379b3249c94e388 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Tue, 27 Jan 2026 17:18:35 +0100
Subject: [PATCH 1/3] refactor(i18n): use `$t` in script

---
 app/components/ClaimPackageModal.vue          |  8 +-
 app/components/ConnectorStatus.client.vue     | 14 ++-
 app/components/HeaderOrgsDropdown.vue         | 17 ++--
 app/components/HeaderPackagesDropdown.vue     | 17 ++--
 app/components/LoadingSpinner.vue             |  4 +-
 app/components/OrgMembersPanel.vue            | 16 ++--
 app/components/PackageDownloadAnalytics.vue   | 22 +++--
 app/components/PackageInstallScripts.vue      |  6 +-
 app/components/PackageListControls.vue        | 12 ++-
 app/components/PackageMetricsBadges.vue       | 14 ++-
 app/components/PackageSkeleton.vue            | 28 +++---
 app/components/PackageVersions.vue            | 14 ++-
 app/components/PackageVulnerabilities.vue     | 12 ++-
 app/components/PackageWeeklyDownloadStats.vue | 10 ++-
 app/components/ProvenanceBadge.vue            | 10 +--
 app/pages/@[org].vue                          | 32 ++++---
 app/pages/[...package].vue                    | 86 +++++++++----------
 app/pages/code/[...path].vue                  | 40 ++++-----
 app/pages/index.vue                           |  5 +-
 app/pages/search.vue                          | 29 +++----
 app/pages/~[username]/index.vue               | 21 +++--
 app/pages/~[username]/orgs.vue                | 33 ++++---
 22 files changed, 209 insertions(+), 241 deletions(-)

diff --git a/app/components/ClaimPackageModal.vue b/app/components/ClaimPackageModal.vue
index fa918adce1..ca356ebd96 100644
--- a/app/components/ClaimPackageModal.vue
+++ b/app/components/ClaimPackageModal.vue
@@ -8,8 +8,6 @@ const props = defineProps<{
 
 const open = defineModel<boolean>('open', { default: false })
 
-const { t } = useI18n()
-
 const {
   isConnected,
   state,
@@ -34,7 +32,7 @@ async function checkAvailability() {
   try {
     checkResult.value = await checkPackageName(props.packageName)
   } catch (err) {
-    publishError.value = err instanceof Error ? err.message : t('claim.modal.failed_to_check')
+    publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_check')
   } finally {
     isChecking.value = false
   }
@@ -84,7 +82,7 @@ async function handleClaim() {
       connectorModalOpen.value = true
     }
   } catch (err) {
-    publishError.value = err instanceof Error ? err.message : t('claim.modal.failed_to_claim')
+    publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_claim')
   } finally {
     isPublishing.value = false
   }
@@ -171,7 +169,7 @@ const connectorModalOpen = shallowRef(false)
 
             <!-- Loading state -->
             <div v-if="isChecking" class="py-8 text-center">
-              <LoadingSpinner :text="t('claim.modal.checking')" />
+              <LoadingSpinner :text="$t('claim.modal.checking')" />
             </div>
 
             <!-- Success state -->
diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index a32bd0cbe8..bf9e705ed2 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -12,12 +12,10 @@ const {
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
 
-const { t } = useI18n()
-
 const tooltipText = computed(() => {
-  if (isConnecting.value) return t('connector.status.connecting')
-  if (isConnected.value) return t('connector.status.connected')
-  return t('connector.status.connect_cli')
+  if (isConnecting.value) return $t('connector.status.connecting')
+  if (isConnected.value) return $t('connector.status.connected')
+  return $t('connector.status.connect_cli')
 })
 
 const statusColor = computed(() => {
@@ -31,9 +29,9 @@ const operationCount = computed(() => activeOperations.value.length)
 
 const ariaLabel = computed(() => {
   if (error.value) return error.value
-  if (isConnecting.value) return t('connector.status.aria_connecting')
-  if (isConnected.value) return t('connector.status.aria_connected')
-  return t('connector.status.aria_click_to_connect')
+  if (isConnecting.value) return $t('connector.status.aria_connecting')
+  if (isConnected.value) return $t('connector.status.aria_connected')
+  return $t('connector.status.aria_click_to_connect')
 })
 </script>
 
diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
index 35fbc8dfd7..0075ff557f 100644
--- a/app/components/HeaderOrgsDropdown.vue
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -3,7 +3,6 @@ const props = defineProps<{
   username: string
 }>()
 
-const { t } = useI18n()
 const { listUserOrgs } = useConnector()
 
 const isOpen = ref(false)
@@ -23,11 +22,11 @@ async function loadOrgs() {
       // Already sorted alphabetically by server, take top 10
       orgs.value = orgList.slice(0, 10)
     } else {
-      error.value = t('header.orgs_dropdown.error')
+      error.value = $t('header.orgs_dropdown.error')
     }
     hasLoaded.value = true
   } catch {
-    error.value = t('header.orgs_dropdown.error')
+    error.value = $t('header.orgs_dropdown.error')
   } finally {
     isLoading.value = false
   }
@@ -62,7 +61,7 @@ function handleKeydown(event: KeyboardEvent) {
       :to="`/~${username}/orgs`"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
-      {{ t('header.orgs') }}
+      {{ $t('header.orgs') }}
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
@@ -80,16 +79,16 @@ function handleKeydown(event: KeyboardEvent) {
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
-              t('header.orgs_dropdown.title')
+              $t('header.orgs_dropdown.title')
             }}</span>
           </div>
 
           <div v-if="isLoading" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.loading') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.orgs_dropdown.loading') }}</span>
           </div>
 
           <div v-else-if="error" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.error') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.orgs_dropdown.error') }}</span>
           </div>
 
           <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
@@ -104,7 +103,7 @@ function handleKeydown(event: KeyboardEvent) {
           </ul>
 
           <div v-else class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.empty') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.orgs_dropdown.empty') }}</span>
           </div>
 
           <div class="px-3 py-2 border-t border-border">
@@ -112,7 +111,7 @@ function handleKeydown(event: KeyboardEvent) {
               :to="`/~${username}/orgs`"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              {{ t('header.orgs_dropdown.view_all') }}
+              {{ $t('header.orgs_dropdown.view_all') }}
               <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
index 4c77e50400..4c6a09c378 100644
--- a/app/components/HeaderPackagesDropdown.vue
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -3,7 +3,6 @@ const props = defineProps<{
   username: string
 }>()
 
-const { t } = useI18n()
 const { listUserPackages } = useConnector()
 
 const isOpen = ref(false)
@@ -23,11 +22,11 @@ async function loadPackages() {
       // Sort alphabetically and take top 10
       packages.value = Object.keys(pkgMap).sort().slice(0, 10)
     } else {
-      error.value = t('header.packages_dropdown.error')
+      error.value = $t('header.packages_dropdown.error')
     }
     hasLoaded.value = true
   } catch {
-    error.value = t('header.packages_dropdown.error')
+    error.value = $t('header.packages_dropdown.error')
   } finally {
     isLoading.value = false
   }
@@ -62,7 +61,7 @@ function handleKeydown(event: KeyboardEvent) {
       :to="`/~${username}`"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
-      {{ t('header.packages') }}
+      {{ $t('header.packages') }}
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
@@ -80,16 +79,16 @@ function handleKeydown(event: KeyboardEvent) {
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
-              t('header.packages_dropdown.title')
+              $t('header.packages_dropdown.title')
             }}</span>
           </div>
 
           <div v-if="isLoading" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.loading') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.packages_dropdown.loading') }}</span>
           </div>
 
           <div v-else-if="error" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.error') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.packages_dropdown.error') }}</span>
           </div>
 
           <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
@@ -104,7 +103,7 @@ function handleKeydown(event: KeyboardEvent) {
           </ul>
 
           <div v-else class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.empty') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.packages_dropdown.empty') }}</span>
           </div>
 
           <div class="px-3 py-2 border-t border-border">
@@ -112,7 +111,7 @@ function handleKeydown(event: KeyboardEvent) {
               :to="`/~${username}`"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              {{ t('header.packages_dropdown.view_all') }}
+              {{ $t('header.packages_dropdown.view_all') }}
               <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
diff --git a/app/components/LoadingSpinner.vue b/app/components/LoadingSpinner.vue
index af94573085..b221b83c38 100644
--- a/app/components/LoadingSpinner.vue
+++ b/app/components/LoadingSpinner.vue
@@ -3,8 +3,6 @@ defineProps<{
   /** Text to display next to the spinner */
   text?: string
 }>()
-
-const { t } = useI18n()
 </script>
 
 <template>
@@ -12,6 +10,6 @@ const { t } = useI18n()
     <span
       class="w-4 h-4 border-2 border-fg-subtle border-t-fg rounded-full motion-safe:animate-spin"
     />
-    {{ text ?? t('common.loading') }}
+    {{ text ?? $t('common.loading') }}
   </div>
 </template>
diff --git a/app/components/OrgMembersPanel.vue b/app/components/OrgMembersPanel.vue
index 37f452583e..8218fd5276 100644
--- a/app/components/OrgMembersPanel.vue
+++ b/app/components/OrgMembersPanel.vue
@@ -10,8 +10,6 @@ const emit = defineEmits<{
   'select-team': [teamName: string]
 }>()
 
-const { t } = useI18n()
-
 const {
   isConnected,
   lastExecutionTime,
@@ -347,7 +345,7 @@ watch(lastExecutionTime, () => {
           :aria-pressed="filterRole === role"
           @click="filterRole = role"
         >
-          {{ t(`org.members.role.${role}`) }}
+          {{ $t(`org.members.role.${role}`) }}
           <span v-if="role !== 'all'" class="text-fg-subtle">({{ roleCounts[role] }})</span>
         </button>
       </div>
@@ -465,9 +463,9 @@ watch(lastExecutionTime, () => {
                 )
               "
             >
-              <option value="developer">{{ t('org.members.role.developer') }}</option>
-              <option value="admin">{{ t('org.members.role.admin') }}</option>
-              <option value="owner">{{ t('org.members.role.owner') }}</option>
+              <option value="developer">{{ $t('org.members.role.developer') }}</option>
+              <option value="admin">{{ $t('org.members.role.admin') }}</option>
+              <option value="owner">{{ $t('org.members.role.owner') }}</option>
             </select>
             <!-- Remove button -->
             <button
@@ -526,9 +524,9 @@ watch(lastExecutionTime, () => {
               name="new-member-role"
               class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             >
-              <option value="developer">{{ t('org.members.role.developer') }}</option>
-              <option value="admin">{{ t('org.members.role.admin') }}</option>
-              <option value="owner">{{ t('org.members.role.owner') }}</option>
+              <option value="developer">{{ $t('org.members.role.developer') }}</option>
+              <option value="admin">{{ $t('org.members.role.admin') }}</option>
+              <option value="owner">{{ $t('org.members.role.owner') }}</option>
             </select>
             <!-- Team selection -->
             <label for="new-member-team" class="sr-only">{{ $t('org.members.team_label') }}</label>
diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
index c227d7b2df..7666a1e5a2 100644
--- a/app/components/PackageDownloadAnalytics.vue
+++ b/app/components/PackageDownloadAnalytics.vue
@@ -4,8 +4,6 @@ import type { VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn } from '@vueuse/core'
 
-const { t } = useI18n()
-
 const {
   weeklyDownloads,
   inModal = false,
@@ -398,7 +396,7 @@ const config = computed(() => ({
     grid: {
       labels: {
         axis: {
-          yLabel: t('package.downloads.y_axis_label', { granularity: selectedGranularity.value }),
+          yLabel: $t('package.downloads.y_axis_label', { granularity: selectedGranularity.value }),
           xLabel: packageName,
           yLabelOffsetX: 12,
           fontSize: 24,
@@ -469,7 +467,7 @@ const config = computed(() => ({
             for="granularity"
             class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
           >
-            {{ t('package.downloads.granularity') }}
+            {{ $t('package.downloads.granularity') }}
           </label>
 
           <div
@@ -480,10 +478,10 @@ const config = computed(() => ({
               v-model="selectedGranularity"
               class="w-full bg-transparent font-mono text-sm text-fg outline-none"
             >
-              <option value="daily">{{ t('package.downloads.granularity_daily') }}</option>
-              <option value="weekly">{{ t('package.downloads.granularity_weekly') }}</option>
-              <option value="monthly">{{ t('package.downloads.granularity_monthly') }}</option>
-              <option value="yearly">{{ t('package.downloads.granularity_yearly') }}</option>
+              <option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
+              <option value="weekly">{{ $t('package.downloads.granularity_weekly') }}</option>
+              <option value="monthly">{{ $t('package.downloads.granularity_monthly') }}</option>
+              <option value="yearly">{{ $t('package.downloads.granularity_yearly') }}</option>
             </select>
           </div>
         </div>
@@ -495,7 +493,7 @@ const config = computed(() => ({
               for="startDate"
               class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
             >
-              {{ t('package.downloads.start_date') }}
+              {{ $t('package.downloads.start_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-fg/50)"
@@ -515,7 +513,7 @@ const config = computed(() => ({
               for="endDate"
               class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
             >
-              {{ t('package.downloads.end_date') }}
+              {{ $t('package.downloads.end_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-fg/50)"
@@ -636,7 +634,7 @@ const config = computed(() => ({
       v-if="inModal && !chartData.dataset && !pending"
       class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
     >
-      {{ t('package.downloads.no_data') }}
+      {{ $t('package.downloads.no_data') }}
     </div>
 
     <div
@@ -645,7 +643,7 @@ const config = computed(() => ({
       aria-live="polite"
       class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
     >
-      {{ t('package.downloads.loading') }}
+      {{ $t('package.downloads.loading') }}
     </div>
   </div>
 </template>
diff --git a/app/components/PackageInstallScripts.vue b/app/components/PackageInstallScripts.vue
index 4c4a8b0204..c3bad2e9d8 100644
--- a/app/components/PackageInstallScripts.vue
+++ b/app/components/PackageInstallScripts.vue
@@ -8,8 +8,6 @@ const props = defineProps<{
   }
 }>()
 
-const { t } = useI18n()
-
 const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
 const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
 const sortedNpxDeps = computed(() => {
@@ -58,7 +56,7 @@ const isExpanded = shallowRef(false)
           aria-hidden="true"
         />
         {{
-          t(
+          $t(
             'package.install_scripts.npx_packages',
             { count: sortedNpxDeps.length },
             sortedNpxDeps.length,
@@ -101,7 +99,7 @@ const isExpanded = shallowRef(false)
               :title="
                 outdatedNpxDeps[dep]
                   ? outdatedNpxDeps[dep].resolved === outdatedNpxDeps[dep].latest
-                    ? t('package.install_scripts.currently', {
+                    ? $t('package.install_scripts.currently', {
                         version: outdatedNpxDeps[dep].latest,
                       })
                     : getOutdatedTooltip(outdatedNpxDeps[dep])
diff --git a/app/components/PackageListControls.vue b/app/components/PackageListControls.vue
index 273731501e..20b33b5f79 100644
--- a/app/components/PackageListControls.vue
+++ b/app/components/PackageListControls.vue
@@ -19,8 +19,6 @@ const emit = defineEmits<{
   'update:sort': [value: SortOption]
 }>()
 
-const { t } = useI18n()
-
 const filterValue = computed({
   get: () => props.filter,
   set: value => emit('update:filter', value),
@@ -34,10 +32,10 @@ const sortValue = computed({
 const sortOptions = computed(
   () =>
     [
-      { value: 'downloads', label: t('package.sort.downloads') },
-      { value: 'updated', label: t('package.sort.updated') },
-      { value: 'name-asc', label: t('package.sort.name_asc') },
-      { value: 'name-desc', label: t('package.sort.name_desc') },
+      { value: 'downloads', label: $t('package.sort.downloads') },
+      { value: 'updated', label: $t('package.sort.updated') },
+      { value: 'name-asc', label: $t('package.sort.name_asc') },
+      { value: 'name-desc', label: $t('package.sort.name_desc') },
     ] as const,
 )
 
@@ -67,7 +65,7 @@ const showFilteredCount = computed(() => {
         id="package-filter"
         v-model="filterValue"
         type="search"
-        :placeholder="placeholder ?? t('package.list.filter_placeholder')"
+        :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
         autocomplete="off"
         class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
       />
diff --git a/app/components/PackageMetricsBadges.vue b/app/components/PackageMetricsBadges.vue
index ff616dc888..46689b51bd 100644
--- a/app/components/PackageMetricsBadges.vue
+++ b/app/components/PackageMetricsBadges.vue
@@ -25,19 +25,17 @@ const moduleFormatLabel = computed(() => {
   }
 })
 
-const { t } = useI18n()
-
 const moduleFormatTooltip = computed(() => {
   if (!analysis.value) return ''
   switch (analysis.value.moduleFormat) {
     case 'esm':
-      return t('package.metrics.esm')
+      return $t('package.metrics.esm')
     case 'cjs':
-      return t('package.metrics.cjs')
+      return $t('package.metrics.cjs')
     case 'dual':
-      return t('package.metrics.dual')
+      return $t('package.metrics.dual')
     default:
-      return t('package.metrics.unknown_format')
+      return $t('package.metrics.unknown_format')
   }
 })
 
@@ -50,9 +48,9 @@ const typesTooltip = computed(() => {
   if (!analysis.value) return ''
   switch (analysis.value.types?.kind) {
     case 'included':
-      return t('package.metrics.ts_included')
+      return $t('package.metrics.ts_included')
     case '@types':
-      return t('package.metrics.types_from', { package: analysis.value.types.packageName })
+      return $t('package.metrics.types_from', { package: analysis.value.types.packageName })
     default:
       return ''
   }
diff --git a/app/components/PackageSkeleton.vue b/app/components/PackageSkeleton.vue
index 1aaa3f6be6..3edc3b6da4 100644
--- a/app/components/PackageSkeleton.vue
+++ b/app/components/PackageSkeleton.vue
@@ -1,11 +1,9 @@
-<script setup lang="ts">
-const { t } = useI18n()
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <article
     aria-busy="true"
-    :aria-label="t('package.skeleton.loading')"
+    :aria-label="$t('package.skeleton.loading')"
     class="motion-safe:animate-fade-in"
   >
     <!-- Package header - matches header in [...name].vue -->
@@ -35,7 +33,7 @@ const { t } = useI18n()
         <!-- License -->
         <div class="space-y-1">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ t('package.skeleton.license') }}
+            {{ $t('package.skeleton.license') }}
           </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-12" />
@@ -45,7 +43,7 @@ const { t } = useI18n()
         <!-- Weekly -->
         <div class="space-y-1">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ t('package.skeleton.weekly') }}
+            {{ $t('package.skeleton.weekly') }}
           </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-20" />
@@ -55,7 +53,7 @@ const { t } = useI18n()
         <!-- Size -->
         <div class="space-y-1">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ t('package.skeleton.size') }}
+            {{ $t('package.skeleton.size') }}
           </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-16" />
@@ -65,7 +63,7 @@ const { t } = useI18n()
         <!-- Deps -->
         <div class="space-y-1">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ t('package.skeleton.deps') }}
+            {{ $t('package.skeleton.deps') }}
           </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-8" />
@@ -75,7 +73,7 @@ const { t } = useI18n()
         <!-- Updated -->
         <div class="space-y-1 col-span-2">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ t('package.skeleton.updated') }}
+            {{ $t('package.skeleton.updated') }}
           </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-28" />
@@ -108,7 +106,7 @@ const { t } = useI18n()
         id="install-heading-skeleton"
         class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
       >
-        {{ t('package.skeleton.install') }}
+        {{ $t('package.skeleton.install') }}
       </h2>
       <!-- code-block with relative positioning for copy button -->
       <div class="relative">
@@ -128,7 +126,7 @@ const { t } = useI18n()
             id="readme-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-4"
           >
-            {{ t('package.skeleton.readme') }}
+            {{ $t('package.skeleton.readme') }}
           </h2>
           <!-- Simulated README content -->
           <div class="space-y-4">
@@ -159,7 +157,7 @@ const { t } = useI18n()
             id="maintainers-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            {{ t('package.skeleton.maintainers') }}
+            {{ $t('package.skeleton.maintainers') }}
           </h2>
           <ul class="space-y-2 list-none m-0 p-0">
             <li>
@@ -177,7 +175,7 @@ const { t } = useI18n()
             id="keywords-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            {{ t('package.skeleton.keywords') }}
+            {{ $t('package.skeleton.keywords') }}
           </h2>
           <!-- flex flex-wrap gap-1.5 -->
           <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
@@ -196,7 +194,7 @@ const { t } = useI18n()
             id="versions-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            {{ t('package.skeleton.versions') }}
+            {{ $t('package.skeleton.versions') }}
           </h2>
           <!-- space-y-1, each row: flex items-center justify-between py-1.5 text-sm -->
           <div class="space-y-1">
@@ -229,7 +227,7 @@ const { t } = useI18n()
             id="dependencies-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            {{ t('package.skeleton.dependencies') }}
+            {{ $t('package.skeleton.dependencies') }}
           </h2>
           <!-- space-y-1, each: flex items-center justify-between py-1 text-sm -->
           <ul class="space-y-1 list-none m-0 p-0">
diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index f0daef8aa5..372a59eeff 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -10,8 +10,6 @@ import {
 } from '~/utils/versions'
 import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
 
-const { t } = useI18n()
-
 const props = defineProps<{
   packageName: string
   versions: Record<string, PackumentVersion>
@@ -345,7 +343,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 "
                 :title="
                   row.primaryVersion.deprecated
-                    ? t('package.versions.deprecated_title', {
+                    ? $t('package.versions.deprecated_title', {
                         version: row.primaryVersion.version,
                       })
                     : row.primaryVersion.version
@@ -400,7 +398,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 "
                 :title="
                   v.deprecated
-                    ? t('package.versions.deprecated_title', { version: v.version })
+                    ? $t('package.versions.deprecated_title', { version: v.version })
                     : v.version
                 "
               >
@@ -492,7 +490,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 "
                 :title="
                   row.primaryVersion.deprecated
-                    ? t('package.versions.deprecated_title', {
+                    ? $t('package.versions.deprecated_title', {
                         version: row.primaryVersion.version,
                       })
                     : row.primaryVersion.version
@@ -562,7 +560,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       "
                       :title="
                         group.versions[0]?.deprecated
-                          ? t('package.versions.deprecated_title', {
+                          ? $t('package.versions.deprecated_title', {
                               version: group.versions[0]?.version,
                             })
                           : group.versions[0]?.version
@@ -618,7 +616,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       "
                       :title="
                         group.versions[0]?.deprecated
-                          ? t('package.versions.deprecated_title', {
+                          ? $t('package.versions.deprecated_title', {
                               version: group.versions[0]?.version,
                             })
                           : group.versions[0]?.version
@@ -672,7 +670,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       "
                       :title="
                         v.deprecated
-                          ? t('package.versions.deprecated_title', { version: v.version })
+                          ? $t('package.versions.deprecated_title', { version: v.version })
                           : v.version
                       "
                     >
diff --git a/app/components/PackageVulnerabilities.vue b/app/components/PackageVulnerabilities.vue
index d284cca5b4..4871d13d16 100644
--- a/app/components/PackageVulnerabilities.vue
+++ b/app/components/PackageVulnerabilities.vue
@@ -92,12 +92,10 @@ function getVulnerabilityUrl(vuln: OsvVulnerability): string {
   return `https://osv.dev/vulnerability/${vuln.id}`
 }
 
-const { t } = useI18n()
-
 function toVulnerabilitySummary(vuln: OsvVulnerability): VulnerabilitySummary {
   return {
     id: vuln.id,
-    summary: vuln.summary || t('package.vulnerabilities.no_description'),
+    summary: vuln.summary || $t('package.vulnerabilities.no_description'),
     severity: getSeverityLevel(vuln),
     aliases: vuln.aliases || [],
     url: getVulnerabilityUrl(vuln),
@@ -142,11 +140,11 @@ const summaryText = computed(() => {
   const counts = vulnData.value.counts
   const parts: string[] = []
   if (counts.critical > 0)
-    parts.push(`${counts.critical} ${t('package.vulnerabilities.severity.critical')}`)
-  if (counts.high > 0) parts.push(`${counts.high} ${t('package.vulnerabilities.severity.high')}`)
+    parts.push(`${counts.critical} ${$t('package.vulnerabilities.severity.critical')}`)
+  if (counts.high > 0) parts.push(`${counts.high} ${$t('package.vulnerabilities.severity.high')}`)
   if (counts.moderate > 0)
-    parts.push(`${counts.moderate} ${t('package.vulnerabilities.severity.moderate')}`)
-  if (counts.low > 0) parts.push(`${counts.low} ${t('package.vulnerabilities.severity.low')}`)
+    parts.push(`${counts.moderate} ${$t('package.vulnerabilities.severity.moderate')}`)
+  if (counts.low > 0) parts.push(`${counts.low} ${$t('package.vulnerabilities.severity.low')}`)
   return parts.join(', ')
 })
 </script>
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index efdf79ddfd..3ee5ec3306 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -6,7 +6,6 @@ const { packageName } = defineProps<{
   packageName: string
 }>()
 
-const { t } = useI18n()
 const showModal = ref(false)
 
 const { data: packument } = usePackage(() => packageName)
@@ -43,7 +42,10 @@ watch(
 const dataset = computed(() =>
   weeklyDownloads.value.map(d => ({
     value: d?.downloads ?? 0,
-    period: t('package.downloads.date_range', { start: d.weekStart ?? '-', end: d.weekEnd ?? '-' }),
+    period: $t('package.downloads.date_range', {
+      start: d.weekStart ?? '-',
+      end: d.weekEnd ?? '-',
+    }),
   })),
 )
 
@@ -85,10 +87,10 @@ const config = computed(() => ({
           type="button"
           @click="showModal = true"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-          :title="t('package.downloads.analyze')"
+          :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon-data-analytics w-4 h-4" aria-hidden="true" />
-          <span class="sr-only">{{ t('package.downloads.analyze') }}</span>
+          <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
         </button>
       </div>
 
diff --git a/app/components/ProvenanceBadge.vue b/app/components/ProvenanceBadge.vue
index 6294229d38..b84a866394 100644
--- a/app/components/ProvenanceBadge.vue
+++ b/app/components/ProvenanceBadge.vue
@@ -12,8 +12,6 @@ const props = defineProps<{
   linked?: boolean
 }>()
 
-const { t } = useI18n()
-
 const providerLabels: Record<string, string> = {
   github: 'GitHub Actions',
   gitlab: 'GitLab CI',
@@ -21,10 +19,10 @@ const providerLabels: Record<string, string> = {
 
 const title = computed(() =>
   props.provider
-    ? t('badges.provenance.verified_via', {
+    ? $t('badges.provenance.verified_via', {
         provider: providerLabels[props.provider] ?? props.provider,
       })
-    : t('badges.provenance.verified_title'),
+    : $t('badges.provenance.verified_title'),
 )
 </script>
 
@@ -42,7 +40,7 @@ const title = computed(() =>
       :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
     />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
-      t('badges.provenance.verified')
+      $t('badges.provenance.verified')
     }}</span>
   </a>
   <span
@@ -55,7 +53,7 @@ const title = computed(() =>
       :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
     />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
-      t('badges.provenance.verified')
+      $t('badges.provenance.verified')
     }}</span>
   </span>
 </template>
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index 175337326b..296462c0ad 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -2,8 +2,6 @@
 import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 
-const { t } = useI18n()
-
 definePageMeta({
   name: 'org',
   alias: ['/org/:org()'],
@@ -44,8 +42,8 @@ const { data: results, status, error } = await useOrgPackages(orgName)
 if (status.value === 'error' && error.value?.statusCode === 404) {
   throw createError({
     statusCode: 404,
-    statusMessage: t('org.page.not_found'),
-    message: t('org.page.not_found_message', { name: orgName.value }),
+    statusMessage: $t('org.page.not_found'),
+    message: $t('org.page.not_found_message', { name: orgName.value }),
   })
 }
 
@@ -135,7 +133,7 @@ defineOgImageComponent('Default', {
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ orgName }}</h1>
           <p v-if="status === 'success'" class="text-fg-muted text-sm mt-1">
-            {{ t('org.public_packages', { count: formatNumber(packageCount) }, packageCount) }}
+            {{ $t('org.public_packages', { count: formatNumber(packageCount) }, packageCount) }}
           </p>
         </div>
       </div>
@@ -149,7 +147,7 @@ defineOgImageComponent('Default', {
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
           <span class="i-carbon-cube w-4 h-4" />
-          {{ t('common.view_on_npm') }}
+          {{ $t('common.view_on_npm') }}
         </a>
       </nav>
     </header>
@@ -169,7 +167,7 @@ defineOgImageComponent('Default', {
             "
             @click="activeTab = 'members'"
           >
-            {{ t('org.page.members_tab') }}
+            {{ $t('org.page.members_tab') }}
           </button>
           <button
             type="button"
@@ -181,7 +179,7 @@ defineOgImageComponent('Default', {
             "
             @click="activeTab = 'teams'"
           >
-            {{ t('org.page.teams_tab') }}
+            {{ $t('org.page.teams_tab') }}
           </button>
         </div>
 
@@ -192,37 +190,37 @@ defineOgImageComponent('Default', {
     </ClientOnly>
 
     <!-- Loading state -->
-    <LoadingSpinner v-if="status === 'pending'" :text="t('common.loading_packages')" />
+    <LoadingSpinner v-if="status === 'pending'" :text="$t('common.loading_packages')" />
 
     <!-- Error state -->
     <div v-else-if="status === 'error'" role="alert" class="py-12 text-center">
       <p class="text-fg-muted mb-4">
-        {{ error?.message ?? t('org.page.failed_to_load') }}
+        {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ t('common.go_back_home') }}</NuxtLink>
+      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
 
     <!-- Empty state -->
     <div v-else-if="packageCount === 0" class="py-12 text-center">
       <p class="text-fg-muted font-mono">
-        {{ t('org.page.no_packages') }} <span class="text-fg">@{{ orgName }}</span>
+        {{ $t('org.page.no_packages') }} <span class="text-fg">@{{ orgName }}</span>
       </p>
       <p class="text-fg-subtle text-sm mt-2">
-        {{ t('org.page.no_packages_hint') }}
+        {{ $t('org.page.no_packages_hint') }}
       </p>
     </div>
 
     <!-- Package list -->
-    <section v-else-if="packages.length > 0" :aria-label="t('org.page.packages_title')">
+    <section v-else-if="packages.length > 0" :aria-label="$t('org.page.packages_title')">
       <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-        {{ t('org.page.packages_title') }}
+        {{ $t('org.page.packages_title') }}
       </h2>
 
       <!-- Filter and sort controls -->
       <PackageListControls
         v-model:filter="filterText"
         v-model:sort="sortOption"
-        :placeholder="t('org.page.filter_placeholder', { count: packageCount })"
+        :placeholder="$t('org.page.filter_placeholder', { count: packageCount })"
         :total-count="packageCount"
         :filtered-count="filteredCount"
       />
@@ -232,7 +230,7 @@ defineOgImageComponent('Default', {
         v-if="filteredAndSortedPackages.length === 0"
         class="text-fg-muted py-8 text-center font-mono"
       >
-        {{ t('org.page.no_match', { query: filterText }) }}
+        {{ $t('org.page.no_match', { query: filterText }) }}
       </p>
 
       <PackageList v-else :results="filteredAndSortedPackages" />
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 1a15a901a5..c5d171bda0 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -6,8 +6,6 @@ import { onKeyStroke } from '@vueuse/core'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 
-const { t } = useI18n()
-
 definePageMeta({
   name: 'package',
   alias: ['/package/:package(.*)*'],
@@ -432,7 +430,7 @@ defineOgImageComponent('Package', {
               <NuxtLink
                 v-if="resolvedVersion !== requestedVersion"
                 :to="`/${pkg.name}/v/${displayVersion.version}`"
-                :title="t('package.view_permalink')"
+                :title="$t('package.view_permalink')"
                 >{{ displayVersion.version }}</NuxtLink
               >
               <span v-else>v{{ displayVersion.version }}</span>
@@ -443,7 +441,7 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="inline-flex items-center justify-center gap-1.5 text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
-                :title="t('package.verified_provenance')"
+                :title="$t('package.verified_provenance')"
               >
                 <span
                   class="i-solar-shield-check-outline w-3.5 h-3.5 shrink-0"
@@ -457,7 +455,7 @@ defineOgImageComponent('Package', {
                   displayVersion.version !== latestVersion.version
                 "
                 class="text-fg-subtle text-sm shrink-0"
-                >{{ t('package.not_latest') }}</span
+                >{{ $t('package.not_latest') }}</span
               >
             </span>
 
@@ -482,11 +480,11 @@ defineOgImageComponent('Package', {
               target="_blank"
               rel="noopener noreferrer"
               class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center"
-              :title="t('common.view_on_npm')"
+              :title="$t('common.view_on_npm')"
             >
               <span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />
               <span class="hidden sm:inline">npm</span>
-              <span class="sr-only sm:hidden">{{ t('common.view_on_npm') }}</span>
+              <span class="sr-only sm:hidden">{{ $t('common.view_on_npm') }}</span>
             </a>
           </div>
 
@@ -500,7 +498,7 @@ defineOgImageComponent('Package', {
               <MarkdownText :text="pkg.description" />
             </p>
             <p v-else class="text-fg-subtle text-base m-0 italic">
-              {{ t('package.no_description') }}
+              {{ $t('package.no_description') }}
             </p>
             <!-- Fade overlay with show more button - only when collapsed and overflowing -->
             <div
@@ -510,10 +508,10 @@ defineOgImageComponent('Package', {
               <button
                 type="button"
                 class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                :aria-label="t('package.show_full_description')"
+                :aria-label="$t('package.show_full_description')"
                 @click="descriptionExpanded = true"
               >
-                {{ t('common.show_more') }}
+                {{ $t('common.show_more') }}
               </button>
             </div>
           </div>
@@ -526,21 +524,21 @@ defineOgImageComponent('Package', {
           <h2 class="font-medium mb-2">
             {{
               deprecationNotice.type === 'package'
-                ? t('package.deprecation.package')
-                : t('package.deprecation.version')
+                ? $t('package.deprecation.package')
+                : $t('package.deprecation.version')
             }}
           </h2>
           <p v-if="deprecationNotice.message" class="text-base m-0">
             <MarkdownText :text="deprecationNotice.message" />
           </p>
-          <p v-else class="text-base m-0 italic">{{ t('package.deprecation.no_reason') }}</p>
+          <p v-else class="text-base m-0 italic">{{ $t('package.deprecation.no_reason') }}</p>
         </div>
 
         <!-- Stats grid -->
         <dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 sm:gap-4 mt-4 sm:mt-6">
           <div v-if="pkg.license" class="space-y-1">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ t('package.stats.license') }}
+              {{ $t('package.stats.license') }}
             </dt>
             <dd class="font-mono text-sm text-fg">
               <LicenseDisplay :license="pkg.license" />
@@ -549,7 +547,7 @@ defineOgImageComponent('Package', {
 
           <div v-if="downloads" class="space-y-1">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ t('package.stats.weekly') }}
+              {{ $t('package.stats.weekly') }}
             </dt>
             <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
               {{ formatNumber(downloads.downloads) }}
@@ -558,17 +556,17 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
-                :title="t('package.stats.view_download_trends')"
+                :title="$t('package.stats.view_download_trends')"
               >
                 <span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
-                <span class="sr-only">{{ t('package.stats.view_download_trends') }}</span>
+                <span class="sr-only">{{ $t('package.stats.view_download_trends') }}</span>
               </a>
             </dd>
           </div>
 
           <div class="space-y-1">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ t('package.stats.deps') }}
+              {{ $t('package.stats.deps') }}
             </dt>
             <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
               {{ getDependencyCount(displayVersion) }}
@@ -578,10 +576,10 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
-                :title="t('package.stats.view_dependency_graph')"
+                :title="$t('package.stats.view_dependency_graph')"
               >
                 <span class="i-carbon-network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
-                <span class="sr-only">{{ t('package.stats.view_dependency_graph') }}</span>
+                <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
               </a>
 
               <a
@@ -590,20 +588,20 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
-                :title="t('package.stats.inspect_dependency_tree')"
+                :title="$t('package.stats.inspect_dependency_tree')"
               >
                 <span
                   class="i-solar-eye-scan-outline w-3.5 h-3.5 inline-block"
                   aria-hidden="true"
                 />
-                <span class="sr-only">{{ t('package.stats.inspect_dependency_tree') }}</span>
+                <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
               </a>
             </dd>
           </div>
 
           <div class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
-              {{ t('package.stats.install_size') }}
+              {{ $t('package.stats.install_size') }}
               <span
                 class="i-carbon-information w-3 h-3 text-fg-subtle"
                 aria-hidden="true"
@@ -640,7 +638,7 @@ defineOgImageComponent('Package', {
 
           <div v-if="pkg.time?.modified" class="space-y-1">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider sm:text-right">
-              {{ t('package.stats.updated') }}
+              {{ $t('package.stats.updated') }}
             </dt>
             <dd class="font-mono text-sm text-fg sm:text-right">
               <DateTime :datetime="pkg.time.modified" date-style="medium" />
@@ -662,7 +660,7 @@ defineOgImageComponent('Package', {
                 <span v-if="repoRef">
                   {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
                 </span>
-                <span v-else>{{ t('package.links.repo') }}</span>
+                <span v-else>{{ $t('package.links.repo') }}</span>
               </a>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
@@ -684,7 +682,7 @@ defineOgImageComponent('Package', {
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon-link w-4 h-4" aria-hidden="true" />
-                {{ t('package.links.homepage') }}
+                {{ $t('package.links.homepage') }}
               </a>
             </li>
             <li v-if="displayVersion?.bugs?.url">
@@ -695,7 +693,7 @@ defineOgImageComponent('Package', {
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
-                {{ t('package.links.issues') }}
+                {{ $t('package.links.issues') }}
               </a>
             </li>
 
@@ -709,7 +707,7 @@ defineOgImageComponent('Package', {
                 <span class="i-carbon-fork w-4 h-4" aria-hidden="true" />
                 <span>
                   {{ formatCompactNumber(forks, { decimals: 1 }) }}
-                  {{ t('package.links.forks', { count: forks }, forks) }}
+                  {{ $t('package.links.forks', { count: forks }, forks) }}
                 </span>
               </a>
             </li>
@@ -720,10 +718,10 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-                :title="t('badges.jsr.title')"
+                :title="$t('badges.jsr.title')"
               >
                 <span class="i-simple-icons-jsr w-4 h-4" aria-hidden="true" />
-                {{ t('package.links.jsr') }}
+                {{ $t('package.links.jsr') }}
               </a>
             </li>
             <li v-if="displayVersion" class="sm:ml-auto">
@@ -736,7 +734,7 @@ defineOgImageComponent('Package', {
                 aria-keyshortcuts="."
               >
                 <span class="i-carbon-code w-4 h-4 sm:invisible" aria-hidden="true" />
-                {{ t('package.links.code') }}
+                {{ $t('package.links.code') }}
                 <kbd
                   class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
                   aria-hidden="true"
@@ -760,13 +758,13 @@ defineOgImageComponent('Package', {
       <section aria-labelledby="install-heading" class="mb-8">
         <div class="flex flex-wrap items-center justify-between mb-3">
           <h2 id="install-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ t('package.install.title') }}
+            {{ $t('package.install.title') }}
           </h2>
           <!-- Package manager tabs -->
           <div
             class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border rounded-md"
             role="tablist"
-            :aria-label="t('package.install.pm_label')"
+            :aria-label="$t('package.install.pm_label')"
           >
             <ClientOnly>
               <button
@@ -838,7 +836,7 @@ defineOgImageComponent('Package', {
                   v-if="typesPackageName"
                   :to="`/${typesPackageName}`"
                   class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  :title="t('package.install.view_types', { package: typesPackageName })"
+                  :title="$t('package.install.view_types', { package: typesPackageName })"
                 >
                   <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
                   <span class="sr-only">View {{ typesPackageName }}</span>
@@ -849,10 +847,10 @@ defineOgImageComponent('Package', {
           <button
             type="button"
             class="absolute top-3 right-3 px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            :aria-label="t('package.install.copy_command')"
+            :aria-label="$t('package.install.copy_command')"
             @click="copyInstallCommand"
           >
-            <span aria-live="polite">{{ copied ? t('common.copied') : t('common.copy') }}</span>
+            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
           </button>
         </div>
       </section>
@@ -863,7 +861,7 @@ defineOgImageComponent('Package', {
         <div class="lg:col-span-2 order-2 lg:order-1 min-w-0">
           <section aria-labelledby="readme-heading">
             <h2 id="readme-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-              {{ t('package.readme.title') }}
+              {{ $t('package.readme.title') }}
             </h2>
             <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
             <div
@@ -872,13 +870,13 @@ defineOgImageComponent('Package', {
               v-html="readmeData.html"
             />
             <p v-else class="text-fg-subtle italic">
-              {{ t('package.readme.no_readme') }}
+              {{ $t('package.readme.no_readme') }}
               <a
                 v-if="repositoryUrl"
                 :href="repositoryUrl"
                 rel="noopener noreferrer"
                 class="link"
-                >{{ t('package.readme.view_on_github') }}</a
+                >{{ $t('package.readme.view_on_github') }}</a
               >
             </p>
           </section>
@@ -897,7 +895,7 @@ defineOgImageComponent('Package', {
           <!-- Keywords -->
           <section v-if="displayVersion?.keywords?.length" aria-labelledby="keywords-heading">
             <h2 id="keywords-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-              {{ t('package.keywords_title') }}
+              {{ $t('package.keywords_title') }}
             </h2>
             <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
               <li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
@@ -927,7 +925,7 @@ defineOgImageComponent('Package', {
               id="compatibility-heading"
               class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
             >
-              {{ t('package.compatibility') }}
+              {{ $t('package.compatibility') }}
             </h2>
             <dl class="space-y-2">
               <div v-if="displayVersion.engines.node" class="flex justify-between gap-4 py-1">
@@ -982,11 +980,11 @@ defineOgImageComponent('Package', {
 
     <!-- Error state -->
     <div v-else-if="status === 'error'" role="alert" class="py-20 text-center">
-      <h1 class="font-mono text-2xl font-medium mb-4">{{ t('package.not_found') }}</h1>
+      <h1 class="font-mono text-2xl font-medium mb-4">{{ $t('package.not_found') }}</h1>
       <p class="text-fg-muted mb-8">
-        {{ error?.message ?? t('package.not_found_message') }}
+        {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ t('common.go_back_home') }}</NuxtLink>
+      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
   </main>
 </template>
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index 319885aace..84cfcb868c 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -5,8 +5,6 @@ import type {
   PackageFileContentResponse,
 } from '#shared/types'
 
-const { t } = useI18n()
-
 definePageMeta({
   name: 'code',
   alias: ['/package/code/:path(.*)*'],
@@ -308,7 +306,7 @@ useSeoMeta({
           </NuxtLink>
           <!-- Version selector -->
           <div v-if="version && availableVersions.length > 0" class="relative shrink-0">
-            <label for="version-select" class="sr-only">{{ t('code.select_version') }}</label>
+            <label for="version-select" class="sr-only">{{ $t('code.select_version') }}</label>
             <select
               id="version-select"
               :value="version"
@@ -345,9 +343,9 @@ useSeoMeta({
             :to="getCodeUrl()"
             class="text-fg-muted hover:text-fg transition-colors shrink-0"
           >
-            {{ t('code.root') }}
+            {{ $t('code.root') }}
           </NuxtLink>
-          <span v-else class="text-fg shrink-0">{{ t('code.root') }}</span>
+          <span v-else class="text-fg shrink-0">{{ $t('code.root') }}</span>
           <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
             <span class="text-fg-subtle">/</span>
             <NuxtLink
@@ -365,20 +363,20 @@ useSeoMeta({
 
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
-      <p class="text-fg-muted mb-4">{{ t('code.version_required') }}</p>
-      <NuxtLink :to="packageRoute()" class="btn">{{ t('code.go_to_package') }}</NuxtLink>
+      <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
+      <NuxtLink :to="packageRoute()" class="btn">{{ $t('code.go_to_package') }}</NuxtLink>
     </div>
 
     <!-- Loading state -->
     <div v-else-if="treeStatus === 'pending'" class="container py-20 text-center">
       <div class="i-svg-spinners-ring-resize w-8 h-8 mx-auto text-fg-muted" />
-      <p class="mt-4 text-fg-muted">{{ t('code.loading_tree') }}</p>
+      <p class="mt-4 text-fg-muted">{{ $t('code.loading_tree') }}</p>
     </div>
 
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
-      <p class="text-fg-muted mb-4">{{ t('code.failed_to_load_tree') }}</p>
-      <NuxtLink :to="packageRoute(version)" class="btn">{{ t('code.back_to_package') }}</NuxtLink>
+      <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
+      <NuxtLink :to="packageRoute(version)" class="btn">{{ $t('code.back_to_package') }}</NuxtLink>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -404,7 +402,9 @@ useSeoMeta({
             class="sticky top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
           >
             <div class="flex items-center gap-3 text-sm">
-              <span class="text-fg-muted">{{ t('code.lines', { count: fileContent.lines }) }}</span>
+              <span class="text-fg-muted">{{
+                $t('code.lines', { count: fileContent.lines })
+              }}</span>
               <span v-if="currentNode?.size" class="text-fg-subtle">{{
                 formatBytes(currentNode.size)
               }}</span>
@@ -416,7 +416,7 @@ useSeoMeta({
                 class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors"
                 @click="copyPermalink"
               >
-                {{ t('code.copy_link') }}
+                {{ $t('code.copy_link') }}
               </button>
               <a
                 :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
@@ -424,7 +424,7 @@ useSeoMeta({
                 rel="noopener noreferrer"
                 class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
               >
-                {{ t('code.raw') }}
+                {{ $t('code.raw') }}
                 <span class="i-carbon-launch w-3 h-3" />
               </a>
             </div>
@@ -440,9 +440,9 @@ useSeoMeta({
         <!-- File too large warning -->
         <div v-else-if="isViewingFile && isFileTooLarge" class="py-20 text-center">
           <div class="i-carbon-document w-12 h-12 mx-auto text-fg-subtle mb-4" />
-          <p class="text-fg-muted mb-2">{{ t('code.file_too_large') }}</p>
+          <p class="text-fg-muted mb-2">{{ $t('code.file_too_large') }}</p>
           <p class="text-fg-subtle text-sm mb-4">
-            {{ t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
+            {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
           <a
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
@@ -450,7 +450,7 @@ useSeoMeta({
             rel="noopener noreferrer"
             class="btn inline-flex items-center gap-2"
           >
-            {{ t('code.view_raw') }}
+            {{ $t('code.view_raw') }}
             <span class="i-carbon-launch w-4 h-4" />
           </a>
         </div>
@@ -460,7 +460,7 @@ useSeoMeta({
           v-else-if="filePath && fileStatus === 'pending'"
           class="flex min-h-full"
           aria-busy="true"
-          :aria-label="t('common.loading')"
+          :aria-label="$t('common.loading')"
         >
           <!-- Fake line numbers column -->
           <div class="shrink-0 bg-bg-subtle border-r border-border w-14 py-0">
@@ -496,15 +496,15 @@ useSeoMeta({
         <!-- Error loading file -->
         <div v-else-if="filePath && fileStatus === 'error'" class="py-20 text-center" role="alert">
           <div class="i-carbon-warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
-          <p class="text-fg-muted mb-2">{{ t('code.failed_to_load') }}</p>
-          <p class="text-fg-subtle text-sm mb-4">{{ t('code.unavailable_hint') }}</p>
+          <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
+          <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
           <a
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
             class="btn inline-flex items-center gap-2"
           >
-            {{ t('code.view_raw') }}
+            {{ $t('code.view_raw') }}
             <span class="i-carbon-launch w-4 h-4" />
           </a>
         </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bd3e0096d8..bd76da4e6e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -10,10 +10,9 @@ function handleSearch() {
   })
 }
 
-const { t } = useI18n()
 useSeoMeta({
-  title: () => t('seo.home.title'),
-  description: () => t('seo.home.description'),
+  title: () => $t('seo.home.title'),
+  description: () => $t('seo.home.description'),
 })
 
 defineOgImageComponent('Default')
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 989cbb81c3..42c0ed70c8 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -3,7 +3,6 @@ import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 
-const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
@@ -346,7 +345,7 @@ defineOgImageComponent('Default', {
 
         <search>
           <form role="search" class="relative" @submit.prevent>
-            <label for="search-input" class="sr-only">{{ t('search.label') }}</label>
+            <label for="search-input" class="sr-only">{{ $t('search.label') }}</label>
 
             <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
               <!-- Subtle glow effect -->
@@ -367,7 +366,7 @@ defineOgImageComponent('Default', {
                   v-model="inputValue"
                   type="search"
                   name="q"
-                  :placeholder="t('search.placeholder')"
+                  :placeholder="$t('search.placeholder')"
                   autocapitalize="off"
                   autocomplete="off"
                   autocorrect="off"
@@ -381,13 +380,13 @@ defineOgImageComponent('Default', {
                   v-show="inputValue"
                   type="button"
                   class="absolute right-3 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  :aria-label="t('search.clear')"
+                  :aria-label="$t('search.clear')"
                   @click="inputValue = ''"
                 >
                   <span class="i-carbon-close-large block w-3.5 h-3.5" aria-hidden="true" />
                 </button>
                 <!-- Hidden submit button for accessibility (form must have submit button per WCAG) -->
-                <button type="submit" class="sr-only">{{ t('search.button') }}</button>
+                <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
               </div>
             </div>
           </form>
@@ -399,7 +398,7 @@ defineOgImageComponent('Default', {
     <div class="container pt-20 pb-6">
       <section v-if="query" aria-label="Search results" @keydown="handleResultsKeydown">
         <!-- Initial loading (only after user interaction, not during view transition) -->
-        <LoadingSpinner v-if="showSearching" :text="t('search.searching')" />
+        <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />
 
         <div v-else-if="visibleResults">
           <!-- Claim prompt - shown at top when valid name but no exact match -->
@@ -409,16 +408,16 @@ defineOgImageComponent('Default', {
           >
             <div class="flex-1 min-w-0">
               <p class="font-mono text-sm text-fg">
-                {{ t('search.not_taken', { name: query }) }}
+                {{ $t('search.not_taken', { name: query }) }}
               </p>
-              <p class="text-xs text-fg-muted mt-0.5">{{ t('search.claim_prompt') }}</p>
+              <p class="text-xs text-fg-muted mt-0.5">{{ $t('search.claim_prompt') }}</p>
             </div>
             <button
               type="button"
               class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               @click="claimModalOpen = true"
             >
-              {{ t('search.claim_button', { name: query }) }}
+              {{ $t('search.claim_button', { name: query }) }}
             </button>
           </div>
 
@@ -427,28 +426,28 @@ defineOgImageComponent('Default', {
             role="status"
             class="text-fg-muted text-sm mb-6 font-mono"
           >
-            {{ t('search.found_packages', { count: formatNumber(visibleResults.total) }) }}
+            {{ $t('search.found_packages', { count: formatNumber(visibleResults.total) }) }}
             <span v-if="status === 'pending'" class="text-fg-subtle">{{
-              t('search.updating')
+              $t('search.updating')
             }}</span>
           </p>
 
           <!-- No results found -->
           <div v-else-if="status !== 'pending'" role="status" class="py-12 text-center">
             <p class="text-fg-muted font-mono mb-6">
-              {{ t('search.no_results', { query }) }}
+              {{ $t('search.no_results', { query }) }}
             </p>
 
             <!-- Offer to claim the package name if it's valid -->
             <div v-if="showClaimPrompt" class="max-w-md mx-auto">
               <div class="p-4 bg-bg-subtle border border-border rounded-lg">
-                <p class="text-sm text-fg-muted mb-3">{{ t('search.want_to_claim') }}</p>
+                <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
                 <button
                   type="button"
                   class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   @click="claimModalOpen = true"
                 >
-                  {{ t('search.claim_button', { name: query }) }}
+                  {{ $t('search.claim_button', { name: query }) }}
                 </button>
               </div>
             </div>
@@ -473,7 +472,7 @@ defineOgImageComponent('Default', {
       </section>
 
       <section v-else class="py-20 text-center">
-        <p class="text-fg-subtle font-mono text-sm">{{ t('search.start_typing') }}</p>
+        <p class="text-fg-subtle font-mono text-sm">{{ $t('search.start_typing') }}</p>
       </section>
     </div>
 
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index ba56720a77..7bea255e57 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -2,7 +2,6 @@
 import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 
-const { t } = useI18n()
 const route = useRoute('~username')
 const router = useRouter()
 
@@ -188,7 +187,7 @@ defineOgImageComponent('Default', {
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ username }}</h1>
           <p v-if="results?.total" class="text-fg-muted text-sm mt-1">
-            {{ t('org.public_packages', { count: formatNumber(results.total) }, results.total) }}
+            {{ $t('org.public_packages', { count: formatNumber(results.total) }, results.total) }}
           </p>
         </div>
       </div>
@@ -202,7 +201,7 @@ defineOgImageComponent('Default', {
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
           <span class="i-carbon-cube w-4 h-4" />
-          {{ t('common.view_on_npm') }}
+          {{ $t('common.view_on_npm') }}
         </a>
       </nav>
     </header>
@@ -210,36 +209,36 @@ defineOgImageComponent('Default', {
     <!-- Loading state -->
     <LoadingSpinner
       v-if="status === 'pending' && loadedPages === 1"
-      :text="t('common.loading_packages')"
+      :text="$t('common.loading_packages')"
     />
 
     <!-- Error state -->
     <div v-else-if="status === 'error'" role="alert" class="py-12 text-center">
       <p class="text-fg-muted mb-4">
-        {{ error?.message ?? t('user.page.failed_to_load') }}
+        {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ t('common.go_back_home') }}</NuxtLink>
+      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
 
     <!-- Empty state -->
     <div v-else-if="results && results.total === 0" class="py-12 text-center">
       <p class="text-fg-muted font-mono">
-        {{ t('user.page.no_packages') }} <span class="text-fg">@{{ username }}</span>
+        {{ $t('user.page.no_packages') }} <span class="text-fg">@{{ username }}</span>
       </p>
-      <p class="text-fg-subtle text-sm mt-2">{{ t('user.page.no_packages_hint') }}</p>
+      <p class="text-fg-subtle text-sm mt-2">{{ $t('user.page.no_packages_hint') }}</p>
     </div>
 
     <!-- Package list -->
     <section v-else-if="results && packages.length > 0" aria-label="User packages">
       <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-        {{ t('user.page.packages_title') }}
+        {{ $t('user.page.packages_title') }}
       </h2>
 
       <!-- Filter and sort controls -->
       <PackageListControls
         v-model:filter="filterText"
         v-model:sort="sortOption"
-        :placeholder="t('user.page.filter_placeholder', { count: packageCount })"
+        :placeholder="$t('user.page.filter_placeholder', { count: packageCount })"
         :total-count="packageCount"
         :filtered-count="filteredCount"
       />
@@ -249,7 +248,7 @@ defineOgImageComponent('Default', {
         v-if="filteredAndSortedPackages.length === 0"
         class="text-fg-muted py-8 text-center font-mono"
       >
-        {{ t('user.page.no_match', { query: filterText }) }}
+        {{ $t('user.page.no_match', { query: filterText }) }}
       </p>
 
       <PackageList
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index ac41e41749..b465804c6f 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const { t } = useI18n()
 const route = useRoute('~username-orgs')
 
 const username = computed(() => route.params.username)
@@ -73,10 +72,10 @@ async function loadOrgs() {
       // Load details for each org in parallel
       await Promise.all(orgs.value.map(org => loadOrgDetails(org)))
     } else {
-      error.value = t('header.orgs_dropdown.error')
+      error.value = $t('header.orgs_dropdown.error')
     }
   } catch (e) {
-    error.value = e instanceof Error ? e.message : t('header.orgs_dropdown.error')
+    error.value = e instanceof Error ? e.message : $t('header.orgs_dropdown.error')
   } finally {
     isLoading.value = false
   }
@@ -120,7 +119,7 @@ useSeoMeta({
         </div>
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ username }}</h1>
-          <p class="text-fg-muted text-sm mt-1">{{ t('user.orgs_page.title') }}</p>
+          <p class="text-fg-muted text-sm mt-1">{{ $t('user.orgs_page.title') }}</p>
         </div>
       </div>
 
@@ -131,7 +130,7 @@ useSeoMeta({
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
           <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
-          {{ t('user.orgs_page.back_to_profile') }}
+          {{ $t('user.orgs_page.back_to_profile') }}
         </NuxtLink>
       </nav>
     </header>
@@ -139,43 +138,43 @@ useSeoMeta({
     <!-- Not connected state -->
     <ClientOnly>
       <div v-if="!isConnected" class="py-12 text-center">
-        <p class="text-fg-muted mb-4">{{ t('user.orgs_page.connect_required') }}</p>
+        <p class="text-fg-muted mb-4">{{ $t('user.orgs_page.connect_required') }}</p>
         <p class="text-fg-subtle text-sm">
-          {{ t('user.orgs_page.connect_hint_prefix') }}
+          {{ $t('user.orgs_page.connect_hint_prefix') }}
           <code class="font-mono bg-bg-subtle px-1.5 py-0.5 rounded">npx @npmx.dev/cli</code>
-          {{ t('user.orgs_page.connect_hint_suffix') }}
+          {{ $t('user.orgs_page.connect_hint_suffix') }}
         </p>
       </div>
 
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
-        <p class="text-fg-muted">{{ t('user.orgs_page.own_orgs_only') }}</p>
+        <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
         <NuxtLink :to="`/~${npmUser}/orgs`" class="btn mt-4">{{
-          t('user.orgs_page.view_your_orgs')
+          $t('user.orgs_page.view_your_orgs')
         }}</NuxtLink>
       </div>
 
       <!-- Loading state -->
-      <LoadingSpinner v-else-if="isLoading" :text="t('user.orgs_page.loading')" />
+      <LoadingSpinner v-else-if="isLoading" :text="$t('user.orgs_page.loading')" />
 
       <!-- Error state -->
       <div v-else-if="error" role="alert" class="py-12 text-center">
         <p class="text-fg-muted mb-4">{{ error }}</p>
-        <button type="button" class="btn" @click="loadOrgs">{{ t('common.try_again') }}</button>
+        <button type="button" class="btn" @click="loadOrgs">{{ $t('common.try_again') }}</button>
       </div>
 
       <!-- Empty state -->
       <div v-else-if="orgs.length === 0" class="py-12 text-center">
-        <p class="text-fg-muted">{{ t('user.orgs_page.empty') }}</p>
+        <p class="text-fg-muted">{{ $t('user.orgs_page.empty') }}</p>
         <p class="text-fg-subtle text-sm mt-2">
-          {{ t('user.orgs_page.empty_hint') }}
+          {{ $t('user.orgs_page.empty_hint') }}
         </p>
       </div>
 
       <!-- Orgs list -->
-      <section v-else :aria-label="t('user.orgs_page.title')">
+      <section v-else :aria-label="$t('user.orgs_page.title')">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-          {{ t('user.orgs_page.count', { count: orgs.length }, orgs.length) }}
+          {{ $t('user.orgs_page.count', { count: orgs.length }, orgs.length) }}
         </h2>
 
         <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -217,7 +216,7 @@ useSeoMeta({
                   <span class="i-carbon-cube w-4 h-4" aria-hidden="true" />
                   <span v-if="org.packageCount !== null">
                     {{
-                      t(
+                      $t(
                         'user.orgs_page.packages_count',
                         { count: org.packageCount },
                         org.packageCount,

From 4a12b7b64934489af0506580e522ddf6b06e5391 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Tue, 27 Jan 2026 17:19:53 +0100
Subject: [PATCH 2/3] docs: update i18n contribution guide

---
 CONTRIBUTING.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 189f5c37a1..f84ae007ad 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -214,7 +214,7 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 
 ### Approach
 
-- All user-facing strings should use translation keys via `$t()` in templates or `t()` in script
+- All user-facing strings should use translation keys via `$t()` in templates and script
 - Translation files live in `i18n/locales/` (e.g., `en.json`)
 - We use the `no_prefix` strategy (no `/en/` or `/fr/` in URLs)
 - Locale preference is stored in cookies and respected on subsequent visits
@@ -233,8 +233,9 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
    Or in script:
 
    ```typescript
-   const { t } = useI18n()
-   const message = t('my.translation.key')
+   <script setup lang="ts">
+   const message = computed(() => $t('my.translation.key'))
+   </script>
    ```
 
 3. For dynamic values, use interpolation:

From 953d9423d49b47326c298dc0acd555f41d2e7d06 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Tue, 27 Jan 2026 17:50:44 +0100
Subject: [PATCH 3/3] fix: use `$t`

---
 app/components/ConnectorStatus.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index bf9e705ed2..28c993870e 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -60,7 +60,7 @@ const ariaLabel = computed(() => {
       <img
         v-if="isConnected && avatar"
         :src="avatar"
-        :alt="t('connector.status.avatar_alt', { user: npmUser })"
+        :alt="$t('connector.status.avatar_alt', { user: npmUser })"
         width="24"
         height="24"
         class="w-6 h-6 rounded-full"