Try to resolve $t from vue global properties (#4244)

packages/docs/page-config/services/i18n/code/runtime.ts

@@ -11,6 +11,8 @@ const messages = {
   },
 };
 
+const { mergeIntoConfig } = useI18nConfig()
+
 watch(locale, (newLocale) => {
   mergeIntoConfig(messages[newLocale]);
 });

packages/docs/page-config/services/i18n/index.ts

@@ -16,17 +16,13 @@ export default definePageConfig({
     block.paragraph("Default messages can be set in `GlobalConfig`. Config is fully typed, so you can use autocomplete to find messages you want to change."),
     block.code("setup"),
 
-    block.subtitle("Changing language in runtime"),
-    block.paragraph("If you have more than one language, you can update messages in runtime with `useI18nConfig` hook from VuesticUI."),
-
-    block.code("runtime"),
-
     block.subtitle("Using with vue-i18n"),
-    block.paragraph("If you use vue-i18n we can recommend to store VuesticUI messages under specific key"),
+    block.paragraph("Vuestic integrates with vue-i18n and looks for translations under the key `vuestic.{key}` so you can override the default messages directly in vue-i18n translations with config structure like this:"),
+    block.code("vue-i18n-config"),
+    block.paragraph("If key can't be resolved through vue-i18n we fallback to own config messages."),
 
-    block.code("vue-i18n-runtime"),
-    block.collapse("Recommended config structure", [
-      block.code("vue-i18n-config"),
-    ]),
+    block.subtitle("Changing language in runtime"),
+    block.paragraph("Translations can be used without vue-i18n in case if you use custom solution. You can change translations in runtime by using `useI18nConfig` composable."),
+    block.code("runtime"),
   ],
 });

packages/ui/src/composables/useTranslation.ts

@@ -1,4 +1,4 @@
-import { computed, PropType } from 'vue'
+import { computed, getCurrentInstance, PropType } from 'vue'
 import { useGlobalConfig } from '../composables'
 import { I18NKey, I18NKnownKey } from '../services/i18n'
 import { warn } from '../utils/console'
@@ -33,24 +33,39 @@ export const useTranslation = () => {
 
   const config = computed(() => globalConfig.value.i18n)
 
-  return {
-    /** Translate prop. Translate only if key has `$t:` prefix */
-    tp<Key extends TranslationProp | undefined> (key: Key, values?: Record<string, Stringable>): string {
-      if (!key) { return '' }
+  function t<Key extends I18NKey> (key: Key, values?: Record<string, Stringable>) {
+    const $t = getCurrentInstance()?.appContext.config.globalProperties.$t
 
-      if (isTranslationKey(key)) {
-        key = (config.value[key.slice(3)] || key) as NonNullable<Key>
-      }
+    // Try to resolve translation with vue-i18n injected $t function
+    if (typeof $t === 'function') {
+      const translated = $t(`vuestic.${key}`, values)
 
-      return (applyI18nTemplate(key, values) || key)
-    },
-    t<Key extends I18NKey> (key: Key, values?: Record<string, Stringable>) {
-      const translated = config.value[key]
-      if (!translated) {
-        warn(`${key} not found in VuesticUI i18n config`)
-        return key
+      if (translated) {
+        return translated
       }
-      return (applyI18nTemplate(translated, values) || key)
-    },
+    }
+
+    const translated = config.value[key]
+    if (!translated) {
+      warn(`${key} not found in VuesticUI i18n config`)
+      return key
+    }
+    return (applyI18nTemplate(translated, values) || key)
+  }
+
+  /** Translate prop. Translate only if key has `$t:` prefix */
+  function tp<Key extends TranslationProp | undefined> (key: Key, values?: Record<string, Stringable>): string {
+    if (!key) { return '' }
+
+    if (isTranslationKey(key)) {
+      return t(key.slice(3))
+    }
+
+    return (applyI18nTemplate(key, values) || key)
+  }
+
+  return {
+    tp,
+    t,
   }
 }