Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zernonia/vue3-notion
An unofficial Notion renderer (Vue 3) version
https://github.com/zernonia/vue3-notion
notion nuxt nuxt3 nuxtjs vue vue3
Last synced: about 1 month ago
JSON representation
An unofficial Notion renderer (Vue 3) version
- Host: GitHub
- URL: https://github.com/zernonia/vue3-notion
- Owner: zernonia
- License: mit
- Created: 2021-12-28T08:26:13.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-10T02:52:09.000Z (over 1 year ago)
- Last Synced: 2024-09-28T14:03:26.408Z (about 1 month ago)
- Topics: notion, nuxt, nuxt3, nuxtjs, vue, vue3
- Language: CSS
- Homepage: https://vue3-notion.vercel.app/
- Size: 751 KB
- Stars: 136
- Watchers: 7
- Forks: 20
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
An unofficial Notion renderer (Vue 3) version
Features
·
Install
·
Examples
·
Credits
---
A **Vue 3** renderer for Notion pages (ported from [vue-notion](https://github.com/janniks/vue-notion)). Special thanks to [Jannik Siebert](https://twitter.com/jnnksbrt) & 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](https://github.com/splitbee/react-notion) (developed by [Splitbee 🐝](https://splitbee.io/) – 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](https://github.com/splitbee/notion-api-worker) from [Splitbee](https://splitbee.io/) for an easy solution.
Created by Zernonia
## Features
🌎 **SSR / Static Generation Support** – Functions to work with [**Nuxt3**](https://v3.nuxtjs.org/) 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
```bash
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`.
```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`](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).
### Basic Example for **Vue 3**
This example is a part of [`demo/`](https://github.com/zeronnia/vue3-notion/demo/) and is hosted at [vue3-notion.vercel.app](https://vue3-notion.vercel.app).
```vue
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")
@import "vue3-notion/dist/style.css"; /* optional Notion-like styles */
@import "prismjs/themes/prism.css";
@import "katex/dist/katex.min.css";
```
### Basic Example for **Nuxt3**
This example is a part of [`demo/`](https://github.com/zeronnia/vue3-notion/demo/) and is hosted at [vue3-notion.vercel.app](https://vue3-notion.vercel.app).
```vue
const { $notion } = useNuxtApp()
const { data } = await useAsyncData("notion", () => $notion.getPageBlocks("2e22de6b770e4166be301490f6ffd420"))
```
## 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](https://github.com/zernonia/vue3-notion/issues/new) 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](https://twitter.com/jnnksbrt) – vue-notion Code
- [All vue-notion contributors!](https://github.com/janniks/vue-notion/graphs/contributors)
## License ⚖️
MIT © [zernonia](https://twitter.com/zernonia)