Building a blog with Nuxt and Prepr CMS 🔨

Ever wondered how to build a Nuxt blog with external CMS content? And have that content fetched securely with a Nitro proxy? Today we explore exactly that, using real-world data from a SaaS called Stillio.

Try Prepr:

Try Eraser:

Try Stillio:

The GitHub Repo:

Timestamps:

00:00 Introduction
04:35 Sketching the plan with Eraser
13:40 Setting up Nuxt
18:50 Prepr Tutorial
28:10 Configuring GQL client
38:50 Layout / Markup / Components
44:50 Figuring out GQL types
54:30 Dynamic Slug Route
01:09:20 Using Real SaaS Data
01:14:50 Hiding the GQL URL from client
01:20:00 Mentioning Caching Ideas

Long Description:

In this video I will be exploring a CMS called Prepr. Showing you how to create Prepr Schemas / Models. How to add data and how to pull CMS data into Nuxt using nuxt-graphql-client in a typesafe & secure way.

I will also briefly be exploring the concept of caching in Nuxt. The video starts of with using dummy content to show the workings of Prepr, then I migrate to actual real-world content that we display on our SaaS (Stillio) website.

We use Tailwind CSS with the tailwind/typography package to make rendering the HTML content a breeze in Nuxt. We also very briefly explore the concept of Hooks in Vercel & Prepr to dynamically rebuild static blog content.