vue-notion

import { createApp, defineComponent, h } from 'vue'; import { NotionRenderer } from 'vue-notion'; import '@janniks/vue3-katex/dist/katex.min.css'; // Essential for math rendering // Mock Notion block data (in a real app, this would come from Notion API) const mockNotionBlocks = [ { id: '1', type: 'paragraph', paragraph: { rich_text: [{ type: 'text', text: { content: 'Welcome to your Notion page rendered in Vue!' } }] } }, { id: '2', type: 'heading_2', heading_2: { rich_text: [{ type: 'text', text: { content: 'Key Features:' } }] } }, { id: '3', type: 'bulleted_list_item', bulleted_list_item: { rich_text: [{ type: 'text', text: { content: 'Render various block types (paragraphs, headings, lists)' } }] } }, { id: '4', type: 'bulleted_list_item', bulleted_list_item: { rich_text: [{ type: 'text', text: { content: 'Support for images and code blocks' } }] } }, { id: '5', type: 'code', code: { rich_text: [{ type: 'text', text: { content: 'function hello() { console.log("Vue-Notion"); }' } }], language: 'javascript' } }, { id: '6', type: 'equation', equation: { expression: 'x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}' } }, { id: '7', type: 'image', image: { type: 'external', external: { url: 'https://picsum.photos/id/237/200/100' } } }, { 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.' } }] } } ]; const App = defineComponent({ components: { NotionRenderer }, data() { return { notionPageBlocks: mockNotionBlocks }; }, template: ` <div id="app" style="font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px;"> <h1>My Notioned Blog Post</h1> <NotionRenderer :blockMap="notionPageBlocks" fullPage /> </div> `, }); createApp(App).mount('#app');