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:
https://prepr.io
Try Eraser:
https://eraser.io
Try Stillio:
https://www.stillio.com
The GitHub Repo:
https://github.com/Eckhardt-D/nuxt-pr...
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.