--- title: "Tim Tries Nuxt 3 & Algolia with Jakub Andrzejewski" description: "Sometimes I try out tech or web services for the first time. I give feedback as I go, in real-time. This is the #TimTries Series. In this episode, I try out the Algolia #Nuxt3 module made by Jakub Andrzejewski." date: "2022-07-09T12:46:18.000Z" url: "https://timbenniks.dev/videos/tim/038-yzh1l740tno" youtube_url: "https://www.youtube.com/watch?v=yZh1l740tNo" playlist: "tim" image: "https://i.ytimg.com/vi/yZh1l740tNo/maxresdefault.jpg" tags: ["api-design", "performance", "frontend", "developer-experience"] --- # Tim Tries Nuxt 3 & Algolia with Jakub Andrzejewski Sometimes I try out tech or web services for the first time. I give feedback as I go, in real-time. This is the #TimTries Series. In this episode, I try out the Algolia #Nuxt3 module made by Jakub Andrzejewski. Watch on YouTube: https://www.youtube.com/watch?v=yZh1l740tNo ## Transcript shall we load no no they are probably releasing some kind of a version new version or seriously while we record a video nextgs.org is going down are you kidding me what is up welcome back to another tim tries and i know i haven't done one in a while but we're back and so in tim tries videos i try out stuff without actually knowing it before so i kind of rely on my experience i try something out and i give you feedback along the way so i'm speaking with jakub androszewski now i'm not sure if i said that name correctly i do apologize but when we start our interview i'll just ask for his name and he can say it properly jakob works at few storefront and he built this really cool next three algolia module and so in this video i'll be interviewing jacob a little bit and then we'll just dive into the code and work with his module and he will just guide me through it and i'm really excited to see if this is the way forward when using knux 3 and algolia all right here we go um so before we go on can you just say your name the way it's supposed to be said because in the intro i probably butchered it no it wasn't that bad so in polish we say jakub but it can easily be said in an english way so the jacob one also okay and your last name uh andrzejevski so i suppose this one will be much harder anyways awesome thank you for that um and so let's talk about what you build and what we will be showing together on the video so what did you build so i built a module that allows nax users to easily connect to algolia which is quite popular search engine so by implementing in a way implementing the module in a way that max does it for other modules it allows you to very quickly jump into the next project into like connecting the algolia to it and having a really really fast search experience so how about we just try it right so i'll just start a new project and i already have an algolia index and you just guide me through it and for this video series i don't prepare i just give my feedback and especially because this is a new nox3 rc release not a lot of people have used it but you already made a whole module so i just want to see how that feels how it works and how to get started right so let's just share my screen and we start from basics like there's nothing all right so we're literally starting in my websites folder here there's nothing so to get started with the next three project we go for this right and then init that's it oh let's get started and it's just ridiculously fast isn't it this is just um i do think we need to install so let's do that sure next package next project comes without any installed yeah so always remember to run yarn or npm install exactly so let's just open this and see what we have here so we just get like a next welcome and our convict but it's all empty so let's just quickly run this and see what we have again so fast it's really fast experience supports of it yeah yeah exactly and so this is what we received out of the box and of course this is getting started but we need our algolia stuff right so um before we go into code i actually have an algolia instance here because i've used this before and i even have here you can see it a videos index so we all know i like to make videos we're in one now and so basically this is not all my latest because i haven't used it in a bit but this is like 60 or 65 videos so we can use this is the search um however we need to get started right and so this is the docs that you have written yeah just go like this so we can see it a bit better let me zoom in just a little here we go so let's just get it going and start installing things so the process of adding algolia to your next project is relatively simple you only need to add one dependency which is the next js up next js slash algolia yeah and that's basically that already happened yeah yeah i'm sure and basically just register it in the modules array just like the one in the example let's let's do that now so what we need is modules and of course we don't have any options right now but that's not going to happen right right now we need a bit more sure we need to put two things from our algolia admin dashboard which are the search api and the application id yep and i'm already quite intrigued because when i look at this it says light is true an instant search is true and so because what i know when i used algolia it was like super heavy back in the day in few two it's like megabytes of javascript that came on my page and so when you add light here what does that signify so basically the light option is disabled like enabled by default so you are only fetching the the code from the live version and so this api key i will invalidate it after a video so it won't help you to steal my api key however this is only a search api key so it doesn't mean that you can change my index with this however it will go away soon anyways so now we've added this and we're gonna actually well nothing happened for now right because we need to add something in here i imagine it's a setup script um i am let's see you probably have written something in the docs for that and usage it should be in the usage yes yeah so let's just go for this use search composable i imagine that's a good place to start right exactly this is the the most basic and the most default search that you can also you would need in your application so when i do this um let's talk about what a composable is because i think between us that's quite clear but is that how do you feel that um others like is this like a really common thing by now do you use composables yes i would say that the approach to use composables is quite popular right now basically if you look at other modules that maxjs is currently producing click next community or the fully community modules like the ones that are not part of the next community organization they all use some sort of composable because you do async stuff here right yeah exactly so if you uh call the usage and maybe i will just explain step by step what is going on here so yeah what do we do in the line eight is that we are calling the use search composable but we are not only calling it we are also passing a parameter and yes parameters inside yeah which is the videos here it is a the index name yeah so this is that index so these are my sizes here yeah exactly so what we do here is that we are let's say covering some of the parts that were common for all application algolia search functionality so you are passing the index here and on the left side of the equation you have this you are the structuring two things result and a search search is just the search functionality search method which is as you already saw asynchronous so what we do here is in unmounted lifecycle hook we will asynchronously call search method from the usage composable and it will pass a query with some some more some of course right yeah exactly because we are doing a video about next yes exactly and this is just a method that is asynchronously calling the algolia api and what we have in the second the structured property of your search is the result and this is the reactive property that will be populated after the search method is fulfilled with the data from the algolia api okay so so what we can do right now is just what you are doing here is just to display it in our template and see what it contains and the cool thing is here that your you search system here makes this one reactive so you don't have to do that yourself in the setup function anymore that's really handy so let's just go back to our local host then it's so fast there it is it's very cool and it already works and so wait let me just quickly see what we did here because it it already works it's really fast so we just queried next in my videos index and the result is now that i received some hits and so can you tell me in what it is searching right now is it in the title in the slug how does that work so basically it searches for a query so some appearance of a word in all your indexes so no matter what okay no matter what and look you can already see here that it found it in this case the highlighted result is actually the title look and they highlighted it with like an emphasis here so it's really cool that you get that back as well let's have a look what other feature would you like to show me based on what we have now what is a good start okay so i would recommend to try out the vio instant search okay support so what we'll do here is we'll add here instant search instant search i'm not sure if there is auto completion yeah i thought it would actually do that but it didn't we are in pipeline right yeah yeah but it can be the new version because next we recently released a new version with this computer exactly so not all let's say scenarios are covered yet yeah we'll open up a documentation site with the vo instant search algolia dot not next js you have it already yeah there we go exactly so it should be um shall we load no no they are probably releasing some kind of a version new version or seriously while we record a video nextgs.org is going down are you kidding me okay well um how about you just tell me what to do sure so for instance search you would need the it is an object and inside of an object you would have a property called theme and inside of it there is a property theme and set it to string algolia right a few moments later all right um we have the code and i'm just going to put it in here then the index name is videos but we're going to do it like this and i think you made that typo because video is oops no worries and we also what we need here is to have the search client yeah so what we need to do here what we could do here is to use another composable caused called use algolia and you can just call it like const algolia equals use algolia i love that it auto resolves all these composables makes it so easy sure and yeah and that should be it let's see how the result looks like so we get a search box and we get hits well let's see okay something didn't work or oh suspense stuff that shouldn't be an issue is it is the project running it should be running it is running so approximately 10 hours later so feel free slash yes no okay sorry it's longer yeah you mean like this or like this yeah yeah and try this one yes so welcome to the everlasting esm import issue but it's fixed i love it we did it yeah so it doesn't look great but it already comes with some kind of let's say styling and i think we also need to import the let me just actually works really well yeah yeah it works but it also should come with this css let me just check ah we probably need to separately load that in now as an import as well instant search dot css dot css slash themes slash yeah algolia dot css yeah and let's see this yeah yeah this is the name of the package nice yeah so usually side note this is done automatically yeah but due to the fact that as i said the way of importing changed the recent release it now yeah you need to to do it that way but it will be fixed i promise but it actually worked really well even though like this is the thing right we are in flux now between knux 2 and next three and few three packages and few two packages and esm imports um it is the way it is and it works so dude i really want to thank you because if you just do your default out of the box search it works like that and that's what we want to see so yeah try it out and also build on top of that that's what i did and i really enjoyed that wait i i really want to dive into this and do a bit more with it so anyways thank you so much jakub and hope to see you soon cheers cheers