refactor(i18n): use `$t` in script (#182)

CONTRIBUTING.md

···
 
 ### 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
···
    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:

app/components/ClaimPackageModal.vue

···
 
 const open = defineModel<boolean>('open', { default: false })
 
-const { t } = useI18n()
-
 const {
   isConnected,
   state,
···
   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
   }
···
       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
   }
···
 
             <!-- 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 -->

app/components/ConnectorStatus.client.vue

···
 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(() => {
···
 
 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>
 
···
       <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"

app/components/HeaderOrgsDropdown.vue

···
   username: string
 }>()
 
-const { t } = useI18n()
 const { listUserOrgs } = useConnector()
 
 const isOpen = ref(false)
···
       // 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
   }
···
       :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 }"
···
         <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">
···
           </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">
···
               :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>

app/components/HeaderPackagesDropdown.vue

···
   username: string
 }>()
 
-const { t } = useI18n()
 const { listUserPackages } = useConnector()
 
 const isOpen = ref(false)
···
       // 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
   }
···
       :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 }"
···
         <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">
···
           </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">
···
               :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>

app/components/LoadingSpinner.vue

···
   /** Text to display next to the spinner */
   text?: string
 }>()
-
-const { t } = useI18n()
 </script>
 
 <template>
···
     <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>

app/components/OrgMembersPanel.vue

···
   'select-team': [teamName: string]
 }>()
 
-const { t } = useI18n()
-
 const {
   isConnected,
   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>
···
                 )
               "
             >
-              <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
···
               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>

app/components/PackageDownloadAnalytics.vue

···
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn } from '@vueuse/core'
 
-const { t } = useI18n()
-
 const {
   weeklyDownloads,
   inModal = false,
···
     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,
···
             for="granularity"
             class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
           >
-            {{ t('package.downloads.granularity') }}
+            {{ $t('package.downloads.granularity') }}
           </label>
 
           <div
···
               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>
···
               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)"
···
               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)"
···
       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
···
       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>

app/components/PackageInstallScripts.vue

···
   }
 }>()
 
-const { t } = useI18n()
-
 const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
 const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
 const sortedNpxDeps = computed(() => {
···
           aria-hidden="true"
         />
         {{
-          t(
+          $t(
             'package.install_scripts.npx_packages',
             { count: sortedNpxDeps.length },
             sortedNpxDeps.length,
···
               :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])

app/components/PackageListControls.vue

···
   'update:sort': [value: SortOption]
 }>()
 
-const { t } = useI18n()
-
 const filterValue = computed({
   get: () => props.filter,
   set: value => emit('update:filter', value),
···
 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,
 )
 
···
         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)"
       />

app/components/PackageMetricsBadges.vue

···
   }
 })
 
-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')
   }
 })
 
···
   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 ''
   }

app/components/PackageSkeleton.vue

···
-<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 -->
···
         <!-- 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" />
···
         <!-- 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" />
···
         <!-- 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" />
···
         <!-- 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" />
···
         <!-- 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" />
···
         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">
···
             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">
···
             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>
···
             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">
···
             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">
···
             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">

app/components/PackageVersions.vue

···
 } from '~/utils/versions'
 import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
 
-const { t } = useI18n()
-
 const props = defineProps<{
   packageName: string
   versions: Record<string, PackumentVersion>
···
                 "
                 :title="
                   row.primaryVersion.deprecated
-                    ? t('package.versions.deprecated_title', {
+                    ? $t('package.versions.deprecated_title', {
                         version: row.primaryVersion.version,
                       })
                     : row.primaryVersion.version
···
                 "
                 :title="
                   v.deprecated
-                    ? t('package.versions.deprecated_title', { version: v.version })
+                    ? $t('package.versions.deprecated_title', { version: v.version })
                     : v.version
                 "
               >
···
                 "
                 :title="
                   row.primaryVersion.deprecated
-                    ? t('package.versions.deprecated_title', {
+                    ? $t('package.versions.deprecated_title', {
                         version: row.primaryVersion.version,
                       })
                     : row.primaryVersion.version
···
                       "
                       :title="
                         group.versions[0]?.deprecated
-                          ? t('package.versions.deprecated_title', {
+                          ? $t('package.versions.deprecated_title', {
                               version: group.versions[0]?.version,
                             })
                           : group.versions[0]?.version
···
                       "
                       :title="
                         group.versions[0]?.deprecated
-                          ? t('package.versions.deprecated_title', {
+                          ? $t('package.versions.deprecated_title', {
                               version: group.versions[0]?.version,
                             })
                           : group.versions[0]?.version
···
                       "
                       :title="
                         v.deprecated
-                          ? t('package.versions.deprecated_title', { version: v.version })
+                          ? $t('package.versions.deprecated_title', { version: v.version })
                           : v.version
                       "
                     >

app/components/PackageVulnerabilities.vue

···
   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),
···
   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>

app/components/PackageWeeklyDownloadStats.vue

···
   packageName: string
 }>()
 
-const { t } = useI18n()
 const showModal = ref(false)
 
 const { data: packument } = usePackage(() => packageName)
···
 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 ?? '-',
+    }),
   })),
 )
 
···
           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>
 

app/components/ProvenanceBadge.vue

···
   linked?: boolean
 }>()
 
-const { t } = useI18n()
-
 const providerLabels: Record<string, string> = {
   github: 'GitHub Actions',
   gitlab: 'GitLab CI',
···
 
 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>
 
···
       :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
···
       :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>

app/pages/@[org].vue

···
 import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 
-const { t } = useI18n()
-
 definePageMeta({
   name: 'org',
   alias: ['/org/:org()'],
···
 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 }),
   })
 }
 
···
         <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>
···
           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>
···
             "
             @click="activeTab = 'members'"
           >
-            {{ t('org.page.members_tab') }}
+            {{ $t('org.page.members_tab') }}
           </button>
           <button
             type="button"
···
             "
             @click="activeTab = 'teams'"
           >
-            {{ t('org.page.teams_tab') }}
+            {{ $t('org.page.teams_tab') }}
           </button>
         </div>
 
···
     </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"
       />
···
         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" />

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

···
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 
-const { t } = useI18n()
-
 definePageMeta({
   name: 'package',
   alias: ['/package/: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>
···
                 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"
···
                   displayVersion.version !== latestVersion.version
                 "
                 class="text-fg-subtle text-sm shrink-0"
-                >{{ t('package.not_latest') }}</span
+                >{{ $t('package.not_latest') }}</span
               >
             </span>
 
···
               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>
 
···
               <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
···
               <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>
···
           <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" />
···
 
           <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) }}
···
                 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) }}
···
                 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
···
                 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"
···
 
           <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" />
···
                 <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">
···
                 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">
···
                 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>
 
···
                 <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>
···
                 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">
···
                 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"
···
       <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
···
                   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>
···
           <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>
···
         <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
···
               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>
···
           <!-- 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">
···
               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">
···
 
     <!-- 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>

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

···
   PackageFileContentResponse,
 } from '#shared/types'
 
-const { t } = useI18n()
-
 definePageMeta({
   name: 'code',
   alias: ['/package/code/:path(.*)*'],
···
           </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"
···
             :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
···
 
     <!-- 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 -->
···
             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>
···
                 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}`"
···
                 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>
···
         <!-- 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}`"
···
             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>
···
           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">
···
         <!-- 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>

app/pages/index.vue

···
   })
 }
 
-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')

app/pages/search.vue

···
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 
-const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
···
 
         <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 -->
···
                   v-model="inputValue"
                   type="search"
                   name="q"
-                  :placeholder="t('search.placeholder')"
+                  :placeholder="$t('search.placeholder')"
                   autocapitalize="off"
                   autocomplete="off"
                   autocorrect="off"
···
                   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>
···
     <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 -->
···
           >
             <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>
 
···
             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>
···
       </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>
 

app/pages/~[username]/index.vue

···
 import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 
-const { t } = useI18n()
 const route = useRoute('~username')
 const router = useRouter()
 
···
         <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>
···
           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>
···
     <!-- 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"
       />
···
         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

app/pages/~[username]/orgs.vue

···
 <script setup lang="ts">
-const { t } = useI18n()
 const route = useRoute('~username-orgs')
 
 const username = computed(() => route.params.username)
···
       // 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
   }
···
         </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>
 
···
           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>
···
     <!-- 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">
···
                   <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,