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:

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

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

Credits

• Jannik Siebert – vue-notion Code

• Dominik Sobe – vue-notion Inspiration, Debugging

• Tobias Lins – react-notion Idea, Code

• Timo Lins – react-notion Code, Documentation

• samwightt – react-notion Inspiration & API Typings

• react-notion Contributors 💕

License ⚖️

MIT © Jannik Siebert