Support passing composer instance to Translation component (#453)

* Support passing composer instance to <i18n-t>

Necessary for using the scope of the compilation parent component when placed inside a slot of a custom component.

* Fix formatting error

* Add i18n prop to TranslationProps definition

* Use OR operator for fallback value

* Move i18n prop to BaseFormatProps

* Remove unnecesary prop entry

Author: andresberrios

packages/vue-i18n/src/components/DatetimeFormat.ts

@@ -76,7 +76,9 @@ export const DatetimeFormat = {
   ),
   /* eslint-enable */
   setup(props: DatetimeFormatProps, context: SetupContext): RenderFunction {
-    const i18n = useI18n({ useScope: 'parent' }) as Composer & ComposerInternal
+    const i18n =
+      props.i18n ||
+      (useI18n({ useScope: 'parent' }) as Composer & ComposerInternal)
 
     return renderFormatter<
       FormattableProps<number | Date, Intl.DateTimeFormatOptions>,

packages/vue-i18n/src/components/NumberFormat.ts

@@ -71,7 +71,9 @@ export const NumberFormat = {
   ),
   /* eslint-enable */
   setup(props: NumberFormatProps, context: SetupContext): RenderFunction {
-    const i18n = useI18n({ useScope: 'parent' }) as Composer & ComposerInternal
+    const i18n =
+      props.i18n ||
+      (useI18n({ useScope: 'parent' }) as Composer & ComposerInternal)
 
     return renderFormatter<
       FormattableProps<number, Intl.NumberFormatOptions>,

packages/vue-i18n/src/components/Translation.ts

@@ -98,8 +98,9 @@ export const Translation = {
   /* eslint-enable */
   setup(props: TranslationProps, context: SetupContext): RenderFunction {
     const { slots, attrs } = context
-    const i18n = useI18n({ useScope: props.scope }) as Composer &
-      ComposerInternal
+    const i18n =
+      props.i18n ||
+      (useI18n({ useScope: props.scope }) as Composer & ComposerInternal)
     const keys = Object.keys(slots).filter(key => key !== '_')
 
     return (): VNodeChild => {

packages/vue-i18n/src/components/base.ts

@@ -1,4 +1,6 @@
 import type { Locale } from '@intlify/core-base'
+import { PropType } from '@vue/runtime-core'
+import { Composer } from '../composer'
 import type { I18nScope } from '../i18n'
 
 export type ComponetI18nScope = Exclude<I18nScope, 'local'>
@@ -37,6 +39,11 @@ export interface BaseFormatProps {
    * If the parent is a global scope, the global scope is used, if it's a local scope, the local scope is used.
    */
   scope?: ComponetI18nScope
+  /**
+   * @remarks
+   * An existing i18n Composer instance to use for translating
+   */
+  i18n?: Composer
 }
 
 export const baseFormatProps = {
@@ -51,5 +58,6 @@ export const baseFormatProps = {
     validator: (val: ComponetI18nScope): boolean =>
       val === 'parent' || val === 'global',
     default: 'parent' as ComponetI18nScope
-  }
+  },
+  i18n: { type: Object as PropType<Composer> }
 }