How to Query Prismic Documents in Nuxt (Step-By-Step Guide)

Intro

Managing a website takes more work than a simple mouse click to get it up and running.

Storing the content, creating, and optimizing it to be able to query documents takes time and effort.

Creating an optimal user experience is a hefty task for people to accomplish from time to time.

Thus, choosing the software that's necessary to make this all happen needs to be taken under consideration.

Back in the day, choosing something like WordPress and a hosting service for managing blog post documents would do the trick.

But now, there are many options to choose from to query blog post documents.

Traditional ways of creating a website are becoming overshadowed by statically generated ones.

A headless CMS such as Prismic is a serious competitor against WordPress.

How my website was previously built?

In the first few months of 2019, I built and managed my very first website with WordPress.

It was pretty amazing to having something online.

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.

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.

I was pretty surprised as to how being a complete noob on the web has made me somewhat successful from my content.

Also, it was a nice way to see how much of my preferences have changed.

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.

This is why I ended up choosing Prismic at the very end.

Why I migrated away from WordPress?

As time went on, my website started to become a bit bloated with the number of files and documents I started uploading.

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.

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.

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.

Although I was hesitant to learn Web Development since JavaScript itself is something I always contemplated...

...It was the only way to be able to use one of the most robust Headless CMS's in the marketplace.

How has Prismic served me and my blog thus far?

So far, I have no complaints on Prismic.

There were more out there to check, but Prismic's free tier did all the talking.

After taking some time getting adjusted to the lingo, I was able to implement the Prismic API and recreate my blog post documents.

But when I sorted out everything, I just had one small problem: How do I sort and query documents for specific blog posts?

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.

After heavily testing out code examples from numerous (or even hundreds, no kidding) resources, I got something that suits my needs.

To save you the effort, here is how I started querying documents from the Prismic API:

Resources

Conclusion

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.

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.

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.

Enjoy a lite and speedy blog experience with Prismic to manage all of your documents!