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!

Features


🎯 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

Install

npm install vue-notion

Docs

🌎
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/.

Credits

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

License ⚖️

MIT © Jannik Siebert