Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

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!

Series trailer thumbnail

Progress

Series Info

Episodes
14
Run Time
2h 8m
Difficulty
Advanced
Last Updated
Apr 15, 2025
Version
Latest
Play Series

Series Episodes

  1. Modal Essentials (6)

    1. Basic User Edit Modal

      In this first episode, we'll implement a modal in a Laravel Breeze app with Vue and Inertia.js to update user information. This component will serve as the basis for our entire modal system.

    2. Reusable Modal Component

      Building on our initial implementation, we extract the modal into a reusable Vue component, enabling us to use it throughout the application while cleaning up the index page.

    3. Smooth Transitions

      Everyone appreciates a smooth user experience, so we'll implement fade and scale effects to enhance the modal's responsiveness and visual appeal.

    4. Escape Key And Outside Clicks

      Accessibility matters! In this episode, we'll enhance our modal by implementing keyboard support and click-outside behavior.

    5. Configurable Modal

      Flexibility is key to a truly reusable component. We'll add configuration options for size, title, and close behavior to ensure our modal remains adaptable.

    6. Reusable Edit Modal

      We'll extract our modal to the global components directory and implement it on a different page to confirm that it's no longer tied to a specific page.
  2. Backend-Powered Modals (2)

    1. Backend Powered Modal System

      Taking our modal system to the next level, we'll integrate a backend that loads modals based on URLs, retrieving components and their props from the server.

    2. Improving The Backend Powered Modal

      Our backend-powered modal needs further refinements to ensure transitions function properly. We'll also resolve a layout issue and enhance the styling slightly.
  3. URL-Based Modals (3)

    1. Backend Setup

      Backend-powered modals are great, but what if we could link to them directly? We'll implement a URL-based modal system that opens modals using a URL. In this episode, we'll focus solely on the backend setup.

    2. Frontend Implementation

      Now that the backend is ready, we'll implement the frontend logic to handle URL-based modals. This includes integrating with the browser history and router, as well as managing the modal state.

    3. Redirection Handling

      We're almost finished with our URL-based modal system. In this episode, we'll address the necessary changes to ensure redirects work correctly when forms are submitted within a modal.
  4. Testing and Refactoring (3)

    1. E2E Testing With Laravel Dusk

      Before proceeding with further cleanup and refactoring, we'll write an end-to-end test for our modal system using Laravel Dusk, allowing us to refactor confidently.

    2. E2E Testing Refactor

      Although our tests are passing, our test code contains significant duplication. We'll refactor our Dusk tests to use a custom browser class and Pest datasets to enhance readability and maintainability.

    3. Refactor And Cleanup

      In this final episode, we'll tidy up our codebase, reorganize components, and verify that everything is working as expected.

Continue Learning

Frontend Mentor Challenge with Laravel thumbnail

Frontend Mentor Challenge with Laravel

With Simon Vrachliotis

In this series, we take a Frontend Mentor challenge and build it using Laravel and Tailwind CSS. Rather than chasing pixel-perfect replication, the focus is on pragmatic Laravel and backend logic. Along the way, we explore carts, session state, semantic markup, and UI polish.

  • 27 Episodes
Debugging Real-World Production Nightmares thumbnail

Debugging Real-World Production Nightmares

With Jeremy McPeak

Production bugs don't announce themselves politely. In this series, we confront ten nightmare scenarios using NightmareMart, an intentionally broken e-commerce app, demonstrating how to debug calmly and methodically when everything is on fire.

  • 10 Episodes
Motion For The Web thumbnail

Motion For The Web

With Simon Vrachliotis

Master the art of modern web animation, from subtle CSS transitions to full-blown JavaScript motion systems. This series starts with the fundamentals of smooth, accessible CSS motion, then builds through keyframes, scroll-linked animations, SVG techniques, and the Web Animations API, finishing with powerhouse libraries like Motion.dev, AnimeJS, and GSAP.

  • 43 Episodes
How to Build a Dev Team thumbnail

How to Build a Dev Team

With Matt Stauffer

Resources for learning to code are everywhere. The only hard part is choosing one. But when it comes to learning how to lead a development team, quality resources are incredibly scarce. This course fills that gap. It contains all of the lessons I learned while building the dev team at Tighten, a Laravel consultancy known for producing great work, but with an even better reputation as a fantastic place to work.

  • 12 Episodes
BaseCode Reloaded thumbnail

BaseCode Reloaded

With Jason McCreary

Years and years of hard-fought coding breakthroughs, distilled into sixteen essential lessons.In this course, I'll show you how to write code for humans, not just machines. Together, we’ll review powerful techniques, like naming, structuring, removing clutter, and spotting patterns. These aren’t abstract theories from a dusty book. They’re practical and proven habits that you can apply to your codebase right now. If you’ve ever opened an old file and struggled to understand your own code, this course was made just for you.

  • 16 Episodes