diff --git a/docs/content/en/vue-i18n-loader.md b/docs/content/en/per-component-translations.md
similarity index 53%
rename from docs/content/en/vue-i18n-loader.md
rename to docs/content/en/per-component-translations.md
index f862d2e7a..10ef93673 100644
--- a/docs/content/en/vue-i18n-loader.md
+++ b/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>
diff --git a/docs/content/es/per-component-translations.md b/docs/content/es/per-component-translations.md
new file mode 100644
index 000000000..32fec4267
--- /dev/null
+++ b/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>
diff --git a/docs/content/es/vue-i18n-loader.md b/docs/content/es/vue-i18n-loader.md
deleted file mode 100644
index c69c0c1ab..000000000
--- a/docs/content/es/vue-i18n-loader.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: vue-i18n-loader
-description: 'vue-i18n-loader'
-position: 13
-category: Guía
----
-
-Si desea habilitar [vue-i18n-loader](https://github.com/intlify/vue-i18n-loader), simplemente configure la opción `vueI18nLoader` en `true`.
-
-```js {}[nuxt.config.js]
-['nuxt-i18n', {
-  vueI18nLoader: true
-}]
-
-```
-
-Ahora puede definir traducciones utilizando bloques personalizados en sus archivos Vue:
-
-```vue
-<i18n>
-{
-  "en": {
-    "hello": "hello world!"
-  },
-  "ja": {
-    "hello": "こんにちは、世界!"
-  }
-}
-</i18n>
-
-<template>
-  <p>{{ $t('hello') }}</p>
-</template>
-```
-
-## YAML
-
-```vue
-<i18n lang="yaml">
-en:
-  hello: "hello world!"
-ja:
-  hello: "こんにちは、世界!"
-</i18n>
-
-<template>
- <p>{{ $t('hello') }}</p>
-</template>
-```