initial

README.md

@@ -0,0 +1,84 @@
+# vue-petite driver for Livewire
+
+This package provides a layer for
+
+## Installation
+
+Currently it's only possible to use this library using a `<script type="module">`. Later we'd also like to support a self-initializing non-module `<script>` as well as an npm package.
+
+```html
+<script type="module">
+    import { createApp } from 'todo'
+
+    window.addEventListener('livewire:load', () => {
+        createApp().mount()
+    })
+</script>
+```
+
+The imported `createApp` automatically includes a bit of global state and a `v-livewire` directive. If you'd like to do this manually, you can use:
+
+```html
+<script type="module">
+    import { state, directive } from 'todo'
+    import { createApp } from 'https://unpkg.com/petite-vue?module'
+
+    window.addEventListener('livewire:load', () => {
+        createApp(state).directive('livewire', directive).mount()
+    })
+</script>
+```
+
+## Usage
+
+The package provides a `v-livewire` directive that lets you configure bi-directional links between Vue state and Livewire state.
+
+For example, if you had a `messages` property in Vue and an `items` property in Livewire, you could do:
+
+```html
+<div v-livewire="{ messages: 'items' }" v-scope="{ messages: {} }">
+```
+
+Note that you **always need to have the property in Vue as well**. You need some initial state, and your template must work with the empty state. In our case, an empty state for messages is just `{}`.
+
+If the properties are named the same, you can simply pass an array:
+
+```html
+<div v-livewire="['messages']" v-scope="{ messages: {} }">
+```
+
+If you'd like to defer value changes, i.e. have reactive state in Vue but only update Livewire backend state when a Livewire action is executed, you can use the `.defer` modifier:
+
+```html
+<div v-livewire.defer="['messages']" v-scope="{ messages: {} }">
+```
+
+```html
+<div v-livewire="['messages']" v-scope="{ messages: {}, foo: 'bar' }">
+    You can use Vue-only state in the component: {{ foo }}
+    <input v-model="foo">
+
+    <template v-for="(message, id) in messages">
+        <div>
+            <div>
+                <label :for="`message-${id}`">Message</label>
+                <input :id="`message-${id}`" v-model.lazy="messages[id].message">
+            </div>
+
+            <button type="button" @click="wire.send(id)">
+                Send
+            </button>
+
+            <button type="button" @click="wire.remove(id)">
+                Remove
+            </button>
+        </div>
+    </template>
+</div>
+```
+
+## Things to note
+
+Vue uses templates which contain `{{ these }}` things, and that doesn't pair with Livewire as well as Alpine.
+
+For that reason, the library automatically adds `wire:ignore` to the root element of each petite-vue component.