From c120436ddb4db58b6e38f03c76daa047b3ef8457 Mon Sep 17 00:00:00 2001
From: Plumbiu <3434909403@qq.com>
Date: Fri, 4 Aug 2023 20:46:23 +0800
Subject: [PATCH] docs: add example for transforming custom blocks

---
 packages/plugin-vue/README.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/plugin-vue/README.md b/packages/plugin-vue/README.md
index d5b45a63..22c54bca 100644
--- a/packages/plugin-vue/README.md
+++ b/packages/plugin-vue/README.md
@@ -140,12 +140,15 @@ import yaml from 'js-yaml'
 const vueI18nPlugin = {
   name: 'vue-i18n',
   transform(code, id) {
+    // if .vue file don't have <i18n> block, just return
     if (!/vue&type=i18n/.test(id)) {
       return
     }
+    // parse yaml
     if (/\.ya?ml$/.test(id)) {
       code = JSON.stringify(yaml.load(code.trim()))
     }
+    // mount the value on the i18n property of the component instance
     return `export default Comp => {
       Comp.i18n = ${code}
     }`
@@ -157,6 +160,30 @@ export default {
 }
 ```
 
+Create a file named `Demo.vue`, add `lang="yaml"` to the `<i18n>` blocks, then you can use the syntax of `YAML`:
+
+```vue
+<template>Hello</template>
+
+<i18n lang="yaml">
+message: 'world'
+fullWord: 'hello world'
+</i18n>
+```
+
+`message` is mounted on the i18n property of the component instance, you can use like this:
+
+```vue
+<script setup lang="ts">
+import Demo from 'components/Demo.vue'
+</script>
+
+<template>
+  <Demo /> {{ Demo.i18n.message }}
+  <div>{{ Demo.i18n.fullWord }}</div>
+</template>
+```
+
 ## Using Vue SFCs as Custom Elements
 
 > Requires `vue@^3.2.0` & `@vitejs/plugin-vue@^1.4.0`