Try to resolve $t from vue global properties #4244

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

@@ -5,5 +5,5 @@ const { locale, messages } = useI18n();
 const { mergeIntoConfig } = useI18nConfig();
 
 watch(locale, (newLocale) => {
-  mergeIntoConfig(messages[newLocale]["vuestic"]);
+  mergeIntoConfig(messages[newLocale]["anyArbitraryKey"]);
 });

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

@@ -22,11 +22,11 @@ export default definePageConfig({
     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.paragraph("Alternatively you can store translations under any other key and provide them to Vuestic via `mergeIntoConfig`."),
     block.code("vue-i18n-runtime"),
-    block.collapse("Recommended config structure", [
-      block.code("vue-i18n-config"),
-    ]),
   ],
 });

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,
   }
 }