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 NuxtJS and other frameworks
npm install vue-notion
Install as shown above and add "vue-notion/nuxt"
to the buildModules
array in nuxt.config.js
.
// nuxt.config.js
export default {
// ...
buildModules: ["vue-notion/nuxt"],
};
NotionRenderer
: docs/
docs/
docs/
docs/
Check out a full working demo at vue-notion.now.sh โจ The code for the demo is in
example/
.
These examples use a simple wrapper around the notion-api-worker
to access the Notion page data. It is also possible to store a page received from the Notion API in .json
and use it without the async/await
part.
Use the
getPageBlocks
andgetPageTable
methods with caution! They are based on the private Notion API. We can NOT guarantee that 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
.
This example is a part of example/
and is hosted at vue-notion.now.sh/vue.
<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>
This example is a part of example/
and is hosted at vue-notion.now.sh/nuxt.
<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 };
},
};
</script>
<style>
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
</style>
Add issues and request features that you want to see implemented next!
List of pages that are using this library.
vue-notion
, weโd be happy to feature you hereMost 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 |
Equations | โ Planned | |
Databases | โ Not planned | |
Checkbox | โ Not planned | |
Table Of Contents | โ Not planned |
Please, feel free to open an issue if you notice any important blocks missing 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
Big thanks to NuxtJS for being awesome!
Author: janniks
Demo: https://vue-notion.now.sh/
Source Code: https://github.com/janniks/vue-notion
โ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
โ Learn Vue.js from scratch 2018
โ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
โ Vue.js Tutorial: Zero to Sixty