Japanese translation (~essential) (#449)

* add Japanese config

* add ja-translation (home, introduction, install, essential)

docs/ja/ecosystem/official.md

@@ -0,0 +1,29 @@
+# Official tooling
+
+## Vue CLI Plugin
+
+[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) is officially provided as the Vue CLI Plugin.
+
+With this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment.
+
+## ESLint Plugin
+
+[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) is ESLint plugin for Vue I18n.
+
+It easily integrates some localization lint features to your Vue.js Application.
+
+## Intlify CLI
+
+[@intlify/cli](https://github.com/intlify/cli) is CLI Tooling for i18n development.
+
+You can pre-compile i18n resources (`json5?`, `ya?ml`) with `intlify compile` command.
+
+## Extensions
+
+[vue-i18n-extensions](https://github.com/intlify/vue-i18n-extensions) provides some extensions for Vue I18n.
+
+You can use this extension to enable SSR and improve i18n performance.
+
+## Composition API for Vue 2.x 
+
+[vue-i18n-composable](https://github.com/intlify/vue-i18n-composable) provides Composition API for Vue I18n in Vue 2.x.

docs/ja/ecosystem/third.md

@@ -0,0 +1,48 @@
+# Third-party tooling
+
+## Nuxt Module
+
+[nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) is corresponding Nuxt.js module.
+
+:::warning NOTICE
+Still not supported.
+:::
+
+## BabelEdit
+
+[BabelEdit](https://www.codeandweb.com/babeledit) is translation editor for web apps.
+
+BabelEdit can translate `json` files, and it can also translate `i18n` custom block of Single-file components.
+
+Read more about BabelEdit in [tutorial page](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n).
+
+## i18n Ally
+
+[i18n Ally](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) is i18n extension for VSCode.
+
+The i18n Ally give awesome developer experience for your i18n development.
+
+Read more about i18n Ally in [README](https://github.com/antfu/i18n-ally/blob/master/README.md).
+
+## i18nPlugin (intellij platform)
+
+[i18nPlugin](https://github.com/nyavro/i18nPlugin) Intellij idea i18next support plugin ( [JetBrains plugin page ](https://plugins.jetbrains.com/plugin/12981-i18n-support)).
+
+Plugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -> Tools -> i18n Plugin configuration and check "Vue-i18n". You need set vue locales directory (locales by default).
+
+## Easy I18n (intellij platform)
+
+Translation helper for IntelliJ IDEA based IDE's. Requires dedicated language files. Features: `Tree-/Table-View` / `Search filter` / `Indication of missing translations` / `Quick CRUD operations`.
+
+[JetBrains Marketplace](https://plugins.jetbrains.com/plugin/16316-easy-i18n) // [GitHub Repository](https://github.com/marhali/easy-i18n)
+
+## vue-i18n-extract
+
+[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) performs static analysis on a Vue.js project based on vue-i18n and reports the following information:
+
+- list of all the **unused vue-i18n keys** (entries found in the language files but not used in the project)
+- list of all the **missing keys** (entries fond in the project but not in the language files)
+
+It’s possible to show the output in the console or to write it in a json file.
+
+The missing keys can be also automatically added to the given language files.

docs/ja/guide/advanced/component.md

@@ -0,0 +1,243 @@
+# Component Interpolation
+
+## Basic Usage
+
+Sometimes, we need to localize with a locale message that was included in a HTML tag or component. For example:
+
+```html
+<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+```
+
+In the above message, if you use `$t`, you will probably try to compose the following locale messages:
+
+```js
+const messages = {
+  en: {
+    term1: 'I Accept xxx\'s',
+    term2: 'Terms of Service Agreement'
+  }
+}
+```
+
+And your localized template may look like this:
+
+```html
+<p>{{ $t('term1') }}<a href="/term">{{ $t('term2') }}</a></p>
+```
+
+Output:
+
+```html
+<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+```
+
+This is very cumbersome, and if you configure the `<a>` tag in a locale message, there is a possibility of XSS vulnerabilities due to localizing with `v-html="$t('term')"`.
+
+You can avoid it using the Translation component (`i18n-t`). For example the below.
+
+Template:
+
+```html
+<div id="app">
+  <!-- ... -->
+  <i18n-t keypath="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n-t>
+  <!-- ... -->
+</div>
+```
+
+JavaScript:
+
+```js
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+const i18n = createI18n({
+  locale: 'en',
+  messages: {
+    en: {
+      tos: 'Term of Service',
+      term: 'I accept xxx {0}.'
+    },
+    ja: {
+      tos: '利用規約',
+      term: '私は xxx の{0}に同意します。'
+    }
+  }
+})
+
+const app = createApp({
+  data: () => ({ url: '/term' })
+})
+
+app.use(i18n)
+app.mount('#app')
+```
+
+The following output:
+
+```html
+<div id="app">
+  <!-- ... -->
+  <label for="tos">
+    I accept xxx <a href="/term" target="_blank">Term of Service</a>.
+  </label>
+  <!-- ... -->
+</div>
+```
+
+About the above example, see the [example](https://github.com/intlify/vue-i18n-next/blob/master/examples/legacy/components/translation.html)
+
+The children of translation component are interpolated with locale message of `keypath` prop. In the above example,
+
+:::v-pre
+`<a :href="url" target="_blank">{{ $t('tos') }}</a>`
+:::
+
+Is interpolated with `term` locale message.
+
+In the above example, the component interpolation follows the **list interpolation**. The children of translation component are interpolated by their order of appearance.
+
+<!-- textlint-disable -->
+You can choose the root node element type by specifying a `tag` prop. If omitted, it defaults to [Fragments](https://v3.vuejs.org/guide/migration/fragments.html#overview).
+<!-- textlint-enable -->
+
+## Slots syntax usage
+
+It’s more convenient to use the named slots syntax. For example the below:
+
+Template:
+
+```html
+<div id="app">
+  <!-- ... -->
+  <i18n-t keypath="info" tag="p">
+    <template v-slot:limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template v-slot:action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n-t>
+  <!-- ... -->
+</div>
+```
+
+JavaScript:
+
+```js
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+const i18n = createI18n({
+  locale: 'en',
+  messages: {
+    en: {
+      info: 'You can {action} until {limit} minutes from departure.',
+      change: 'change your flight',
+      refund: 'refund the ticket'
+    }
+  }
+})
+
+const app = createApp({
+  data: () => ({
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  })
+})
+
+app.use(i18)
+app.mount('#app')
+```
+
+Outputs:
+
+```html
+<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+```
+
+You can also use the following slots shorthand in templates:
+
+```html
+<div id="app">
+  <!-- ... -->
+  <i18n-t keypath="info" tag="p">
+    <template #limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template #action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n-t>
+  <!-- ... -->
+</div>
+```
+
+:::warning LIMITATION
+:warning: In translation component, slots props are not supported.
+:::
+
+### Pluralization Usage
+
+You can use pluralization in Component interpolation by use `plural` prop. For example the below.
+
+Template:
+
+```html
+<div id="app">
+  <!-- ... -->
+  <i18n-t keypath="message.plural" locale="en" :plural="count">
+    <template #n>
+      <b>{{ count }}</b>
+    </template>
+  </i18n-t>
+  <!-- ... -->
+</div>
+```
+
+JavaScript:
+
+```js
+const { createApp, ref } = Vue
+const { createI18n } = VueI18n
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      message: {
+        plural: 'no bananas | {n} banana | {n} bananas'
+      }
+    }
+  }
+})
+
+const app = createApp({
+  setup() {
+    const count = ref(2)
+    return { count }
+  }
+})
+app.use(i18n)
+app.mount('#app')
+```
+
+The following output:
+```html
+<div id="app" data-v-app="">
+  <!-- ... -->
+  <b>2</b> bananas
+  <!-- ... -->
+</div>
+```