Awesome Open Source
Awesome Open Source
vue-notion

An unofficial Notion renderer

Features ยท Install ยท Docs ยท Examples ยท Credits

Package version Compressed size MIT license Follow on Twitter


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

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.

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

License โš–๏ธ

MIT ยฉ Jannik Siebert


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
vue (4,046)ย 
vuejs (1,070)ย 
cms (427)ย 
nuxt (216)ย 
nuxtjs (120)ย 
notion (29)ย 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising ๐Ÿ“ฆย 10
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 124
Applications ๐Ÿ“ฆย 192
Artificial Intelligence ๐Ÿ“ฆย 78
Blockchain ๐Ÿ“ฆย 73
Build Tools ๐Ÿ“ฆย 113
Cloud Computing ๐Ÿ“ฆย 80
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 32
Command Line Interface ๐Ÿ“ฆย 49
Community ๐Ÿ“ฆย 83
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 63
Computer Science ๐Ÿ“ฆย 80
Configuration Management ๐Ÿ“ฆย 42
Content Management ๐Ÿ“ฆย 175
Control Flow ๐Ÿ“ฆย 213
Data Formats ๐Ÿ“ฆย 78
Data Processing ๐Ÿ“ฆย 276
Data Storage ๐Ÿ“ฆย 135
Economics ๐Ÿ“ฆย 64
Frameworks ๐Ÿ“ฆย 215
Games ๐Ÿ“ฆย 129
Graphics ๐Ÿ“ฆย 110
Hardware ๐Ÿ“ฆย 152
Integrated Development Environments ๐Ÿ“ฆย 49
Learning Resources ๐Ÿ“ฆย 166
Legal ๐Ÿ“ฆย 29
Libraries ๐Ÿ“ฆย 129
Lists Of Projects ๐Ÿ“ฆย 22
Machine Learning ๐Ÿ“ฆย 347
Mapping ๐Ÿ“ฆย 64
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 239
Messaging ๐Ÿ“ฆย 98
Networking ๐Ÿ“ฆย 315
Operating Systems ๐Ÿ“ฆย 89
Operations ๐Ÿ“ฆย 121
Package Managers ๐Ÿ“ฆย 55
Programming Languages ๐Ÿ“ฆย 245
Runtime Environments ๐Ÿ“ฆย 100
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 396
Social Media ๐Ÿ“ฆย 27
Software Architecture ๐Ÿ“ฆย 72
Software Development ๐Ÿ“ฆย 72
Software Performance ๐Ÿ“ฆย 58
Software Quality ๐Ÿ“ฆย 133
Text Editors ๐Ÿ“ฆย 49
Text Processing ๐Ÿ“ฆย 136
User Interface ๐Ÿ“ฆย 330
User Interface Components ๐Ÿ“ฆย 514
Version Control ๐Ÿ“ฆย 30
Virtualization ๐Ÿ“ฆย 71
Web Browsers ๐Ÿ“ฆย 42
Web Servers ๐Ÿ“ฆย 26
Web User Interface ๐Ÿ“ฆย 210