Livewire + Alpine.js power:
Share Data with Alpine
<div x-data="{ count: @entangle('count') }">
<span x-text="count"></span>
<button @click="count++">+</button>
</div>Entangle with Defer
<div x-data="{ name: @entangle('name').defer }">
<input x-model="name">
</div>Access Livewire from Alpine
<button @click="$wire.save()">Save</button>
<button @click="$wire.set('name', 'John')">Set</button>Listen to Livewire Events
<div x-on:post-saved.window="alert('Saved!')">Share this post:
Related Posts
Laravel Sanctum API Authentication Complete Guide
Build secure API authentication with Laravel Sanctum for SPAs and mobile apps.
Laravel Rate Limiting: Protect Your Application
Implement rate limiting to protect your Laravel application from abuse.
Laravel Blade Components: Build Reusable UI
Create powerful reusable components with Laravel Blade.
Comments (0)
Please log in to leave a comment. Log in
No comments yet. Be the first to comment!
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.9rem; } .comment-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.7rem; }
hljs.highlightAll(); .prose pre { background: #282c34; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1.5rem 0; direction: ltr; text-align: left; } .prose pre code { background: transparent; padding: 0; font-size: 0.9rem; line-height: 1.6; color: #abb2bf; font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; direction: ltr; text-align: left; } .prose code:not(pre code) { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.875em; color: #e11d48; direction: ltr; unicode-bidi: isolate; } .prose h2 { margin-top: 2rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .prose h3 { scroll-margin-top: 100px; } .prose p { margin-bottom: 1rem; line-height: 1.8; } .toc-wrapper { border-left: 3px solid var(--primary-color, #6366f1); } [dir="rtl"] .toc-wrapper { border-left: none; border-right: 3px solid var(--primary-color, #6366f1); } .toc-link:hover { color: var(--primary-color, #6366f1) !important; }