Home

دليل شامل لاستخدام Alpine.js مع Laravel Livewire لإنشاء واجهات ديناميكية خفيفة وسريعة

Alpine.js هو إطار عمل JavaScript خفيف جدًا زي Vue.js، لكنه مصمم عشان يكون بسيط وسهل الاستخدام، وهاد بيخليه مثالي للعمل مع Laravel Livewire.

مميزاته: ✅ خفيف كتير (~10KB فقط). ✅ ما بحتاج بناء أو تثبيت معقد. ✅ بيتعامل مع الـ DOM بسهولة باستخدام السمة x-data. ✅ متكامل مع Livewire بشكل رائع، وهاد بيخليه خيار ممتاز للواجهات الديناميكية.

2. كيف تثبّت Alpine.js؟ فيه طريقتين عشان تضيف Alpine.js لمشروعك:

✅ 1. عبر CDN (الأبسط) أضف هذا الكود داخل <head> في Blade:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

✅ 2. عبر npm (للمشاريع المتقدمة)

npm install alpinejs

وبعدها استورده في ملف JavaScript الرئيسي:

import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start();

3. أساسيات Alpine.js ✅ 1. x-data: تخزين البيانات داخل العنصر

تستخدم لتعريف البيانات داخل العنصر HTML، وبتشبه data() في Vue أو public properties في Livewire.

<div x-data="{ message: 'مرحبًا بك في Alpine.js!' }"> <p x-text="message"></p> </div>

🔹 هنا، يتم استبدال x-text="message" بالنص الموجود داخل message.

✅ 2. x-show: إظهار وإخفاء العناصر

يستخدم لإظهار أو إخفاء العناصر بناءً على شرط.

<div x-data="{ isVisible: false }"> <button @click="isVisible = !isVisible">تبديل الرؤية</button> <p x-show="isVisible">مرحبًا، أنا ظاهر الآن!</p> </div>

🔹 عند الضغط على الزر، سيتغير isVisible مما يجعل النص يظهر أو يختفي.

✅ 3. x-if: إنشاء وإزالة العناصر من الـ DOM

<div x-data="{ show: false }"> <button @click="show = !show">تبديل العنصر</button> <template x-if="show"> <p>تم إنشاء العنصر!</p> </template> </div>

🔹 يختلف عن x-show لأنه بيشيل العنصر من الـ DOM تمامًا عند إخفائه.

✅ 4. x-bind: ربط القيم بالخصائص

<div x-data="{ color: 'red' }"> <p :style="{ color: color }">هذا نص ملون!</p> </div>

🔹 يستخدم x-bind أو : لتغيير القيم بناءً على البيانات.

✅ 5. x-on: التعامل مع الأحداث

<div x-data="{ count: 0 }"> <button @click="count++">زيادة</button> <p>القيمة الحالية: <span x-text="count"></span></p> </div>

🔹 يمكن استخدام @click بدلاً من x-on:click.

✅ 6. x-model: ربط البيانات مع الإدخال

<div x-data="{ name: '' }"> <input type="text" x-model="name"> <p>اسمك هو: <span x-text="name"></span></p> </div>

🔹 يعمل زي wire:model في Livewire وبيحدّث البيانات تلقائيًا.

✅ 7. x-transition: إضافة تأثيرات انتقالية

<div x-data="{ show: false }"> <button @click="show = !show">إظهار / إخفاء</button> <p x-show="show" x-transition>أنا أتحرك بسلاسة!</p> </div>

🔹 يضيف تأثيرات عند الإظهار والإخفاء.

4. التكامل بين Alpine.js و Livewire ✅ استخدام wire:ignore لمنع التحديثات التلقائية

عند استخدام CKEditor أو Tom Select، قد يقوم Livewire بإعادة تحميل العناصر، مما يؤدي إلى فقدان البيانات. الحل هو استخدام wire:ignore:

<div wire:ignore> <input type="text" x-data x-model="text"> </div>

✅ إرسال الأحداث من Alpine إلى Livewire باستخدام $wire

<div x-data> <button @click="$wire.call('saveData')">احفظ البيانات</button> </div>

🔹 يستدعي هذا دالة saveData داخل مكون Livewire.

✅ استخدام Alpine.store لتخزين القيم بين المكونات

Alpine.store('cart', { items: [], addItem(item) { this.items.push(item) } });

ثم يمكن استخدامه داخل HTML:

<button @click="$store.cart.addItem('منتج جديد')">إضافة إلى السلة</button> <p>عدد المنتجات في السلة: <span x-text="$store.cart.items.length"></span></p>

5. سيناريو عملي: نموذج إضافة منتج في المزاد ✅ المتطلبات:

استخدام Alpine.js لعرض وإخفاء النموذج.

استخدام Livewire لإرسال البيانات إلى السيرفر.

✅ الكود:

<div x-data="{ open: false }"> <button @click="open = true">إضافة منتج</button> <div x-show="open" @click.away="open = false"> <form wire:submit.prevent="saveProduct"> <input type="text" wire:model="productName" placeholder="اسم المنتج"> <button type="submit">إرسال</button> </form> </div> </div>

✅ كود Livewire:

class AddProduct extends Component { public $productName; public function saveProduct() { Product::create(['name' => $this->productName]); $this->reset('productName'); } public function render() { return view('livewire.add-product'); } }

6. مقارنة Alpine.js مع Vue.js و jQuery

7. متى تستخدم Alpine.js مع Livewire؟ ✅ إذا كنت بحاجة لتحسين التفاعل السريع في الواجهة بدون الحاجة إلى Vue أو React.

✅ إذا كنت بدك تخلي التطبيق خفيف وسريع بدون تحميل مكتبات ضخمة.

✅ إذا كنت تستخدم Livewire وبدك تضيف لمسات ديناميكية بدون تعقيد.

🔥 خلاصة Alpine.js مع Livewire 🔥 🔹 Alpine.js مثالي للإضافات التفاعلية البسيطة مع Livewire.

🔹 يقلل الحاجة إلى Vue.js أو jQuery، مما يبسط المشروع.

🔹 يدمج بسهولة مع Livewire دون مشاكل في الأداء.

🔹 أفضل حل للمشاريع الصغيرة والمتوسطة التي تحتاج إلى واجهة ديناميكية.

معلومات الاتصال

اشترك و تابع

تطوير الويب

دليل شامل لاستخدام Alpine.js مع Laravel Livewire لإنشاء واجهات ديناميكية خفيفة وسريعة