archtechx/livewire-petite-vue
1
0
Fork 0
mirror of https://github.com/archtechx/livewire-petite-vue.git synced 2025-12-12 08:34:03 +00:00
Code Activity

expand readme

Browse source
This commit is contained in:
Samuel Štancl 2021-07-10 21:54:21 +02:00
parent c58681a2ff
commit 5a168be882
2 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -8,7 +8,7 @@ Currently it's only possible to use this library using a `<script type="module">
```html ```html
<script type="module"> <script type="module">
import { createApp } from 'todo' import { createApp } from 'https://unpkg.com/@archtechx/livewire-petite-vue'
window.addEventListener('livewire:load', () => { window.addEventListener('livewire:load', () => {
createApp().mount() createApp().mount()
@ -20,7 +20,7 @@ The imported `createApp` automatically includes a bit of global state and a `v-l
```html ```html
<script type="module"> <script type="module">
import { state, directive } from 'todo' import { state, directive } from 'https://unpkg.com/@archtechx/livewire-petite-vue'
import { createApp } from 'https://unpkg.com/petite-vue?module' import { createApp } from 'https://unpkg.com/petite-vue?module'
window.addEventListener('livewire:load', () => { window.addEventListener('livewire:load', () => {
@ -53,6 +53,20 @@ If you'd like to defer value changes, i.e. have reactive state in Vue but only u
<div v-livewire.defer="['messages']" v-scope="{ messages: {} }"> <div v-livewire.defer="['messages']" v-scope="{ messages: {} }">
``` ```
After your bindings are configured, you can simply update state and the changes will sync between Vue and Livewire. Any changes done in Livewire will be reflected in Vue, and any changes done in Vue (e.g. via `v-model` inputs) will be reflected in Livewire.
That's the state. But Livewire can also call methods.
For that, you can simply use the `wire` proxy in your component's state:
```html
<button type="button" @click="wire.send(id)">
Send
</button>
```
If the methods return a value, you can do something like `await wire.foo('bar')`.
```html ```html
<div v-livewire="['messages']" v-scope="{ messages: {}, foo: 'bar' }"> <div v-livewire="['messages']" v-scope="{ messages: {}, foo: 'bar' }">
You can use Vue-only state in the component: {{ foo }} You can use Vue-only state in the component: {{ foo }}

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@archtechx/livewire-petite-vue", "name": "@archtechx/livewire-petite-vue",
"version": "0.1.0", "version": "0.1.1",
"description": "petite-vue driver for Livewire", "description": "petite-vue driver for Livewire",
"files": [ "files": [
"src/index.js" "src/index.js"