\n\n---\n\nA **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!\n\nUse **Notion as CMS** for your blog, documentation or personal site.\nAlso 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)\n\nThis 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.\n\nCreated by Zernonia\n\n## Features\n\n๐ **SSR / Static Generation Support** โ Functions to work with [**Nuxt3**](https://v3.nuxtjs.org/) and other frameworks\n\n๐ฏ **Accurate** โ Results are _almost_ identical\n\n๐จ **Custom Styles** โ Styles are easily adaptable. Optional styles included\n\n๐ฎ **Syntax-Highlighting** โ Beautiful themeable code highlighting using Prism.js\n\n## Install\n\n### Vue 3\n\n```bash\nnpm install vue3-notion\n# yarn add vue3-notion\n```\n\n### Nuxt3 Module\n\nInstall as a dev-dependency and add `\"vue3-notion/nuxt\"` to the `buildModules` array in `nuxt.config.js`.\n\n```bash\nnpm install vue3-notion --save-dev\n```\n\n```ts\n// nuxt.config.ts\nimport { defineNuxtConfig } from \"nuxt3\"\n\nexport default defineNuxtConfig({\n //...\n modules: [\n [\"vue3-notion/nuxt\", { css: true }], // css is not imported by default. Set `true` to import css\n ],\n})\n```\n\n## Examples\n\nThese examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/notion-api-worker) to access the Notion page data.\nIt is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part.\n\n> Use the `getPageBlocks` and `getPageTable` methods with caution!\n> They are based on the private Notion API.\n> We can NOT guarantee that it will stay stable.\n> The private API is warpped by [notion-api-worker](https://github.com/splitbee/notion-api-worker).\n\n### Basic Example for **Vue 3**\n\nThis 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).\n\n```vue\n\n\n\n \n\n\n\n```\n\n### Basic Example for **Nuxt3**\n\nThis 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).\n\n```vue\n\n\n\n \n\n```\n\n## Supported Blocks\n\nMost common block types are supported. We happily accept pull requests to add support for the missing blocks.\n\n| Block Type | Supported | Notes |\n| ----------------- | ---------- | ---------------------- |\n| Text | โ Yes | |\n| Heading | โ Yes | |\n| Image | โ Yes | |\n| Image Caption | โ Yes | |\n| Bulleted List | โ Yes | |\n| Numbered List | โ Yes | |\n| Quote | โ Yes | |\n| Callout | โ Yes | |\n| Column | โ Yes | |\n| iframe | โ Yes | |\n| Video | โ Yes | Only embedded videos |\n| Divider | โ Yes | |\n| Link | โ Yes | |\n| Code | โ Yes | |\n| Web Bookmark | โ Yes | |\n| Toggle List | โ Yes | |\n| Page Links | โ Yes | |\n| Cover | โ Yes | Enable with `fullPage` |\n| Equations | โ Yes | |\n| Checkbox | โ Yes | |\n| Simple Tables | โ Yes | |\n| Table Of Contents | โ Yes | |\n| Databases | โ๏ธ Planned | |\n\nPlease, 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.\n\n# ๐ Local Development\n\n## Prerequisites\n\nYarn\n\n- ```sh\n npm install --global yarn\n ```\n\n## Development\n\n1. Clone the repo\n ```sh\n git clone https://github.com/zernonia/vue3-notion.git\n ```\n2. Install NPM packages\n ```sh\n yarn\n ```\n3. Run Development instance\n ```sh\n yarn dev\n ```\n\n## Credits\n\n- [Jannik Siebert](https://twitter.com/jnnksbrt) โ vue-notion Code\n- [All vue-notion contributors!](https://github.com/janniks/vue-notion/graphs/contributors)\n\n## License โ๏ธ\n\nMIT ยฉ [zernonia](https://twitter.com/zernonia)\n","readmeFilename":"README.md"}
![\"vue3-notion\"](\"https://github.com/zernonia/vue3-notion/raw/master/assets/vue3-notion.png\")
\n ![\"Package](\"https://img.shields.io/npm/v/vue3-notion.svg\")
\n ![\"MIT](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n ![\"Follow](\"https://img.shields.io/twitter/url?label=Follow&style=social&url=https%3A%2F%2Ftwitter.com%2Fzernonia\")
\n