[{"data":1,"prerenderedAt":119},["ShallowReactive",2],{"/2025/09/10-adding-search-to-nuxt-content":3},{"id":4,"title":5,"body":6,"date":110,"description":53,"extension":111,"meta":112,"navigation":113,"path":114,"robots":115,"seo":116,"stem":117,"__hash__":118},"posts/2025/09/10 adding-search-to-nuxt-content.md","10 Adding Search To Nuxt Content",{"type":7,"value":8,"toc":107},"minimark",[9,18,21,35,37,40,54,56,70,78,80,94,102,104],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"adding-search-to-nuxt-content","Adding Search to Nuxt Content",[19,20],"br",{},[22,23,24,25,34],"p",{},"In this blog, finding a post that contains a certain word can be hard. So, I was looking for a way to easily implement a search feature.Nuxt content doc has a nice write up on ",[26,27,33],"a",{"className":28,"href":30,"rel":31},[29],"text-blue-600","https://content.nuxt.com/docs/advanced/fulltext-search",[32],"nofollow","full-text search",", so I started from there.",[19,36],{},[22,38,39],{},"The example in the doc uses Nuxt UI, but I managed to use just a simple input tag:",[41,42,43],"code-block",{},[44,45,50],"pre",{"className":46,"code":48,"language":49},[47],"language-text","\u003Cinput v-model=\"query\" type=\"text\" placeholder=\"Search...\" />  \n","text",[51,52,48],"code",{"__ignoreMap":53},"",[19,55],{},[22,57,58,59,65,66,69],{},"For the search package, I decided to use ",[26,60,64],{"className":61,"href":62,"rel":63},[29],"https://lucaong.github.io/minisearch/",[32],"minisearch"," which is very easy to use. Just on the implementation side, I need to add check on the ",[51,67,68],{},"data.value"," to pass typescript null check.",[41,71,72],{},[44,73,76],{"className":74,"code":75,"language":49},[47],"if (data.value) {\n  miniSearch.addAll(toValue(data.value))\n}\n",[51,77,75],{"__ignoreMap":53},[19,79],{},[22,81,82,83,86,87,93],{},"One additional thing is the example will display whole content of the page. However, I wanted to limit it to few rows. One option is to use textarea and set it to readonly, but it's not quite the purpose of text area. Tailwind has ",[51,84,85],{},"truncate"," class but it doesn't limit based on number of lines. Tailwind v3.3, however, has ",[26,88,92],{"className":89,"href":90,"rel":91},[29],"https://tailwindcss.com/docs/line-clamp",[32],"line-clamp"," class built-in which works perfectly in my case.",[41,95,96],{},[44,97,100],{"className":98,"code":99,"language":49},[47],"\u003Cp class=\"text-gray-600 text-xs line-clamp-3\">{{ link.content }}\u003C/p>\n",[51,101,99],{"__ignoreMap":53},[19,103],{},[22,105,106],{},"Check it out by clicking the search button above.",{"title":53,"searchDepth":108,"depth":108,"links":109},2,[],"2025-09-10T00:00:00.000Z","md",{},true,"/2025/09/10-adding-search-to-nuxt-content",null,{"title":5,"description":53},"2025/09/10 adding-search-to-nuxt-content","FOX5NZ4G1l8BXKIYSbMZzLMwsjJZIlvvNEY9wuHuWBs",1785167453227]