Instead, we're just going to take a high-level overview to maybe give you some ideas for what you might do. Okay, so let's get started here. I'm going to open this up in Sublime, and our very first stop is going to be this top-center view partial. So let's take a look at that. Now, this is going to correspond to this section right here at the top, and I just call it top-center. This is what's relevant to us. So I have a Search Vue component, and you can see it's a simple form here.

This is what's relevant to us. So I have a Search Vue component, and you can see it's a simple form here. I got some ugly SVG, unfortunately, but that's okay. Now, the important thing is we have this input here, and when you type into it and you submit the form, it's going to link you to a dedicated page for your search results, and I'm passing through the query there. Okay, so let's take a look at that. I have a search controller endpoint for that, and you can see this is the Laracasts code base. I'm just loading search.show, and we're passing through the query.

you have a page, but you do want to turbo boost it with some extra JavaScript behavior and handling. Okay, well then just wrap it within a Vue component. So I have ScanVue, and this is what that looks like. So now notice, this is the same stuff we were doing in the previous episode. So we have the Algolia InstantSearch wrapper component, and then we have things like the search box. We have refinements. So all of this stuff, if you watched the previous episode, should be somewhat familiar to you. Okay, so let's just break it down and figure out what's going on here.

So all of this stuff, if you watched the previous episode, should be somewhat familiar to you. Okay, so let's just break it down and figure out what's going on here. So the first step, we have a sidebar, and then we have a search form. All right, so what's that look like? Well, that's this right here. Now, the way it works with Algolia, we use the AISearchBox component. Now, many of the examples we used in the previous episode would just be something like that. So let me do this. Let's boot up our watcher, and if I were to switch back and give that a refresh, yeah, this is kind of the default.

Let's boot up our watcher, and if I were to switch back and give that a refresh, yeah, this is kind of the default. I wanted to tweak it a little bit. So you can see here, I'm overriding the default slot, and this is going to be true for most of your Algolia components. Like I'll show you. This is the search box. So let's go back to Chrome, and I have the GitHub repository open for this package. And let's just see. All right.

So let's clean that up, and now we don't have to do a template. Okay, well, let me show you the issue there. Well, if we were to come back and give that a refresh, yeah, we do see the skill type there. But now imagine that what we're searching for doesn't have an associated skill. Because the thing to remember is as you're browsing, it's automatically going to filter down your selections here to match what is relevant. So like if I type nothing here, well, there are no advanced lessons that match this search query, so they will automatically be filtered out. And further, so like let's look for PHP spec, and as I typed that, notice that these two

And of course, that's not really what you want. So instead, once again, we're going to have our template, we're going to scope it down to, we're going to use destructuring here to get the resulting match. So it would be, in this case, the video that matched. And for each one, yeah, we just build up the basic markup there. So we give that a refresh, and that's what you get. So very, very simple. Now, if you're doing this in your own projects, you might end up with things like this, where you can see I'm showing the skill type here, Laravel. But maybe when you're querying Algolia, you don't have easy access to the skill.

you can see I'm showing the skill type here, Laravel. But maybe when you're querying Algolia, you don't have easy access to the skill. Maybe it returns the title, maybe it returns the description, but it doesn't show the skill because you traditionally use a PHP relationship for that. Remember, in those situations, just go back to your code. If you're using Laravel Scout or whatever you happen to use, just make sure you include the skill name within your indexable array. And then when you push that up to Algolia, it will then be available to you. And you don't have to perform additional HTTP requests to figure out the skill name. You don't need to do that.

So yeah, if you're working along or you're doing this in your own projects, there may be times where you do want to override things, and you're not really sure what's available to you. So for example, how about this section right here? So we're filtering by series name. I actually, this is a bit convoluted because I set it up for the video just to show you, but notice this template section here. So if I were to delete that entirely, we would be using the default slot for this component. So let me show you what that means. We're going to go into RefinementList, and you'll see, yeah, right here.

So let me show you what that means. We're going to go into RefinementList, and you'll see, yeah, right here. So this is the default slot. So if you're familiar with View Components at all, this is the default text that will be displayed. However, if you type anything here within the component tags, that will override the default. So now, if I come back and give this a refresh, you'll see that we have overridden that section. So we added some text that overrides the slot and places it right here. So one thing you might encounter is the need to override these.

So we can bring it back to what I had before. This is now my new default slot. And notice we are using View Template Scoping here. So I'm going to scope it to the properties. So the way this works is any of these properties, so notice, like, you might not be familiar with this. I think it got added in View 2.1 or 2. ... I'm not entirely sure. Right around that area. But yeah, notice you can pass props to your slot. And then if you need to override it, you can just scope it to those properties.

But yeah, notice you can pass props to your slot. And then if you need to override it, you can just scope it to those properties. So notice props.value and props.count. Those are coming from here. Okay, so now I'm just going to override it. I'm using their class name convention, but you can do any structure you want. And then here we're using the v-text directive. So yeah, this actually isn't what I do in real life. But just to show you, like, maybe you have a function called seriesName where you need to override it.

But just to show you, like, maybe you have a function called seriesName where you need to override it. So you could say, like, take the first 10 characters and then add dot, dot, dot. You know, maybe something like that where you need to configure the text. So if we give that a refresh and scroll down, yeah, yeah, I mean, it looks ridiculous, but just as a proof of concept that you can control this pretty easily just by using that Template Scoping. Or maybe, like, you want it to lowercase refresh, you know, if for some stylistic reason you want to do that, you have full control over that. But yeah, in our case, I don't really need to do that here.