An unofficial Notion renderer
A Vue renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site.
vue-notion was ported to Vue from react-notion (developed by Splitbee 🐝 – a fast, reliable, free, and modern analytics for any team)
This package doesn't handle the communication with the API. Check out notion-api-worker from Splitbee for an easy solution.
Created by Jannik Siebert
🎯 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
npm install vue-notion// nuxt.config.js export default { // ... buildModules: [ 'vue-notion/nuxt' ] notion: { // additionals configuration } }Check out a demo at vue-notion.now.sh ✨
More information on the NotionRenderer specification, syntax-highlighting, the Notion API, and integration with Nuxt can be found at docs/.
This example is hosted at vue-notion.now.sh/welcome.
<template> <NotionRenderer :blockMap="blockMap" fullPage /> </template> <script> import { NotionRenderer, getPageBlocks } from "vue-notion"; export default { components: { NotionRenderer }, data: () => ({ blockMap: null }), async created() { // get Notion blocks from the API via a Notion pageId this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7"); }, }; </script> <style> @import "vue-notion/src/styles.css"; /* optional Notion-like styles */ </style>The example above uses a simple wrapper around the notion-api-worker. It is also possible to store and use plain .json objects received from the Notion API.
This example is hosted at vue-notion.now.sh/welcome.
<template> <NotionRenderer :blockMap="blockMap" fullPage /> </template> <script> export default { data: () => ({ blockMap: null }), async asyncData({ $notion }) { // use notion module to get Notion blocks from the API via a Notion pageId const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7"); return { blockMap } }, }; <style> @import "vue-notion/src/styles.css"; /* optional Notion-like styles */ </style>
⚠️ Use with caution. ThegetPageBlocksandgetPageTableare based on the private Notion API. We can not gurantee it will stay stable. The private API is warpped by notion-api-worker. If you use these methods a lot, please consider hosting you own instance, as described indocs#notion-api.
A full working example using Nuxt and static generation can be found inside the example directory.
Add issues, request features and upvote block types that you want to see next!
List of pages that are using this library.
- StorePreviewer
- ...if you're using
vue-notion, we'd be happy to feature you here
Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
| Block Type | Supported | Notes |
|---|---|---|
| Text | ✅ Yes | |
| Heading | ✅ Yes | |
| Image | ✅ Yes | |
| Image Caption | ✅ Yes | |
| Bulleted List | ✅ Yes | |
| Numbered List | ✅ Yes | |
| Quote | ✅ Yes | |
| Callout | ✅ Yes | |
| Column | ✅ Yes | |
| iframe | ✅ Yes | |
| Video | ✅ Yes | Only embedded videos |
| Divider | ✅ Yes | |
| Link | ✅ Yes | |
| Code | ✅ Yes | |
| Web Bookmark | ✅ Yes | |
| Toggle List | ✅ Yes | |
| Page Links | ✅ Yes | |
| Cover | ✅ Yes | Enable with fullPage |
| Databases | ❌ Not planned | |
| Checkbox | ❌ Not planned | |
| Table Of Contents | ❌ Not planned |
Please, feel free to open an issue if you notice any missing blocks or anything wrong with existing blocks.
- 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
- vue-notion Contributors 💕
- react-notion Contributors 💕
MIT © Jannik Siebert