can't change local

[Alymbek]

vue & vue-i18n version

"vue": "^3.0.2",
"vue-i18n": "^9.0.0-beta.6",
"@intlify/vue-i18n-loader": "^2.0.0-beta.1",

Reproduction Link

Steps to reproduce

as mentioned here - https://kazupon.github.io/vue-i18n/guide/locale.html

	methods: {
		changeLanguage: function (language) {
			this.$root.$i18n.locale = language;
		},
	},

What is Expected?

all messages should change to selected local

What is actually happening?

doesn't change

[Alymbek]

from I18n Resource Inspector I can see empty Global Scope, and all Local Scopes with messages.

seems like local scope doesn't merge with global scope?

can somebody provide detailed guide for this version pls?
all info about previous version which is frustrating us.

[Alymbek]

this is for some local component messages

[kazupon]

I’m writing the document now.
It's still a WIP, but you can read this document
https://vue-i18n-next.intlify.dev/

[Alymbek]

@kazupon , thank you for reply!
will check tomorrow.

[Alymbek]

hi, dear @kazupon .

thank you for official manual!

I have few questions:

1. I just follow https://vue-i18n-next.intlify.dev/essentials/scope.html#local-scope-2 to make global changing locales, but can't use it from component - how to embed/link/ref global instance of i18n from main.js to other separate vuejs components?

2. inheritance of locales work from root to children, not in the opposite direction. How to import components locales to global scope?

[Alymbek]

with below code I can change only Local Scope messages:

methods: {
		changeLanguage: function (language) {
			this.$i18n.locale = language;
	}
}

CAn't find global instance from components

[Alymbek]

I guess there are wrong code sample in Notice:

[kazupon]

Sorry bad document …
I’ve fixed docs.
You can use $root.$i18n.locale.

[Alymbek]

hi, dear @kazupon .
in this case I'm getiing error: Uncaught ReferenceError: $root is not defined
see att.ss.

[Alymbek]

can get value from this.$root.$i18n.locale.
but changing this value doesn't change locales on page.

[kazupon]

@Alymbek
Thank you for your feedback!
Hmm... 🤔
Could you give me minimum reproduction codes with your GitHub repo, please? 🙏

[Alymbek]

Hi, dear @kazupon .
Pls check it here - https://github.com/Alymbek/vue3-i18n-next

It is standard Vue-3 app generated by vue-cli with your library only

[Alymbek]

language changing proceed here - https://github.com/Alymbek/vue3-i18n-next/blob/master/src/pages/layout/components/Language.vue

[Alymbek]

hi, dear @kazupon .
any news?

[kazupon]

Thank you for your repo!

The vue-i18n architecture has been redesigned for Vue 3. As a result,
I've found a case where I can't change the global scope locale via this.$root.$i18n.
To solve this problem, I'm going to do $$i18n to make the global scope referenceable.

I'll add $$i18n to access to the global scope.
I'll add $$i18n to access to the global scope, which is provided by both the Legacy mode and Composition mode.

Examples of the use of the legacy mode and composition mode are as follows:

Legacy mode

method: {
  changeLocale(locale) {
    this.$$i18n.locale = locale
  }
}

Composition mode

explicit

script:

setup() {
  const { locale, t } = useI18n() // return global scope composer

  // something todo ...
  // 

  return { locale, t }
}

template:

<form>
  <select v-model="locale">
    <option value="ja">ja</option>
    <option value="en">en</option>
  </select>
</form>
<p>{{ t('msg') }}</p>

implicit

use $$i18n in template:

<form>
  <select v-model="$$i18n.locale">
    <option value="ja">ja</option>
    <option value="en">en</option>
  </select>
</form>
<p>{{ $t('msg') }}</p>

In the composition mode, $$i18n and $t (other $t, $d, and $tm) are inejcted to component as prop and function of global scope.

@Alymbek
What do you think about this?