diff --git a/README.CN.md b/README.CN.md
index 97b0655d76..9588f94fe1 100644
--- a/README.CN.md
+++ b/README.CN.md
@@ -79,7 +79,9 @@ $ npm run build       # release
   - [`omi-starter-ts`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-ts) - 基于 Vite + Omi + TypeScript 的模板。
   - [`omi-starter-tailwind`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-tailwind) - 基于 Vite + Omi + TypeScript + Tailwindcss 的模板。
   - [`omi-starter-js`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-js) - 基于 Vite + Omi + JavaScript 的模板。
+  - [`omi-vue`](https://github.com/Tencent/omi/tree/master/packages/omi-vue) - Vue SFC + Vite + OMI + OMI-WeUI.
 - 组件
+  - [`omi-weui`](https://github.com/Tencent/omi/tree/master/packages/omi-weui) - Omi 版本的 WeUI。
   - [`omi-auto-animate`](https://github.com/Tencent/omi/tree/master/packages/omi-auto-animate) - Omi 版本的 @formkit/auto-animate。
   - [`omi-suspense`](https://github.com/Tencent/omi/tree/master/packages/omi-suspense) - 处理异步依赖。
   - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - 基于 TDesign 和 Omi 的跨框架 icon 集合。
diff --git a/README.md b/README.md
index 5cfdbb92d6..24a7f73964 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,9 @@ $ npm run build       # release
   - [`omi-starter-ts`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-ts) - A starter repo for building web app or reusable components using Omi in TypeScript base on Vite.
   - [`omi-starter-tailwind`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-tailwind) - A starter repo for building web app or reusable components using Omi + Tailwindcss + TypeScript + Vite.
   - [`omi-starter-js`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-js) - A starter repo for building web app or reusable components using Omi in JavaScript base on Vite.
+  - [`omi-vue`](https://github.com/Tencent/omi/tree/master/packages/omi-vue) - Vue SFC + Vite + OMI + OMI-WeUI.
 - Components
+  - [`omi-weui`](https://github.com/Tencent/omi/tree/master/packages/omi-weui) - WeUI Components of omi.
   - [`omi-auto-animate`](https://github.com/Tencent/omi/tree/master/packages/omi-auto-animate) - Omi version of @formkit/auto-animate.
   - [`omi-suspense`](https://github.com/Tencent/omi/tree/master/packages/omi-suspense) - Handling asynchronous dependencies.
   - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - Cross framework icon collection based on tdesign.
diff --git a/packages/omi/README.md b/packages/omi/README.md
index 1aa00b5b30..8e5c4d248a 100644
--- a/packages/omi/README.md
+++ b/packages/omi/README.md
@@ -76,7 +76,9 @@ $ npm run build       # release
   - [`omi-starter-ts`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-ts) - A starter repo for building web app or reusable components using Omi in TypeScript base on Vite.
   - [`omi-starter-tailwind`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-tailwind) - A starter repo for building web app or reusable components using Omi + Tailwindcss + TypeScript + Vite.
   - [`omi-starter-js`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-js) - A starter repo for building web app or reusable components using Omi in JavaScript base on Vite.
+  - [`omi-vue`](https://github.com/Tencent/omi/tree/master/packages/omi-vue) - Vue SFC + Vite + OMI + OMI-WeUI.
 - Components
+  - [`omi-weui`](https://github.com/Tencent/omi/tree/master/packages/omi-weui) - WeUI Components of omi.
   - [`omi-auto-animate`](https://github.com/Tencent/omi/tree/master/packages/omi-auto-animate) - Omi version of @formkit/auto-animate.
   - [`omi-suspense`](https://github.com/Tencent/omi/tree/master/packages/omi-suspense) - Handling asynchronous dependencies.
   - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - Cross framework icon collection based on tdesign.
@@ -321,6 +323,100 @@ define('my-app', class extends withTwind(Component) {
 })
 ``` -->
 
+## Define Cross Framework Component
+
+The case of using Omi component in Vue is as follows:
+
+![](./assets/omi-vue.gif)
+
+my-counter.ts:
+
+```tsx
+import { define, Component, h } from 'omi'
+
+define('my-counter', class extends Component {
+
+  static propTypes = {
+    count: Number
+  }
+
+  static observedAttributes = ['count']
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.state[name] = newValue
+    this.update()
+  }
+
+  state = {
+    count: null
+  }
+
+  install() {
+    this.state.count = this.props.count
+  }
+
+  sub = () => {
+    this.state.count--
+    this.update()
+    this.fire('change', this.state.count)
+  }
+
+  add = () => {
+    this.state.count++
+    this.update()
+    this.fire('change', this.state.count)
+  }
+
+  render(props) {
+    return [
+      h('button', { onClick: this.sub }, '-'),
+      h('span', null, this.state.count),
+      h('button', { onClick: this.add }, '+')
+    ]
+  }
+})
+```
+
+Using in Vue3:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+// import omi component
+import './my-counter'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+
+const change = (e) => {
+  count.value = e.detail
+}
+
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <my-counter @change="change" :count="count" />
+  <p>
+    【Omi】 
+  </p>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+     【Vue】 
+    </p>
+  </div>
+
+</template>
+```
+
+
+
 ## Contributors
 
 <a href="https://github.com/Tencent/omi/graphs/contributors">