[{"data":1,"prerenderedAt":1393},["ShallowReactive",2],{"blog-article-/blog/pagination-in-nuxt-content":3,"blog-surround-/blog/pagination-in-nuxt-content":1384},{"id":4,"title":5,"body":6,"canonical":1368,"date":1369,"description":1370,"extension":1371,"featured":1372,"image":1373,"meta":1374,"navigation":665,"ogImage":1376,"path":1377,"provider":1378,"published":665,"seo":1379,"stem":1380,"tags":1381,"url":1368,"__hash__":1383},"blog/blog/pagination-in-nuxt-content.md","Pagination in Nuxt Content",{"type":7,"value":8,"toc":1347},"minimark",[9,13,24,29,32,36,39,47,88,92,115,129,169,176,181,188,239,243,246,303,307,310,392,396,399,495,499,502,528,532,545,578,585,877,881,891,951,955,967,995,999,1017,1023,1030,1070,1080,1150,1154,1163,1222,1226,1242,1287,1291,1294,1297,1304,1308,1311,1343],[10,11,12],"p",{},"Nuxt content is by far my favorite feature of Nuxt. It allows me to easily write my blog posts in Markdown format yet add components on to the page if and when I need to. And I love the live edit where I can simply click and edit the text directly in the browser and it saves the code for me. Mind blowing feature.",[10,14,15,16,23],{},"Writing my content in markdown makes it then easy for me to copy those posts and paste them to ",[17,18,22],"a",{"href":19,"rel":20},"https://dev.to/debs_obrien",[21],"nofollow","my dev.to"," account with a canonical link to my site. I don't need a content management tool to write my posts and am quite happy using Nuxt content to write my post, push it to GitHub and have Netlify build and publish a new version of my static site.",[25,26,28],"h2",{"id":27},"why-pagination","Why Pagination",[10,30,31],{},"As I started to write more posts my blog page was getting very long and even though I had already split the posts into categories some of the categories were also getting quite long. This means the pages where handing a lot of content that needs to be scrolled and a lot of content that needs to be loaded on the page. Adding pagination would make for a better user experience but also better performance.",[25,33,35],{"id":34},"querying-your-endpoint","Querying your Endpoint",[10,37,38],{},"The first thing I did was try to get pagination on the main blog page and then worry about getting it to work on the categories. Nuxt content will fetch my markdown files from a directory inside the content folder.",[10,40,41,42,46],{},"Remember you can test your queries locally by adding ",[43,44,45],"code",{},"_content"," in your localhost URL and seeing the results of the data returned.",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-bash shiki shiki-themes github-light github-dark","http://localhost:3000/_content/articles?only=title&limit=9&skip=9\n","bash","",[43,55,56],{"__ignoreMap":53},[57,58,61,65,69,73,77,80,83,85],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sScJk","http://localhost:3000/_content/articles?only",[57,66,68],{"class":67},"sZZnC","=title",[57,70,72],{"class":71},"sVt8B","&limit",[57,74,76],{"class":75},"szBVR","=",[57,78,79],{"class":67},"9",[57,81,82],{"class":71},"&skip",[57,84,76],{"class":75},[57,86,87],{"class":67},"9\n",[25,89,91],{"id":90},"fetching-the-posts","Fetching the Posts",[10,93,94,95,98,99,102,103,106,107,110,111,114],{},"To fetch the data we use ",[43,96,97],{},"asyncData"," passing in ",[43,100,101],{},"$content"," and ",[43,104,105],{},"params"," so we can access them from the Nuxt context. Then we add a const of ",[43,108,109],{},"pageNo"," which will get the number of the page from the params and we use ",[43,112,113],{},"parseInt"," to convert it to a number. Note: At the moment I am using Nuxt 2 until Nuxt 3 can support Nuxt content.",[10,116,117,118,121,122,124,125,128],{},"I want to get 9 Articles per page so we create a const called ",[43,119,120],{},"getArticles"," and then use the ",[43,123,101],{}," method passing in the folder to where my posts are stored. We then add a condition using ",[43,126,127],{},".where",". We want to make sure we only publish posts that do not have published set to false.",[48,130,134],{"className":131,"code":132,"language":133,"meta":53,"style":53},"language-js shiki shiki-themes github-light github-dark","const getArticles = await $content('articles').fetch()\n","js",[43,135,136],{"__ignoreMap":53},[57,137,138,141,145,148,151,154,157,160,163,166],{"class":59,"line":60},[57,139,140],{"class":75},"const",[57,142,144],{"class":143},"sj4cs"," getArticles",[57,146,147],{"class":75}," =",[57,149,150],{"class":75}," await",[57,152,153],{"class":63}," $content",[57,155,156],{"class":71},"(",[57,158,159],{"class":67},"'articles'",[57,161,162],{"class":71},").",[57,164,165],{"class":63},"fetch",[57,167,168],{"class":71},"()\n",[10,170,171,172,175],{},"Make sure you always add the ",[43,173,174],{},".fetch()"," at the end of your query. I have very often forgotten this and wondered why I wasn't getting any data back.",[177,178,180],"h3",{"id":179},"fetch-only-posts-where-published-is-not-false","Fetch only posts where published is not false",[10,182,183,184,187],{},"In my posts I add ",[43,185,186],{},"published: false"," for those posts that are still a work in progress. That means I can still push them to GitHub but they won't get fetched by Nuxt content until I remove this from the yaml or set published to true. The reason I choose to use not equal to false instead of making it true was to basically not have to go back over all posts and add a condition to publish them.",[48,189,191],{"className":131,"code":190,"language":133,"meta":53,"style":53},"const getArticles = await $content('articles')\n  .where({ published: { $ne: false } })\n  .fetch()\n",[43,192,193,212,230],{"__ignoreMap":53},[57,194,195,197,199,201,203,205,207,209],{"class":59,"line":60},[57,196,140],{"class":75},[57,198,144],{"class":143},[57,200,147],{"class":75},[57,202,150],{"class":75},[57,204,153],{"class":63},[57,206,156],{"class":71},[57,208,159],{"class":67},[57,210,211],{"class":71},")\n",[57,213,215,218,221,224,227],{"class":59,"line":214},2,[57,216,217],{"class":71},"  .",[57,219,220],{"class":63},"where",[57,222,223],{"class":71},"({ published: { $ne: ",[57,225,226],{"class":143},"false",[57,228,229],{"class":71}," } })\n",[57,231,233,235,237],{"class":59,"line":232},3,[57,234,217],{"class":71},[57,236,165],{"class":63},[57,238,168],{"class":71},[177,240,242],{"id":241},"limit-the-amount-of-posts-returned","Limit the amount of posts returned",[10,244,245],{},"Next we want to limit the amount of posts that come back so that we only have 9 posts per page.",[48,247,249],{"className":131,"code":248,"language":133,"meta":53,"style":53},"const getArticles = await $content('articles')\n  .where({ published: { $ne: false } })\n  .limit(9)\n  .fetch()\n",[43,250,251,269,281,294],{"__ignoreMap":53},[57,252,253,255,257,259,261,263,265,267],{"class":59,"line":60},[57,254,140],{"class":75},[57,256,144],{"class":143},[57,258,147],{"class":75},[57,260,150],{"class":75},[57,262,153],{"class":63},[57,264,156],{"class":71},[57,266,159],{"class":67},[57,268,211],{"class":71},[57,270,271,273,275,277,279],{"class":59,"line":214},[57,272,217],{"class":71},[57,274,220],{"class":63},[57,276,223],{"class":71},[57,278,226],{"class":143},[57,280,229],{"class":71},[57,282,283,285,288,290,292],{"class":59,"line":232},[57,284,217],{"class":71},[57,286,287],{"class":63},"limit",[57,289,156],{"class":71},[57,291,79],{"class":143},[57,293,211],{"class":71},[57,295,297,299,301],{"class":59,"line":296},4,[57,298,217],{"class":71},[57,300,165],{"class":63},[57,302,168],{"class":71},[177,304,306],{"id":305},"skip-the-posts-based-on-page-number","Skip the posts based on page number",[10,308,309],{},"We then add a condition to skip the first 9 posts times the page number -1 so if on page 1, don't skip any. If on page 2 skip 9 etc. This is because we want to show the first page of posts and then the second page of posts and so on.",[48,311,313],{"className":131,"code":312,"language":133,"meta":53,"style":53},"const getArticles = await $content('articles')\n  .where({ published: { $ne: false } })\n  .limit(9)\n  .skip(9 * (pageNo - 1))\n  .fetch()\n",[43,314,315,333,345,357,383],{"__ignoreMap":53},[57,316,317,319,321,323,325,327,329,331],{"class":59,"line":60},[57,318,140],{"class":75},[57,320,144],{"class":143},[57,322,147],{"class":75},[57,324,150],{"class":75},[57,326,153],{"class":63},[57,328,156],{"class":71},[57,330,159],{"class":67},[57,332,211],{"class":71},[57,334,335,337,339,341,343],{"class":59,"line":214},[57,336,217],{"class":71},[57,338,220],{"class":63},[57,340,223],{"class":71},[57,342,226],{"class":143},[57,344,229],{"class":71},[57,346,347,349,351,353,355],{"class":59,"line":232},[57,348,217],{"class":71},[57,350,287],{"class":63},[57,352,156],{"class":71},[57,354,79],{"class":143},[57,356,211],{"class":71},[57,358,359,361,364,366,368,371,374,377,380],{"class":59,"line":296},[57,360,217],{"class":71},[57,362,363],{"class":63},"skip",[57,365,156],{"class":71},[57,367,79],{"class":143},[57,369,370],{"class":75}," *",[57,372,373],{"class":71}," (pageNo ",[57,375,376],{"class":75},"-",[57,378,379],{"class":143}," 1",[57,381,382],{"class":71},"))\n",[57,384,386,388,390],{"class":59,"line":385},5,[57,387,217],{"class":71},[57,389,165],{"class":63},[57,391,168],{"class":71},[177,393,395],{"id":394},"sort-the-posts-by-date","Sort the posts by date",[10,397,398],{},"Next we sort the posts by date in descending order so that the newest posts are on top.",[48,400,402],{"className":131,"code":401,"language":133,"meta":53,"style":53},"const getArticles = await $content('articles')\n  .where({ published: { $ne: false } })\n  .limit(9)\n  .skip(9 * (pageNo - 1))\n  .sortBy('date', 'desc')\n  .fetch()\n",[43,403,404,422,434,446,466,486],{"__ignoreMap":53},[57,405,406,408,410,412,414,416,418,420],{"class":59,"line":60},[57,407,140],{"class":75},[57,409,144],{"class":143},[57,411,147],{"class":75},[57,413,150],{"class":75},[57,415,153],{"class":63},[57,417,156],{"class":71},[57,419,159],{"class":67},[57,421,211],{"class":71},[57,423,424,426,428,430,432],{"class":59,"line":214},[57,425,217],{"class":71},[57,427,220],{"class":63},[57,429,223],{"class":71},[57,431,226],{"class":143},[57,433,229],{"class":71},[57,435,436,438,440,442,444],{"class":59,"line":232},[57,437,217],{"class":71},[57,439,287],{"class":63},[57,441,156],{"class":71},[57,443,79],{"class":143},[57,445,211],{"class":71},[57,447,448,450,452,454,456,458,460,462,464],{"class":59,"line":296},[57,449,217],{"class":71},[57,451,363],{"class":63},[57,453,156],{"class":71},[57,455,79],{"class":143},[57,457,370],{"class":75},[57,459,373],{"class":71},[57,461,376],{"class":75},[57,463,379],{"class":143},[57,465,382],{"class":71},[57,467,468,470,473,475,478,481,484],{"class":59,"line":385},[57,469,217],{"class":71},[57,471,472],{"class":63},"sortBy",[57,474,156],{"class":71},[57,476,477],{"class":67},"'date'",[57,479,480],{"class":71},", ",[57,482,483],{"class":67},"'desc'",[57,485,211],{"class":71},[57,487,489,491,493],{"class":59,"line":488},6,[57,490,217],{"class":71},[57,492,165],{"class":63},[57,494,168],{"class":71},[177,496,498],{"id":497},"set-the-next-page","Set the next page",[10,500,501],{},"Next page is set to true if the amount of articles received is equal to 9. This means we can then render our next page button if the condition is true.",[48,503,505],{"className":131,"code":504,"language":133,"meta":53,"style":53},"const nextPage = getArticles.length === 9\n",[43,506,507],{"__ignoreMap":53},[57,508,509,511,514,516,519,522,525],{"class":59,"line":60},[57,510,140],{"class":75},[57,512,513],{"class":143}," nextPage",[57,515,147],{"class":75},[57,517,518],{"class":71}," getArticles.",[57,520,521],{"class":143},"length",[57,523,524],{"class":75}," ===",[57,526,527],{"class":143}," 9\n",[177,529,531],{"id":530},"return-what-we-need","Return what we need",[10,533,534,535,537,538,541,542,544],{},"Our final step and one of the most important is to return our data which is our const of ",[43,536,120],{}," as well as return our ",[43,539,540],{},"nextPage"," and our ",[43,543,109],{},".",[48,546,548],{"className":131,"code":547,"language":133,"meta":53,"style":53},"return {\n  nextPage,\n  getArticles,\n  pageNo\n}\n",[43,549,550,558,563,568,573],{"__ignoreMap":53},[57,551,552,555],{"class":59,"line":60},[57,553,554],{"class":75},"return",[57,556,557],{"class":71}," {\n",[57,559,560],{"class":59,"line":214},[57,561,562],{"class":71},"  nextPage,\n",[57,564,565],{"class":59,"line":232},[57,566,567],{"class":71},"  getArticles,\n",[57,569,570],{"class":59,"line":296},[57,571,572],{"class":71},"  pageNo\n",[57,574,575],{"class":59,"line":385},[57,576,577],{"class":71},"}\n",[10,579,580,581,584],{},"The final code looks something like this. Note I have the layout properties in here so that all my blog pages use the same layout which I named blog. I also added a const called ",[43,582,583],{},"numArticles"," making it equal to 9 just to keep things dry and finally I added an if statement to deal with errors incase there are no articles returned. This will render my error page with the message of 'no articles found'",[48,586,590],{"className":587,"code":588,"language":589,"meta":53,"style":53},"language-jsx shiki shiki-themes github-light github-dark","export default {\n  layout: 'blog',\n  async asyncData({ $content, params }) {\n    const pageNo = parseInt(params.number)\n    const numArticles = 9\n\n    const getArticles = await $content('articles')\n      .where({ published: { $ne: false } })\n      .limit(numArticles)\n      .skip(numArticles * (pageNo - 1))\n      .sortBy('date', 'desc')\n      .fetch()\n\n    if (!getArticles.length)\n      return error({ statusCode: 404, message: 'No articles found!' })\n\n    const nextPage = getArticles.length === numArticles\n    getArticles\n    return {\n      nextPage,\n      getArticles,\n      pageNo\n    }\n  }\n}\n","jsx",[43,591,592,602,613,634,650,661,667,686,700,710,731,748,757,762,781,805,810,828,834,842,848,854,860,866,872],{"__ignoreMap":53},[57,593,594,597,600],{"class":59,"line":60},[57,595,596],{"class":75},"export",[57,598,599],{"class":75}," default",[57,601,557],{"class":71},[57,603,604,607,610],{"class":59,"line":214},[57,605,606],{"class":71},"  layout: ",[57,608,609],{"class":67},"'blog'",[57,611,612],{"class":71},",\n",[57,614,615,618,621,624,627,629,631],{"class":59,"line":232},[57,616,617],{"class":75},"  async",[57,619,620],{"class":63}," asyncData",[57,622,623],{"class":71},"({ ",[57,625,101],{"class":626},"s4XuR",[57,628,480],{"class":71},[57,630,105],{"class":626},[57,632,633],{"class":71}," }) {\n",[57,635,636,639,642,644,647],{"class":59,"line":296},[57,637,638],{"class":75},"    const",[57,640,641],{"class":143}," pageNo",[57,643,147],{"class":75},[57,645,646],{"class":63}," parseInt",[57,648,649],{"class":71},"(params.number)\n",[57,651,652,654,657,659],{"class":59,"line":385},[57,653,638],{"class":75},[57,655,656],{"class":143}," numArticles",[57,658,147],{"class":75},[57,660,527],{"class":143},[57,662,663],{"class":59,"line":488},[57,664,666],{"emptyLinePlaceholder":665},true,"\n",[57,668,670,672,674,676,678,680,682,684],{"class":59,"line":669},7,[57,671,638],{"class":75},[57,673,144],{"class":143},[57,675,147],{"class":75},[57,677,150],{"class":75},[57,679,153],{"class":63},[57,681,156],{"class":71},[57,683,159],{"class":67},[57,685,211],{"class":71},[57,687,689,692,694,696,698],{"class":59,"line":688},8,[57,690,691],{"class":71},"      .",[57,693,220],{"class":63},[57,695,223],{"class":71},[57,697,226],{"class":143},[57,699,229],{"class":71},[57,701,703,705,707],{"class":59,"line":702},9,[57,704,691],{"class":71},[57,706,287],{"class":63},[57,708,709],{"class":71},"(numArticles)\n",[57,711,713,715,717,720,723,725,727,729],{"class":59,"line":712},10,[57,714,691],{"class":71},[57,716,363],{"class":63},[57,718,719],{"class":71},"(numArticles ",[57,721,722],{"class":75},"*",[57,724,373],{"class":71},[57,726,376],{"class":75},[57,728,379],{"class":143},[57,730,382],{"class":71},[57,732,734,736,738,740,742,744,746],{"class":59,"line":733},11,[57,735,691],{"class":71},[57,737,472],{"class":63},[57,739,156],{"class":71},[57,741,477],{"class":67},[57,743,480],{"class":71},[57,745,483],{"class":67},[57,747,211],{"class":71},[57,749,751,753,755],{"class":59,"line":750},12,[57,752,691],{"class":71},[57,754,165],{"class":63},[57,756,168],{"class":71},[57,758,760],{"class":59,"line":759},13,[57,761,666],{"emptyLinePlaceholder":665},[57,763,765,768,771,774,777,779],{"class":59,"line":764},14,[57,766,767],{"class":75},"    if",[57,769,770],{"class":71}," (",[57,772,773],{"class":75},"!",[57,775,776],{"class":71},"getArticles.",[57,778,521],{"class":143},[57,780,211],{"class":71},[57,782,784,787,790,793,796,799,802],{"class":59,"line":783},15,[57,785,786],{"class":75},"      return",[57,788,789],{"class":63}," error",[57,791,792],{"class":71},"({ statusCode: ",[57,794,795],{"class":143},"404",[57,797,798],{"class":71},", message: ",[57,800,801],{"class":67},"'No articles found!'",[57,803,804],{"class":71}," })\n",[57,806,808],{"class":59,"line":807},16,[57,809,666],{"emptyLinePlaceholder":665},[57,811,813,815,817,819,821,823,825],{"class":59,"line":812},17,[57,814,638],{"class":75},[57,816,513],{"class":143},[57,818,147],{"class":75},[57,820,518],{"class":71},[57,822,521],{"class":143},[57,824,524],{"class":75},[57,826,827],{"class":71}," numArticles\n",[57,829,831],{"class":59,"line":830},18,[57,832,833],{"class":71},"    getArticles\n",[57,835,837,840],{"class":59,"line":836},19,[57,838,839],{"class":75},"    return",[57,841,557],{"class":71},[57,843,845],{"class":59,"line":844},20,[57,846,847],{"class":71},"      nextPage,\n",[57,849,851],{"class":59,"line":850},21,[57,852,853],{"class":71},"      getArticles,\n",[57,855,857],{"class":59,"line":856},22,[57,858,859],{"class":71},"      pageNo\n",[57,861,863],{"class":59,"line":862},23,[57,864,865],{"class":71},"    }\n",[57,867,869],{"class":59,"line":868},24,[57,870,871],{"class":71},"  }\n",[57,873,875],{"class":59,"line":874},25,[57,876,577],{"class":71},[25,878,880],{"id":879},"rendering-the-posts","Rendering the posts",[10,882,883,884,887,888,890],{},"The next step is to render the posts. We do this by using ",[43,885,886],{},"v-for"," and looping over the ",[43,889,120],{}," and rendering each article using the 'PostsCard' component.",[48,892,894],{"className":587,"code":893,"language":589,"meta":53,"style":53},"\u003Cdiv v-for=\"article of getArticles\" :key=\"article.slug\" class=\"flex flex-col\">\n  \u003CBlogPostCard :item=\"article\" />\n\u003C/div>\n",[43,895,896,928,942],{"__ignoreMap":53},[57,897,898,901,905,908,910,913,917,920,922,925],{"class":59,"line":60},[57,899,900],{"class":71},"\u003C",[57,902,904],{"class":903},"s9eBZ","div",[57,906,907],{"class":63}," v-for",[57,909,76],{"class":75},[57,911,912],{"class":67},"\"article of getArticles\"",[57,914,916],{"class":915},"s7hpK"," :key=\"article.slug\"",[57,918,919],{"class":63}," class",[57,921,76],{"class":75},[57,923,924],{"class":67},"\"flex flex-col\"",[57,926,927],{"class":71},">\n",[57,929,930,933,936,939],{"class":59,"line":214},[57,931,932],{"class":71},"  \u003C",[57,934,935],{"class":143},"BlogPostCard",[57,937,938],{"class":915}," :item=\"article\"",[57,940,941],{"class":71}," />\n",[57,943,944,947,949],{"class":59,"line":232},[57,945,946],{"class":71},"\u003C/",[57,948,904],{"class":903},[57,950,927],{"class":71},[177,952,954],{"id":953},"rendering-the-pagination-component","Rendering the Pagination Component",[10,956,957,958,960,961,963,964,966],{},"We then render the pagination component which has a prop of ",[43,959,540],{}," and a prop of ",[43,962,109],{},". We want the first page to be 1 and the ",[43,965,540],{}," will be either true or false depending on if the length of our articles is equal to 9.",[48,968,970],{"className":587,"code":969,"language":589,"meta":53,"style":53},"\u003CPagination :nextPage=\"nextPage\" :pageNo=\"1\" urlPrefix=\"/blog/all\" />\n",[43,971,972],{"__ignoreMap":53},[57,973,974,976,979,982,985,988,990,993],{"class":59,"line":60},[57,975,900],{"class":71},[57,977,978],{"class":143},"Pagination",[57,980,981],{"class":915}," :nextPage=\"nextPage\"",[57,983,984],{"class":915}," :pageNo=\"1\"",[57,986,987],{"class":63}," urlPrefix",[57,989,76],{"class":75},[57,991,992],{"class":67},"\"/blog/all\"",[57,994,941],{"class":71},[25,996,998],{"id":997},"creating-dynamic-category-pages","Creating Dynamic Category Pages",[10,1000,1001,1002,1005,1006,1009,1010,1013,1014,544],{},"We have pagination on the main blog page but now we need to create pages for each category so we can have pagination for the Nuxt category, React category, Testing category etc. In Nuxt we can create dynamic pages by creating a folder with ",[43,1003,1004],{},"_category"," and inside it a folder with ",[43,1007,1008],{},"_number",". This will give you a url of ",[43,1011,1012],{},"/blog/category/number"," but as it is dynamic it will render something like this ",[43,1015,1016],{},"/blog/nuxt/1",[10,1018,1019,1020,1022],{},"We then create an index file inside the ",[43,1021,1008],{}," folder. This will be the page that gets rendered containing the blog posts for that category.",[10,1024,1025,1026,1029],{},"The main difference between this and the main blog page is adding the ",[43,1027,1028],{},"selectedTag"," to our data with the value of the category we get back from our route params.",[48,1031,1033],{"className":587,"code":1032,"language":589,"meta":53,"style":53},"data() {\n      return {\n        selectedTag: this.$route.params.category\n      }\n    },\n\n",[43,1034,1035,1043,1049,1060,1065],{"__ignoreMap":53},[57,1036,1037,1040],{"class":59,"line":60},[57,1038,1039],{"class":63},"data",[57,1041,1042],{"class":71},"() {\n",[57,1044,1045,1047],{"class":59,"line":214},[57,1046,786],{"class":75},[57,1048,557],{"class":71},[57,1050,1051,1054,1057],{"class":59,"line":232},[57,1052,1053],{"class":71},"        selectedTag: ",[57,1055,1056],{"class":143},"this",[57,1058,1059],{"class":71},".$route.params.category\n",[57,1061,1062],{"class":59,"line":296},[57,1063,1064],{"class":71},"      }\n",[57,1066,1067],{"class":59,"line":385},[57,1068,1069],{"class":71},"    },\n",[10,1071,1072,1073,1076,1077,544],{},"We also need to add a computed property to filter the articles by the selected Tag. Using the ",[43,1074,1075],{},".filter()"," method it will go through each article to see if the selected Tag, which we get from our route params, is found inside the tags array that is added to the yaml of each article. The tags array looks something like this ",[43,1078,1079],{},"tags: [nuxt]",[48,1081,1083],{"className":587,"code":1082,"language":589,"meta":53,"style":53},"    computed: {\n      filteredArticles() {\n        return this.getArticles.filter(article =>\n          article.tags.includes(this.selectedTag)\n        )\n      }\n    }\n",[43,1084,1085,1093,1100,1122,1137,1142,1146],{"__ignoreMap":53},[57,1086,1087,1090],{"class":59,"line":60},[57,1088,1089],{"class":63},"    computed",[57,1091,1092],{"class":71},": {\n",[57,1094,1095,1098],{"class":59,"line":214},[57,1096,1097],{"class":63},"      filteredArticles",[57,1099,1042],{"class":71},[57,1101,1102,1105,1108,1111,1114,1116,1119],{"class":59,"line":232},[57,1103,1104],{"class":75},"        return",[57,1106,1107],{"class":143}," this",[57,1109,1110],{"class":71},".getArticles.",[57,1112,1113],{"class":63},"filter",[57,1115,156],{"class":71},[57,1117,1118],{"class":626},"article",[57,1120,1121],{"class":75}," =>\n",[57,1123,1124,1127,1130,1132,1134],{"class":59,"line":296},[57,1125,1126],{"class":71},"          article.tags.",[57,1128,1129],{"class":63},"includes",[57,1131,156],{"class":71},[57,1133,1056],{"class":143},[57,1135,1136],{"class":71},".selectedTag)\n",[57,1138,1139],{"class":59,"line":385},[57,1140,1141],{"class":71},"        )\n",[57,1143,1144],{"class":59,"line":488},[57,1145,1064],{"class":71},[57,1147,1148],{"class":59,"line":669},[57,1149,865],{"class":71},[25,1151,1153],{"id":1152},"rendering-our-filtered-posts","Rendering our filtered posts",[10,1155,1156,1157,1160,1161,544],{},"Now when rendering our posts we need to use the ",[43,1158,1159],{},"filteredArticles"," instead of the ",[43,1162,120],{},[48,1164,1166],{"className":587,"code":1165,"language":589,"meta":53,"style":53},"\u003Cdiv\n  v-for=\"article of filteredArticles\"\n  :key=\"article.slug\"\n  class=\"flex flex-col\"\n>\n  \u003CBlogPostCard :item=\"article\" />\n\u003C/div>\n",[43,1167,1168,1175,1185,1190,1200,1204,1214],{"__ignoreMap":53},[57,1169,1170,1172],{"class":59,"line":60},[57,1171,900],{"class":71},[57,1173,1174],{"class":903},"div\n",[57,1176,1177,1180,1182],{"class":59,"line":214},[57,1178,1179],{"class":63},"  v-for",[57,1181,76],{"class":75},[57,1183,1184],{"class":67},"\"article of filteredArticles\"\n",[57,1186,1187],{"class":59,"line":232},[57,1188,1189],{"class":915},"  :key=\"article.slug\"\n",[57,1191,1192,1195,1197],{"class":59,"line":296},[57,1193,1194],{"class":63},"  class",[57,1196,76],{"class":75},[57,1198,1199],{"class":67},"\"flex flex-col\"\n",[57,1201,1202],{"class":59,"line":385},[57,1203,927],{"class":71},[57,1205,1206,1208,1210,1212],{"class":59,"line":488},[57,1207,932],{"class":71},[57,1209,935],{"class":143},[57,1211,938],{"class":915},[57,1213,941],{"class":71},[57,1215,1216,1218,1220],{"class":59,"line":669},[57,1217,946],{"class":71},[57,1219,904],{"class":903},[57,1221,927],{"class":71},[177,1223,1225],{"id":1224},"rendering-the-pagination","Rendering the pagination",[10,1227,1228,1229,1232,1233,102,1235,1237,1238,1241],{},"For our pagination component we need to pass in the prop of ",[43,1230,1231],{},"prevPage"," and set it to true of false if the page number is greater than 1. We also pass in our ",[43,1234,540],{},[43,1236,109],{}," props and finally our ",[43,1239,1240],{},"urlPrefix"," which gets our category from the route params.",[48,1243,1245],{"className":587,"code":1244,"language":589,"meta":53,"style":53},"\u003CPagination\n  :prevPage=\"pageNo > 1\"\n  :nextPage=\"nextPage\"\n  :pageNo=\"pageNo\"\n  :urlPrefix=\"`/blog/${this.$route.params.category}`\"\n/>\n",[43,1246,1247,1254,1262,1267,1272,1282],{"__ignoreMap":53},[57,1248,1249,1251],{"class":59,"line":60},[57,1250,900],{"class":71},[57,1252,1253],{"class":143},"Pagination\n",[57,1255,1256,1259],{"class":59,"line":214},[57,1257,1258],{"class":915},"  :prevPage=\"pageNo",[57,1260,1261],{"class":71}," > 1\"\n",[57,1263,1264],{"class":59,"line":232},[57,1265,1266],{"class":71},"  :nextPage=\"nextPage\"\n",[57,1268,1269],{"class":59,"line":296},[57,1270,1271],{"class":71},"  :pageNo=\"pageNo\"\n",[57,1273,1274,1277,1279],{"class":59,"line":385},[57,1275,1276],{"class":71},"  :urlPrefix=\"`/blog/${",[57,1278,1056],{"class":143},[57,1280,1281],{"class":71},".$route.params.category}`\"\n",[57,1283,1284],{"class":59,"line":488},[57,1285,1286],{"class":71},"/>\n",[25,1288,1290],{"id":1289},"conclusion","Conclusion",[10,1292,1293],{},"I now have pagination running on my blog and a page for each category and number. These pages are dynamic and upon building my static site, Nuxt will pre-render a page for each of these dynamic pages. This will enhance performance and give users a much better experience.",[10,1295,1296],{},"There is one thing I am not too happy with. My main blog page is practically a copy of the dynamic index page under the category/number folder. This means I have to maintain this code twice and that is never good. There are a few ways around this.",[10,1298,1299,1300,1303],{},"I could create a middleware that intercepts this route and brings me to the all category page 1 route. I could also create a Netlify redirect that will do the same thing. However I do like having the blog page route of just ",[43,1301,1302],{},"/blog"," so I am undecided on what the best solution here is. If you have any suggestions let me know.",[25,1305,1307],{"id":1306},"useful-links","Useful Links",[10,1309,1310],{},"My code is fully open source so clone, copy, or use whatever you like. Have fun.",[1312,1313,1314,1322,1329,1336],"ul",{},[1315,1316,1317],"li",{},[17,1318,1321],{"href":1319,"rel":1320},"https://github.com/debs-obrien/debbie.codes/tree/master/pages/blog",[21],"Code on GitHub",[1315,1323,1324],{},[17,1325,1328],{"href":1326,"rel":1327},"https://debbie.codes/blog",[21],"Blog Page",[1315,1330,1331],{},[17,1332,1335],{"href":1333,"rel":1334},"https://content.nuxtjs.org/advanced#api-endpoint",[21],"Nuxt Content API Endpoint",[1315,1337,1338],{},[17,1339,1342],{"href":1340,"rel":1341},"https://nuxtjs.org/tutorials/creating-blog-with-nuxt-content",[21],"Crate a Blog with Nuxt Content",[1344,1345,1346],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":53,"searchDepth":214,"depth":214,"links":1348},[1349,1350,1351,1359,1362,1363,1366,1367],{"id":27,"depth":214,"text":28},{"id":34,"depth":214,"text":35},{"id":90,"depth":214,"text":91,"children":1352},[1353,1354,1355,1356,1357,1358],{"id":179,"depth":232,"text":180},{"id":241,"depth":232,"text":242},{"id":305,"depth":232,"text":306},{"id":394,"depth":232,"text":395},{"id":497,"depth":232,"text":498},{"id":530,"depth":232,"text":531},{"id":879,"depth":214,"text":880,"children":1360},[1361],{"id":953,"depth":232,"text":954},{"id":997,"depth":214,"text":998},{"id":1152,"depth":214,"text":1153,"children":1364},[1365],{"id":1224,"depth":232,"text":1225},{"id":1289,"depth":214,"text":1290},{"id":1306,"depth":214,"text":1307},null,"2022-03-26","My blog was getting bigger and bigger and so time to add pagination. I am using Nuxt Content to manage my blog posts. So how do I add pagination to my blog? Let me show you how I did it.","md",false,"v1648296331/debbie.codes/blog/2022/pagination_2x_ppog9g.png",{"loading":1375},"eager","https://res.cloudinary.com/debsobrien/image/upload/f_webp,q_80,c_fit,w_480/v1648296331/debbie.codes/blog/2022/pagination_2x_ppog9g.png","/blog/pagination-in-nuxt-content","cloudinary",{"title":5,"description":1370},"blog/pagination-in-nuxt-content",[1382],"nuxt","ywgwmRvn21NJiYz3kZWWuWlfcHtYtrGGTulNyOjais4",[1385,1389],{"title":1386,"path":1387,"stem":1388,"children":-1},"Being an Imposter","/blog/being-an-imposter","blog/being-an-imposter",{"title":1390,"path":1391,"stem":1392,"children":-1},"Debugging Tests in Playwright","/blog/debugging-tests-in-playwright","blog/debugging-tests-in-playwright",1790839747947]