vue-notion

    1.3.0 • Public • Published
    vue-notion

    An unofficial Notion renderer

    Features · Install · Docs · Examples · Credits

    Package version Compressed size MIT license Follow on Twitter


    A Vue renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site.

    vue-notion was ported to Vue from 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. Check out notion-api-worker from Splitbee for an easy solution.

    Created by Jannik Siebert

    Features

    🎯 Accurate – Results are almost identical

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

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

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

    Install

    Vue

    npm install vue-notion

    NuxtJS Module

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

    npm install vue-notion --save-dev
    // nuxt.config.js
    export default {
      // ...
      buildModules: ["vue-notion/nuxt"],
    };

    Docs

    • NotionRenderer: docs/
    • Syntax-Highlighting in Code Blocks (with Prism.js): docs/
    • Notion API: docs/
    • Nuxt: docs/

    Check out a full working demo at vue-notion.now.sh The code for the demo is in example/.

    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. If you use these methods a lot, please consider hosting you own instance, as described in docs#notion-api.

    Basic Example for Vue

    This example is a part of example/ and is hosted at vue-notion.now.sh/vue.

    <template>
      <NotionRenderer :blockMap="blockMap" fullPage />
    </template>
    
    <script>
    import { NotionRenderer, getPageBlocks } from "vue-notion";
    
    export default {
      components: { NotionRenderer },
      data: () => ({ blockMap: null }),
      async created() {
        // get Notion blocks from the API via a Notion pageId
        this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
      },
    };
    </script>
    
    <style>
    @import "vue-notion/src/styles.css"; /* optional Notion-like styles */
    </style>

    Basic Example for NuxtJS

    This example is a part of example/ and is hosted at vue-notion.now.sh/nuxt.

    <template>
      <NotionRenderer :blockMap="blockMap" fullPage />
    </template>
    
    <script>
    export default {
      data: () => ({ blockMap: null }),
      async asyncData({ $notion }) {
        // use Notion module to get Notion blocks from the API via a Notion pageId
        const blockMap = await $notion.getPageBlocks(
          "8c1ab01960b049f6a282dda64a94afc7"
        );
        return { blockMap };
      },
    };
    </script>
    
    <style>
    @import "vue-notion/src/styles.css"; /* optional Notion-like styles */
    </style>

    Sites using vue-notion 🌎

    List of pages that are using this library.

    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
    Databases Not planned
    Checkbox Not planned
    Table Of Contents Not planned

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

    Credits

    License ⚖️

    MIT © Jannik Siebert

    Keywords

    none

    Install

    npm i vue-notion

    DownloadsWeekly Downloads

    440

    Version

    1.3.0

    License

    none

    Unpacked Size

    177 kB

    Total Files

    10

    Last publish

    Collaborators

    • janniks