Using Notion as a CMS with Nuxt
summary
Notion becomes a headless CMS by using the Notion API (public beta May 13, 2021), creating an integration to get an API token, sharing the database with that integration, grabbing the database ID and calling it from Netlify serverless functions so the Node-only SDK and secret never live in the browser. A demo builds a to‑do database, fetches results (deeply nested JSON like properties.name.title[0].plain_text), serves them to a Nuxt frontend with live reload, and the pipeline works end to end.
AI-written summary · about
chapters (18)
- 0:00Introduction
- 1:14What is Notion
- 2:39Notion editor demo
- 5:27Sharing in Notion
- 7:11Notion databases
- 10:00Extracting data from Notion
- 11:24Serverless functions intro
- 13:29Serverless functions code
- 15:57Notion API integration
- 17:01Notion integration setup
- 18:25API tokens with Netlify
- 20:09Fetching Notion data
- 21:34Displaying Notion data
- 23:59Parsing Notion JSON
- 25:42Finalizing integration
- 27:27Trade-offs with Notion CMS
- 28:53Performance concerns
- 29:34Resources and closing
related talks
22mNuxt.js as a headless CMS
34mGet Your Head Out of the Cloud — Embracing Local-First Apps with Nuxt
55mNuxt.js: isomorphic Vue.js Apps made easy, fast and fun
38mBeyond Static: Building with Nuxt 3 and Nitro
56mBuilding a backend with Nuxt
21mPre-Rendering Media Sites with Nuxt.js & Netlify
29mNuxt Content: The ultimate tool for blogging and documentation
32mNuxt3 in Action