{"id":15164636,"url":"https://github.com/notionblog/vue-notion-render","last_synced_at":"2025-09-30T20:31:20.805Z","repository":{"id":48682160,"uuid":"385639558","full_name":"notionblog/vue-notion-render","owner":"notionblog","description":"📜 Vue.js renderer for Notion pages","archived":true,"fork":false,"pushed_at":"2021-08-24T09:42:01.000Z","size":2348,"stargazers_count":27,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T21:22:54.641Z","etag":null,"topics":["notion","notion-api","notion-blog","nuxtjs","vue-notion-render","vuejs"],"latest_commit_sha":null,"homepage":"https://vue.mynotion.blog","language":"Vue","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/notionblog.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}},"created_at":"2021-07-13T14:50:10.000Z","updated_at":"2024-01-12T09:16:21.000Z","dependencies_parsed_at":"2022-08-28T06:51:14.599Z","dependency_job_id":null,"html_url":"https://github.com/notionblog/vue-notion-render","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notionblog%2Fvue-notion-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notionblog%2Fvue-notion-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notionblog%2Fvue-notion-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notionblog%2Fvue-notion-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notionblog","download_url":"https://codeload.github.com/notionblog/vue-notion-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234774933,"owners_count":18884524,"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","notion-api","notion-blog","nuxtjs","vue-notion-render","vuejs"],"created_at":"2024-09-27T03:42:24.325Z","updated_at":"2025-09-30T20:31:20.433Z","avatar_url":"https://github.com/notionblog.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-notion-render\n### 📜 Vue Renderer for Notion pages.\n\n![vue-notion-render](thumbnail.png)\n\n[NPM](https://www.npmjs.com/package/vue-notion-render)\n\n![Npm](https://img.shields.io/npm/dm/vue-notion-render.svg)\n\n\n# Features\n\n- Supports The [Official Notion API](https://developers.notion.com/reference/intro)\n- Supports [notion-api-worker](https://github.com/splitbee/notion-api-worker) to render unsupported blocks of the Official API created by [@splitbee](https://github.com/splitbee)\n- Fast\n- Customizable\n\n# Install\n\n```bash\nnpm install vue-notion-render --save\n```\n\n## Vue.js\n\nin `src/index.js` file import the component and use Vue.component method.\n\n```js\n    import Vue from \"vue\"\n    import VueNotionRender from \"vue-notion-render\"\n    Vue.component('VueNotionRender', VueNotionRender)\n```\n\n## Nuxt.js\n\nin order to use it with Nuxt.js create a Nuxt plugin.\n\n1. in `/plugins` directory create a file `vue-notion-render.js`\n\n   ```js\n   import VueNotionRender from 'vue-notion-render'\n   import Vue from 'vue'\n   Vue.component('VueNotionRender', VueNotionRender)\n   ```\n\n2. Register the plugin by adding the file in `nuxt.config.js` plugins array\n\n   ```js\n       plugins: ['~/plugins/vue-notion-render.js']\n   ```\n\n### Local Component\n\nif you don't want to register the component globally you can use it locally in your component.\n\n```js\n    \u003cscript\u003e\n         import VueNotionRender from \"vue-notion-render\"\n         ...\n         export default {\n                 components: {\n                     VueNotionRender,\n                 },\n         ...\n     \u003c/script\u003e\n```\n\n# Usage\n\nThis package doesn't handle the communication with the API, therefore to learn more about the official API check out the [official documentation](https://developers.notion.com/reference/intro).\n\nCurrently the Official API doesn't support all Notion blocks, a temporary solution is to use [notion-api-worker](https://github.com/splitbee/notion-api-worker) a serverless wrapper for the private Notion API.\n\n## Using notion-api-worker\n\n- Use the /v1/page/:id to retrieve page blocks\n- **Make sure to pass :unofficial=\"true\"** prop\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-notion-render :unofficial=\"true\" :data=\"data\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n...js\nexport default {\n    ...\n    data() {\n        return {\n        data: {}\n        };\n    },\n    async created() {\n        try {\n            const data = await fetch(\"https://beta.notiontoblog.workers.dev/v1/page/f36a63918d1246909206813dcec928ea\")\n            this.data = await data.json()\n        }catch(err){\n            console.log(err)\n        }\n    }\n};\n\u003c/script\u003e\n```\n\n## Using The official API\n\nhttps://developers.notion.com/reference/get-block-children\n\n- Retrieve block children and **pass the results array to data**\n- **Make sure to pass :unofficial=\"false\"** prop\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-notion-render :unofficial=\"false\" :data=\"data\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n...\nexport default {\n    ...\n    data() {\n        return {\n            data: []\n        };\n    },\n    async created() {\n        // Retrieve block children and pass the results array to data\n        // https://developers.notion.com/reference/get-block-children\n    }\n};\n\u003c/script\u003e\n```\n\n# Supported Blocks\n\n| Block Type      | Supported | Notion-API-Worker | Official API | Note                                                                                     |\n| --------------- | --------- | ----------------- | ------------ | ---------------------------------------------------------------------------------------- |\n| paragraph       | ✅        | ✅                | ✅           |                                                                                          |\n| Headings        | ✅        | ✅                | ✅           |                                                                                          |\n| To-do           | ✅        | ✅                | ✅           |                                                                                          |\n| Lists           | ✅        | ✅                | ✅           |                                                                                          |\n| Toggle          | ✅        | ✅                | ✅           |                                                                                          |\n| Quote           | ✅        | ✅                | ❌           |                                                                                          |\n| Colors          | ✅        | ✅                | ✅           |                                                                                          |\n| Highlight       | ✅        | ✅                | ✅           |                                                                                          |\n| Divider         | ✅        | ✅                | ❌           |                                                                                          |\n| Callout         | ✅        | ✅                | ❌           |                                                                                          |\n| Emojis          | ✅        | ✅                | ✅           |                                                                                          |\n| Inline Equation | ✅        | ✅                | ✅           |                                                                                          |\n| Block Equation  | ✅        | ✅                | ❌           |                                                                                          |\n| Code            | ✅        | ✅                | ❌           |                                                                                          |\n| Bookmark        | ✅        | ✅                | ❌           |                                                                                          |\n| Embeds          | ✅        | ✅                | ❌           | Spotify, Twitter, Maps, Figma, Pdf, Codepen, TypeForm, Replit, Youtube, Whimsical, Drive |\n| Layout          | ✅        | ✅                | ❌           |                                                                                          |\n| Video           | ✅        | ✅                | ❌           | embed                                                                                    |\n| Audio           | ✅        | ✅                | ❌           | embed                                                                                    |\n| File            | ✅        | ✅                | ❌           | embed                                                                                    |\n| Table           | ❌        | ❌                | ❌           | soon                                                                                     |\n| Board           | ❌        | ❌                | ❌           | soon                                                                                     |\n\n## Custom Blocks\n\nvue-notion-render let you use customized components to render some blocks, to do that \n\n### 1. Register Components globally\n\nVue.js  in `main.js` file register the components\n\n```jsx\nimport Vue from \"vue\";\nimport Component1 from \"../components/component1.vue\";\nimport Component2 from \"../components/component2.vue\";\n\nVue.component(\"Component1\", Component1);\nVue.component(\"Component2\", Component2);\n```\n\nNuxt.js\n\n1.create a plugin in `/plugins` directory and name it `components.js`\n\n```jsx\nimport Vue from \"vue\";\nimport Component1 from \"../components/component1.vue\";\nimport Component2 from \"../components/component2.vue\";\n\nVue.component(\"Component1\", Component1);\nVue.component(\"Component2\", Component2);\n```\n\n2- Register the plugin by adding the file in `nuxt.config.js` plugins array\n\n```jsx\nplugins: ['~/plugins/components.js']\n```\n\n### 2. Create Customized block array\n\nYou need to create an array of objects that contains `blockId` and `componentName` like this\n\n```jsx\ndata() {\n    return {\n      customBlocks: [\n        {\n          blockId: \"fe30b1ce-84a7-47b3-abe1-b3448b989115\",\n          componentName: \"Component1\"\n        },\n        {\n          blockId: \"305fed49-f7e8-412f-80a1-b32e2bbd5a01\",\n          componentName: \"Component2\"\n        }\n      ]\n    };\n  },\n```\n\n### 3. Pass the array to `custom` prop\n\nYou need to pass the customized block array to `custom` prop\n\n```jsx\n\u003cVueNotionRender :unofficial=\"true\" :data=\"blocks\" :custom=\"customBlocks\" /\u003e\n```\n\n### 4. Accept `block` prop in your component\n\nto have the block data you need to accept `block` prop in your component\n\n```jsx\n\u003cscript\u003e\nexport default {\n  props: {\n    block: Object,\n  },\n};\n\u003c/script\u003e\n```\n\n# Credits\n\nCreated By [@yudax](https://twitter.com/_yudax)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotionblog%2Fvue-notion-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotionblog%2Fvue-notion-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotionblog%2Fvue-notion-render/lists"}