ساخت مودالهای Vue
Crafting Vue Modals
In this course, I'll show you how to build dynamic, responsive modal components using Vue 3 and Inertia.js. In each episode, I'll introduce new techniques, such as smooth transitions, click-outside behavior, URL-based modals, comprehensive testing with Laravel Dusk, and much more.
We'll begin with the essentials, and then incrementally dig further into some fairly complex techniques. So buckle up!
قسمتهای دوره
Modal Essentials (6)
مودال ویرایش کاربر پایه
9m 58sBuild a user edit modal in a Laravel Breeze app with Vue and Inertia.js, creating a solid foundation for a flexible, reusable modal system.
کامپوننت مودال قابل استفاده مجدد
2m 25sExtract your modal into a reusable Vue component to clean up your index page and effortlessly use it across your Laravel application for better code organization.
ترنزیشنهای نرم
4m 45sCreate smooth, engaging modals with fade and scale transitions to boost responsiveness and elevate your Laravel app’s user experience effortlessly.
کلید Escape و کلیکهای خارج از مودال
5m 34sEnhance your modal’s accessibility by adding Escape key support and outside click handling for a smoother, more user-friendly Laravel experience.
مودال قابل پیکربندی
6m 23sMake your modal truly reusable by adding flexible options for size, title, and close behavior, ensuring adaptability for any Laravel project.
مودال ویرایش قابل استفاده مجدد
8m 43sLearn how to create a reusable edit modal by moving it to global components, making it easy to use across multiple pages in your Laravel app.
Backend-Powered Modals (2)
سیستم مودال مبتنی بر بکاند
16m 51sElevate your modal system by integrating backend-powered URL loading. Fetch components and props from the server for dynamic, seamless user experiences.
بهبود مودال مبتنی بر بکاند
11m 29sRefine your backend-powered modal with smooth transitions, fix layout issues, and enhance styling for a polished, seamless user experience in this friendly guide.
URL-Based Modals (3)
راهاندازی بکاند
8m 54sSet up backend-powered modals that open via URL links. Learn how to build a URL-based modal system with a focus on backend implementation in this friendly guide.
پیادهسازی فرانتاند
12m 39sImplement frontend logic for URL-based modals with seamless browser history and router integration. Manage modal state effectively in this friendly, practical guide.
مدیریت تغییر مسیر
8m 27sMaster redirect handling in your URL-based modal system to ensure smooth form submissions and seamless user experience in your Laravel app.
Testing and Refactoring (3)
تست E2E با Laravel Dusk
13m 57sWrite confident end-to-end tests for your modal system using Laravel Dusk, ensuring smooth refactoring and reliable app functionality every step of the way.
بازنویسی تست E2E
11m 57sRefactor your E2E Dusk tests with custom browser classes and Pest datasets to boost readability, reduce duplication, and improve maintainability.
بازنویسی و پاکسازی
6m 26sClean up and refactor your codebase with this final episode. Learn how to reorganize components and ensure everything runs smoothly and efficiently.




