vue-i18n 9.2.0-beta.9 → 9.2.2

package/dist/vue-i18n.cjs.js

@@ -1,6 +1,6 @@
 /*!
-  * vue-i18n v9.2.0-beta.9
-  * (c) 2021 kazuya kawaguchi
+  * vue-i18n v9.2.2
+  * (c) 2022 kazuya kawaguchi
   * Released under the MIT License.
   */
 'use strict';
@@ -19,10 +19,10 @@ var vue = require('vue');
  *
  * @VueI18nGeneral
  */
-const VERSION = '9.2.0-beta.9';
+const VERSION = '9.2.2';
 
 let code$1 = coreBase.CoreWarnCodes.__EXTEND_POINT__;
-const inc$1 = () => code$1++;
+const inc$1 = () => ++code$1;
 const I18nWarnCodes = {
     FALLBACK_TO_ROOT: code$1,
     NOT_SUPPORTED_PRESERVE: inc$1(),
@@ -30,8 +30,7 @@ const I18nWarnCodes = {
     NOT_SUPPORTED_PRESERVE_DIRECTIVE: inc$1(),
     NOT_SUPPORTED_GET_CHOICE_INDEX: inc$1(),
     COMPONENT_NAME_LEGACY_COMPATIBLE: inc$1(),
-    NOT_FOUND_PARENT_SCOPE: inc$1(),
-    NOT_SUPPORT_MULTI_I18N_INSTANCE: inc$1() // 14
+    NOT_FOUND_PARENT_SCOPE: inc$1() // 13
 };
 const warnMessages = {
     [I18nWarnCodes.FALLBACK_TO_ROOT]: `Fall back to {type} '{key}' with root locale.`,
@@ -40,15 +39,14 @@ const warnMessages = {
     [I18nWarnCodes.NOT_SUPPORTED_PRESERVE_DIRECTIVE]: `Not supported 'preserveDirectiveContent'.`,
     [I18nWarnCodes.NOT_SUPPORTED_GET_CHOICE_INDEX]: `Not supported 'getChoiceIndex'.`,
     [I18nWarnCodes.COMPONENT_NAME_LEGACY_COMPATIBLE]: `Component name legacy compatible: '{name}' -> 'i18n'`,
-    [I18nWarnCodes.NOT_FOUND_PARENT_SCOPE]: `Not found parent scope. use the global scope.`,
-    [I18nWarnCodes.NOT_SUPPORT_MULTI_I18N_INSTANCE]: `Not support multi i18n instance.`
+    [I18nWarnCodes.NOT_FOUND_PARENT_SCOPE]: `Not found parent scope. use the global scope.`
 };
 function getWarnMessage(code, ...args) {
     return shared.format(warnMessages[code], ...args);
 }
 
 let code = coreBase.CompileErrorCodes.__EXTEND_POINT__;
-const inc = () => code++;
+const inc = () => ++code;
 const I18nErrorCodes = {
     // composer module errors
     UNEXPECTED_RETURN_TYPE: code,
@@ -70,8 +68,12 @@ const I18nErrorCodes = {
     NOT_COMPATIBLE_LEGACY_VUE_I18N: inc(),
     // bridge support vue 2.x only
     BRIDGE_SUPPORT_VUE_2_ONLY: inc(),
+    // need to define `i18n` option in `allowComposition: true` and `useScope: 'local' at `useI18n``
+    MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION: inc(),
+    // Not available Compostion API in Legacy API mode. Please make sure that the legacy API mode is working properly
+    NOT_AVAILABLE_COMPOSITION_IN_LEGACY: inc(),
     // for enhancement
-    __EXTEND_POINT__: inc() // 27
+    __EXTEND_POINT__: inc() // 29
 };
 function createI18nError(code, ...args) {
     return coreBase.createCompileError(code, null, { messages: errorMessages, args } );
@@ -88,7 +90,9 @@ const errorMessages = {
     [I18nErrorCodes.CANNOT_SETUP_VUE_DEVTOOLS_PLUGIN]: `Cannot setup vue-devtools plugin`,
     [I18nErrorCodes.NOT_INSLALLED_WITH_PROVIDE]: 'Need to install with `provide` function',
     [I18nErrorCodes.NOT_COMPATIBLE_LEGACY_VUE_I18N]: 'Not compatible legacy VueI18n.',
-    [I18nErrorCodes.BRIDGE_SUPPORT_VUE_2_ONLY]: 'vue-i18n-bridge support Vue 2.x only'
+    [I18nErrorCodes.BRIDGE_SUPPORT_VUE_2_ONLY]: 'vue-i18n-bridge support Vue 2.x only',
+    [I18nErrorCodes.MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION]: 'Must define ‘i18n’ option or custom block in Composition API with using local scope in Legacy API mode',
+    [I18nErrorCodes.NOT_AVAILABLE_COMPOSITION_IN_LEGACY]: 'Not available Compostion API in Legacy API mode. Please make sure that the legacy API mode is working properly'
 };
 
 const TransrateVNodeSymbol = 
@@ -98,7 +102,9 @@ const NumberPartsSymbol = /* #__PURE__*/ shared.makeSymbol('__numberParts');
 const EnableEmitter = /* #__PURE__*/ shared.makeSymbol('__enableEmitter');
 const DisableEmitter = /* #__PURE__*/ shared.makeSymbol('__disableEmitter');
 const SetPluralRulesSymbol = shared.makeSymbol('__setPluralRules');
-shared.makeSymbol('__intlifyMeta');
+shared.makeSymbol('__intlifyMeta');
+const InejctWithOption = /* #__PURE__*/ shared.makeSymbol('__injectWithOption');
+const __VUE_I18N_BRIDGE__ =  '__VUE_I18N_BRIDGE__';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -206,9 +212,51 @@ function deepCopy(src, des) {
 function getComponentOptions(instance) {
     return instance.type ;
 }
+function adjustI18nResources(global, options, componentOptions // eslint-disable-line @typescript-eslint/no-explicit-any
+) {
+    let messages = shared.isObject(options.messages) ? options.messages : {};
+    if ('__i18nGlobal' in componentOptions) {
+        messages = getLocaleMessages(global.locale.value, {
+            messages,
+            __i18n: componentOptions.__i18nGlobal
+        });
+    }
+    // merge locale messages
+    const locales = Object.keys(messages);
+    if (locales.length) {
+        locales.forEach(locale => {
+            global.mergeLocaleMessage(locale, messages[locale]);
+        });
+    }
+    {
+        // merge datetime formats
+        if (shared.isObject(options.datetimeFormats)) {
+            const locales = Object.keys(options.datetimeFormats);
+            if (locales.length) {
+                locales.forEach(locale => {
+                    global.mergeDateTimeFormat(locale, options.datetimeFormats[locale]);
+                });
+            }
+        }
+        // merge number formats
+        if (shared.isObject(options.numberFormats)) {
+            const locales = Object.keys(options.numberFormats);
+            if (locales.length) {
+                locales.forEach(locale => {
+                    global.mergeNumberFormat(locale, options.numberFormats[locale]);
+                });
+            }
+        }
+    }
+}
+function createTextNode(key) {
+    return vue.createVNode(vue.Text, null, key, 0)
+        ;
+}
 /* eslint-enable @typescript-eslint/no-explicit-any */
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+// extend VNode interface
 const DEVTOOLS_META = '__INTLIFY_META__';
 let composerID = 0;
 function defineCoreMissingHandler(missing) {
@@ -294,9 +342,12 @@ function createComposer(options = {}, VueI18nLegacy) {
     let _postTranslation = shared.isFunction(options.postTranslation)
         ? options.postTranslation
         : null;
-    let _warnHtmlMessage = shared.isBoolean(options.warnHtmlMessage)
-        ? options.warnHtmlMessage
-        : true;
+    // prettier-ignore
+    let _warnHtmlMessage = __root
+        ? __root.warnHtmlMessage
+        : shared.isBoolean(options.warnHtmlMessage)
+            ? options.warnHtmlMessage
+            : true;
     let _escapeParameter = !!options.escapeParameter;
     // custom linked modifiers
     // prettier-ignore
@@ -310,7 +361,8 @@ function createComposer(options = {}, VueI18nLegacy) {
     // runtime context
     // eslint-disable-next-line prefer-const
     let _context;
-    function getCoreContext() {
+    const getCoreContext = () => {
+        _isGlobal && coreBase.setFallbackContext(null);
         const ctxOptions = {
             version: VERSION,
             locale: _locale.value,
@@ -344,8 +396,10 @@ function createComposer(options = {}, VueI18nLegacy) {
                 ? _context.__v_emitter
                 : undefined;
         }
-        return coreBase.createCoreContext(ctxOptions);
-    }
+        const ctx = coreBase.createCoreContext(ctxOptions);
+        _isGlobal && coreBase.setFallbackContext(ctx);
+        return ctx;
+    };
     _context = getCoreContext();
     coreBase.updateFallbackLocale(_context, _locale.value, _fallbackLocale.value);
     // track reactivity
@@ -407,17 +461,25 @@ function createComposer(options = {}, VueI18nLegacy) {
     ) {
         return type !== 'translate' || !arg.resolvedMessage;
     }
-    function wrapWithDeps(fn, argumentParser, warnType, fallbackSuccess, fallbackFail, successCondition) {
+    const wrapWithDeps = (fn, argumentParser, warnType, fallbackSuccess, fallbackFail, successCondition) => {
         trackReactivityValues(); // track reactive dependency
         // NOTE: experimental !!
         let ret;
         {
             try {
                 coreBase.setAdditionalMeta(getMetaInfo());
+                if (!_isGlobal) {
+                    _context.fallbackContext = __root
+                        ? coreBase.getFallbackContext()
+                        : undefined;
+                }
                 ret = fn(_context);
             }
             finally {
                 coreBase.setAdditionalMeta(null);
+                if (!_isGlobal) {
+                    _context.fallbackContext = undefined;
+                }
             }
         }
         if (shared.isNumber(ret) && ret === coreBase.NOT_REOSLVED) {
@@ -457,7 +519,7 @@ function createComposer(options = {}, VueI18nLegacy) {
             /* istanbul ignore next */
             throw createI18nError(I18nErrorCodes.UNEXPECTED_RETURN_TYPE);
         }
-    }
+    };
     // t
     function t(...args) {
         return wrapWithDeps(context => Reflect.apply(coreBase.translate, null, [context, ...args]), () => coreBase.parseTranslateArgs(...args), 'translate', root => Reflect.apply(root.t, root, [...args]), key => key, val => shared.isString(val));
@@ -480,7 +542,9 @@ function createComposer(options = {}, VueI18nLegacy) {
     }
     // for custom processor
     function normalize(values) {
-        return values.map(val => shared.isString(val) ? vue.createVNode(vue.Text, null, val, 0) : val);
+        return values.map(val => shared.isString(val) || shared.isNumber(val) || shared.isBoolean(val)
+            ? createTextNode(String(val))
+            : val);
     }
     const interpolate = (val) => val;
     const processor = {
@@ -503,7 +567,7 @@ function createComposer(options = {}, VueI18nLegacy) {
             return ret;
         }, () => coreBase.parseTranslateArgs(...args), 'translate', 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        root => root[TransrateVNodeSymbol](...args), key => [vue.createVNode(vue.Text, null, key, 0)], val => shared.isArray(val));
+        root => root[TransrateVNodeSymbol](...args), key => [createTextNode(key)], val => shared.isArray(val));
     }
     // numberParts, using for `i18n-n` component
     function numberParts(...args) {
@@ -600,7 +664,7 @@ function createComposer(options = {}, VueI18nLegacy) {
     // for debug
     composerID++;
     // watch root locale & fallbackLocale
-    if (__root) {
+    if (__root && shared.inBrowser) {
         vue.watch(__root.locale, (val) => {
             if (_inheritLocale) {
                 _locale.value = val;
@@ -710,11 +774,10 @@ function createComposer(options = {}, VueI18nLegacy) {
         composer.getNumberFormat = getNumberFormat;
         composer.setNumberFormat = setNumberFormat;
         composer.mergeNumberFormat = mergeNumberFormat;
-        {
-            composer[TransrateVNodeSymbol] = transrateVNode;
-            composer[NumberPartsSymbol] = numberParts;
-            composer[DatetimePartsSymbol] = datetimeParts;
-        }
+        composer[InejctWithOption] = options.__injectWithOption;
+        composer[TransrateVNodeSymbol] = transrateVNode;
+        composer[DatetimePartsSymbol] = datetimeParts;
+        composer[NumberPartsSymbol] = numberParts;
     }
     // for vue-devtools timeline event
     {
@@ -782,7 +845,7 @@ function convertComposerOptions(options) {
             return messages;
         }, (messages || {}));
     }
-    const { __i18n, __root } = options;
+    const { __i18n, __root, __injectWithOption } = options;
     const datetimeFormats = options.datetimeFormats;
     const numberFormats = options.numberFormats;
     const flatJson = options.flatJson;
@@ -806,7 +869,8 @@ function convertComposerOptions(options) {
         messageResolver: options.messageResolver,
         inheritLocale,
         __i18n,
-        __root
+        __root,
+        __injectWithOption
     };
 }
 /**
@@ -1116,6 +1180,37 @@ const baseFormatProps = {
     }
 };
 
+function getInterpolateArg(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+{ slots }, // SetupContext,
+keys) {
+    if (keys.length === 1 && keys[0] === 'default') {
+        // default slot with list
+        const ret = slots.default ? slots.default() : [];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return ret.reduce((slot, current) => {
+            return (slot = [
+                ...slot,
+                ...(shared.isArray(current.children) ? current.children : [current])
+            ]);
+        }, []);
+    }
+    else {
+        // named slots
+        return keys.reduce((arg, key) => {
+            const slot = slots[key];
+            if (slot) {
+                arg[key] = slot();
+            }
+            return arg;
+        }, {});
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getFragmentableTag(tag) {
+    return vue.Fragment ;
+}
+
 /**
  * Translation Component
  *
@@ -1165,7 +1260,7 @@ const baseFormatProps = {
  *
  * @VueI18nComponent
  */
-const Translation = /* #__PURE__*/ vue.defineComponent({
+const Translation =  /* defineComponent */ {
     /* eslint-disable */
     name: 'i18n-t',
     props: shared.assign({
@@ -1180,13 +1275,17 @@ const Translation = /* #__PURE__*/ vue.defineComponent({
         }
     }, baseFormatProps),
     /* eslint-enable */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setup(props, context) {
         const { slots, attrs } = context;
         // NOTE: avoid https://github.com/microsoft/rushstack/issues/1050
         const i18n = props.i18n ||
-            useI18n({ useScope: props.scope });
-        const keys = Object.keys(slots).filter(key => key !== '_');
+            useI18n({
+                useScope: props.scope,
+                __useComponent: true
+            });
         return () => {
+            const keys = Object.keys(slots).filter(key => key !== '_');
             const options = {};
             if (props.locale) {
                 options.locale = props.locale;
@@ -1198,28 +1297,17 @@ const Translation = /* #__PURE__*/ vue.defineComponent({
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const children = i18n[TransrateVNodeSymbol](props.keypath, arg, options);
             const assignedAttrs = shared.assign({}, attrs);
-            const tag = shared.isString(props.tag) || shared.isObject(props.tag) ? props.tag : vue.Fragment;
+            const tag = shared.isString(props.tag) || shared.isObject(props.tag)
+                ? props.tag
+                : getFragmentableTag();
             return vue.h(tag, assignedAttrs, children);
         };
     }
-});
-function getInterpolateArg({ slots }, keys) {
-    if (keys.length === 1 && keys[0] === 'default') {
-        // default slot only
-        return slots.default ? slots.default() : [];
-    }
-    else {
-        // named slots
-        return keys.reduce((arg, key) => {
-            const slot = slots[key];
-            if (slot) {
-                arg[key] = slot();
-            }
-            return arg;
-        }, {});
-    }
-}
+};
 
+function isVNode(target) {
+    return shared.isArray(target) && !shared.isString(target[0]);
+}
 function renderFormatter(props, context, slotKeys, partFormatter) {
     const { slots, attrs } = context;
     return () => {
@@ -1249,37 +1337,26 @@ function renderFormatter(props, context, slotKeys, partFormatter) {
         if (shared.isArray(parts)) {
             children = parts.map((part, index) => {
                 const slot = slots[part.type];
-                return slot
+                const node = slot
                     ? slot({ [part.type]: part.value, index, parts })
                     : [part.value];
+                if (isVNode(node)) {
+                    node[0].key = `${part.type}-${index}`;
+                }
+                return node;
             });
         }
         else if (shared.isString(parts)) {
             children = [parts];
         }
         const assignedAttrs = shared.assign({}, attrs);
-        const tag = shared.isString(props.tag) || shared.isObject(props.tag) ? props.tag : vue.Fragment;
+        const tag = shared.isString(props.tag) || shared.isObject(props.tag)
+            ? props.tag
+            : getFragmentableTag();
         return vue.h(tag, assignedAttrs, children);
     };
 }
 
-const NUMBER_FORMAT_KEYS = [
-    'localeMatcher',
-    'style',
-    'unit',
-    'unitDisplay',
-    'currency',
-    'currencyDisplay',
-    'useGrouping',
-    'numberingSystem',
-    'minimumIntegerDigits',
-    'minimumFractionDigits',
-    'maximumFractionDigits',
-    'minimumSignificantDigits',
-    'maximumSignificantDigits',
-    'notation',
-    'formatMatcher'
-];
 /**
  * Number Format Component
  *
@@ -1297,7 +1374,7 @@ const NUMBER_FORMAT_KEYS = [
  *
  * @VueI18nComponent
  */
-const NumberFormat = /* #__PURE__*/ vue.defineComponent({
+const NumberFormat =  /* defineComponent */ {
     /* eslint-disable */
     name: 'i18n-n',
     props: shared.assign({
@@ -1310,37 +1387,16 @@ const NumberFormat = /* #__PURE__*/ vue.defineComponent({
         }
     }, baseFormatProps),
     /* eslint-enable */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setup(props, context) {
         const i18n = props.i18n ||
-            useI18n({ useScope: 'parent' });
-        return renderFormatter(props, context, NUMBER_FORMAT_KEYS, (...args) => 
+            useI18n({ useScope: 'parent', __useComponent: true });
+        return renderFormatter(props, context, coreBase.NUMBER_FORMAT_OPTIONS_KEYS, (...args) => 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         i18n[NumberPartsSymbol](...args));
     }
-});
+};
 
-const DATETIME_FORMAT_KEYS = [
-    'dateStyle',
-    'timeStyle',
-    'fractionalSecondDigits',
-    'calendar',
-    'dayPeriod',
-    'numberingSystem',
-    'localeMatcher',
-    'timeZone',
-    'hour12',
-    'hourCycle',
-    'formatMatcher',
-    'weekday',
-    'era',
-    'year',
-    'month',
-    'day',
-    'hour',
-    'minute',
-    'second',
-    'timeZoneName'
-];
 /**
  * Datetime Format Component
  *
@@ -1358,7 +1414,7 @@ const DATETIME_FORMAT_KEYS = [
  *
  * @VueI18nComponent
  */
-const DatetimeFormat = /* #__PURE__*/ vue.defineComponent({
+const DatetimeFormat =  /*defineComponent */ {
     /* eslint-disable */
     name: 'i18n-d',
     props: shared.assign({
@@ -1371,14 +1427,15 @@ const DatetimeFormat = /* #__PURE__*/ vue.defineComponent({
         }
     }, baseFormatProps),
     /* eslint-enable */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setup(props, context) {
         const i18n = props.i18n ||
-            useI18n({ useScope: 'parent' });
-        return renderFormatter(props, context, DATETIME_FORMAT_KEYS, (...args) => 
+            useI18n({ useScope: 'parent', __useComponent: true });
+        return renderFormatter(props, context, coreBase.DATETIME_FORMAT_OPTIONS_KEYS, (...args) => 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         i18n[DatetimePartsSymbol](...args));
     }
-});
+};
 
 function getComposer$1(i18n, instance) {
     const i18nInternal = i18n;
@@ -1393,7 +1450,8 @@ function getComposer$1(i18n, instance) {
     }
 }
 function vTDirective(i18n) {
-    const bind = (el, { instance, value, modifiers }) => {
+    const _process = (binding) => {
+        const { instance, modifiers, value } = binding;
         /* istanbul ignore if */
         if (!instance || !instance.$) {
             throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR);
@@ -1403,14 +1461,51 @@ function vTDirective(i18n) {
             shared.warn(getWarnMessage(I18nWarnCodes.NOT_SUPPORTED_PRESERVE));
         }
         const parsedValue = parseValue(value);
-        // el.textContent = composer.t(...makeParams(parsedValue))
-        el.textContent = Reflect.apply(composer.t, composer, [
-            ...makeParams(parsedValue)
-        ]);
+        return [
+            Reflect.apply(composer.t, composer, [...makeParams(parsedValue)]),
+            composer
+        ];
+    };
+    const register = (el, binding) => {
+        const [textContent, composer] = _process(binding);
+        if (shared.inBrowser && i18n.global === composer) {
+            // global scope only
+            el.__i18nWatcher = vue.watch(composer.locale, () => {
+                binding.instance && binding.instance.$forceUpdate();
+            });
+        }
+        el.__composer = composer;
+        el.textContent = textContent;
+    };
+    const unregister = (el) => {
+        if (shared.inBrowser && el.__i18nWatcher) {
+            el.__i18nWatcher();
+            el.__i18nWatcher = undefined;
+            delete el.__i18nWatcher;
+        }
+        if (el.__composer) {
+            el.__composer = undefined;
+            delete el.__composer;
+        }
+    };
+    const update = (el, { value }) => {
+        if (el.__composer) {
+            const composer = el.__composer;
+            const parsedValue = parseValue(value);
+            el.textContent = Reflect.apply(composer.t, composer, [
+                ...makeParams(parsedValue)
+            ]);
+        }
+    };
+    const getSSRProps = (binding) => {
+        const [textContent] = _process(binding);
+        return { textContent };
     };
     return {
-        beforeMount: bind,
-        beforeUpdate: bind
+        created: register,
+        unmounted: unregister,
+        beforeUpdate: update,
+        getSSRProps
     };
 }
 function parseValue(value) {
@@ -1491,6 +1586,7 @@ function defineMixin(vuei18n, composer, i18n) {
                     this.$i18n = mergeToRoot(vuei18n, optionsI18n);
                 }
                 else {
+                    optionsI18n.__injectWithOption = true;
                     this.$i18n = createVueI18n(optionsI18n);
                 }
             }
@@ -1501,6 +1597,7 @@ function defineMixin(vuei18n, composer, i18n) {
                 else {
                     this.$i18n = createVueI18n({
                         __i18n: options.__i18n,
+                        __injectWithOption: true,
                         __root: composer
                     });
                 }
@@ -1509,6 +1606,9 @@ function defineMixin(vuei18n, composer, i18n) {
                 // set global
                 this.$i18n = vuei18n;
             }
+            if (options.__i18nGlobal) {
+                adjustI18nResources(composer, options, options);
+            }
             vuei18n.__onComponentInstanceCreated(this.$i18n);
             i18n.__setInstance(instance, this.$i18n);
             // defines vue-i18n legacy APIs
@@ -1528,17 +1628,15 @@ function defineMixin(vuei18n, composer, i18n) {
             if (!instance) {
                 throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR);
             }
-            vue.nextTick(() => {
-                delete this.$t;
-                delete this.$rt;
-                delete this.$tc;
-                delete this.$te;
-                delete this.$d;
-                delete this.$n;
-                delete this.$tm;
-                i18n.__deleteInstance(instance);
-                delete this.$i18n;
-            });
+            delete this.$t;
+            delete this.$rt;
+            delete this.$tc;
+            delete this.$te;
+            delete this.$d;
+            delete this.$n;
+            delete this.$tm;
+            i18n.__deleteInstance(instance);
+            delete this.$i18n;
         }
     };
 }
@@ -1589,9 +1687,16 @@ function createI18n(options = {}, VueI18nLegacy) {
     const __legacyMode = shared.isBoolean(options.legacy)
             ? options.legacy
             : true;
-    const __globalInjection =  !!options.globalInjection;
+    // prettier-ignore
+    const __globalInjection = shared.isBoolean(options.globalInjection)
+        ? options.globalInjection
+        : true;
+    // prettier-ignore
+    const __allowComposition = __legacyMode
+            ? !!options.allowComposition
+            : true;
     const __instances = new Map();
-    const __global = createGlobal(options, __legacyMode);
+    const [globalScope, __global] = createGlobal(options, __legacyMode);
     const symbol = shared.makeSymbol('vue-i18n' );
     function __getInstance(component) {
         return __instances.get(component) || null;
@@ -1610,13 +1715,15 @@ function createI18n(options = {}, VueI18nLegacy) {
                     ? 'legacy'
                     : 'composition';
             },
+            // allowComposition
+            get allowComposition() {
+                return __allowComposition;
+            },
             // install plugin
             async install(app, ...options) {
                 // setup global provider
-                {
-                    app.__VUE_I18N_SYMBOL__ = symbol;
-                    app.provide(app.__VUE_I18N_SYMBOL__, i18n);
-                }
+                app.__VUE_I18N_SYMBOL__ = symbol;
+                app.provide(app.__VUE_I18N_SYMBOL__, i18n);
                 // global method and properties injection for Composition API
                 if (!__legacyMode && __globalInjection) {
                     injectGlobalFields(app, i18n.global);
@@ -1629,11 +1736,20 @@ function createI18n(options = {}, VueI18nLegacy) {
                 if (__legacyMode) {
                     app.mixin(defineMixin(__global, __global.__composer, i18n));
                 }
+                // release global scope
+                const unmountApp = app.unmount;
+                app.unmount = () => {
+                    i18n.dispose();
+                    unmountApp();
+                };
             },
             // global accessor
             get global() {
                 return __global;
             },
+            dispose() {
+                globalScope.stop();
+            },
             // @internal
             __instances,
             // @internal
@@ -1661,12 +1777,22 @@ function useI18n(options = {}) {
     const global = getGlobalComposer(i18n);
     const componentOptions = getComponentOptions(instance);
     const scope = getScope(options, componentOptions);
+    {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (i18n.mode === 'legacy' && !options.__useComponent) {
+            if (!i18n.allowComposition) {
+                throw createI18nError(I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE);
+            }
+            return useI18nForLegacy(instance, scope, global, options);
+        }
+    }
     if (scope === 'global') {
         adjustI18nResources(global, options, componentOptions);
         return global;
     }
     if (scope === 'parent') {
-        let composer = getComposer(i18n, instance);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let composer = getComposer(i18n, instance, options.__useComponent);
         if (composer == null) {
             {
                 shared.warn(getWarnMessage(I18nWarnCodes.NOT_FOUND_PARENT_SCOPE));
@@ -1675,10 +1801,6 @@ function useI18n(options = {}) {
         }
         return composer;
     }
-    // scope 'local' case
-    if (i18n.mode === 'legacy') {
-        throw createI18nError(I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE);
-    }
     const i18nInternal = i18n;
     let composer = i18nInternal.__getInstance(instance);
     if (composer == null) {
@@ -1695,12 +1817,41 @@ function useI18n(options = {}) {
     }
     return composer;
 }
+/**
+ * Cast to VueI18n legacy compatible type
+ *
+ * @remarks
+ * This API is provided only with [vue-i18n-bridge](https://vue-i18n.intlify.dev/guide/migration/ways.html#what-is-vue-i18n-bridge).
+ *
+ * The purpose of this function is to convert an {@link I18n} instance created with {@link createI18n | createI18n(legacy: true)} into a `vue-i18n@v8.x` compatible instance of `new VueI18n` in a TypeScript environment.
+ *
+ * @param i18n - An instance of {@link I18n}
+ * @returns A i18n instance which is casted to {@link VueI18n} type
+ *
+ * @VueI18nTip
+ * :new: provided by **vue-i18n-bridge only**
+ *
+ * @VueI18nGeneral
+ */
+const castToVueI18n =  (i18n
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => {
+    if (!(__VUE_I18N_BRIDGE__ in i18n)) {
+        throw createI18nError(I18nErrorCodes.NOT_COMPATIBLE_LEGACY_VUE_I18N);
+    }
+    return i18n;
+};
 function createGlobal(options, legacyMode, VueI18nLegacy // eslint-disable-line @typescript-eslint/no-explicit-any
 ) {
+    const scope = vue.effectScope();
     {
-        return legacyMode
-            ? createVueI18n(options)
-            : createComposer(options);
+        const obj = legacyMode
+            ? scope.run(() => createVueI18n(options))
+            : scope.run(() => createComposer(options));
+        if (obj == null) {
+            throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR);
+        }
+        return [scope, obj];
     }
 }
 function getI18nInstance(instance) {
@@ -1735,44 +1886,7 @@ function getGlobalComposer(i18n) {
             : i18n.global.__composer
         ;
 }
-function adjustI18nResources(global, options, componentOptions // eslint-disable-line @typescript-eslint/no-explicit-any
-) {
-    let messages = shared.isObject(options.messages) ? options.messages : {};
-    if ('__i18nGlobal' in componentOptions) {
-        messages = getLocaleMessages(global.locale.value, {
-            messages,
-            __i18n: componentOptions.__i18nGlobal
-        });
-    }
-    // merge locale messages
-    const locales = Object.keys(messages);
-    if (locales.length) {
-        locales.forEach(locale => {
-            global.mergeLocaleMessage(locale, messages[locale]);
-        });
-    }
-    {
-        // merge datetime formats
-        if (shared.isObject(options.datetimeFormats)) {
-            const locales = Object.keys(options.datetimeFormats);
-            if (locales.length) {
-                locales.forEach(locale => {
-                    global.mergeDateTimeFormat(locale, options.datetimeFormats[locale]);
-                });
-            }
-        }
-        // merge number formats
-        if (shared.isObject(options.numberFormats)) {
-            const locales = Object.keys(options.numberFormats);
-            if (locales.length) {
-                locales.forEach(locale => {
-                    global.mergeNumberFormat(locale, options.numberFormats[locale]);
-                });
-            }
-        }
-    }
-}
-function getComposer(i18n, target) {
+function getComposer(i18n, target, useComponent = false) {
     let composer = null;
     const root = target.root;
     let current = target.parent;
@@ -1787,6 +1901,12 @@ function getComposer(i18n, target) {
                 if (vueI18n != null) {
                     composer = vueI18n
                         .__composer;
+                    if (useComponent &&
+                        composer &&
+                        !composer[InejctWithOption] // eslint-disable-line @typescript-eslint/no-explicit-any
+                    ) {
+                        composer = null;
+                    }
                 }
             }
         }
@@ -1809,6 +1929,366 @@ function setupLifeCycle(i18n, target, composer) {
         }, target);
     }
 }
+function useI18nForLegacy(instance, scope, root, options = {} // eslint-disable-line @typescript-eslint/no-explicit-any
+) {
+    const isLocale = scope === 'local';
+    const _composer = vue.shallowRef(null);
+    if (isLocale &&
+        instance.proxy &&
+        !(instance.proxy.$options.i18n || instance.proxy.$options.__i18n)) {
+        throw createI18nError(I18nErrorCodes.MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION);
+    }
+    const _inheritLocale = shared.isBoolean(options.inheritLocale)
+        ? options.inheritLocale
+        : true;
+    const _locale = vue.ref(
+    // prettier-ignore
+    isLocale && _inheritLocale
+        ? root.locale.value
+        : shared.isString(options.locale)
+            ? options.locale
+            : coreBase.DEFAULT_LOCALE);
+    const _fallbackLocale = vue.ref(
+    // prettier-ignore
+    isLocale && _inheritLocale
+        ? root.fallbackLocale.value
+        : shared.isString(options.fallbackLocale) ||
+            shared.isArray(options.fallbackLocale) ||
+            shared.isPlainObject(options.fallbackLocale) ||
+            options.fallbackLocale === false
+            ? options.fallbackLocale
+            : _locale.value);
+    const _messages = vue.ref(getLocaleMessages(_locale.value, options));
+    // prettier-ignore
+    const _datetimeFormats = vue.ref(shared.isPlainObject(options.datetimeFormats)
+        ? options.datetimeFormats
+        : { [_locale.value]: {} });
+    // prettier-ignore
+    const _numberFormats = vue.ref(shared.isPlainObject(options.numberFormats)
+        ? options.numberFormats
+        : { [_locale.value]: {} });
+    // prettier-ignore
+    const _missingWarn = isLocale
+        ? root.missingWarn
+        : shared.isBoolean(options.missingWarn) || shared.isRegExp(options.missingWarn)
+            ? options.missingWarn
+            : true;
+    // prettier-ignore
+    const _fallbackWarn = isLocale
+        ? root.fallbackWarn
+        : shared.isBoolean(options.fallbackWarn) || shared.isRegExp(options.fallbackWarn)
+            ? options.fallbackWarn
+            : true;
+    // prettier-ignore
+    const _fallbackRoot = isLocale
+        ? root.fallbackRoot
+        : shared.isBoolean(options.fallbackRoot)
+            ? options.fallbackRoot
+            : true;
+    // configure fall back to root
+    const _fallbackFormat = !!options.fallbackFormat;
+    // runtime missing
+    const _missing = shared.isFunction(options.missing) ? options.missing : null;
+    // postTranslation handler
+    const _postTranslation = shared.isFunction(options.postTranslation)
+        ? options.postTranslation
+        : null;
+    // prettier-ignore
+    const _warnHtmlMessage = isLocale
+        ? root.warnHtmlMessage
+        : shared.isBoolean(options.warnHtmlMessage)
+            ? options.warnHtmlMessage
+            : true;
+    const _escapeParameter = !!options.escapeParameter;
+    // prettier-ignore
+    const _modifiers = isLocale
+        ? root.modifiers
+        : shared.isPlainObject(options.modifiers)
+            ? options.modifiers
+            : {};
+    // pluralRules
+    const _pluralRules = options.pluralRules || (isLocale && root.pluralRules);
+    // track reactivity
+    function trackReactivityValues() {
+        return [
+            _locale.value,
+            _fallbackLocale.value,
+            _messages.value,
+            _datetimeFormats.value,
+            _numberFormats.value
+        ];
+    }
+    // locale
+    const locale = vue.computed({
+        get: () => {
+            return _composer.value ? _composer.value.locale.value : _locale.value;
+        },
+        set: val => {
+            if (_composer.value) {
+                _composer.value.locale.value = val;
+            }
+            _locale.value = val;
+        }
+    });
+    // fallbackLocale
+    const fallbackLocale = vue.computed({
+        get: () => {
+            return _composer.value
+                ? _composer.value.fallbackLocale.value
+                : _fallbackLocale.value;
+        },
+        set: val => {
+            if (_composer.value) {
+                _composer.value.fallbackLocale.value = val;
+            }
+            _fallbackLocale.value = val;
+        }
+    });
+    // messages
+    const messages = vue.computed(() => {
+        if (_composer.value) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return _composer.value.messages.value;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return _messages.value;
+        }
+    });
+    const datetimeFormats = vue.computed(() => _datetimeFormats.value);
+    const numberFormats = vue.computed(() => _numberFormats.value);
+    function getPostTranslationHandler() {
+        return _composer.value
+            ? _composer.value.getPostTranslationHandler()
+            : _postTranslation;
+    }
+    function setPostTranslationHandler(handler) {
+        if (_composer.value) {
+            _composer.value.setPostTranslationHandler(handler);
+        }
+    }
+    function getMissingHandler() {
+        return _composer.value ? _composer.value.getMissingHandler() : _missing;
+    }
+    function setMissingHandler(handler) {
+        if (_composer.value) {
+            _composer.value.setMissingHandler(handler);
+        }
+    }
+    function warpWithDeps(fn) {
+        trackReactivityValues();
+        return fn();
+    }
+    function t(...args) {
+        return _composer.value
+            ? warpWithDeps(() => Reflect.apply(_composer.value.t, null, [...args]))
+            : warpWithDeps(() => '');
+    }
+    function rt(...args) {
+        return _composer.value
+            ? Reflect.apply(_composer.value.rt, null, [...args])
+            : '';
+    }
+    function d(...args) {
+        return _composer.value
+            ? warpWithDeps(() => Reflect.apply(_composer.value.d, null, [...args]))
+            : warpWithDeps(() => '');
+    }
+    function n(...args) {
+        return _composer.value
+            ? warpWithDeps(() => Reflect.apply(_composer.value.n, null, [...args]))
+            : warpWithDeps(() => '');
+    }
+    function tm(key) {
+        return _composer.value ? _composer.value.tm(key) : {};
+    }
+    function te(key, locale) {
+        return _composer.value ? _composer.value.te(key, locale) : false;
+    }
+    function getLocaleMessage(locale) {
+        return _composer.value ? _composer.value.getLocaleMessage(locale) : {};
+    }
+    function setLocaleMessage(locale, message) {
+        if (_composer.value) {
+            _composer.value.setLocaleMessage(locale, message);
+            _messages.value[locale] = message;
+        }
+    }
+    function mergeLocaleMessage(locale, message) {
+        if (_composer.value) {
+            _composer.value.mergeLocaleMessage(locale, message);
+        }
+    }
+    function getDateTimeFormat(locale) {
+        return _composer.value ? _composer.value.getDateTimeFormat(locale) : {};
+    }
+    function setDateTimeFormat(locale, format) {
+        if (_composer.value) {
+            _composer.value.setDateTimeFormat(locale, format);
+            _datetimeFormats.value[locale] = format;
+        }
+    }
+    function mergeDateTimeFormat(locale, format) {
+        if (_composer.value) {
+            _composer.value.mergeDateTimeFormat(locale, format);
+        }
+    }
+    function getNumberFormat(locale) {
+        return _composer.value ? _composer.value.getNumberFormat(locale) : {};
+    }
+    function setNumberFormat(locale, format) {
+        if (_composer.value) {
+            _composer.value.setNumberFormat(locale, format);
+            _numberFormats.value[locale] = format;
+        }
+    }
+    function mergeNumberFormat(locale, format) {
+        if (_composer.value) {
+            _composer.value.mergeNumberFormat(locale, format);
+        }
+    }
+    const wrapper = {
+        get id() {
+            return _composer.value ? _composer.value.id : -1;
+        },
+        locale,
+        fallbackLocale,
+        messages,
+        datetimeFormats,
+        numberFormats,
+        get inheritLocale() {
+            return _composer.value ? _composer.value.inheritLocale : _inheritLocale;
+        },
+        set inheritLocale(val) {
+            if (_composer.value) {
+                _composer.value.inheritLocale = val;
+            }
+        },
+        get availableLocales() {
+            return _composer.value
+                ? _composer.value.availableLocales
+                : Object.keys(_messages.value);
+        },
+        get modifiers() {
+            return (_composer.value ? _composer.value.modifiers : _modifiers);
+        },
+        get pluralRules() {
+            return (_composer.value ? _composer.value.pluralRules : _pluralRules);
+        },
+        get isGlobal() {
+            return _composer.value ? _composer.value.isGlobal : false;
+        },
+        get missingWarn() {
+            return _composer.value ? _composer.value.missingWarn : _missingWarn;
+        },
+        set missingWarn(val) {
+            if (_composer.value) {
+                _composer.value.missingWarn = val;
+            }
+        },
+        get fallbackWarn() {
+            return _composer.value ? _composer.value.fallbackWarn : _fallbackWarn;
+        },
+        set fallbackWarn(val) {
+            if (_composer.value) {
+                _composer.value.missingWarn = val;
+            }
+        },
+        get fallbackRoot() {
+            return _composer.value ? _composer.value.fallbackRoot : _fallbackRoot;
+        },
+        set fallbackRoot(val) {
+            if (_composer.value) {
+                _composer.value.fallbackRoot = val;
+            }
+        },
+        get fallbackFormat() {
+            return _composer.value ? _composer.value.fallbackFormat : _fallbackFormat;
+        },
+        set fallbackFormat(val) {
+            if (_composer.value) {
+                _composer.value.fallbackFormat = val;
+            }
+        },
+        get warnHtmlMessage() {
+            return _composer.value
+                ? _composer.value.warnHtmlMessage
+                : _warnHtmlMessage;
+        },
+        set warnHtmlMessage(val) {
+            if (_composer.value) {
+                _composer.value.warnHtmlMessage = val;
+            }
+        },
+        get escapeParameter() {
+            return _composer.value
+                ? _composer.value.escapeParameter
+                : _escapeParameter;
+        },
+        set escapeParameter(val) {
+            if (_composer.value) {
+                _composer.value.escapeParameter = val;
+            }
+        },
+        t,
+        getPostTranslationHandler,
+        setPostTranslationHandler,
+        getMissingHandler,
+        setMissingHandler,
+        rt,
+        d,
+        n,
+        tm,
+        te,
+        getLocaleMessage,
+        setLocaleMessage,
+        mergeLocaleMessage,
+        getDateTimeFormat,
+        setDateTimeFormat,
+        mergeDateTimeFormat,
+        getNumberFormat,
+        setNumberFormat,
+        mergeNumberFormat
+    };
+    function sync(composer) {
+        composer.locale.value = _locale.value;
+        composer.fallbackLocale.value = _fallbackLocale.value;
+        Object.keys(_messages.value).forEach(locale => {
+            composer.mergeLocaleMessage(locale, _messages.value[locale]);
+        });
+        Object.keys(_datetimeFormats.value).forEach(locale => {
+            composer.mergeDateTimeFormat(locale, _datetimeFormats.value[locale]);
+        });
+        Object.keys(_numberFormats.value).forEach(locale => {
+            composer.mergeNumberFormat(locale, _numberFormats.value[locale]);
+        });
+        composer.escapeParameter = _escapeParameter;
+        composer.fallbackFormat = _fallbackFormat;
+        composer.fallbackRoot = _fallbackRoot;
+        composer.fallbackWarn = _fallbackWarn;
+        composer.missingWarn = _missingWarn;
+        composer.warnHtmlMessage = _warnHtmlMessage;
+    }
+    vue.onBeforeMount(() => {
+        if (instance.proxy == null || instance.proxy.$i18n == null) {
+            throw createI18nError(I18nErrorCodes.NOT_AVAILABLE_COMPOSITION_IN_LEGACY);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const composer = (_composer.value = instance.proxy.$i18n
+            .__composer);
+        if (scope === 'global') {
+            _locale.value = composer.locale.value;
+            _fallbackLocale.value = composer.fallbackLocale.value;
+            _messages.value = composer.messages.value;
+            _datetimeFormats.value = composer.datetimeFormats.value;
+            _numberFormats.value = composer.numberFormats.value;
+        }
+        else if (isLocale) {
+            sync(composer);
+        }
+    });
+    return wrapper;
+}
 const globalExportProps = [
     'locale',
     'fallbackLocale',
@@ -1867,6 +2347,7 @@ exports.I18nInjectionKey = I18nInjectionKey;
 exports.NumberFormat = NumberFormat;
 exports.Translation = Translation;
 exports.VERSION = VERSION;
+exports.castToVueI18n = castToVueI18n;
 exports.createI18n = createI18n;
 exports.useI18n = useI18n;
 exports.vTDirective = vTDirective;