# 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.