diff --git a/docs/guide/advanced/directive.md b/docs/guide/advanced/directive.md index dc84999ca..fff768885 100644 --- a/docs/guide/advanced/directive.md +++ b/docs/guide/advanced/directive.md @@ -79,7 +79,7 @@ const i18n = createI18n({ const app = createApp({ data() { - return { + return { byePath: 'message.bye', appleCount: 7, } @@ -112,6 +112,16 @@ Outputs: ``` +## scoping + +As mentioned in [the scope section](../essentials/scope.md), vue-i18n has a global scope and a local scope. + +The scope under which `v-t` is also affected by scope when it works. + +- local scope: using the i18n option in Legacy API style or using `useScope: ‘local'` in `useI18n`. +- global scope: all cases other than the above. + + ## `$t` vs `v-t` ### `$t` diff --git a/packages/vue-i18n-core/test/directive.test.ts b/packages/vue-i18n-core/test/directive.test.ts index 44ca503d6..2b32ddb76 100644 --- a/packages/vue-i18n-core/test/directive.test.ts +++ b/packages/vue-i18n-core/test/directive.test.ts @@ -165,6 +165,36 @@ test('legacy mode', async () => { expect(wrapper.html()).toEqual('

hello!

') }) +test('fallback to global scope', async () => { + const i18n = createI18n({ + locale: 'en', + messages: { + en: { + hello: 'hello!' + } + } + }) + + const Child = defineComponent({ + setup() { + //

+ const t = resolveDirective('t') + return () => { + return withDirectives(h('p'), [[t!, 'hello']]) + } + } + }) + + const App = defineComponent({ + setup() { + return () => h('div', [h(Child)]) + } + }) + const wrapper = await mount(App, i18n) + + expect(wrapper.html()).toEqual('

hello!

') +}) + test('using in template', async () => { const i18n = createI18n({ locale: 'en',