How to Create a Filter Component for NuxtJS Blogs

all right what is going on guys in this video i'm going to show you how to set up a really cool filter feature on your nuxjs blog i'm also going to be using tailwind so if you guys are using tailwind awesome if not no hard feelings you'll be able to follow along just fine the finished product will look something like this we have a list of categories here and when we deselect all the categories we'll have no post selected try adding a category when we have a category it will find all blog posts with the category marketing and category in this case it's just a piece of uh markup front matter that you guys can really easily adjust i'll show you how and if you select multiple it'll just have a like super big array of all of the blog posts that contain those categories really easy way for somebody to come to your site that i don't know is looking for productivity help and just instantly narrow down productivity stuff or maybe they just don't care about your miscellaneous posts they can just put everything and then just click miscellaneous to take that out of the equation right and this will give you an indication just of how many freaking posts i have on social skills on my blog so this is a local host that i spun up here with the finished product what i'm going to do is actually i'm going to use this other page blog 2 that does not have this feature installed and then i'm just going to basically just run you guys through from top to bottom you know how to get something like this in your blog how to used nux js like content module in order to sort through all the stuff this isn't going to be super exhaustive if you guys don't know how to like get content using the next.js content module i'll include a link in the description that will help you guys do that but hopefully this should at least give you guys a little bit more of an idea of how to implement something like this last thing i want to say just before i start is this is not the only way to implement it in fact it's probably not the best way to do it whatsoever but it certainly works i like working with certain data structures more than others and i like doing things in certain ways more than others so if you guys think that there is a better way that you can do this i highly encourage you guys to try it out okay so let's get into it we're going to go to this blog 2 page here and just clicking through before and after it looks like really the only difference here is this little little snippet of front end that we need to add so it's just a bunch of colored buttons that appear to be arranged in flexbox that we are going to add onto here now before i actually do a little bit of coding i'm just going to run you guys through what this page looks like because i always hate it when guides don't do that first thing is we have a navigation bar up at the top that's this component here next we have a bunch of html that just describes this section recent articles and then the latest thoughts experiments and essays then underneath that we have a component called blog list which takes as a prop articles and then we have a bottom footer and if we scroll all the way down to the bottom of the page that's this down here so the blog list i'm sure you guys can tell it makes up the the bulk of this page and if you guys don't know how to get content with next js content i'm not going to go into that but suffice to say like it really depends on how many blog posts you have in my case i have quite a few a lot of seo blog posts that i made quite a while ago so how to parse through all that stuff can be kind of challenging if you're unfamiliar with it the only thing i'm going to say on the content module is you basically just need a function like this i mean i'm pretty sure i just copy and pasted this in from the docs just an async function called async data which takes destructured dollar sign content and then params and then you just return this articles constant uh that you get through just awaiting this content function which then you know are takes articles the name and then params.slug then only fetches the title description image slug date categories the front matter and then fetches i also did a little bit of sorting down here but that's not super important i just wanted to make sure the date was kind of from like most recent to least recent then at the end we return this article's object if you guys aren't familiar with it this article's object can just be used just like anything else on your page if you guys are more familiar with this this is literally the exact same thing it's just you know i would actually have to put all the articles in here that's why we use the content module to grab those for you so anyway we feed this articles object or rather articles array to blog list if i were to find this some components blog list just looks something like this it iterates using a v4 through an article in this dot loaded posts loaded posts i believe is just another way to say articles essentially and i just had to use loaded posts uh i had to create another variable just to store a bunch of stuff but essentially that's all it is just takes every blog post in your directory and then just goes bang there's one bang there's another bang there's another so on and so on and so forth all the way through your content directory i've added little things like dates here a little article description right i think i might have just like taken 80 80 of this from just tailwind's blog because i absolutely love the way that they sorted their stuff out obviously i changed a change a few things i would like to hope but uh suffice to say that is basically all that's going on there with that blog list component in terms of actually instituting this button functionality first thing i'm going to do is actually work on the front end and i know it's surprising to a lot of people because a lot of people always encourage you to work on the back end but i don't know i always find it just a lot easier to start with the front end and kind of work my way backward from there not saying it's the best way to do it in fact it's almost certainly not but uh yeah it's something that you guys can do if you guys want to follow along so first thing i have to do is i just want to make a div that's over here luckily i had the foresight to create a grid with two grid columns on a large display and this is a large display if i were to zoom in it would become a small display but i think this here is large so there should be two columns one on the left there should be one on the right and i'm just going to double check that by creating a div with the class of bg red 200 and then saving and yeah there we go it's stretched across the width of that container great we have this div here now now next thing i'm going to do is i'm going to literally just start creating a bunch of buttons or rather not buttons divs and we're going to see how that goes let's do bg blue 200 let's just add a little bit of height here and a little bit of width and then let's actually do this too let's say shadow small rounded small and then cursor pointer i'm going to create the ending tag for that let's just call this i believe i call this productivity i'll check in a moment perfect awesome so we have this button the issue is this button is currently full width we do not want that so why don't we just do flex i'm going to be adding a bunch of other stuff here so i'll do spacex too and i'm going to want this to wrap later so i'll do space y2 unless you do flex wrap too and then for now why don't we do justify end actually let's do lg justify in because we're only going to do this on large screens great awesome so now we have this be a uteful little button uh and now all i'm going to do is just copy and paste this a couple times let's see how that looks your productivity productivity productivity awesome when we do uh futurology and do this one we'll call this marketing that looks good i'm going to make every piece of text here pretty small and i'm also going to force it down to the bottom of the page with items and so it should be smack in the middle right where i want it to be uh and then what else are we gonna do let's have no margin in this display but when the screen gets smaller oh this is a bad idea yeah there you go perfect when the screen gets smaller why don't we add a little bit of a margin let's do uh margin eight perfect so that looks fine maybe a little too big let's do uh nt6 now let's take this bg red off because we no longer need it and why don't we actually do mt5 i'm very uh very impatient with this stuff okay i have a couple more buttons to make so i'm just going to like copy and paste these extra ones here and these are all just going to be the different categories that i have on my blog so i have several different categories of like a productivity category a programming category social skills category marketing i believe the ones that i did here were productivity futurology marketing social skills miscellaneous so i'm just going to copy that productivity futurology we have marketing uh social skills and then we have miscellaneous let's just go back make sure that's fine perfect awesome and you'll notice these look slightly different uh that's perfectly fine i'm not just like copying and pasting this and i'm just doing most of this from memory so uh yeah one other thing i want to do is i want to change the colors of these a little bit because i just don't like them when they're all the same color you totally can if you want to but i'm going to make it a rainbow because i feel fabulous today so blue yellow red why don't we do indigo and then what is another cool color green yeah let's try that out it looks pretty rainbowy i wonder if they have a teal i don't know if i'm using the right version yeah uh hell yeah oops sorry we totally do have teal excellent awesome uh let me show you guys something really cool too that you can do with vs code if you're unfamiliar just like you have multiple cursor selections so on windows i just did command shift l and i got this but on mac it might be different just like you did multiple cursor selection you can also do multiple cursor copy the way that you do that is you just go to multiple curve selection and then just copy and it'll automatically copy it every individual cursor uh whatever you copied so in my case i did bg blue 200 bg yellow 200 songs for earth to save me all that time i'm just going to go hover paste that in and then make it a little bit darker so now it should go a little bit darker and it does god i really like that teal and then let's also add a transition and a duration let's do 200 so that when i mouse over this we got this like slow kind of darkening which is a really cool effect that i i really like yeah man t looks way better than whatever this is i'm totally gonna be using that later uh great so now we have a bunch of these divs that are flex aligned let me just make sure this wraps properly i don't even think i can get it to wrap which is a pretty good sign why don't i do this yeah there you go that wraps that wraps fine awesome so now that we're done with the front end or rather these buttons let me work you guys through a little bit more uh of the back end and just in terms of like what i mean by back end the first thing i mean is we need to make these buttons do something so when i click on one of these buttons there needs to be something that happens in view you can use an at click handler and that's what i what i like to do for stuff like this so i'm going to use multiple cursors to select every button and then i'm just going to go at click and we're just going to create a method i guess i think before i called it toggle which is a hilariously bad name for a method but i'm going to just keep that as is i'm also going to be passing in an event parameter and the event parameter is just like any other html event action or i believe it's just called an event when you click on something for example you'll be able to get the target of what you clicked on you'll be able to get a bunch of information about that element we're going to be using that to grab the name in this case productivity and use that to filter through stuff later so we have an act click with a toggle event awesome let's save that and looks like it's hanging a little bit let's go all the way down to the bottom that's awesome looks like it's done uh in order to test this out i'm just going to give this a quick click and when i click this because we have no toggle method defined yeah there you go it says toggle is not a function believe it or not that is exactly what we wanted so from here on out now that we've done that front end why don't we do a little bit i mean this is still technically front end but why don't we do a little bit about a little bit of defining the object rather array that we're going to be screwing around with so i'm going to use data then return and i'm going to create a selected array the selected array is just going to include all of the various categories on my site so productivity futurology marketing social skills miscellaneous you know productivity uh futurology thank goodness i'm fast at typing marketing social skills and social skills kill and miscellaneous and because i'm gonna be using this information let me just really triple check that it's spelled correctly yeah i think that's how you spell miscellaneous good so awesome now we have this array with this selected sorry we have this data function i suppose that returns this array called selected which has all this information that is awesome this is the data structure we're going to be using to represent this like i mentioned earlier you guys can use a bunch of different ones to represent this this probably isn't the best way to do it i just know a lot of array methods and that's just what i feel comfortable using so from here on out we're going to want to do a couple things first thing i'm going to want to do is when i click on this or rather when i hover over it sorry yeah when i click on this rather i'm going to want this to change a little bit i'm going to want this to kind of get a little bit uh translucent so that people know that it got clicked on and there's a really easy way to do that first thing i got to do though is i have to define the method that i want to use for this so i'm going to be using a method called toggle yes that is what it's called we're going to be using toggle toggle is going to take in an event keep in mind you can use whatever event you want here i mean i could have called this e i can call this q and call this chihuahua i don't know if that's how you spell chihuahua but i'm going to call this event and this event is going to rather this this method is going to take an event and it's going to do stuff with it first thing i want to do is i'm just going to call element event.target so that means that when i click on this i should instantly create a variable called elements that's const scoped i think it's just block scope rather with const that then includes this it represents this document object so uh on top of that why don't i just do like a little sanity check and say yay you clicked the following element and then we'll just do element that should work so now every time i click this i should get a little console message with some very helpful information i highly encourage you guys to constantly use these types of sanity checks they really do keep me alive now i'm going to be zooming out a little bit i don't want to zoom out too much so you guys be able to see it so hopefully you guys can still see this but uh let me give this a quick click and awesome it says yay you click the following element object html development yes the reason that that pops up is because this is an object it's not a string so if i wanted this to show up as a string i would have to go text content there you go that should work so if i give this a quick click you'll say yeah you click the following element productivity except why is it so spaced out i'll tell you why because the way that my autoformatter works here and this can occur to you guys too if you guys using prettier or beautify or anything like that is it adds a bunch of white space in and when we take the text content we're also taking down that white space so you can solve this in a number of different ways i just like to trim the text content to solve that for me and now when we click productivity you'll see hey you click the following element productivity futurology you know marketing social skills miscellaneous and there's no extra space there which is really nice anyway now that we have that sanity check in place i'm just gonna leave that there and i'm gonna do a quick uh if then what i'm gonna do here is i'm going to look for this word productivity in my selected array and say hey if this is there then i want to take this productivity off of the selected array if it's not there then i want to add this productivity onto the selected array that way we can toggle this data structure just by clicking on a button okay the way that i'm going to do that is i'm going to go if this dot selected dot i believe it's not contains it's includes then we're going to say element dot text content dot trim actually probably shouldn't be repeating myself so why don't i just say text content just call that uh element dot text content why don't we actually just call this text a little bit easier so let's just do trim there you go so let's say if this not selected let's also i'm a stickler for nice short readable code it's a joke cause my code definitely isn't uh yeah you're gonna get this just because we did not finish this but if this dot selected includes text then i want to do something i want to go to my element i want to find the class list and i want to add an opacity class of 50 and that is i think i used 25 before but i think 50 will actually is actually going to look better now every time we click on a button and every time that this selected array includes text it will automatically make it more opaque and we're going to remove that from this array the way that we're going to do that is we're going to say this.selected.splice splice is an array method which basically takes two things first it takes the location in the array from which to start removing elements and then the next thing it does is it says how many elements are going to remove from here so we're only going to remove one element and the location in the array where it will start with is we can find that out just by saying this.selected.index of and then we can just go text okay so we're saying hey splice out wherever this in from wherever this index of the element that we're looking for is and then just go one further you know remove that element and then we're gonna go else if this selected does not include text we are now going to say remove this opacity so let's remove opacity 50 and then we're going to push that text to the array so yeah that should work so we're just going to give that a quick save and now we should have a couple of things pop up when i click this yes we should say yay you click the following element productivity but i suppose there's no way that we can know that we just did that all right great i'm going to add another sanity check in here really quickly that says this dot selected and then i'm also going to add one down here essentially what i've done is i'm saying hey after every click i want you to show me the current state of this selected array it's just how we're going to keep tabs on things awesome so i went over this productivity i clicked it and now we see the array has futurology marketing social skills miscellaneous that's exactly what we wanted if i click this again we should add productivity to that array so let's do it awesome futurology marketing social skills miscellaneous and productivity do the same thing with future futurology awesome looks like it's working marketing how about if we just take all of them out now it's just miscellaneous what if we take that out too now we got nothing now we add miscellaneous back in marketing futurology productivity awesome this isn't a very exhaustive test by any means but it certainly states our purpose here with that done we now have a method that manipulates a data structure on our page called selected from here on out we can get into the finer logic of actually manipulating this based off that data structure so now we can start filtering the way that we filter in nux anyway is 95 of the time i just use a computed property this computed property can be called anything it's basically just a getter it just filters things and then even though it's like a function so in this case it's like filtered the function it acts just like a variable that you can reference anywhere in your code the way that i'm going to make this is i'll create a function here or a computed property called filtered then i'm going to say if the length of this selected is zero i just want to return nothing if it's not zero then i want to filter let's do this return this.articles.filter then i'm going to use an array sorry an arrow function here that then returns only the posts that have a category that is in selected so let me go through that one more time here the way that this computed property works is if the selected if the length of selected is zero then it just returns nothing and nothing happens otherwise if the length of selected is not zero it will return this.articles.filter so it'll go to my articles array it'll filter it and it will take actually let me do this article it will filter articles and then it will grab this article and say this.selected.includes article category this little snippet of code down here just says hey let's look inside a selected if selected includes the category of any of these particular posts we're doing a filter so we're running through every single post in that array if the category is inside of here then i want you to show it if the category is not inside of here then don't show it what we end up with is we end up with a data structure where it is only shown if it is in this array and it's only in this array if it is basically turned on if it's like selected now i'm going to save this if i click this you're not actually going to see anything happen we have our little console log statement from earlier but that's about it and the reason is is because we're passing this we are passing this as a prop to blog list which is the component i showed you guys earlier and that's actually a little different than if you were not using a component if you're using a component and you're passing this as a prop you need to dynamically or rather you need to force the component to re-render every single time that that computed property changes in nux there are a couple different ways you can do this but probably the best way is to use a key and to use a vf the way that i personally do that is i just create something like comp key i'll set it to zero and then i will make it so that every single time i toggle something so every single time i change something it changes that comp key so sorry let me do this copy there we go so what i've done here is essentially i've created a piece of data in this page called comp key which stands for component key and every single time i click on this button it is going to iterate comp key by one i mean you can do anything you want you could like subtract it you could multiply it by 50. you could do literally whatever you wanted but all we're going to be doing here is changing that so that we can tell the page hey it's time to reload and we can pass that information onto a blog list so i'm going to save that and the last thing we have to do now is we have to add that key information to our blog list component so i'm going to actually first thing we should do is we should do a vf actually so i'm going to only render this if this.selected.length is greater than zero good and then i'm going to say that the key is a comp key let's just sort that out a little bit awesome and let me just make sure that that looks good perfect let's give this a quick try we'll notice that it is still not refreshing except when you go zero uh and i believe the reason for that is because we didn't provide a v else did we no we didn't provide anybody else i'll make a quick div here i just say v else and i'm literally just going to include the following text there are no posts left have you tried adding a category should refresh here and now when we go all the way down to zero we should see there are no posts left great now i'm just going to add another class here because i want it to pop up right in the middle so let's bring this over there good and yeah it looks like we're good to go so let me give that a quick save and add productivity awesome oh actually no it doesn't actually appear to be working it looks like we're getting categories that are not productivity here so let's try debugging this let's see why that happens all right so after an eternity of looking around for that bug just kidding it was only a minute or two uh i realized that the issue was that we were not referencing our new computed property filtered so if we go all the way up to this page all the way up the page here to blog list you see here that it is taking in the props articles and it is currently getting articles that's this in order for us to reflect what we are getting from our computed property down here all we have to do is just type a variable with whatever this function name is right so filtered we just leave the little brackets out and now if i click this button perfect we have the functionality essentially right where we wanted it if we remove all posts except for productivity you can see that we only have productivity category posts on the right-hand side if we were to add some futurology now we got some futurology marketing social skills miscellaneous and so on and so forth that is essentially how you do it from start to finish uh like i said earlier if you guys have any issues with noxjs content i encourage you guys to check out the docs they're probably some of the best docs i've ever seen in any uh next module but for those of you that don't really know or rather just want a quick like copy paste method this is essentially all you need to do what this is going to be doing is grabbing the title the description the image the slug the date and the category rather properties from your front matter here so if i were to change this to productivity for example it would change this markdown post from marked sorry from a marketing category to a productivity category i don't want to do that so i'm just going to leave that there but you can do that with any other property as well so i hope that was helpful i hope you guys learned something if you guys have any questions feel free to ask i'm more than happy to help you guys just leave a comment down below as always like and subscribe it really does help me reach more people and i hope that you found that helpful have a great rest of the day

Channel: Saraev Media

Views: 709

Keywords: nuxtjs, tailwind, nuxt, nuxt/content, nuxt content, nuxt blog, nuxtjs blog, nuxtjs content, nuxtjs filter, nuxt filter, nuxtjs blog filter, nuxt blog filter, nuxt tailwind design, nuxtjs tailwind, nuxt tailwind, nuxt tailwind component, filter component nuxt, blog nuxt, blog component nuxt, nuxt component design

Id: BKw_fQP2EDA

Length: 27min 3sec (1623 seconds)

Published: Tue Feb 16 2021