@slogvo/vue-notion 0.1.0

package/LICENSE

@@ -0,0 +1,26 @@
+MIT License
+
+Copyright (c) 2026 Vue Notion X Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+This project extends MIT-licensed work from react-notion-x by Travis Fischer
+and other contributors.

package/README.md

@@ -0,0 +1,129 @@
+# @slogvo/vue-notion
+
+> **Vue Notion** is a fast and accurate Vue 3 renderer for Notion. Use Notion as a CMS for your Vue or Nuxt applications. ⚡️
+>
+> **Vue Notion** là bộ render Notion cho **Vue 3** và **Nuxt 3** cực nhanh và chính xác. Giải pháp hoàn hảo để dùng Notion làm CMS. 🚀
+>
+> **Vue Notion** は、Vue 3 および Nuxt 3 向けの高速で正確な Notion レンダラーです。Notion を CMS として利用するための最適なソリューションです。 ⚡️
+
+## SEO Keywords
+
+`Vue Notion Renderer`, `Vue 3 Notion`, `Nuxt 3 Notion API`, `Notion CMS Vue`, `Renderer Notion Vue 3`, `Hiển thị Notion trên Vue`, `Notion API client for Vue`, `Notion SDK Vue`, `Notion to HTML Vue`
+
+## Features
+
+- ⚡ **Fast** - Optimized rendering with lazy loading
+- 🎨 **Flexible** - Fully customizable components and styling
+- 🔍 **Search** - Built-in full-text search support
+- 🗂️ **Collections** - Rich support for database views:
+  - Table (with resizing)
+  - Gallery
+  - List
+  - Board (with grouping)
+- 🛠️ **Universal** - Works with Vue 3 and Nuxt 3 (SSR/SSG friendly)
+
+## Installation
+
+```bash
+# using pnpm
+pnpm add @slogvo/vue-notion @slogvo/notion-client @slogvo/notion-types @slogvo/notion-utils
+
+# using npm
+npm install @slogvo/vue-notion @slogvo/notion-client @slogvo/notion-types @slogvo/notion-utils
+```
+
+## Usage
+
+### Basic Rendering
+
+```vue
+<script setup lang="ts">
+import { NotionRenderer } from '@slogvo/vue-notion'
+import { NotionAPI } from '@slogvo/notion-client'
+
+// Fetch data on the server (e.g., in Nuxt useAsyncData or getServerSideProps)
+const api = new NotionAPI()
+const recordMap = await api.getPage('your-page-id')
+</script>
+
+<template>
+  <NotionRenderer :record-map="recordMap" full-page class="notion-page" />
+</template>
+
+<style>
+/* Import the styles */
+@import '@slogvo/vue-notion/dist/style.css';
+/* Or if using the source directly */
+/* @import '@slogvo/vue-notion/src/styles.css'; */
+</style>
+```
+
+### Enabling Search
+
+To enable the search functionality, pass the `searchNotion` prop to the renderer:
+
+```vue
+<script setup lang="ts">
+import { NotionRenderer } from '@slogvo/vue-notion'
+
+// Define your search function (server-side wrapper)
+const searchNotion = async params => {
+  // Call your API endpoint that wraps notion-client's search
+  return await $fetch('/api/notion/search', {
+    method: 'POST',
+    body: params
+  })
+}
+</script>
+
+<template>
+  <NotionRenderer
+    :record-map="recordMap"
+    :search-notion="searchNotion"
+    full-page
+  />
+</template>
+```
+
+### Customizing Components
+
+You can override any default component by passing a `components` map:
+
+```vue
+<script setup lang="ts">
+import { NotionRenderer } from '@slogvo/vue-notion'
+import MyCustomLink from './MyCustomLink.vue'
+
+const customComponents = {
+  PageLink: MyCustomLink
+}
+</script>
+
+<template>
+  <NotionRenderer :record-map="recordMap" :components="customComponents" />
+</template>
+```
+
+## Styling
+
+`@slogvo/vue-notion` comes with a comprehensive CSS file that closely mimics Notion's default styling.
+
+You can import it in your main CSS file or component:
+
+```css
+@import '@slogvo/vue-notion/dist/style.css';
+```
+
+Classes are prefixed with `.notion-` to avoid conflicts. You can easily override variables for theming:
+
+```css
+:root {
+  --notion-font: 'Inter', sans-serif;
+  --fg-color: #333;
+  --bg-color: #fff;
+}
+```
+
+## Credits
+
+This project is a Vue port of the excellent [react-notion-x](https://github.com/NotionX/react-notion-x) by [Travis Fischer](https://github.com/transitive-bullshit).

package/build/CollectionCard.vue_vue_type_script_setup_true_lang-14wiD7gP.js

@@ -0,0 +1,86 @@
+import { defineComponent as N, computed as o, createBlock as z, openBlock as l, resolveDynamicComponent as V, unref as m, normalizeClass as x, withCtx as w, createElementBlock as n, createCommentVNode as u, createElementVNode as d, createVNode as s, normalizeStyle as B, Fragment as v, renderList as F } from "vue";
+import { u as U, c as $, a as E } from "./index-BNMgDI2p.js";
+import { a as p } from "./collection-utils-Cqo2kyVg.js";
+const L = {
+  key: 0,
+  class: "notion-collection-card-cover"
+}, P = { class: "notion-collection-card-body" }, S = { class: "notion-collection-card-property" }, j = {
+  key: 0,
+  class: "notion-collection-card-property"
+}, A = {
+  name: "NotionCollectionCard"
+}, H = /* @__PURE__ */ N({
+  ...A,
+  props: {
+    block: {},
+    collection: {},
+    collectionView: {},
+    className: {}
+  },
+  setup(e) {
+    const c = e, { recordMap: D, mapPageUrl: y, mapImageUrl: k, components: b } = U(), a = o(() => c.collectionView.format || {}), f = o(
+      () => a.value.gallery_cover || { type: "none" }
+    ), g = o(
+      () => a.value.gallery_cover_size || "medium"
+    ), h = o(
+      () => a.value.gallery_cover_aspect || "cover"
+    ), C = o(() => a.value.gallery_properties || []), r = o(() => {
+      if (f.value.type === "page_cover") {
+        const i = c.block.format?.page_cover;
+        if (i)
+          return {
+            src: k(i, c.block),
+            alt: c.block.properties?.title?.[0]?.[0] || "notion image"
+          };
+      }
+      return null;
+    }), _ = o(() => y(c.block.id));
+    return (i, I) => (l(), z(V(m(b).PageLink), {
+      href: _.value,
+      class: x(
+        m($)(
+          "notion-collection-card",
+          `notion-collection-card-size-${g.value}`,
+          e.className
+        )
+      )
+    }, {
+      default: w(() => [
+        r.value ? (l(), n("div", L, [
+          s(E, {
+            src: r.value.src,
+            alt: r.value.alt,
+            style: B({ objectFit: h.value })
+          }, null, 8, ["src", "alt", "style"])
+        ])) : u("", !0),
+        d("div", P, [
+          d("div", S, [
+            s(p, {
+              schema: e.collection.schema.title,
+              data: e.block.properties?.title,
+              block: e.block,
+              collection: e.collection
+            }, null, 8, ["schema", "data", "block", "collection"])
+          ]),
+          (l(!0), n(v, null, F(C.value, (t) => (l(), n(v, {
+            key: t.property
+          }, [
+            t.visible && t.property !== "title" && e.block.properties?.[t.property] ? (l(), n("div", j, [
+              s(p, {
+                schema: e.collection.schema[t.property],
+                data: e.block.properties[t.property],
+                block: e.block,
+                collection: e.collection,
+                inline: ""
+              }, null, 8, ["schema", "data", "block", "collection"])
+            ])) : u("", !0)
+          ], 64))), 128))
+        ])
+      ]),
+      _: 1
+    }, 8, ["href", "class"]));
+  }
+});
+export {
+  H as _
+};

package/build/CollectionViewBoard-CgsTRxVb.js

@@ -0,0 +1,131 @@
+import { defineComponent as L, computed as s, createElementBlock as e, openBlock as o, Fragment as r, renderList as c, createBlock as f, mergeProps as E, withCtx as F, createElementVNode as t, normalizeStyle as z, normalizeClass as x, unref as b, createCommentVNode as _, toDisplayString as h } from "vue";
+import { u as I, c as G } from "./index-BNMgDI2p.js";
+import { _ as N } from "./CollectionCard.vue_vue_type_script_setup_true_lang-14wiD7gP.js";
+import { g as K, _ as M } from "./collection-utils-Cqo2kyVg.js";
+const P = { class: "notion-board" }, R = { class: "notion-board-header" }, j = { class: "notion-board-header-inner" }, q = {
+  key: 0,
+  class: "notion-board-th-body"
+}, A = { class: "notion-board-th-title" }, H = { class: "notion-board-th-count" }, J = { class: "notion-board-body" }, O = {
+  key: 1,
+  class: "notion-board"
+}, Q = { class: "notion-board-header" }, T = { class: "notion-board-header-inner" }, U = {
+  key: 0,
+  class: "notion-board-th-body"
+}, W = { class: "notion-board-th-title" }, X = { class: "notion-board-th-count" }, Y = { class: "notion-board-body" }, Z = {
+  name: "NotionCollectionViewBoard"
+}, lo = /* @__PURE__ */ L({
+  ...Z,
+  props: {
+    collection: {},
+    collectionView: {},
+    collectionData: {},
+    width: {},
+    padding: {}
+  },
+  setup(d) {
+    const n = d, w = s(() => ({
+      paddingLeft: n.padding ? `${n.padding}px` : "0"
+    })), { recordMap: m } = I(), C = s(
+      () => !!n.collectionView?.format?.collection_group_by
+    ), B = s(() => C.value ? K(
+      n.collection,
+      n.collectionView,
+      n.collectionData
+    ) : []), y = s(() => n.collectionView.format || {}), V = s(
+      () => y.value.board_cover_size || "medium"
+    ), p = s(() => y.value.board_columns || y.value.board_groups2 || []), k = (u) => {
+      const i = `results:${u?.value?.type}:${u?.value?.value || "uncategorized"}`;
+      return n.collectionData[i] || { blockIds: [] };
+    }, S = (u) => {
+      const i = k(u);
+      return i.total || i.blockIds?.length || 0;
+    }, D = s(() => ({
+      paddingLeft: n.padding ? `${n.padding}px` : "0"
+    }));
+    return (u, i) => C.value ? (o(!0), e(r, { key: 0 }, c(B.value, (a, v) => (o(), f(M, E({ key: v }, { ref_for: !0 }, a, {
+      "summary-props": { style: D.value }
+    }), {
+      default: F(() => [
+        t("div", P, [
+          t("div", {
+            class: x(
+              b(G)("notion-board-view", `notion-board-view-size-${V.value}`)
+            ),
+            style: z(w.value)
+          }, [
+            t("div", R, [
+              t("div", j, [
+                (o(!0), e(r, null, c(p.value, (l, g) => (o(), e("div", {
+                  key: g,
+                  class: "notion-board-th"
+                }, [
+                  l.hidden ? _("", !0) : (o(), e("div", q, [
+                    t("span", A, h(l.value?.value || "No Select"), 1),
+                    t("span", H, h(S(l)), 1)
+                  ]))
+                ]))), 128))
+              ])
+            ]),
+            i[0] || (i[0] = t("div", { class: "notion-board-header-placeholder" }, null, -1)),
+            t("div", J, [
+              (o(!0), e(r, null, c(p.value, (l, g) => (o(), e("div", {
+                key: g,
+                class: "notion-board-group"
+              }, [
+                l.hidden ? _("", !0) : (o(!0), e(r, { key: 0 }, c(k(l).blockIds, ($) => (o(), f(N, {
+                  key: $,
+                  block: b(m).block[$]?.value,
+                  collection: d.collection,
+                  "collection-view": d.collectionView,
+                  class: "notion-board-group-card"
+                }, null, 8, ["block", "collection", "collection-view"]))), 128))
+              ]))), 128))
+            ])
+          ], 6)
+        ])
+      ]),
+      _: 1
+    }, 16, ["summary-props"]))), 128)) : (o(), e("div", O, [
+      t("div", {
+        class: x(
+          b(G)("notion-board-view", `notion-board-view-size-${V.value}`)
+        ),
+        style: z(w.value)
+      }, [
+        t("div", Q, [
+          t("div", T, [
+            (o(!0), e(r, null, c(p.value, (a, v) => (o(), e("div", {
+              key: v,
+              class: "notion-board-th"
+            }, [
+              a.hidden ? _("", !0) : (o(), e("div", U, [
+                t("span", W, h(a.value?.value || "No Select"), 1),
+                t("span", X, h(S(a)), 1)
+              ]))
+            ]))), 128))
+          ])
+        ]),
+        i[1] || (i[1] = t("div", { class: "notion-board-header-placeholder" }, null, -1)),
+        t("div", Y, [
+          (o(!0), e(r, null, c(p.value, (a, v) => (o(), e("div", {
+            key: v,
+            class: "notion-board-group"
+          }, [
+            a.hidden ? _("", !0) : (o(!0), e(r, { key: 0 }, c(k(a).blockIds, (l) => (o(), e(r, { key: l }, [
+              b(m).block[l]?.value ? (o(), f(N, {
+                key: 0,
+                block: b(m).block[l].value,
+                collection: d.collection,
+                "collection-view": d.collectionView,
+                class: "notion-board-group-card"
+              }, null, 8, ["block", "collection", "collection-view"])) : _("", !0)
+            ], 64))), 128))
+          ]))), 128))
+        ])
+      ], 6)
+    ]));
+  }
+});
+export {
+  lo as default
+};

package/build/CollectionViewGallery-B_vTmafL.js

@@ -0,0 +1,73 @@
+import { defineComponent as C, computed as c, createElementBlock as i, openBlock as e, Fragment as a, renderList as s, createBlock as u, mergeProps as V, withCtx as h, createElementVNode as n, normalizeClass as g, unref as r } from "vue";
+import { u as z, c as y } from "./index-BNMgDI2p.js";
+import { _ as f } from "./CollectionCard.vue_vue_type_script_setup_true_lang-14wiD7gP.js";
+import { g as x, _ as D } from "./collection-utils-Cqo2kyVg.js";
+const G = { class: "notion-gallery" }, $ = { class: "notion-gallery-view" }, B = {
+  key: 1,
+  class: "notion-gallery"
+}, N = { class: "notion-gallery-view" }, E = {
+  name: "NotionCollectionViewGallery"
+}, j = /* @__PURE__ */ C({
+  ...E,
+  props: {
+    collection: {},
+    collectionView: {},
+    collectionData: {}
+  },
+  setup(l) {
+    const o = l, { recordMap: d } = z(), m = c(
+      () => !!o.collectionView?.format?.collection_group_by
+    ), k = c(() => m.value ? x(
+      o.collection,
+      o.collectionView,
+      o.collectionData
+    ) : []), w = c(() => o.collectionData.collection_group_results?.blockIds || o.collectionData.blockIds || []), p = c(() => o.collectionView.format || {}), v = c(
+      () => p.value.gallery_cover_size || "medium"
+    );
+    return (F, I) => m.value ? (e(!0), i(a, { key: 0 }, s(k.value, (t, b) => (e(), u(D, V({ key: b }, { ref_for: !0 }, t), {
+      default: h(() => [
+        n("div", G, [
+          n("div", $, [
+            n("div", {
+              class: g(
+                r(y)(
+                  "notion-gallery-grid",
+                  `notion-gallery-grid-size-${v.value}`
+                )
+              )
+            }, [
+              (e(!0), i(a, null, s(t.blockIds, (_) => (e(), u(f, {
+                key: _,
+                block: r(d).block[_]?.value,
+                collection: l.collection,
+                "collection-view": l.collectionView
+              }, null, 8, ["block", "collection", "collection-view"]))), 128))
+            ], 2)
+          ])
+        ])
+      ]),
+      _: 2
+    }, 1040))), 128)) : (e(), i("div", B, [
+      n("div", N, [
+        n("div", {
+          class: g(
+            r(y)(
+              "notion-gallery-grid",
+              `notion-gallery-grid-size-${v.value}`
+            )
+          )
+        }, [
+          (e(!0), i(a, null, s(w.value, (t) => (e(), u(f, {
+            key: t,
+            block: r(d).block[t]?.value,
+            collection: l.collection,
+            "collection-view": l.collectionView
+          }, null, 8, ["block", "collection", "collection-view"]))), 128))
+        ], 2)
+      ])
+    ]));
+  }
+});
+export {
+  j as default
+};

package/build/CollectionViewList-D3G1ACy1.js

@@ -0,0 +1,124 @@
+import { defineComponent as x, computed as _, createElementBlock as i, openBlock as t, Fragment as r, renderList as m, createBlock as v, mergeProps as L, withCtx as k, createElementVNode as n, resolveDynamicComponent as C, unref as e, createVNode as d, createCommentVNode as V } from "vue";
+import { u as B, _ as D } from "./index-BNMgDI2p.js";
+import { g as G, _ as $, a as h } from "./collection-utils-Cqo2kyVg.js";
+const E = { class: "notion-list-collection" }, F = { class: "notion-list-view" }, M = { class: "notion-list-body" }, U = { class: "notion-list-item-title" }, j = { class: "notion-list-item-body" }, q = {
+  key: 0,
+  class: "notion-list-item-property"
+}, z = {
+  key: 1,
+  class: "notion-list-collection"
+}, A = { class: "notion-list-view" }, H = { class: "notion-list-body" }, J = { class: "notion-list-item-title" }, K = { class: "notion-list-item-body" }, O = {
+  key: 0,
+  class: "notion-list-item-property"
+}, Q = {
+  name: "NotionCollectionViewList"
+}, X = /* @__PURE__ */ x({
+  ...Q,
+  props: {
+    collection: {},
+    collectionView: {},
+    collectionData: {}
+  },
+  setup(c) {
+    const s = c, { recordMap: o, mapPageUrl: f, components: y } = B(), b = _(
+      () => !!s.collectionView?.format?.collection_group_by
+    ), N = _(() => b.value ? G(
+      s.collection,
+      s.collectionView,
+      s.collectionData
+    ) : []), P = _(() => s.collectionData.collection_group_results?.blockIds || s.collectionData.blockIds || []), g = _(() => s.collectionView.format?.list_properties?.filter(
+      (w) => w.visible
+    ) || []);
+    return (w, R) => b.value ? (t(!0), i(r, { key: 0 }, m(N.value, (l, u) => (t(), v($, L({ key: u }, { ref_for: !0 }, l), {
+      default: k(() => [
+        n("div", E, [
+          n("div", F, [
+            n("div", M, [
+              (t(!0), i(r, null, m(l.blockIds, (a) => (t(), v(C(e(y).PageLink), {
+                key: a,
+                href: e(f)(a),
+                class: "notion-list-item notion-page-link"
+              }, {
+                default: k(() => [
+                  n("div", U, [
+                    d(D, {
+                      block: e(o).block[a]?.value,
+                      class: "notion-page-title-icon",
+                      "hide-default-icon": ""
+                    }, null, 8, ["block"]),
+                    d(h, {
+                      schema: c.collection.schema.title,
+                      data: e(o).block[a]?.value?.properties?.title,
+                      block: e(o).block[a]?.value,
+                      collection: c.collection
+                    }, null, 8, ["schema", "data", "block", "collection"])
+                  ]),
+                  n("div", j, [
+                    (t(!0), i(r, null, m(g.value, (p) => (t(), i(r, {
+                      key: p.property
+                    }, [
+                      p.property !== "title" ? (t(), i("div", q, [
+                        d(h, {
+                          schema: c.collection.schema[p.property],
+                          data: e(o).block[a]?.value?.properties?.[p.property],
+                          block: e(o).block[a]?.value,
+                          collection: c.collection
+                        }, null, 8, ["schema", "data", "block", "collection"])
+                      ])) : V("", !0)
+                    ], 64))), 128))
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["href"]))), 128))
+            ])
+          ])
+        ])
+      ]),
+      _: 2
+    }, 1040))), 128)) : (t(), i("div", z, [
+      n("div", A, [
+        n("div", H, [
+          (t(!0), i(r, null, m(P.value, (l) => (t(), v(C(e(y).PageLink), {
+            key: l,
+            href: e(f)(l),
+            class: "notion-list-item notion-page-link"
+          }, {
+            default: k(() => [
+              n("div", J, [
+                d(D, {
+                  block: e(o).block[l]?.value,
+                  class: "notion-page-title-icon",
+                  "hide-default-icon": ""
+                }, null, 8, ["block"]),
+                d(h, {
+                  schema: c.collection.schema.title,
+                  data: e(o).block[l]?.value?.properties?.title,
+                  block: e(o).block[l]?.value,
+                  collection: c.collection
+                }, null, 8, ["schema", "data", "block", "collection"])
+              ]),
+              n("div", K, [
+                (t(!0), i(r, null, m(g.value, (u) => (t(), i(r, {
+                  key: u.property
+                }, [
+                  u.property !== "title" ? (t(), i("div", O, [
+                    d(h, {
+                      schema: c.collection.schema[u.property],
+                      data: e(o).block[l]?.value?.properties?.[u.property],
+                      block: e(o).block[l]?.value,
+                      collection: c.collection
+                    }, null, 8, ["schema", "data", "block", "collection"])
+                  ])) : V("", !0)
+                ], 64))), 128))
+              ])
+            ]),
+            _: 2
+          }, 1032, ["href"]))), 128))
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  X as default
+};