https://github.com/kenjiwilkins/notion-vue-renderer

A rich text renderer for notion API blocks response
https://github.com/kenjiwilkins/notion-vue-renderer

notion typescript vue

Last synced: 24 days ago
JSON representation

A rich text renderer for notion API blocks response

• Host: GitHub
• URL: https://github.com/kenjiwilkins/notion-vue-renderer
• Owner: kenjiwilkins
• License: mit
• Created: 2023-10-04T13:51:57.000Z (about 1 year ago)
• Default Branch: develop-v1.0.4
• Last Pushed: 2024-06-18T17:47:56.000Z (5 months ago)
• Last Synced: 2024-09-30T00:06:40.025Z (about 1 month ago)
• Topics: notion, typescript, vue
• Language: TypeScript
• Homepage:
• Size: 381 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# notion-vue-renderer

Vue 3 renderer for notion blocks

## Changelog

See releases page for changelog of versions.

## Installation

Using [npm](http://npmjs.org/):

```sh

npm install notion-vue-renderer

```

Using [yarn](https://yarnpkg.com/):

```sh

yarn add notion-vue-renderer

```

## Usage

```html

  import BlocksRenderer from "notion-vue-renderer";

  const blocks = {

    object: "list",

    results: [

      {

        object: "block",

        type: "heading_1",

        heading_1: {

          text: [

            {

              type: "text",

              text: {

                content: "Hello World",

                link: null,

              },

              annotations: {

                bold: false,

                italic: false,

                strikethrough: false,

                underline: false,

                code: false,

                color: "default",

              },

              plain_text: "Hello World",

              href: null,

            },

          ],

        },

      },

    ],

  };

  export default {

    data() {

      return {

        blocks: blocks.result,

      };

    },

  };

  

```

## Available Blocks

- `BLOCKS`

  - `PARAGRAPH`

  - `HEADING_1`

  - `HEADING_2`

  - `HEADING_3`

  - `BULLETED_LIST_ITEM`

  - `NUMBERED_LIST_ITEM`

  - `TO_DO_LIST_ITEM`

  - `DIVIDER`

- `ANNOTATIONS`

  - `BOLD`

  - `ITALIC`

  - `UNDERLINE`

  - `STRIKETHROUGH`

  - `CODE`

  - `LINK`

## Dear Developers

This project is still in development. If you have any suggestions or ideas, please feel free to open an issue or PR.