mirror of
https://github.com/archtechx/livewire-petite-vue.git
synced 2025-12-12 00:24:03 +00:00
84 lines
2.6 KiB
Markdown
84 lines
2.6 KiB
Markdown
# 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.
|