Skip to content

Commit 2525578

Browse files
committed
Add petite-vue plugins support
1 parent 9ff3b98 commit 2525578

File tree

2 files changed

+34
-0
lines changed

2 files changed

+34
-0
lines changed

README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,35 @@ createApp({
306306
}).mount()
307307
```
308308

309+
### Use Plugins
310+
311+
You can write custome directive then distrbute it as a pacage, then add it to create vue, like:
312+
313+
```html
314+
<div v-scope="{counter: 0}" v-log="inside petite-vue scope">
315+
<button @click="counter++">increase</button>
316+
</div>
317+
318+
<script type="module">
319+
import log from './log'
320+
import { createApp } from 'peteite-vue'
321+
createApp().use(log).mount()
322+
</script>
323+
```
324+
325+
A plugin code similar to vue plugins code:
326+
327+
```js
328+
// inside log.js plugin file
329+
export default {
330+
install: (app, options) => {
331+
app.directive('log', ({exp}) => {
332+
console.log(exp)
333+
})
334+
}
335+
}
336+
```
337+
309338
## Examples
310339

311340
Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main/examples).

src/app.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ export const createApp = (initialData?: any) => {
4242
}
4343
},
4444

45+
use(plugin: any, options = {}) {
46+
plugin.install(this, options)
47+
return this
48+
},
49+
4550
mount(el?: string | Element | null) {
4651
if (typeof el === 'string') {
4752
el = document.querySelector(el)

0 commit comments

Comments
 (0)