vue-notion

An unofficial Notion renderer

Features · Install · Example · Docs · 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

coming soon 🔮 Code Highlighting – Automatic code highlighting with prismjs

coming soon 🌎 SSR / Static Generation Support – Functions to work with Nuxt and other frameworks

Install

npm install vue-notion

How To

Docs

The full NotionRenderer API specification is available at docs/API.md.

Minimal Example

We can store the API response in a .json file and import it.

<template>
  <NotionRenderer :blockMap="blockMap" />
</template>

<script>
import { NotionRenderer } from "vue-notion";
import response from "./load-page-chunk-response.json"; // https://www.notion.so/api/v3/loadPageChunk
const blockMap = response.recordMap.block;

export default {
  components: {
    NotionRenderer,
  },
  data() {
    return { blockMap };
  },
};
</script>

A working example using Nuxt can be found inside the example directory.

Sites using vue-notion

List of pages that are using this library.

• StorePreviewer
• ...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	✅ Soon
Callout	✅ Yes
Column	✅ Yes
iframe	✅ Soon
Video	✅ Soon	Only embedded videos
Divider	✅ Soon
Link	✅ Yes
Code	✅ Soon	Highlighting coming soon
Web Bookmark	✅ Soon
Toggle List	✅ Soon
Page Links	✅ Yes
Header	✅ Yes	Enable with fullPage
Databases	❌ Not planned
Checkbox	❌ Not planned
Table Of Contents	❌ Not planned

Credits

• Jannik Siebert –
• Tobias Lins – react-notion Idea, Code
• Timo Lins – react-notion Code, Documentation
• samwightt – react-notion Inspiration & API Typings
• vue-notion Contributors 💕
• react-notion Contributors 💕