[{"data":1,"prerenderedAt":297},["ShallowReactive",2],{"blog-post-query-prismic-documents":3,"recent-posts":230},{"id":4,"uid":5,"url":6,"type":7,"href":8,"tags":9,"first_publication_date":10,"last_publication_date":11,"slugs":12,"linked_documents":16,"lang":17,"alternate_languages":18,"data":19},"XapCtxAAAEj6rLmo","query-prismic-documents",null,"blog_posts","https:\u002F\u002Fmarks-personal-website.cdn.prismic.io\u002Fapi\u002Fv2\u002Fdocuments\u002Fsearch?ref=auzrLRIAACcAt6BE&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22XapCtxAAAEj6rLmo%22%29+%5D%5D",[],"2019-10-19T00:10:28+0000","2020-12-12T08:09:35+0000",[13,14,15],"how-to-query-prismic-documents-in-nuxt-step-by-step-guide","how-to-query-prismic-documents-in-nuxt","how-to-query-documents-in-nuxt-and-prismic",[],"en-us",[],{"title":20,"date":25,"description":26,"image":31,"content":42},[21],{"type":22,"text":23,"spans":24},"heading1","How to Query Prismic Documents in Nuxt (Step-By-Step Guide)",[],"2019-10-18",[27],{"type":28,"text":29,"spans":30},"heading2","Is filtering through certain blog posts difficult to do on a headless CMS? I'll show you how to query for Prismic documents in Nuxt with ease.",[],{"dimensions":32,"alt":35,"copyright":6,"url":36,"id":37,"edit":38},{"width":33,"height":34},1920,1080,"how to query prismic documents in nuxt","https:\u002F\u002Fimages.prismic.io\u002Fmarks-personal-website\u002Ff245cb8392c03effc85728e586341d28f4e446e0_query-in-nuxt-and-prismic.jpg?auto=compress,format","XapCNxAAACMArLdx",{"x":39,"y":39,"zoom":40,"background":41},0,1,"#fff",[43,47,51,54,57,60,63,66,69,72,75,78,86,89,98,101,104,107,110,113,116,119,127,134,137,140,146,149,152,155,163,166,169,172,175,178,194,197,201,208,215,218,221,224,227],{"type":44,"text":45,"spans":46},"heading3","Intro",[],{"type":48,"text":49,"spans":50},"paragraph","Managing a website takes more work than a simple mouse click to get it up and running.",[],{"type":48,"text":52,"spans":53},"Storing the content, creating, and optimizing it to be able to query documents takes time and effort. ",[],{"type":48,"text":55,"spans":56},"Creating an optimal user experience is a hefty task for people to accomplish from time to time.",[],{"type":48,"text":58,"spans":59},"Thus, choosing the software that's necessary to make this all happen needs to be taken under consideration.",[],{"type":48,"text":61,"spans":62},"Back in the day, choosing something like WordPress and a hosting service for managing blog post documents would do the trick.",[],{"type":48,"text":64,"spans":65},"But now, there are many options to choose from to query blog post documents.",[],{"type":48,"text":67,"spans":68},"Traditional ways of creating a website are becoming overshadowed by statically generated ones.",[],{"type":48,"text":70,"spans":71},"A headless CMS such as Prismic is a serious competitor against WordPress.",[],{"type":44,"text":73,"spans":74},"How my website was previously built?",[],{"type":48,"text":76,"spans":77},"In the first few months of 2019, I built and managed my very first website with WordPress.",[],{"type":79,"url":80,"alt":81,"copyright":6,"dimensions":82,"id":83,"edit":84},"image","https:\u002F\u002Fimages.prismic.io\u002Fmarks-personal-website\u002F9093dbc175512bb2f8c7335bf7450d5e8413a30f_marks-wordpress-website.png?auto=compress,format","wordpress website that can query blog post documents",{"width":33,"height":34},"XapIRxAAACMArNIw",{"x":39,"y":39,"zoom":40,"background":85},"transparent",{"type":48,"text":87,"spans":88},"It was pretty amazing to having something online.",[],{"type":48,"text":90,"spans":91},"WordPress made it possible, and I could not believe the amount of traffic I was getting within the first few weeks of putting up my content.",[92],{"start":39,"end":93,"type":94,"data":95},26,"hyperlink",{"link_type":96,"url":97},"Web","https:\u002F\u002Fmarkperez.dev\u002Fblog\u002Fcustomize-wordpress-site\u002F",{"type":48,"text":99,"spans":100},"Although there was not a lot of viewers to check from looking at my blog post documents, I soon began to see a bit more traction growing.",[],{"type":48,"text":102,"spans":103},"I was pretty surprised as to how being a complete noob on the web has made me somewhat successful from my content.",[],{"type":48,"text":105,"spans":106},"Also, it was a nice way to see how much of my preferences have changed.",[],{"type":48,"text":108,"spans":109},"WordPress served my purposes really well in the beginning, but I needed some type of CMS that was more lightweight for my documents to query from.",[],{"type":48,"text":111,"spans":112},"This is why I ended up choosing Prismic at the very end.",[],{"type":44,"text":114,"spans":115},"Why I migrated away from WordPress?",[],{"type":48,"text":117,"spans":118},"As time went on, my website started to become a bit bloated with the number of files and documents I started uploading.",[],{"type":48,"text":120,"spans":121},"Perhaps the speed was the issue because I was previously using HostGator as my hosting service, so I thought moving over to a VPS would do the trick.",[122],{"start":123,"end":124,"type":94,"data":125},109,129,{"link_type":96,"url":126},"https:\u002F\u002Fmarkperez.dev\u002Fblog\u002Fcreate-website-vps-complete-beginners\u002F",{"type":48,"text":128,"spans":129},"Temporarily, yes, but in the long-run, my gut instincts started to tell me that it just felt heavy for such a simple blog to query documents from.",[130],{"start":131,"end":132,"type":133},88,98,"em",{"type":48,"text":135,"spans":136},"At this point, I was assured that it was time to learn how to code so that I could take advantage of a Headless CMS type such as Prismic to manage my documents.",[],{"type":48,"text":138,"spans":139},"Although I was hesitant to learn Web Development since JavaScript itself is something I always contemplated... ",[],{"type":79,"url":141,"alt":142,"copyright":6,"dimensions":143,"id":144,"edit":145},"https:\u002F\u002Fimages.prismic.io\u002Fmarks-personal-website\u002F70595a37e833840fcef0cbbe74fcba4a706af69a_javascript-code.jpg?auto=compress,format","javascript code to query documents from",{"width":33,"height":34},"XapruxAAACEArWWR",{"x":39,"y":39,"zoom":40,"background":41},{"type":48,"text":147,"spans":148},"...It was the only way to be able to use one of the most robust Headless CMS's in the marketplace.",[],{"type":44,"text":150,"spans":151},"How has Prismic served me and my blog thus far?",[],{"type":48,"text":153,"spans":154},"So far, I have no complaints on Prismic.",[],{"type":48,"text":156,"spans":157},"There were more out there to check, but Prismic's free tier did all the talking.",[158],{"start":159,"end":160,"type":94,"data":161},50,59,{"link_type":96,"url":162},"https:\u002F\u002Fprismic.io\u002Fpricing",{"type":48,"text":164,"spans":165},"After taking some time getting adjusted to the lingo, I was able to implement the Prismic API and recreate my blog post documents.",[],{"type":48,"text":167,"spans":168},"But when I sorted out everything, I just had one small problem: How do I sort and query documents for specific blog posts?",[],{"type":48,"text":170,"spans":171},"There weren't many examples online with the template type that I wanted, so it was difficult to reproduce a working website that implemented my blog post documents out of thin air.",[],{"type":48,"text":173,"spans":174},"After heavily testing out code examples from numerous (or even hundreds, no kidding) resources, I got something that suits my needs.",[],{"type":48,"text":176,"spans":177},"To save you the effort, here is how I started querying documents from the Prismic API:",[],{"type":179,"oembed":180},"embed",{"type":181,"embed_url":182,"title":183,"provider_name":184,"thumbnail_url":185,"height":186,"width":187,"version":188,"author_name":189,"author_url":190,"provider_url":191,"cache_age":6,"thumbnail_width":187,"thumbnail_height":192,"html":193},"video","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=_Du_xh4zDmQ","How to Query Documents in Nuxt and Prismic","YouTube","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F_Du_xh4zDmQ\u002Fhqdefault.jpg",270,480,"1.0","Mark Perez","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCCZ1Yo4NOdWW03jamsNFA8w","https:\u002F\u002Fwww.youtube.com\u002F",360,"\u003Ciframe width=\"480\" height=\"270\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F_Du_xh4zDmQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen>\u003C\u002Fiframe>",{"type":44,"text":195,"spans":196},"Resources",[],{"type":198,"text":199,"spans":200},"list-item","Prismic showcasing my project (coming soon...)",[],{"type":198,"text":202,"spans":203},"Sample static website",[204],{"start":39,"end":205,"type":94,"data":206},21,{"link_type":96,"url":207},"https:\u002F\u002Fhopeful-engelbart-bb2780.netlify.com\u002F",{"type":198,"text":209,"spans":210},"GitHub repo",[211],{"start":39,"end":212,"type":94,"data":213},11,{"link_type":96,"url":214},"https:\u002F\u002Fgithub.com\u002Fmarkperez1904\u002Fprismic-tutorial",{"type":44,"text":216,"spans":217},"Conclusion",[],{"type":48,"text":219,"spans":220},"If you decide to use a Headless CMS for a simple blog, then my Prismic project could lead you in the right direction without the struggle.",[],{"type":48,"text":222,"spans":223},"Fork it if you'd like, it's a nice template to start off with and it lets you see how anyone can query documents.",[],{"type":48,"text":225,"spans":226},"I made the video and sample website in one day, so I won't be too concerned about anything happening to the documents and whatnot.",[],{"type":48,"text":228,"spans":229},"Enjoy a lite and speedy blog experience with Prismic to manage all of your documents!",[],{"results":231,"page":40,"results_per_page":295,"results_size":295,"total_results_size":296,"total_pages":40},[232,255,275],{"id":233,"uid":234,"url":6,"type":7,"href":235,"tags":236,"first_publication_date":237,"last_publication_date":237,"slugs":238,"linked_documents":240,"lang":17,"alternate_languages":241,"data":242},"auzqGRIAACsAt55X","ubuntu-26-04-enable-fractional-scaling-on-wayland","https:\u002F\u002Fmarks-personal-website.cdn.prismic.io\u002Fapi\u002Fv2\u002Fdocuments\u002Fsearch?ref=auzrLRIAACcAt6BE&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22auzqGRIAACsAt55X%22%29+%5D%5D",[],"2026-11-05T20:46:37+0000",[239],"ubuntu-26.04-enable-fractional-scaling-on-wayland",[],[],{"image":243,"title":250},{"dimensions":244,"alt":6,"copyright":6,"url":247,"id":248,"edit":249},{"width":245,"height":246},1376,768,"https:\u002F\u002Fimages.prismic.io\u002Fmarks-personal-website\u002FpVI5y1ileUlGp0ax_ubuntu26_04EnableFractionalScalingonWayland.jpeg?auto=format,compress","pVI5y1ileUlGp0ax",{"x":39,"y":39,"zoom":40,"background":85},[251],{"type":22,"text":252,"spans":253,"direction":254},"Ubuntu 26.04: Enable Fractional Scaling on Wayland",[],"ltr",{"id":256,"uid":257,"url":6,"type":7,"href":258,"tags":259,"first_publication_date":260,"last_publication_date":260,"slugs":261,"linked_documents":263,"lang":17,"alternate_languages":264,"data":265},"auzo2RIAAC0At5xZ","ubuntu-26.04-undo-apt-install-with-apt-history","https:\u002F\u002Fmarks-personal-website.cdn.prismic.io\u002Fapi\u002Fv2\u002Fdocuments\u002Fsearch?ref=auzrLRIAACcAt6BE&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22auzo2RIAAC0At5xZ%22%29+%5D%5D",[],"2026-11-05T20:40:46+0000",[262],"ubuntu-26.04-undo-an-apt-install-with-apt-history-undo",[],[],{"image":266,"title":271},{"dimensions":267,"alt":6,"copyright":6,"url":268,"id":269,"edit":270},{"width":245,"height":246},"https:\u002F\u002Fimages.prismic.io\u002Fmarks-personal-website\u002FqOqSwrMP0cjwe-66_Ubuntu26.04-UndoanAPTInstallwith%2522apthistory-undo%2522.jpg?auto=format,compress","qOqSwrMP0cjwe-66",{"x":39,"y":39,"zoom":40,"background":85},[272],{"type":22,"text":273,"spans":274,"direction":254},"Ubuntu 26.04: Undo an APT Install with \"apt history-undo\"",[],{"id":276,"uid":277,"url":6,"type":7,"href":278,"tags":279,"first_publication_date":280,"last_publication_date":280,"slugs":281,"linked_documents":283,"lang":17,"alternate_languages":284,"data":285},"auznGhIAACoAt5mB","ubuntu-26-04-enable-screen-time-limits","https:\u002F\u002Fmarks-personal-website.cdn.prismic.io\u002Fapi\u002Fv2\u002Fdocuments\u002Fsearch?ref=auzrLRIAACcAt6BE&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22auznGhIAACoAt5mB%22%29+%5D%5D",[],"2026-11-05T20:35:03+0000",[282],"ubuntu-26.04-enable-screen-time-limits-in-gnome",[],[],{"image":286,"title":291},{"dimensions":287,"alt":6,"copyright":6,"url":288,"id":289,"edit":290},{"width":245,"height":246},"https:\u002F\u002Fimages.prismic.io\u002Fmarks-personal-website\u002F2p8DjpWKS20G9Wse_Ubuntu26.04-EnableScreenTimeLimitsinGNOME.jpeg?auto=format,compress","2p8DjpWKS20G9Wse",{"x":39,"y":39,"zoom":40,"background":85},[292],{"type":22,"text":293,"spans":294,"direction":254},"Ubuntu 26.04: Enable Screen Time Limits in GNOME",[],3,41,1793911620202]