Vue 3 Unofficial Notion Renderer
npm install vue3-notion
An unofficial Notion renderer (Vue 3) version
---
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
๐ 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
``bash`
npm install vue3-notionyarn 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`
],
})
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.
This example is a part of demo/ and is hosted at vue3-notion.vercel.app.
`vue
`
This example is a part of demo/ and is hosted at vue3-notion.vercel.app.
`vue
`
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.
Yarn
- `sh`
npm install --global yarn
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
- Jannik Siebert โ vue-notion Code
- All vue-notion contributors!
MIT ยฉ zernonia