From 2525578ecb5a6fcdfa3be2cbdadb25f796dd0c44 Mon Sep 17 00:00:00 2001
From: wusaby-rush <19160044@su.edu.ye>
Date: Sat, 16 Jul 2022 14:18:17 +0000
Subject: [PATCH] Add petite-vue plugins support

---
 README.md  | 29 +++++++++++++++++++++++++++++
 src/app.ts |  5 +++++
 2 files changed, 34 insertions(+)

diff --git a/README.md b/README.md
index efa2241..0dd84fa 100644
--- a/README.md
+++ b/README.md
@@ -306,6 +306,35 @@ createApp({
 }).mount()
 ```
 
+### Use Plugins
+
+You can write custome directive then distrbute it as a pacage, then add it to create vue, like:
+
+```html
+<div v-scope="{counter: 0}" v-log="inside petite-vue scope">
+  <button @click="counter++">increase</button>
+</div>
+
+<script type="module">
+  import log from './log'
+  import { createApp } from 'peteite-vue'
+  createApp().use(log).mount()
+</script>
+```
+
+A plugin code similar to vue plugins code:
+
+```js
+// inside log.js plugin file
+export default {
+  install: (app, options) => {
+    app.directive('log', ({exp}) => {
+      console.log(exp)
+    })
+  }
+}
+```
+
 ## Examples
 
 Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main/examples).
diff --git a/src/app.ts b/src/app.ts
index 4a17bbc..e0e2107 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -42,6 +42,11 @@ export const createApp = (initialData?: any) => {
       }
     },
 
+    use(plugin: any, options = {}) {
+      plugin.install(this, options)
+      return this
+    },
+
     mount(el?: string | Element | null) {
       if (typeof el === 'string') {
         el = document.querySelector(el)