docs: add scope resolving section (#862)

* docs: add scope resolving section

* fix: formatting

* docs: add scope resolving on datetime component and numberformat component

* docs: fix

Author: kazupon

docs/guide/advanced/component.md

@@ -241,3 +241,33 @@ The following output:
   <!-- ... -->
 </div>
 ```
+
+## Scope resolving
+
+The [Scope](../essentials/scope.md) resolving of Translation component is `parent` as default.
+
+It meas that Translation component uses the scope that is enabled in the parent component that uses it.
+
+If the parent component has `useI18n` in `useScope: 'global'`, it will use Global Scope, else if `useScope: 'local'`, it will use the Local Scope of the parent component.
+
+However, You sometimes meet the warning message on your browser console the following:
+
+```
+[intlify] Not found parent scope. use the global scope.
+```
+
+This message is displayed in the case that you have not run `useI18n` in the parent component that uses the Translation component.
+
+In that situation, the Scope of the Translation Component will be fallback to the global scope as said the warning message.
+
+A workaround to suppress this warning is to specify `global` as the `scope` property of Translation component.
+
+```html
+<i18n-t keypath="message.foo" scope="global">
+  ...
+</i18n-t>
+```
+
+:::tip NOTE
+This warning is not output to the browser console in production builds.
+:::

docs/guide/essentials/datetime.md

@@ -155,3 +155,9 @@ It is possible to specify multiple scoped slots at the same time:
 :::tip NOTE
 Full list of the supported scoped slots as well as other `i18n-d`, properties can be found on [API Reference](../../api/component.html#datetimeformat).
 :::
+
+## Scope resolving
+
+The Scope resolving of DatetimeFormat component is same as Translation component.
+
+See the [here](../advanced/component.md#scope-resolving)

docs/guide/essentials/number.md

@@ -168,3 +168,9 @@ It is possible to specify multiple scoped slots at the same time:
 :::tip NOTE
 Full list of the supported scoped slots as well as other `i18n-n`, properties can be found on [API Reference](../../api/component.html#numberformat).
 :::
+
+## Scope resolving
+
+The Scope resolving of NumberFormat component is same as Translation component.
+
+See the [here](../advanced/component.md#scope-resolving)

docs/ja/guide/advanced/component.md

@@ -241,3 +241,34 @@ The following output:
   <!-- ... -->
 </div>
 ```
+
+
+## Scope resolving
+
+The [Scope](../essentials/scope.md) resolving of Translation component is `parent` as default.
+
+It meas that Translation component uses the scope that is enabled in the parent component that uses it.
+
+If the parent component has `useI18n` in `useScope: 'global'`, it will use Global Scope, else if `useScope: 'local'`, it will use the Local Scope of the parent component.
+
+However, You sometimes meet the warning message on your browser console the following:
+
+```
+[intlify] Not found parent scope. use the global scope.
+```
+
+This message is displayed in the case that you have not run `useI18n` in the parent component that uses the Translation component.
+
+In that situation, the Scope of the Translation Component will be fallback to the global scope as said the warning message.
+
+A workaround to suppress this warning is to specify `global` as the `scope` property of Translation component.
+
+```html
+<i18n-t keypath="message.foo" scope="global">
+  ...
+</i18n-t>
+```
+
+:::tip NOTE
+This warning is not output to the browser console in production builds.
+:::

docs/ja/guide/essentials/datetime.md

@@ -155,3 +155,9 @@ DatetimeFormatコンポーネントにはいくつかのpropsがあります。
 :::tip 備考
 サポートされているスコープ付きスロットやその他`i18n-d`のプロパティの一覧は[API リファレンス](../../api/component.html#datetimeformat)で確認できます。
 :::
+
+## スコープの解決
+
+DatetimeFormat コンポーネントのスコープ解決は Translation コンポーネントと同じです。
+
+詳細は、[こちら](../advanced/component.md#scope-resolving)のドキュメントをお読みください。

docs/ja/guide/essentials/number.md

@@ -144,3 +144,9 @@ NumberFormatコンポーネントにはいくつかのpropsがあります。
 :::tip 備考
 サポートされているスコープ付きスロットとその他`i18n-n`のプロパティの一覧は[API リファレンス](../../api/component.html#numberformat)で確認できます。
 :::
+
+## スコープの解決
+
+NumberFormat コンポーネントのスコープ解決は Translation コンポーネントと同じです。
+
+詳細は、[こちら](../advanced/component.md#scope-resolving)のドキュメントをお読みください。