Build An Uptime Monitor with Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Already a member? Sign in to continue

Playing

07. Setting up Vue modals

Episodes

0%

Your progress

Total: 4h 59m
Played: 0m
Remaining: 4h 59m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project

02. Sites

03. Site and dashboard setup

04. Building the site selector dropdown

05. Making use of API resources

06. Setting the default site

07. Setting up Vue modals

08. Creating a site

03. Endpoints

09. Setting up endpoints

10. Enum endpoint frequencies

11. Creating the endpoint form

12. Storing an endpoint

13. Validating and authorizing endpoint stores

14. Normalizing the endpoint location

15. Displaying endpoints

16. Deleting endpoints

17. Toggling inline editing for endpoints

18. Applying a watcher to the endpoint form

19. Storing endpoint edits

04. Checking endpoints

20. Determining endpoints to check

21. Creating a job to perform a check

22. Making an HTTP request

23. Scheduling checks every second

24. Setting up the check relationship

25. Updating the job

26. Showing the last status

27. Expanded list of checks

28. The response body modal

29. Authorizing the endpoint details

30. Calculating uptime for endpoints

05. Queuing

31. Setting up queues

32. Queuing the endpoint check

06. Email notifications

33. Setting up email in Laravel

34. Site model email notification storage

35. Adding email addresses via the UI

36. Listing and deleting email addresses

07. Downtime notifications

37. Observing when to notify

38. Creating an endpoint down notification

39. Creating an endpoint recovery notification

40. Making the emails a bit friendlier

08. Extras

41. Deleting sites

42. Eager loading

43. Recovery notification bug

44. No sites fix and placeholder

Transcript

00:00

We're going to be moving on to creating a site soon. But before we do that, we need to set up modals because this add a site needs to show a modal that we can then enter a URL into that then

00:11

gets saved. To do this, we're going to be using a package called view final modal, which is really, really nice to use, pretty easy to set up, and highly customizable.

00:21

So let's head up to the Setup section. And of course, let's go ahead and pull this in with NPM. Let's wait for that to install. And we can start using it straight away.

00:30

So we're going to do this in the site selector. We're not going to create a global modal for this. We can just put it directly in here and then have a click to change a flag on this add a site that

00:41

will then show the modal. It's not the most efficient way to do this. But for a small modal like this, adding it in like this is not too much trouble.

00:49

So how do we do this? Well, the first thing we need to do is pull the actual package in itself. So let's go down here and import view final modal.

00:59

And of course, that's going to come from the view final modal package. So now we can just basically grab this component and start building a modal out in here.

01:09

So let's go ahead and do that now by creating this out here. And we should be done. So I'm just going to say modal content. And let's head over and see if anything's changed over

01:20

on our app. So it doesn't look like it at the moment. Now, how do we trigger this modal? Well, what we want to do is hook this up to a model.

01:26

So for example, we'll call this show new site modal. That's going to be a view ref, which contains a true or a false value. We do that by going ahead and importing ref from view

01:41

and then going ahead and defining that in here. And I'm going to do that underneath where we've defined our props. So show new site modal.

01:49

That's going to be a ref. And by default, it's going to be false. We go over. We still don't see our modal.

01:55

Let's switch this over to true just to see what happens. And sure enough, we can see that we actually do get a modal. Nothing's styled at the moment because we're going to add in our own styles for this.

02:04

But at least we're seeing the modal in here. Now, let's set this back to false and actually trigger it. So to do this, we're going to go ahead and on this button, say V on click.

02:16

And we're going to set show new site modal to true. So now what we can do is click and show the modal. Now, we've got a little bit of an issue where this pop up is still showing even though the modal is showing.

02:30

We'll figure that out in just a second. But first of all, let's apply some styles to this modal. Now, what I'm going to do is copy and paste these over. But of course, feel free to grab the code for the site

02:42

selector in the downloads of the course so you can go ahead and just copy and paste them over. So let me go ahead and pull these in because there are quite a few, all written with Tailwind

02:50

in here. And basically, what we have is the overall classes for this and then the specific content classes, which have the background of white, the rounded edges.

02:59

So that will basically be the thing in the middle that we have styled up just here. So feel free to change them around if you want to. Now, we can also add options to view final modal.

03:10

For example, escape to close is always a good one to set to true because we don't always want to click outside the modal to close this off. We might want to press escape, which

03:21

will close that for us, which I've just done. OK, so we've got our modal working pretty straightforward. But we've got a little bit of an issue

03:27

here where when we click Add Site, this pop-up sort of carries on showing. And it's really annoying. We don't really want that in there.

03:34

Now, how do we deal with this? Well, this goes back to our proper template that we've got just here. And what we actually get from this

03:43

is a method injected into here called hide. And that means that what we can do with this is when we click on a button, for example, we can also invoke hide to get rid of the pop-up, which

03:56

is really useful. So what we're going to do is when we click this button and set show new site modal to true, what we're also going to do in here

04:06

is invoke that hide method that we get exposed from this slot. So let's give this a go. I'm going to select a new site, add a site.

04:15

That disappears, and the modal shows. We can either click away from it or hit the Escape key. So there we go. We've gone ahead and installed view final modal,

04:24

pulled it in to find out our modal just here with the modal content. And we've gone ahead and triggered it with a ref in view.

Episode summary

In this episode, we focus on setting up modals in Vue, which you'll need for the upcoming "add a site" feature. To make things easier and more powerful, we're using a library called vue-final-modal. It's super simple to install and gets you up and running quickly with customizable modal dialogs.

We start by installing the package with npm, then import it right into our site selector component (no need to go global for something small like this!). You'll see how to hook up a boolean ref (called showNewSiteModal) to control when the modal appears.

We make sure clicking a button flips that ref to true, causing the modal to appear. You'll also see how to add your own styles (using Tailwind in this case), and tweak the modal behavior—for example, letting users hit Escape to close it.

Along the way, we tackle a small but annoying issue: the old popup continues to show even with the modal open. To fix this, we use a handy hide method provided by the slot scope, so everything cleans up nicely when the modal appears.

By the end of the video, you'll have a working, styled modal triggered by a button, ready to take in new site URLs. You'll also understand how to customize its appearance and close behavior to match your needs.

Episode discussion

No comments, yet. Be the first!