{"id":13496433,"url":"https://github.com/janniks/vue-notion","last_synced_at":"2025-05-15T07:04:41.514Z","repository":{"id":38413212,"uuid":"321740547","full_name":"janniks/vue-notion","owner":"janniks","description":"A fast Vue renderer for Notion pages","archived":false,"fork":false,"pushed_at":"2024-09-05T13:17:53.000Z","size":4324,"stargazers_count":911,"open_issues_count":22,"forks_count":67,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-11T15:57:13.692Z","etag":null,"topics":["cms","notion","notion-api","notion-blog","notion-database","nuxt","nuxtjs","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-notion.now.sh","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/janniks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"janniks","patreon":null,"open_collective":null,"ko_fi":"janniks","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-12-15T17:29:34.000Z","updated_at":"2025-04-11T05:23:38.000Z","dependencies_parsed_at":"2024-06-19T02:49:35.384Z","dependency_job_id":"d6385b6b-fb4a-4f31-b68f-f1796921b0af","html_url":"https://github.com/janniks/vue-notion","commit_stats":{"total_commits":275,"total_committers":13,"mean_commits":"21.153846153846153","dds":0.3672727272727273,"last_synced_commit":"fe07be585c7a3a2c5146534c6538f65ff1b7b541"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janniks%2Fvue-notion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janniks%2Fvue-notion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janniks%2Fvue-notion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janniks%2Fvue-notion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janniks","download_url":"https://codeload.github.com/janniks/vue-notion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292039,"owners_count":22046426,"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":["cms","notion","notion-api","notion-blog","notion-database","nuxt","nuxtjs","vue","vuejs"],"created_at":"2024-07-31T19:01:47.801Z","updated_at":"2025-05-15T07:04:36.500Z","avatar_url":"https://github.com/janniks.png","language":"Vue","funding_links":["https://github.com/sponsors/janniks","https://ko-fi.com/janniks"],"categories":["Vue","Uncategorized","HarmonyOS","Components \u0026 Libraries","Renderers","Frameworks [🔝](#readme)"],"sub_categories":["Uncategorized","Windows Manager","Frameworks"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/janniks/vue-notion/raw/main/docs/img/vue-notion.png\" alt=\"vue-notion\" width=\"398px\" /\u003e\n  \u003cp\u003eAn unofficial Notion renderer\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=\"#docs\"\u003eDocs\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/vue-notion\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vue-notion.svg\" alt=\"Package version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/vue-notion\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/vue-notion\" alt=\"Compressed size\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/janniks/vue-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=janniksco\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url?label=Follow\u0026style=social\u0026url=https%3A%2F%2Ftwitter.com%2Fjanniksco\" alt=\"Follow on Twitter\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Features\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🌎 **SSR / Static Generation Support** – Functions to work with NuxtJS and other frameworks\n\n## Install\n\n\u003e **Warning**\n\u003e This is the documentation for the upcoming Vue 3 compatible release of vue-notion.\n\u003e For the Vue 2 version, check out the [vue2 branch](https://github.com/janniks/vue-notion/tree/vue2).\n\n### Vue\n\n```bash\nnpm install vue-notion\n```\n\n### NuxtJS Module\n\nCheck out the `/example` folder for a full working example using Nuxt 3.\n\n## Docs\n\n\u003e **Note**\n\u003e Potentially outdated -- 3.0.0 docs are a work-in-progress\n\n- `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notionrenderer)\n- Syntax-Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#syntax-highlighting)\n- Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api)\n- Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#nuxtjs--server-side-rendering--static-site-generation)\n\n\u003e Check out a full working demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨\n\u003e The code for the demo is in [`example/`](https://github.com/janniks/vue-notion/tree/main/example).\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\u003e 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).\n\n### Basic Example for Vue\n\nThis 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).\n\n```vue\n\u003ctemplate\u003e\n  \u003cNotionRenderer :blockMap=\"blockMap\" fullPage /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { NotionRenderer, getPageBlocks } from \"vue-notion\";\n\nexport default {\n  components: { NotionRenderer },\n  data: () =\u003e ({ blockMap: null }),\n  async created() {\n    // get Notion blocks from the API via a Notion pageId\n    this.blockMap = await getPageBlocks(\"8c1ab01960b049f6a282dda64a94afc7\");\n  },\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* optional Notion-like styles */\n@import \"vue-notion/src/styles.css\";\n\u003c/style\u003e\n```\n\n### Basic Example for NuxtJS\n\nThis 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).\nThe page assumes a Nuxt plugin in `~/plugins/vue-notion.js` that registers via the `useNuxtApp` hook.\n\n```vue\n\u003ctemplate\u003e\n  \u003cNotionRenderer :blockMap=\"blockMap\" fullPage /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nconst { $notion } = useNuxtApp();\n\n// use Notion module to get Notion blocks from the API via a Notion pageId\nconst { data: blockMap } = useAsyncData(\"page_nuxt\", () =\u003e\n  $notion.getPageBlocks(\"8c1ab01960b049f6a282dda64a94afc7\")\n);\n\u003c/script\u003e\n\n\u003cstyle\u003e\n@import \"vue-notion/src/styles.css\"; /* optional Notion-like styles */\n\u003c/style\u003e\n```\n\n## Sites using vue-notion 🌎\n\nList of pages that are using this library.\n\n- [HelpKit](https://www.helpkit.so) — Build Knowledge Bases in Notion\n- [StorePreviewer](https://www.storepreviewer.com) — Preview and optimize your app store presence\n- [Dominik Sobe's Personal Site](https://dominiksobe.com/)\n- [Bersihin Tech](https://tech.bersihin.co/)\n- [Wisata Diary](https://wisatabook.com/diary)\n- [AymaneMx's Blog](https://aymanemx.com/posts/)\n- [Notaku](https://notaku.website?ref=vue-notion) — Build docs and blog websites from Notion pages\n- _...if you're using `vue-notion`, we'd be happy to feature you here_\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| Databases         | ❌ Not planned |                        |\n| Table Of Contents | ❌ Not planned |                        |\n\nPlease, 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.\n\n## Credits\n\n- [janniksco](https://twitter.com/janniksco) – vue-notion Code\n- [Dominik Sobe](https://twitter.com/sobedominik) – vue-notion Inspiration, Debugging\n- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)\n- [Tobias Lins](https://tobi.sh) – react-notion Idea, Code\n- [Timo Lins](https://timo.sh) – react-notion Code, Documentation\n- [samwightt](https://github.com/samwightt) – react-notion Inspiration \u0026 API Typings\n- [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors)\n\n* Big thanks to [NuxtJS](https://nuxtjs.org) for being awesome!\n\n## License ⚖️\n\nMIT © [janniksco](https://twitter.com/janniksco)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanniks%2Fvue-notion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanniks%2Fvue-notion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanniks%2Fvue-notion/lists"}