Build a Realtime Chat with Laravel, Vue and Pinia
This episode is for members only

Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started
Already a member? Sign in to continue
Playing
10. Using the intersection observer API

Episodes

0%
Your progress
  • Total: 1h 41m
  • Played: 0m
  • Remaining: 1h 41m
Join or sign in to track your progress

Transcript

00:00
We need to detect when we're at the very top of this list. So we know when to start pushing messages, previous messages to the stack.
00:07
For that, we're going to use the intersection observer API, but we're going to use the view use composable for this, which makes it a lot easier. Okay. Let's go over and just figure out how to place this element that we want when it
00:21
is visible to then start loading more in. And then in the next episode, we'll actually start to push these to the stack. Just while we're building this, I'm going to go over to the message index controller, and I'm just going to reduce the amount of messages that we're
00:34
initially showing, just so we don't need to keep scrolling too much. Okay. So when we hit this point here, we want an element in here that when it becomes visible, we want to load more in.
00:44
Let's go ahead and add that element and then see what we get. Okay. So let's add this at the top of here. So we're going to say intersect up here and let's see where this positions.
00:57
This, I'm going to give this a refresh and it's at the bottom. Remember we're using flex call, but we're reversing that. So what we actually need to do is add this at the very bottom underneath the last iteration.
01:10
So this actually goes to the top. So when this element, which we're not going to end up having text in is visible, we then want to start to load. Okay.
01:19
So I'm going to keep this element text in here. But we're going to get rid of it once we're done. Okay. So we need a ref to this.
01:26
So let's add in a ref of say target. It doesn't really matter what we call this. And up here, let's go ahead and create out that target variable with a ref. All this means is now we have an, a reference to this within our script that
01:40
we can use for that HTML element. Next up, we're going to go ahead and pull in Vue. Use. So let's install that.
01:46
First of all, let's say NPM install and it's Vue. Use slash core. Once that's finished, we have access to all of the composables that this gives us. So we're going to import the use intersection observer from Vue.
02:03
Core, and then we can start to attach it to this target. So let's do this just down here and let's start to create this out. So when we create this out, we get the ability to stop intersecting, which we're not going to do because we don't need to, but we're going to invoke that
02:22
composable and into here, the first thing that we pass in as the target. So this knows where it needs to look or what it needs to look for. Next up in here, we have a closure, which is going to give us whether this is intersecting or not.
02:36
So in here, we're going to get is intersecting. Let's pull that in. And we also have the observer element, which we're not going to use. Let's just pull that in anyway.
02:47
Call that observer element. And then when this runs, let's just console log out is intersecting. So basically now that we've done this, as soon as this target is visible within that scrollable viewport, it will console log out whether it's intersecting.
03:02
This will always console log out. So probably more appropriately, we could say if it is intersecting, then we want to console log something out. Okay.
03:12
Let's just try this out and see what happens. It looks like we have an error. So let's just head over and have a look here. And yeah, we just need to import ref.
03:20
Let's pull that in from view. And there we go. Okay, great. So keeping the console open, let's go and scroll up.
03:28
As soon as we see that element, we should get a console log of true. So it's at this point, we want to go ahead and make another request to our messages endpoint to pull in the next page, which because we're ordering by latest is going to be the previous page.
03:45
Okay. Let's finish up by just making this a little bit better. So I'm going to get rid of intersect because obviously we do not want to see any text here.
03:54
And what we can also do is we can add a class in this to translate this with CSS. So it pushes it down very slightly. That means that we're going to start to load before we hit the top of that scrollable element.
04:07
So we're going to say, we want to translate this on the Y axis by 20. And that's just going to pull that down very slightly. We can see this by adding a height to it and setting a background color, and you'll see what I mean.
04:19
So now when we go ahead and scroll up in here, you'll notice that this exists a little bit before we get to the very end of the text area. And it doesn't look like anything showing. So let's set this to, uh, it's probably just because we
04:35
don't have any text in there. Let's add that back just so I can show you what I mean. And there you go. So you can see it's not at the top.
04:41
It's been translated down. So when we hit that point, it will load before we get to the very top. Okay. Let's get rid of that background color, the height, and also
04:51
intercept, and there we go. So as we scroll up, just before we get to the end, we get true. Let's jump over to the next episode and actually start to load previous messages in.

Episode summary

In this episode, we're tackling the problem of knowing when the user has scrolled to the top of the chat message list so we can load more (previous) messages. To do this, we use the Intersection Observer API, but instead of setting it up manually (which can get a bit messy), we leverage the awesome @vueuse/core composable – it makes the whole process much simpler and more "Vue-friendly".

We start by inserting a small, invisible element at the top of our message list. This element acts like a watcher: when it comes into view as the user scrolls up, that's our cue to load more messages. There's a bit of fiddling with flex layout direction since we're displaying the messages in reverse order. We create a ref for our target element, set up the observer using VueUse's useIntersectionObserver composable, and hook up a callback that logs whenever the observer is triggered.

We then refine the experience by nudging the observer element down a bit with some CSS. This way, new messages can load before the user actually reaches the very top, making scrolling feel smoother and more responsive. After testing that everything is being triggered at the right moment, we clean up the UI so there's nothing visible to users.

The groundwork is all set! In the next episode, we'll connect this detection to actually fetching (and displaying) the next chunk of messages from our backend. If you're building an infinite scroll chat or message list, this technique is for you.

Episode discussion

No comments, yet. Be the first!