{"id":12537,"library":"vue-notion","title":"Vue Notion Renderer","description":"Vue-notion is a Vue.js component library designed to render content from Notion pages within a Vue 3 application. It parses Notion's block structure, typically obtained via the Notion API, and translates it into interactive Vue components, enabling developers to display rich text, images, lists, code blocks, and other Notion content types directly in their web apps. The current stable version is 3.0.0, released recently to target lower ES features for broader browser and environment compatibility. While there isn't a strict, regular release cadence, the project receives updates to introduce new features and fix bugs, as evidenced by patches for issues like the `??` operator bug in earlier versions and fixes for empty table rows. Key differentiators include its tight integration with Vue 3's reactivity system, support for custom component overrides via `blockOverrides` to highly customize the rendering of specific Notion block types, and an `imageOptions` API for advanced image handling. It also seamlessly integrates with `@janniks/vue3-katex` for mathematical equation rendering, offering a comprehensive solution for Notion content display.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/janniks/vue-notion","tags":["javascript"],"install":[{"cmd":"npm install vue-notion","lang":"bash","label":"npm"},{"cmd":"yarn add vue-notion","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-notion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Vue 3 application context.","package":"vue","optional":false},{"reason":"Peer dependency for rendering mathematical equations from Notion blocks. Required for full functionality.","package":"@janniks/vue3-katex","optional":true}],"imports":[{"note":"The library primarily uses named exports and is designed for ESM environments with Vue 3. CommonJS `require` syntax is not supported for modern Vue 3 usage.","wrong":"const NotionRenderer = require('vue-notion')","symbol":"NotionRenderer","correct":"import { NotionRenderer } from 'vue-notion'"}],"quickstart":{"code":"import { createApp, defineComponent, h } from 'vue';\nimport { NotionRenderer } from 'vue-notion';\nimport '@janniks/vue3-katex/dist/katex.min.css'; // Essential for math rendering\n\n// Mock Notion block data (in a real app, this would come from Notion API)\nconst mockNotionBlocks = [\n  { id: '1', type: 'paragraph', paragraph: { rich_text: [{ type: 'text', text: { content: 'Welcome to your Notion page rendered in Vue!' } }] } },\n  { id: '2', type: 'heading_2', heading_2: { rich_text: [{ type: 'text', text: { content: 'Key Features:' } }] } },\n  { id: '3', type: 'bulleted_list_item', bulleted_list_item: { rich_text: [{ type: 'text', text: { content: 'Render various block types (paragraphs, headings, lists)' } }] } },\n  { id: '4', type: 'bulleted_list_item', bulleted_list_item: { rich_text: [{ type: 'text', text: { content: 'Support for images and code blocks' } }] } },\n  { id: '5', type: 'code', code: { rich_text: [{ type: 'text', text: { content: 'function hello() { console.log(\"Vue-Notion\"); }' } }], language: 'javascript' } },\n  { id: '6', type: 'equation', equation: { expression: 'x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}' } },\n  { id: '7', type: 'image', image: { type: 'external', external: { url: 'https://picsum.photos/id/237/200/100' } } },\n  { id: '8', type: 'paragraph', paragraph: { rich_text: [{ type: 'text', text: { content: 'Remember to fetch actual Notion data from their API and pass it to the renderer.' } }] } }\n];\n\nconst App = defineComponent({\n  components: { NotionRenderer },\n  data() {\n    return {\n      notionPageBlocks: mockNotionBlocks\n    };\n  },\n  template: `\n    <div id=\"app\" style=\"font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px;\">\n      <h1>My Notioned Blog Post</h1>\n      <NotionRenderer :blockMap=\"notionPageBlocks\" fullPage />\n    </div>\n  `,\n});\n\ncreateApp(App).mount('#app');","lang":"typescript","description":"Demonstrates how to import and use the `NotionRenderer` component with mock Notion block data. It includes necessary CSS for KaTeX and sets up a basic Vue 3 application to display rendered content, highlighting various block types including code and equations."},"warnings":[{"fix":"Review the official `vue-notion` documentation and GitHub changelog for detailed migration guides specific to 3.0.0. Test your application extensively after upgrading.","message":"Version `3.0.0` represents a major version update. While specific API breaking changes are not detailed in the provided release notes, major releases typically include significant internal refactoring, potential API changes, or drops in support for older Vue.js versions or environments. Always perform thorough testing when upgrading from `1.x` to `3.x`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Install `@janniks/vue3-katex` via npm or yarn (`npm install @janniks/vue3-katex`) and ensure `import '@janniks/vue3-katex/dist/katex.min.css';` is included in your main application entry file or a global stylesheet.","message":"The package has a peer dependency on `@janniks/vue3-katex` for rendering mathematical equations. If `@janniks/vue3-katex` is not installed, or its required CSS (`@janniks/vue3-katex/dist/katex.min.css`) is not imported, Notion equation blocks will not render correctly and may lead to console errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `vue-notion@^1.5.0` or `vue-notion@^3.0.0` to resolve issues related to the nullish coalescing operator.","message":"Early versions of `vue-notion` (prior to `1.5.0`) contained a bug related to the `??` (nullish coalescing) operator, which could cause runtime errors in environments that do not fully support ES2020 features. This was fixed in `1.5.0`.","severity":"gotcha","affected_versions":"<1.5.0"},{"fix":"Ensure your `vue-notion` version is `^1.4.2` or later to utilize the `blockOverrides` functionality for custom block rendering.","message":"Custom component support via the `blockOverrides` setting was introduced in version `1.4.2`. If you intend to override default Notion block rendering with your own Vue components, you must be on this version or newer.","severity":"gotcha","affected_versions":"<1.4.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import { NotionRenderer } from 'vue-notion';` in your script, and it's either globally registered or registered in the `components` option of the parent component, e.g., `{ components: { NotionRenderer } }`.","cause":"The `NotionRenderer` component was not correctly imported or registered within your Vue application.","error":"Failed to resolve component: NotionRenderer"},{"fix":"Install `@janniks/vue3-katex` (`npm install @janniks/vue3-katex`) and add `import '@janniks/vue3-katex/dist/katex.min.css';` to your main application entry point (e.g., `main.js` or `App.vue`'s `<script setup>` or `<style>`).","cause":"This error often indicates that the `@janniks/vue3-katex` library, a peer dependency, is missing or its styles are not loaded, leading to issues when `vue-notion` attempts to render Notion equation blocks.","error":"TypeError: Cannot read properties of undefined (reading 'call') at Proxy.render (webpack-internal:///./node_modules/@janniks/vue3-katex/dist/index.js)"}],"ecosystem":"npm"}