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: 3 days 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 (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-05T13:17:53.000Z (4 months ago)
• Last Synced: 2024-12-12T01:13:43.163Z (10 days 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: 896
• Watchers: 9
• Forks: 65
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• 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. - [React Notion](https://github.com/splitbee/react-notion) - A React renderer for Notion pages. Use Notion as CMS for blog, documentation or personal site. (Renderers)

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)