https://github.com/janniks/vue-notion
A fast Vue renderer for Notion pages
https://github.com/janniks/vue-notion
cms notion notion-api notion-blog notion-database nuxt nuxtjs vue vuejs
Last synced: 6 months ago
JSON representation
A fast Vue renderer for Notion pages
- Host: GitHub
- URL: https://github.com/janniks/vue-notion
- Owner: janniks
- License: other
- Created: 2020-12-15T17:29:34.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-05T13:17:53.000Z (about 1 year ago)
- Last Synced: 2025-04-11T15:57:13.692Z (7 months ago)
- Topics: cms, notion, notion-api, notion-blog, notion-database, nuxt, nuxtjs, vue, vuejs
- Language: Vue
- Homepage: https://vue-notion.now.sh
- Size: 4.12 MB
- Stars: 911
- Watchers: 8
- Forks: 67
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-notion - A fast Vue renderer for Notion pages ` 📝 2 months ago` (Frameworks [🔝](#readme))
- awesome-vue - vue-notion - An unofficial Notion renderer – Use Notion as a CMS for Vue (e.g. Nuxt) (Components & Libraries / Frameworks)
- awesome-notion - Vue Notion - A Vue renderer for Notion pages. Use Notion as CMS for blog, documentation or personal site, ported to vue from React Notion. (Renderers)
- fucking-awesome-vue - vue-notion - An unofficial Notion renderer – Use Notion as a CMS for Vue (e.g. Nuxt) (Components & Libraries / Frameworks)
- awesome-vue - vue-notion - An unofficial Notion renderer – Use Notion as a CMS for Vue (e.g. Nuxt) (Components & Libraries / Frameworks)
README
An unofficial Notion renderer
Features
·
Install
·
Docs
·
Examples
·
Credits
---
## 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
> **Warning**
> This is the documentation for the upcoming Vue 3 compatible release of vue-notion.
> For the Vue 2 version, check out the [vue2 branch](https://github.com/janniks/vue-notion/tree/vue2).
### Vue
```bash
npm install vue-notion
```
### NuxtJS Module
Check out the `/example` folder for a full working example using Nuxt 3.
## Docs
> **Note**
> Potentially outdated -- 3.0.0 docs are a work-in-progress
- `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notionrenderer)
- Syntax-Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#syntax-highlighting)
- Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api)
- Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#nuxtjs--server-side-rendering--static-site-generation)
> Check out a full working demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
> The code for the demo is in [`example/`](https://github.com/janniks/vue-notion/tree/main/example).
## Examples
These examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/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](https://github.com/splitbee/notion-api-worker).
> If you use these methods a lot, please consider hosting you own instance, as described in [`docs#notion-api`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api).
### Basic Example for Vue
This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/vue](https://vue-notion.now.sh/vue).
```vue
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");
},
};
/* optional Notion-like styles */
@import "vue-notion/src/styles.css";
```
### Basic Example for NuxtJS
This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/nuxt](https://vue-notion.now.sh/nuxt).
The page assumes a Nuxt plugin in `~/plugins/vue-notion.js` that registers via the `useNuxtApp` hook.
```vue
const { $notion } = useNuxtApp();
// use Notion module to get Notion blocks from the API via a Notion pageId
const { data: blockMap } = useAsyncData("page_nuxt", () =>
$notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7")
);
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
```
## Sites using vue-notion 🌎
List of pages that are using this library.
- [HelpKit](https://www.helpkit.so) — Build Knowledge Bases in Notion
- [StorePreviewer](https://www.storepreviewer.com) — Preview and optimize your app store presence
- [Dominik Sobe's Personal Site](https://dominiksobe.com/)
- [Bersihin Tech](https://tech.bersihin.co/)
- [Wisata Diary](https://wisatabook.com/diary)
- [AymaneMx's Blog](https://aymanemx.com/posts/)
- [Notaku](https://notaku.website?ref=vue-notion) — Build docs and blog websites from Notion pages
- _...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 | ✅ Yes | |
| Checkbox | ✅ Yes | |
| Simple Tables | ✅ Yes | |
| Databases | ❌ Not planned | |
| Table Of Contents | ❌ Not planned | |
Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any important blocks missing or anything wrong with existing blocks.
## Credits
- [janniksco](https://twitter.com/janniksco) – vue-notion Code
- [Dominik Sobe](https://twitter.com/sobedominik) – vue-notion Inspiration, Debugging
- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
- [Tobias Lins](https://tobi.sh) – react-notion Idea, Code
- [Timo Lins](https://timo.sh) – react-notion Code, Documentation
- [samwightt](https://github.com/samwightt) – react-notion Inspiration & API Typings
- [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors)
* Big thanks to [NuxtJS](https://nuxtjs.org) for being awesome!
## License ⚖️
MIT © [janniksco](https://twitter.com/janniksco)