refactor(docs): describe per-component translations in more friendly way

docs/content/en/vue-i18n-loader.md → docs/content/en/per-component-translations.md

@@ -1,11 +1,11 @@
 ---
-title: vue-i18n-loader
+title: Per-component translations
 description: "enable vue-i18n-loader"
 position: 13
 category: Guide
 ---
 
-If you'd like to enable [vue-i18n-loader](https://github.com/intlify/vue-i18n-loader), simply set `vueI18nLoader` option to `true`.
+If you'd like to define translations per-page or per-component you can take advantage of the [vue-i18n-loader](https://github.com/intlify/vue-i18n-loader). Simply set `vueI18nLoader` option to `true` and `nuxt-i18n` will configure and enable the loader for you, including support for Yaml syntax in the `i18n` blocks.
 
 ```js {}[nuxt.config.js]
 ['nuxt-i18n', {
@@ -33,7 +33,7 @@ You can now define translations using custom blocks in your Vue files:
 </template>
 ```
 
-## YAML
+or using the Yaml syntax:
 
 ```vue
 <i18n lang="yaml">
@@ -47,3 +47,9 @@ ja:
  <p>{{ $t('hello') }}</p>
 </template>
 ```
+
+<alert type="info">
+
+Read more about `i18n` blocks in https://kazupon.github.io/vue-i18n/guide/sfc.html.
+
+</alert>

docs/content/es/per-component-translations.md

@@ -0,0 +1,55 @@
+---
+title: Per-component translations
+description: "enable vue-i18n-loader"
+position: 13
+category: Guía
+---
+
+If you'd like to define translations per-page or per-component you can take advantage of the [vue-i18n-loader](https://github.com/intlify/vue-i18n-loader). Simply set `vueI18nLoader` option to `true` and `nuxt-i18n` will configure and enable the loader for you, including support for Yaml syntax in the `i18n` blocks.
+
+```js {}[nuxt.config.js]
+['nuxt-i18n', {
+  vueI18nLoader: true
+}]
+
+```
+
+You can now define translations using custom blocks in your Vue files:
+
+```vue
+<i18n>
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界!"
+  }
+}
+</i18n>
+
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+```
+
+or using the Yaml syntax:
+
+```vue
+<i18n lang="yaml">
+en:
+  hello: "hello world!"
+ja:
+  hello: "こんにちは、世界!"
+</i18n>
+
+<template>
+ <p>{{ $t('hello') }}</p>
+</template>
+```
+
+<alert type="info">
+
+Read more about `i18n` blocks in https://kazupon.github.io/vue-i18n/guide/sfc.html.
+
+</alert>