Skip to content

Instantly share code, notes, and snippets.

@ArtMin96
Last active February 12, 2025 18:49
Show Gist options
  • Save ArtMin96/4b5e61aaabf96433741e9b673b9a02a3 to your computer and use it in GitHub Desktop.
Save ArtMin96/4b5e61aaabf96433741e9b673b9a02a3 to your computer and use it in GitHub Desktop.
Alpine + Vue + Livewire
document.addEventListener('alpine:init', () => {
Alpine.setReactivityEngine({
reactive: Vue.reactive,
effect: Vue.effect,
release: Vue.stop,
raw: Vue.toRaw
})
})
<?php
use Livewire\Volt\Component;
new class extends Component {
public string $name = 'Mr Foo';
public function save(): void
{
// Handle save...
}
}
?>
<div id="app" wire:ignore>
<input type="text" v-model="$data.name" />
<h1 v-text="$data.name"></h1>
<button @click="$data.save()">Save</button>
</div>
@script
<script>
Vue.createApp({
data() { return $wire }
}).mount("#app");
</script>
@endscript
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment