Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 days ago
JSON representation

An unofficial Notion renderer (Vue 3) version

Awesome Lists containing this project

README

        


vue3-notion

An unofficial Notion renderer (Vue 3) version



Features
ยท
Install
ยท
Examples
ยท
Credits



Package version


MIT license


Follow on Twitter

---

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)