update docs

Author: kazupon

README.md

@@ -30,13 +30,14 @@ If you use stable Vue I18n version, see this [repository](https://github.com/kaz
 
 ## :star: New Features
 
-- `Composable API`: new style API for Vue 3
-   - See the following docs:
-   - [createI18n](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.createi18ncomposer.md)
-   - [I18nComposerOptions](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18ncomposeroptions.md)
-   - [I18nComposer](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18ncomposer.md)
-   - [useI18n](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.usei18n.md)
+### Composable API
 
+New style API for Vue 3. See the following docs:
+
+- [createI18nComposer](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.createi18ncomposer.md)
+- [I18nComposerOptions](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18ncomposeroptions.md)
+- [I18nComposer](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18ncomposer.md)
+- [useI18n](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.usei18n.md)
 
 
 ## :lollipop: Examples
@@ -48,12 +49,12 @@ The examples are offered that use the following two API styles:
 - composable
   - new vue-i18n API optimized for Vue 3. details about API
 - legacy
-  - vue-i18n API almost compatible with vue-i18n@8.x
+  - vue-i18n API almost compatible with vue-i18n v8.x
 
 
 ## :heavy_exclamation_mark: Known issues
 
-### :boom: Breaking changes compared to vue-i18n@8.x
+### :boom: Breaking changes compared to vue-i18n v8.x
 
 - API
   - The return value of `$t` and `t` methods is **string** only. object and array values ​​are no longer returned.

docs/vue-i18n.createi18ncomposer.md

@@ -22,3 +22,30 @@ export declare function createI18nComposer(options?: I18nComposerOptions): I18nC
 
 `I18nComposer`
 
+## Example
+
+case: Global resource base localization
+
+```js
+import { createApp } from 'vue'
+import { createI18nComposer, useI18n } 'vue-i18n'
+
+const i18n = createI18nComposer({
+  locale: 'ja',
+  messages: {
+    en: { ... }
+    ja: { ... }
+  }
+})
+
+const app = createApp({
+  setup() {
+    return useI18n()
+  }
+})
+
+app.use(i18n)
+app.mount('#app')
+
+```
+

docs/vue-i18n.md

@@ -10,7 +10,7 @@
 |  --- | --- |
 |  [createI18n(options)](./vue-i18n.createi18n.md) | createI18n factory<!-- -->This function is compatible with constructor of <code>VueI18n</code> class (offered with vue-i18n<!-- -->@<!-- -->8.x) like <code>new VueI18n(...)</code>. |
 |  [createI18nComposer(options)](./vue-i18n.createi18ncomposer.md) | I18n Composer factory |
-|  [useI18n(options)](./vue-i18n.usei18n.md) |  |
+|  [useI18n(options)](./vue-i18n.usei18n.md) | Enable vue-i18n composable API |
 
 ## Interfaces
 

docs/vue-i18n.usei18n.md

@@ -4,6 +4,8 @@
 
 ## useI18n() function
 
+Enable vue-i18n composable API
+
 <b>Signature:</b>
 
 ```typescript
@@ -20,3 +22,40 @@ export declare function useI18n(options?: I18nComposerOptions): I18nComposer;
 
 `I18nComposer`
 
+## Example
+
+case: Component resource base localization
+
+```html
+<template>
+  <form>
+    <label>{{ t('language') }}</label>
+    <select v-model="locale">
+      <option value="en">en</option>
+      <option value="ja">ja</option>
+    </select>
+  </form>
+  <p>message: {{ t('hello') }}</p>
+</template>
+
+<script>
+import { useI18n } from 'vue-i18n'
+
+export default {
+ setup() {
+   const { t, locale } = useI18n({
+     locale: 'ja',
+     messages: {
+       en: { ... },
+       ja: { ... }
+     }
+   })
+   // Something to do ...
+
+   return { ..., t, locale }
+ }
+}
+</script>
+
+```
+

src/composer.ts

@@ -186,7 +186,31 @@ function getLocaleMessages(
 }
 
 /**
- *  I18n Composer factory
+ * I18n Composer factory
+ *
+ * @example
+ * case: Global resource base localization
+ * ```js
+ * import { createApp } from 'vue'
+ * import { createI18nComposer, useI18n } 'vue-i18n'
+ *
+ * const i18n = createI18nComposer({
+ *   locale: 'ja',
+ *   messages: {
+ *     en: { ... }
+ *     ja: { ... }
+ *   }
+ * })
+ *
+ * const app = createApp({
+ *   setup() {
+ *     return useI18n()
+ *   }
+ * })
+ *
+ * app.use(i18n)
+ * app.mount('#app')
+ * ```
  */
 export function createI18nComposer(
   options: I18nComposerOptions = {}

src/use.ts

@@ -23,7 +23,43 @@ const providers: Map<
 const generateSymbolID = (): string =>
   `vue-i18n-${new Date().getUTCMilliseconds().toString()}`
 
-// enable composable API via I18n Composer
+/**
+ * Enable vue-i18n composable API
+ *
+ * @example
+ * case: Component resource base localization
+ * ```html
+ * <template>
+ *   <form>
+ *     <label>{{ t('language') }}</label>
+ *     <select v-model="locale">
+ *       <option value="en">en</option>
+ *       <option value="ja">ja</option>
+ *     </select>
+ *   </form>
+ *   <p>message: {{ t('hello') }}</p>
+ * </template>
+ *
+ * <script>
+ * import { useI18n } from 'vue-i18n'
+ *
+ * export default {
+ *  setup() {
+ *    const { t, locale } = useI18n({
+ *      locale: 'ja',
+ *      messages: {
+ *        en: { ... },
+ *        ja: { ... }
+ *      }
+ *    })
+ *    // Something to do ...
+ *
+ *    return { ..., t, locale }
+ *  }
+ * }
+ * </script>
+ * ```
+ */
 export function useI18n(options?: I18nComposerOptions): I18nComposer {
   const globalComposer = inject(GlobalI18nSymbol)
   if (!globalComposer) throw new Error('TODO') // TODO: