Welcome to this comprehensive guide on building a modern web application that harnesses the power of Notion as a CMS! This project demonstrates how to seamlessly integrate Notion's robust API with Vue.js and Vite, creating a flexible and maintainable content management system. Whether you're a developer looking to leverage Notion's capabilities or simply interested in modern web development practices, this guide will walk you through every step of the process.

Project Summary

A web application built with Vue.js and Vite that uses Notion as a CMS
Fetches data through Notion API with serverless Netlify functions
Features include database querying, page content rendering, and routing
Implements caching and environment variable management through Netlify
Uses Vue3-notion for rendering Notion content as HTML

Todos

[ ] caching
[x] Page title
[ ] Inner page

Links & Guides

https://github.com/morethanmin/morethan-log

Using Notion as a CMS

Used this guide for the setup

Build a Notion Powered Blog w/ NextJS & TailwindCSS

Vue Fetch data from API | Vue3

Used this guide to fetch data

https://github.com/Solomon04/nextjs-notion-blog

https://github.com/souvikinator/notion-to-md

https://github.com/zernonia/vue3-notion

Relevants

https://github.com/YonatanKof/notion-api-vite-vue

Notion API / Flowchart

The live URL

<aside> <img src="/icons/database_gray.svg" alt="/icons/database_gray.svg" width="40px" /> The database →

</aside>

The site at Netlify

Overview

Use Vite as the builder