---
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
```
### 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
```
## 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)
