{"id":14971175,"url":"https://github.com/zernonia/vue3-notion","last_synced_at":"2025-05-16T07:07:20.835Z","repository":{"id":37665866,"uuid":"442398559","full_name":"zernonia/vue3-notion","owner":"zernonia","description":"An unofficial Notion renderer (Vue 3) version","archived":false,"fork":false,"pushed_at":"2024-11-01T15:56:08.000Z","size":991,"stargazers_count":150,"open_issues_count":13,"forks_count":25,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-09T16:44:42.187Z","etag":null,"topics":["notion","nuxt","nuxt3","nuxtjs","vue","vue3"],"latest_commit_sha":null,"homepage":"https://vue3-notion.vercel.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zernonia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-28T08:26:13.000Z","updated_at":"2025-04-27T19:29:50.000Z","dependencies_parsed_at":"2024-12-08T08:03:35.079Z","dependency_job_id":"a0525f7c-fca5-4daf-8e24-a1d4c5071a8d","html_url":"https://github.com/zernonia/vue3-notion","commit_stats":{"total_commits":185,"total_committers":3,"mean_commits":"61.666666666666664","dds":"0.21081081081081077","last_synced_commit":"44e0d470530b7de8b3909b3b5081c7aae1d93b99"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvue3-notion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvue3-notion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvue3-notion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvue3-notion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zernonia","download_url":"https://codeload.github.com/zernonia/vue3-notion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485065,"owners_count":22078767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["notion","nuxt","nuxt3","nuxtjs","vue","vue3"],"created_at":"2024-09-24T13:44:48.939Z","updated_at":"2025-05-16T07:07:15.820Z","avatar_url":"https://github.com/zernonia.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/zernonia/vue3-notion/raw/master/assets/vue3-notion.png\" alt=\"vue3-notion\" width=\"398px\" /\u003e\n  \u003cp\u003eAn unofficial Notion renderer (Vue 3) version\u003c/p\u003e\n\u003c/div\u003e\n\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"#install\"\u003eInstall\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"#credits\"\u003eCredits\u003c/a\u003e\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/vue3-notion\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vue3-notion.svg\" alt=\"Package version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/janniks/vue3-notion/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"MIT license\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/follow?screen_name=zernonia\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url?label=Follow\u0026style=social\u0026url=https%3A%2F%2Ftwitter.com%2Fzernonia\" alt=\"Follow on Twitter\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\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) \u0026 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\n\u003csub\u003eCreated by \u003ca href=\"https://twitter.com/zernonia\"\u003eZernonia\u003c/a\u003e\u003c/sub\u003e\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\u003e Use the `getPageBlocks` and `getPageTable` methods with caution!\n\u003e They are based on the private Notion API.\n\u003e We can NOT guarantee that it will stay stable.\n\u003e 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\u003cscript setup lang=\"ts\"\u003e\nimport { NotionRenderer, getPageBlocks, useGetPageBlocks } from \"vue3-notion\"\nimport { ref, onMounted } from \"vue\"\n\nconst data = ref()\n\nonMounted(async () =\u003e {\n  data.value = await getPageBlocks(\"4b2dc28a5df74034a943f8c8e639066a\")\n})\n\n// ---- or using Composables ----\n\nconst { data } = useGetPageBlocks(\"4b2dc28a5df74034a943f8c8e639066a\")\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cNotionRenderer v-if=\"data\" :blockMap=\"data\" fullPage /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n@import \"vue3-notion/dist/style.css\"; /* optional Notion-like styles */\n@import \"prismjs/themes/prism.css\";\n@import \"katex/dist/katex.min.css\";\n\u003c/style\u003e\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\u003cscript setup lang=\"ts\"\u003e\nconst { $notion } = useNuxtApp()\nconst { data } = await useAsyncData(\"notion\", () =\u003e $notion.getPageBlocks(\"2e22de6b770e4166be301490f6ffd420\"))\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cNotionRenderer :blockMap=\"data\" fullPage prism /\u003e\n\u003c/template\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzernonia%2Fvue3-notion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzernonia%2Fvue3-notion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzernonia%2Fvue3-notion/lists"}