vue3-notion
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.35 • Public • Published
    vue3-notion

    An unofficial Notion renderer (Vue 3) version

    Features · Install · Examples · Credits

    Package version MIT license Follow on Twitter


    A Vue 3 renderer for Notion pages (ported from vue-notion). Special thanks to Jannik Siebert & all the vue-notion contributors that made the vue-notion possible!

    Use Notion as CMS for your blog, documentation or personal site. Also check out react-notion (developed by Splitbee 🐝 – a fast, reliable, free, and modern analytics for any team)

    This package doesn't handle the communication with the API (I planned to add this!). Check out notion-api-worker from Splitbee for an easy solution.

    Created by Zernonia

    Features

    🌎 SSR / Static Generation Support – Functions to work with Nuxt3 and other frameworks

    🎯 Accurate – Results are almost identical

    🎨 Custom Styles – Styles are easily adaptable. Optional styles included

    🔮 Syntax-Highlighting – Beautiful themeable code highlighting using Prism.js

    Install

    Vue 3

    npm install vue3-notion
    # yarn add vue3-notion

    Nuxt3 Module

    Install as a dev-dependency and add "vue3-notion/nuxt" to the buildModules array in nuxt.config.js.

    npm install vue3-notion --save-dev
    // nuxt.config.ts
    import { defineNuxtConfig } from "nuxt3"
    
    export default defineNuxtConfig({
      //...
      modules: [
        ["vue3-notion/nuxt", { css: true }], // css is not imported by default. Set `true` to import css
      ],
    })

    Examples

    These examples use a simple wrapper around the notion-api-worker to access the Notion page data. It is also possible to store a page received from the Notion API in .json and use it without the async/await part.

    Use the getPageBlocks and getPageTable methods with caution! They are based on the private Notion API. We can NOT guarantee that it will stay stable. The private API is warpped by notion-api-worker.

    Basic Example for Vue 3

    This example is a part of demo/ and is hosted at vue3-notion.vercel.app.

    <script setup lang="ts">
    import { NotionRenderer, getPageBlocks, useGetPageBlocks } from "vue3-notion"
    import { ref, onMounted } from "vue"
    
    const data = ref()
    
    onMounted(async () => {
      data.value = await getPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
    })
    
    // ---- or using Composables ----
    
    const { data } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
    </script>
    
    <template>
      <NotionRenderer v-if="data" :blockMap="data" fullPage />
    </template>
    
    <style>
    @import "vue3-notion/dist/style.css"; /* optional Notion-like styles */
    @import "prismjs/themes/prism.css";
    @import "katex/dist/katex.min.css";
    </style>

    Basic Example for Nuxt3

    This example is a part of demo/ and is hosted at vue3-notion.vercel.app.

    <script setup lang="ts">
    const { $notion } = useNuxtApp()
    const { data } = await useAsyncData("notion", () => $notion.getPageBlocks("2e22de6b770e4166be301490f6ffd420"))
    </script>
    
    <template>
      <NotionRenderer :blockMap="data" fullPage prism />
    </template>

    Supported Blocks

    Most common block types are supported. We happily accept pull requests to add support for the missing blocks.

    Block Type Supported Notes
    Text Yes
    Heading Yes
    Image Yes
    Image Caption Yes
    Bulleted List Yes
    Numbered List Yes
    Quote Yes
    Callout Yes
    Column Yes
    iframe Yes
    Video Yes Only embedded videos
    Divider Yes
    Link Yes
    Code Yes
    Web Bookmark Yes
    Toggle List Yes
    Page Links Yes
    Cover Yes Enable with fullPage
    Equations Yes
    Checkbox Yes
    Simple Tables Yes
    Table Of Contents Yes
    Databases ☑️ Planned

    Please, feel free to open an issue if you notice any important blocks missing or anything wrong with existing blocks.

    🌎 Local Development

    Prerequisites

    Yarn

    • npm install --global yarn

    Development

    1. Clone the repo
      git clone https://github.com/zernonia/vue3-notion.git
    2. Install NPM packages
      yarn
    3. Run Development instance
      yarn dev

    Credits

    License ⚖️

    MIT © zernonia

    Install

    npm i vue3-notion

    DownloadsWeekly Downloads

    580

    Version

    0.1.35

    License

    MIT

    Unpacked Size

    1.46 MB

    Total Files

    49

    Last publish

    Collaborators

    • zernonia