feat(i18n): add loadPageTranslations method to load translations

Author: s00d

playground/locales/pages/loadPageTranslations-test/ch.json

@@ -0,0 +1 @@
+{}

playground/locales/pages/loadPageTranslations-test/de.json

@@ -0,0 +1 @@
+{}

playground/locales/pages/loadPageTranslations-test/en.json

@@ -0,0 +1 @@
+{}

playground/locales/pages/loadPageTranslations-test/fr.json

@@ -0,0 +1 @@
+{}

playground/locales/pages/loadPageTranslations-test/ru.json

@@ -0,0 +1 @@
+{}

playground/pages/loadPageTranslations-test.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <h1>Test $loadPageTranslations Method</h1>
+
+    <div>
+      <h2>Current Locale: {{ $getLocale() }}</h2>
+      <h2>Route Name: {{ $getRouteName() }}</h2>
+    </div>
+
+    <div>
+      <h3>Translations before loading:</h3>
+      <p>test_key: {{ $t('test_key') || 'NOT FOUND' }}</p>
+      <p>dynamic_key: {{ $t('dynamic_key') || 'NOT FOUND' }}</p>
+    </div>
+
+    <div>
+      <button @click="loadTestTranslations">
+        Load Test Translations
+      </button>
+    </div>
+
+    <div v-if="translationsLoaded">
+      <h3>Translations after loading:</h3>
+      <p>test_key: {{ $t('test_key') }}</p>
+      <p>dynamic_key: {{ $t('dynamic_key') }}</p>
+      <p>nested.key: {{ $t('nested.key') }}</p>
+    </div>
+
+    <div>
+      <h3>Check translation existence:</h3>
+      <p>has test_key: {{ $has('test_key') }}</p>
+      <p>has dynamic_key: {{ $has('dynamic_key') }}</p>
+      <p>has nested.key: {{ $has('nested.key') }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNuxtApp } from '#imports'
+
+const { $getLocale, $getRouteName, $t, $has, $loadPageTranslations } = useNuxtApp()
+
+const translationsLoaded = ref(false)
+
+const loadTestTranslations = async () => {
+  const currentLocale = $getLocale()
+  const routeName = $getRouteName()
+
+  const testTranslations = {
+    test_key: `Test key for ${currentLocale}`,
+    dynamic_key: `Dynamic key loaded at ${new Date().toLocaleTimeString()}`,
+    nested: {
+      key: `Nested key for ${currentLocale}`,
+    },
+  }
+
+  try {
+    await $loadPageTranslations(currentLocale, routeName, testTranslations)
+    translationsLoaded.value = true
+    console.log('Translations loaded successfully:', testTranslations)
+  }
+  catch (error) {
+    console.error('Error loading translations:', error)
+  }
+}
+
+// Check if method is available
+onMounted(() => {
+  console.log('$loadPageTranslations method is available:', typeof $loadPageTranslations === 'function')
+})
+</script>

src/runtime/composables/useI18n.ts

@@ -32,6 +32,7 @@ export function useI18n(): PluginsInjectionsWithAliases {
     $switchRoute: nuxtApp.$switchRoute,
     $localeRoute: nuxtApp.$localeRoute,
     $localePath: nuxtApp.$localePath,
+    $loadPageTranslations: nuxtApp.$loadPageTranslations,
   } as const
 
   const noDollarInjections = Object.fromEntries(

src/runtime/plugins/01.plugin.ts

@@ -249,6 +249,9 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       i18nRouteParams.value = value
       return i18nRouteParams.value
     },
+    loadPageTranslations: async (locale: string, routeName: string, translations: Translations) => {
+      await i18nHelper.loadPageTranslations(locale, routeName, translations)
+    },
   }
 
   const $provideData = Object.fromEntries(
@@ -288,4 +291,5 @@ export interface PluginsInjections {
   $localeRoute: (to: RouteLocationNamedRaw | RouteLocationResolvedGeneric | string, locale?: string) => RouteLocationResolved
   $localePath: (to: RouteLocationNamedRaw | RouteLocationResolvedGeneric | string, locale?: string) => string
   $setI18nRouteParams: (value: I18nRouteParams) => I18nRouteParams
+  $loadPageTranslations: (locale: string, routeName: string, translations: Translations) => Promise<void>
 }