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

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

Install

npm install vue-notion

How To

Demo

Check out the demo ✨

Docs

The full NotionRenderer specification, Notion API information and Nuxt docs are available at docs/.

Basic Example

We can store the API response in a .json file and import it. This example is hosted at vue-notion.now.sh/basic-example.

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

<script>
import { NotionRenderer, getPageBlocks } from "vue-notion";

export default {
  components: { NotionRenderer },
  data: () => ({ blockMap: null }),
  async created() {
    this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
  },
};
</script>

<style>
@import "vue-notion/src/styles.css"; /* optional notion-like styles */
</style>

A full working example using Nuxt and static generation can be found inside the example directory.

Roadmap

Add issues, request features and upvote block types that you want to see next!

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	✅ Yes
Callout	✅ Yes
Column	✅ Yes
iframe	✅ Yes
Video	✅ Yes	Only embedded videos
Divider	✅ Yes
Link	✅ Yes
Code	✅ Partially	Highlighting coming soon
Web Bookmark	✅ Soon
Toggle List	✅ Yes
Page Links	✅ Yes
Header	✅ 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.

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 💕