are better off just using this it's going to make things a lot cleaner as well but if you do want to read about the intersection observer api and how it works i'd recommend going ahead and doing that first however we're going to use the intersect plugin from alpine so let's take a look at how this works we'll do a little bit of testing out and just see how this all fits

together okay so we're going to go ahead and install this via npm so let's head over and run npm install on the intersect plugin and then to do this we need to import alpine obviously go ahead and import the intersect plugin and then attach the plugin to alpine however you will remember that when we went ahead and set up our project over in app.js we actually got rid of all

of this so how are we going to pull this into our project well livewire within the docs tells you how to do this and that is manually bundling livewire and alpine so we're going to come down to the past the section of not what to do of what not to do that's really important and we're going to do this just here so what i tend to do is just grab all of this code come over and just paste all

of this in we are not using the alpine clipboard plugin although that is a really good plugin we're doing this instead so this is what we're doing here rather than what we saw when we first set this up so now what we can do is just head over to the intersect plugin and pull this in as normal so let's go ahead and grab the import for the intersect plugin and let's go ahead and attach

the plugin here like so and that's pretty much what we need to do okay so let's head over to the browser just make sure everything looks good and that we didn't break anything and yeah we've got component already initialized let's just see and yeah i think we just completely forgot yeah to disable the scripts here as we normally would so this basically when it detects this directive

it will refrain from injecting the livewire and alpine scripts which is what we want and then we're just going to manually do that okay so let's hop over and add this to app.blade.php which is our main app layout we'll put this just at the bottom of say the body it doesn't really matter too much and we should be good let's head over and there we go perfect so now we can

experiment with using this directive now where do we need to place this let's just take a look at the usage of this first of all so we've got x intersect so we'll go ahead and roll this manually without looking at the docs so i'm going to come down here and we don't want this inside the for each loop obviously because we're going to then intersect for every single article we want a

little section at the bottom where when we hit we load more so to use this plugin we just create out say a div or something like that and then we use the x intersect plugin like this and then we go ahead and do something within here so let's just console log i see you and let's head over and see what happens so we'll open up our console and you can see we already get this logged out

once just because of where we were on the page but if we scroll down you see i see you we scroll down again it happens again and so on and so forth so what we can do with this is inside of here instead call the method that we have over an article index to load more and what that will do is it will push the page down but it will show more articles and then because we're doing this

outside of this loop we'll have more articles inside of here and that means that when we get to this again it will just continue to load more now the question is at the moment we're working here with alpine but how do we go ahead and call load more from alpine js or from javascript well we can do that very easily with wire and then we just call the method that we need so in this case

it's load more and that's all we need to do so obviously we don't need any text within this div because we don't need to see anything but now we should have this working so let's go up here give this page a refresh and we'll just start to scroll down so i'm going to go ahead and scroll somewhat already loaded in just because of the position of this but as you can see now as i

scroll down and that intersect plugin hits we are just loading more and more until we get to the bottom now we have got an issue here which we're going to address in the next episode which is stopping this functionality because if we keep doing this at the bottom we're actually going to keep making network requests even if we don't need to