Welcome to vue-notion
Welcome to vue-notion
Check out the source on GitHub
Today, I am happy to share the vue-notion library with you – it is now possible to use Notion as a CMS for Vue (e.g. a statically generated Nuxt blog).

This is part of a most basic example on rendering Notion content in Vue


The project was ported to Vue from react-notion (originally made by the awesome team behind Splitbee 🐝)

You can now make Page, Lists, etc., etc., etc. in Notion and render it anywhere using Vue. Those renders can be statically stored and are a lot faster than sharing public Notion pages!


Quick Examples

The following is a simple Notion List:

  • This is a list item
  • And another one
    • Even a nested one
    • Wow!
  • Not impressed yet?

Or a Notion callout:

Damn, that's more like it!

Check the README for all supported Notion blocks!


🎯 Accurate – Results are almost identical

🎨 Custom Styles – Styles are easily adaptable. Optional styles included

🔮 Syntax-Highlighting – Beautiful themeable code highlighting using Prism.js

🌎 SSR / Static Generation Support – Functions to work with Nuxt and other frameworks



Check out more examples at vue-notion.now.sh ✨ and the source code at vue-notion/example 🐱

The full NotionRenderer specification and more information on the Notion API and integration with Nuxt can be found at docs/.


  • Timo Lins – react-notion Code, Documentation
  • samwightt – react-notion Inspiration & API Typings

License ⚖️

MIT © Jannik Siebert