An unofficial Notion renderer

Features · Install · Docs · Examples · Credits

---

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}

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 NuxtJS and other frameworks

Notion Extension

Usage

const {NotionExtension} = require('./NotionExtension') //only for test, you can find the file in notionServer
const notionExt = new NotionExtension(process.env.NOTION_SECRET || your_notion_secret_key)
const page  = await notionExt.getPageWithBlocks({pageId: pageId})

Explication

A demo result json is in /notionServer/demoPage.json

notionExt.notion  //is the original notion sdk object
const page =  await notionExt.getPageWithBlocks({pageId: pageId})
// get the page and its blocks, and children blocks of blocks...
const page =  await notionExt.getPageWithBlocks({pageId: pageId, recursive:false})
// only get blocks of page

Run test Server

Notion SDK is not support browser, CORS blocks.

So NotionExtension or Notion SDK works only server-side.

export NOTION_SECRET=YOUR_NOTIOIN_SECRET_KEY;npm run notionServer

then in Vue, send a post request to localhost

const pageId = 'e726171fa05643e08b52ffe276758a9b'

var data = JSON.stringify({ "pageId": pageId });

var config = {
  method: 'post',
  url: 'http://localhost:3000/getPageWithBlocks',
  headers: {
    'Content-Type': 'application/json'
  },
  data: data
};

const res = await axios(config)
this.blockMap = res.data

Install

Vue

npm install vue-notion

NuxtJS Module

Install as a dev-dependency and add "vue-notion/nuxt" to the buildModules array in nuxt.config.js.

npm install vue-notion --save-dev

// nuxt.config.js
export default {
  // ...
  buildModules: ["vue-notion/nuxt"],
};

Docs

• NotionRenderer: docs/
• Syntax-Highlighting in Code Blocks (with Prism.js): docs/
• Notion API: docs/
• Nuxt: docs/

Check out a full working demo at vue-notion.now.sh ✨ The code for the demo is in example/.

Examples

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 and getPageTable 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 in docs#notion-api.

Basic Example for Vue

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>

Basic Example for NuxtJS

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>

Issues & Roadmap

Add issues and request features that you want to see implemented next!

Sites using vue-notion

List of pages that are using this library.

• StorePreviewer — Preview and optimize your app store presence
• Dominik Sobe's Personal Site
• ...if you're using vue-notion, we'd be happy to feature you here

Supported Blocks

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

Credits

• Jannik Siebert – vue-notion Code

• Dominik Sobe – vue-notion Inspiration, Debugging

• vue-notion Contributors 💕

• Tobias Lins – react-notion Idea, Code

• Timo Lins – react-notion Code, Documentation

• samwightt – react-notion Inspiration & API Typings

• react-notion Contributors 💕

• Big thanks to NuxtJS for being awesome!

License ⚖️

MIT © Jannik Siebert