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

$3

``bash
npm install vue3-notion


yarn add vue3-notion

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

`bash
npm install vue3-notion --save-dev
`

`ts
// 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.

$3

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

`vue



`

$3

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

`vue



`

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

- `sh
npm install --global yarn
`

Development

1. Clone the repo
`sh
git clone https://github.com/zernonia/vue3-notion.git
`
2. Install NPM packages
`sh
yarn
`
3. Run Development instance
`sh
yarn dev
``

Credits

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

License ⚖️

MIT © zernonia