DEV Community

Cover image for Using Notion as a Headless CMS with Nuxt

Using Notion as a Headless CMS with Nuxt

Trent Brew on January 06, 2023

Notion has become increasingly popular as a versatile tool for everything from taking notes to managing projects, and when combined with it's API w...
Collapse
 
madebyfabian profile image
Fabian B.

Awesome! Thank you so much for this extended article! I am currently starting to develop a nuxt layer that provides utilities on how to integrate wordpress as a headless CMS. Maybe this could be used to also create a nuxt-notion layer to get people started even faster, what do you think?

Collapse
 
trentbrew profile image
Trent Brew

Sounds interesting! It'd be nice to use Wordpress to serve content while having full freedom on the front-end through Nuxt. Any updates on the project?

Collapse
 
madebyfabian profile image
Fabian B. • Edited

@trentbrew Hey there, glad you're interested, currently don't have much time for it, so the layer is in alpha/beta status, see github.com/madebyfabian/nuxt-wordp.... Also check out my blog post about wordpress with nuxt madebyfabian.com/blog/how-to-creat... and the repo of my website, in which you can see how I integrated wordpress into a full nuxt website:
github.com/madebyfabian/madebyfabian I want to extract many functionalities from this website repo to be available in the layer as soon as I have time for.

Collapse
 
thewebbeckons profile image
Jesse Beck

Great article; but I also wanted to come back here to say awesome personal website :)

Collapse
 
trentbrew profile image
Trent Brew

Thank you Jesse 💙

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Using Notion as a Headless CMS with Nuxt

🤯🤯🤯

I only stayed with the title. The fact of mixing the two, it seems to me not obvious, to read later 🤩

Collapse
 
daxtersky profile image
Miko

Cool art, thanks! What would be the trade-offs of using Notion in your opinion?

Collapse
 
trentbrew profile image
Trent Brew

thanks Miko(: I think scalability is the biggest trade-off since the API limits how frequently you can make requests and how many pages you can get per request but this hasn't been an issue for me. You're also currently unable to upload files using the API

Collapse
 
faridsa profile image
farid

Cool! Really interesting approach, I will dig a little to see if it will work with Notion Blog section too. Thank you for your post!

Collapse
 
wouter_muller_100e7552f4c profile image
Wouter Muller

Would this also work with a regular Vue 3 app instead of Nuxt?

Collapse
 
trentbrew profile image
Trent Brew • Edited

You might use Node & Express with vanilla Vue 3 – This video is a great example using express but with EJS for the frontend: https://www.youtube.com/watch?v=zVfVLBjQuSA&t=2485s