# Laravilt 1.1: لوحة تحكم Laravel بـ Vue أو React بواجهة PHP واحدة

> أردت واجهة PHP التي يقدمها Filament مع واجهة Vue أو React التي يعمل بها فريقي، فبنيت Laravilt. ما الجديد في الإصدار 1.1 (React 19 وLaravel 13 وإصلاحات أمنية) وكيف تجربه في عشر دقائق.

*2026-10-12T11:03:50Z*

قضيت سنوات داخل Filament. ‏TomatoPHP وحده فيه 68 إضافة له، وما زلت أرى أن وصف لوحة التحكم بلغة PHP هو أفضل تجربة تطوير في Laravel.

لكن فرقًا كثيرة تعمل بـ Laravel لا تكتب Livewire، بل تكتب Vue أو React. وكان الاختيار أمامها دائمًا واحدًا: إما أداة البناء بلغة PHP مع Livewire، وإما واجهة خاصة بها وكثير من عمليات CRUD اليدوية.

أردت الاثنين معًا، فبنيت Laravilt.

تعرّف اللوحات والموارد والنماذج والجداول بواجهة PHP سلسة كما تفعل في Filament، ويعرضها Laravilt عبر Inertia باستخدام **Vue 3 أو React 19**. جانب PHP لا يتغير، وتختار الواجهة لكل تطبيق.

صدر الإصدار 1.0 بواجهة Vue، ويضيف الإصدار 1.1 واجهة React بجانبها، ويدعم Laravel 13، ويأتي بمجموعة من الإصلاحات الأمنية. هذا ما فيه، وهكذا تجربه في نحو عشر دقائق.

## ما الجديد في Laravilt 1.1

- **واجهتان وتعريف PHP واحد.** Vue 3 مع shadcn-vue، أو React 19 مع shadcn/ui، وكلاهما بـ Tailwind CSS v4 وTypeScript. يسألك الأمر `php artisan laravilt:install` عن الواجهة، أو تمرر `--stack=vue|react`.
- **دعم Laravel 13** مع PHP 8.3 أو أحدث. (وإن كنت على Laravel 11 أو 12، فالإصدار 1.0.x ما زال يعمل عليهما، بواجهة Vue فقط.)
- **موارد بنماذج وجداول وصفحات عرض وإجراءات.** ومولّد يبني مورد CRUD كاملًا من جدول موجود في قاعدة البيانات.
- **مصادقة جاهزة:** التحقق بخطوتين، ومفاتيح المرور (Passkeys)، وتسجيل الدخول الاجتماعي، ومفاتيح API، وإدارة الجلسات، وتختارها أثناء التثبيت.
- **ذكاء اصطناعي مدمج:** حزمة AI تدعم عدة مزودين (OpenAI وAnthropic وGemini وغيرها)، ومحادثة AI، وبحث شامل مدعوم بالذكاء الاصطناعي في كل مواردك.
- **نظام إضافات**، ودعم لوحات متعددة، وودجات.
- **إصلاحات أمنية.** قبل الإصدار 1.1 راجعت الكود كله من ناحية الأمان، وكانت النتيجة: صارت مسارات تعديل أعمدة الجداول تتحقق من الصلاحيات والنطاق، وأُغلق مساران لثغرات XSS، وصارت مسارات رفع الملفات خلف المصادقة وتحديد المعدل. كما صار رفع الملفات والحقول التفاعلية يعمل على خوادم الإنتاج، فقد كانت هذه المسارات في الإصدار 1.0 تُحمَّل في البيئة المحلية فقط، وكان عليّ أن أنتبه لذلك مبكرًا.

Laravilt عبارة عن 15 حزمة composer بترخيص MIT. الحزمة `laravilt/laravilt` تثبّتها كلها، أو تثبّت ما تحتاجه منها فقط.

## جرّبه في عشر دقائق

ابدأ تطبيق Laravel جديدًا، واختر **Vue** أو **React** عندما يسألك المثبّت عن Starter Kit:

```bash
laravel new my-app
cd my-app
composer require laravilt/laravilt
php artisan laravilt:install
```

يسألك المثبّت عن الواجهة (ويكتشف الافتراضي من `package.json`)، وعن معرّف اللوحة، والميزات التي تريدها: التسجيل والتحقق بخطوتين ومفاتيح المرور وتسجيل الدخول الاجتماعي ومفاتيح API والذكاء الاصطناعي. ثم ينشر ملفات الواجهة المختارة، ويشغّل الـ migrations، وينشئ `AdminPanelProvider`، ويبني الملفات، ويمكنه إنشاء أول مستخدم مدير.

تنبيه: يستبدل المثبّت ملفات الـ Starter Kit مثل `package.json` و`vite.config.ts` و`routes/web.php`. شغّله على تطبيق جديد، أو احفظ عملك في git أولًا.

## أول مورد لك

يقرأ الأمر `laravilt:resource` جدولًا موجودًا:

```bash
php artisan make:migration create_products_table   # أضف الأعمدة ثم:
php artisan migrate
php artisan laravilt:resource admin --table=products
```

يطرح بعض الأسئلة (صفحة واحدة بنوافذ منبثقة أو صفحات كاملة، ونقاط API، ومساعد AI، وميزات الجدول)، ثم يكتب المورد والنموذج والجدول وصفحة العرض والصفحات داخل `app/Laravilt/Admin/Resources/Product/`. تُكتشف الموارد تلقائيًا، فيعمل `/admin/products` فورًا: قائمة قابلة للبحث والترتيب مع فلاتر، وصفحات للإنشاء والتعديل والعرض، والحذف الجماعي.

ثم تعدّل كود PHP كما تفعل في Filament:

```php
public static function configure(Schema $form): Schema
{
    return $form->schema([
        Section::make('Product')->columns(2)->schema([
            TextInput::make('name')->required()->maxLength(255),
            TextInput::make('price')->numeric()->prefix('$')->required(),
            Toggle::make('is_active')->default(true),
        ]),
    ]);
}
```

تظهر تغييرات PHP مع الطلب التالي، ولا تحتاج إلى إعادة البناء إلا عند تعديل ملفات الواجهة.

## الواجهة ملكك

هذا أهم جزء عندي، وهو السبب الحقيقي لوجود Laravilt.

تُنشر التخطيطات والشريط الجانبي ومكوّنات الواجهة الأساسية داخل تطبيقك، فتعدّلها مثل أي مكوّن آخر. والحقل المخصص عبارة عن كلاس PHP ومكوّن Vue أو React، والمولّدات تتبع الواجهة التي اخترتها:

```bash
php artisan make:form-component RatingInput --react
php artisan laravilt:page admin Reports
```

إن كان لدى فريقك نظام تصميم بـ Vue أو React، فلوحة التحكم تستخدمه ولا تصطدم به.

## اجعل مساعدك الذكي يقرأ التوثيق

لدى Laravilt خادم MCP مستضاف يفهرس التوثيق والحزم وسجلات التغييرات. أضفه إلى Claude Code بأمر واحد:

```bash
claude mcp add --transport http laravilt https://mcp.laravilt.com/mcp
```

أدواته تبحث في التوثيق وتقرؤه، وتعرض الحزم وآخر إصداراتها وسجلات التغييرات، وتقدّم دليلي التثبيت وتطوير الإضافات. ويمكن لأي عميل MCP يدعم الخوادم البعيدة عبر HTTP استخدام الرابط نفسه، وهو مدرج أيضًا في سجل MCP الرسمي.

## حدود بصراحة

أفضّل أن تسمعها مني على أن تكتشفها بنفسك:

- Laravilt أحدث من Filament، ونظامه البيئي أصغر. إن كنت تحتاج اليوم إلى سوق إضافات كبير، فـ Filament هو الخيار الأضمن. (ولهذا ما زلت أطوّر [TomatoPHP](https://tomatophp.com/ar?utm_source=laravilt&utm_medium=referral&utm_campaign=laravilt-launch-oct26)، وفيه 68 إضافة لـ Filament.)
- تختار واجهة واحدة لكل تطبيق، والتبديل لاحقًا يعني إعادة تشغيل المثبّت على Starter Kit مطابق.
- بعض حدود الإصدار 1.1 موثقة: أعمدة الجداول القابلة للتعديل تكون للقراءة فقط داخل مديري العلاقات وشبكات البطاقات، ومفاتيح المرور تعتمد على `laragear/webauthn` الذي توقفت صيانته.

## جرّبه، أو اطلب من يبنيه لك

- [اقرأ التوثيق](/ar/docs) · [التثبيت](/ar/docs/getting-started/installation) · [واجهات Vue وReact](/ar/docs/getting-started/frontend-stacks)
- [افتح العرض الحي](https://demo.laravilt.com) (بيانات الحساب التجريبي في الصفحة الرئيسية، والبيانات تُعاد كل ساعة)
- [ادعمه بنجمة على GitHub](https://github.com/laravilt/laravilt)

وإن واجهتك مشكلة، افتح Issue على GitHub، فأنا أقرؤها.

وإن كنت تفضّل أن تُبنى لوحة التحكم أو منتج SaaS الخاص بك على Laravilt أو Filament، فأنا أقبل هذا العمل، بما فيه العمل باسم الوكالات (White-Label). اطّلع على [تطوير Laravel بنظام White-Label](https://fadymondy.com/ar/services/white-label-laravel-filament?utm_source=laravilt&utm_medium=referral&utm_campaign=laravilt-launch-oct26) أو [تواصل معي](https://fadymondy.com/ar/contact?utm_source=laravilt&utm_medium=referral&utm_campaign=laravilt-launch-oct26).

---

Source: https://laravilt.com/ar/blog/laravilt-laravel-admin-panel-vue-or-react