# vue-notion **Repository Path**: maxz01/vue-notion ## Basic Information - **Project Name**: vue-notion - **Description**: No description available - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-12-23 - **Last Updated**: 2024-12-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
vue-notion

An unofficial Notion renderer

Features ยท Install ยท Docs ยท Examples ยท Credits

Package version Compressed size MIT license Follow on Twitter

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