A Vue Renderer for Notion Pages

A Vue Renderer for Notion Pages
An unofficial Notion renderer A Vue renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site.

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

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 shown above and add "vue-notion/nuxt" to the buildModules array in nuxt.config.js.

// 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
  • โ€ฆ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

Download Details:

Author: janniks

Demo: https://vue-notion.now.sh/

Source Code: https://github.com/janniks/vue-notion

Suggest:

โ˜ž 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

โ˜ž Learn Vue.js from Scratch - Full Course for Beginners

โ˜ž Create Shopping basket page With Vuejs and Nodejs