An unofficial Notion renderer (Vue 3) version

Features · Install · Examples · Credits

---

A Vue 3 renderer for Notion pages (ported from vue-notion). Special thanks to Jannik Siebert & all the vue-notion contributors that made the vue-notion possible!

Use Notion as CMS for your blog, documentation or personal site. Also check out 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 (I planned to add this!). Check out notion-api-worker from Splitbee for an easy solution.

_{Created by Zernonia}

Features

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

🎯 Accurate – Results are almost identical

🎨 Custom Styles – Styles are easily adaptable. Optional styles included

🔮 Syntax-Highlighting – Beautiful themeable code highlighting using Prism.js

Install

Vue 3

npm install vue3-notion
# yarn add vue3-notion

Nuxt3 Module

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

npm install vue3-notion --save-dev

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
  //...
  modules: [
    ["vue3-notion/nuxt", { css: true }], // css is not imported by default. Set `true` to import css
  ],
})

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.

Basic Example for Vue 3

This example is a part of demo/ and is hosted at vue3-notion.vercel.app.

<script setup lang="ts">
import { NotionRenderer, getPageBlocks, useGetPageBlocks } from "vue3-notion"
import { ref, onMounted } from "vue"

const data = ref()

onMounted(async () => {
  data.value = await getPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
})

// ---- or using Composables ----

const { data } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
</script>

<template>
  <NotionRenderer v-if="data" :blockMap="data" fullPage />
</template>

<style>
@import "vue3-notion/dist/style.css"; /* optional Notion-like styles */
@import "prismjs/themes/prism.css";
@import "katex/dist/katex.min.css";
</style>

Basic Example for Nuxt3

This example is a part of demo/ and is hosted at vue3-notion.vercel.app.

<script setup lang="ts">
const { $notion } = useNuxtApp()
const { data } = await useAsyncData("notion", () => $notion.getPageBlocks("2e22de6b770e4166be301490f6ffd420"))
</script>

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

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	✅ Yes
Checkbox	✅ Yes
Simple Tables	✅ Yes
Table Of Contents	✅ Yes
Databases	☑️ Planned

Please, feel free to open an issue if you notice any important blocks missing or anything wrong with existing blocks.

🌎 Local Development

Prerequisites

Yarn

• npm install --global yarn

Development

1. Clone the repo

   git clone https://github.com/zernonia/vue3-notion.git

2. Install NPM packages

   yarn

3. Run Development instance

   yarn dev

Credits

• Jannik Siebert – vue-notion Code
• All vue-notion contributors!

License ⚖️

MIT © zernonia