Vue3-notion - An unofficial Notion renderer (Vue 3) version

Overview
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({
  //...
  buildModules: ["vue3-notion/nuxt"],
  css: ["vue3-notion/dist/style.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 } from "vue3-notion"
import { ref, onMounted } from "vue"

const data = ref()

onMounted(async () => {
  data.value = await getPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
})
</script>

<template>
  <NotionRenderer v-if="data" :blockMap="data" fullPage />
</template>

<style>
@import "vue3-notion/dist/style.css"; /* optional Notion-like styles */
</style>

Basic Example for Nuxt3

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

<script setup lang="ts">
import { useNuxtApp } from "#app"

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

Comments
  • Allow rendering one block only

    Allow rendering one block only

    Allow rendering one block only example Images, or just todo, list. etc I tried to render this image but I can't render it

    "cover": [
    {
    "name": "app.png",
    "url": "https://www.notion.so/image/https:%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7639505d-c659-4564-9dae-0bfd6cd92172%2Fapp.png?table=block&id=69c96a40-c579-466b-afe9-1ca7e2421cb9&cache=v2",
    "rawUrl": "https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7639505d-c659-4564-9dae-0bfd6cd92172/app.png"
    }
    ],
    
          <img
            v-if="article.cover && article.cover.length > 0"
            :alt="article.cover[0].name"
            class="object-cover md:w-1/3 border border-green-500 md:mr-5"
            :src="article.cover[0].url"
          />
    

    How this library render images without the notion cookie?

    opened by yacosta738 3
  • Error on installing the package

    Error on installing the package

    I was trying to install vue3-notion to the existing vue3 project but the following error message appeared when I was trying to add it using yarn: Describe the bug

    yarn add vue3-notion  
    yarn add v1.22.19
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    error An unexpected error occurred: "expected hoisted manifest for \"vue3-notion#vue#@vue/server-renderer#@vue/compiler-ssr\"".
    

    Desktop (please complete the following information):

    • MacOs

    I search on web but no solution found, anyone faced this issue as well?

    Thank you guys in advance.

    opened by JacomoJ 2
  • Remove unnecessary import

    Remove unnecessary import

    This PR removes an unnecessary import in the Nuxt v3 example.

    This is not necessary since Nuxt already auto-imports useNuxtApp. From what I understand, if this line was to be kept, it should be changed to import it from #imports instead, since that's were Nuxt exposes everything in #app as well as other stuff.

    More details about this in the docs: https://v3.nuxtjs.org/guide/concepts/auto-imports#explicit-imports

    opened by hacknug 2
  • Could not find a declaration file for module

    Could not find a declaration file for module

    Describe the bug While this project is written in TS, it does not automatically provide types so any import results in this error:

    error TS7016: Could not find a declaration file for module 'vue3-notion'. '/home/runner/work/example/node_modules/vue3-notion/dist/index.umd.js' implicitly has an 'any' type
    

    To Reproduce Steps to reproduce the behavior:

    1. Import NotionRenderer to Vue3 SFC
    <script lang="ts" setup>
      import { NotionRenderer } from 'vue3-notion';
    </script>
    
    <template>
      <NotionRenderer />
    </template>
    
    1. Run typecheck
    2. See error

    Expected behavior No type error

    opened by brachkow 1
  • Child blocks are not rendering

    Child blocks are not rendering

    Describe the bug When i add a content to block in a page with notion api, the library does not render these content. I checked the response and my contents was there as response but i can not see it on page. it is not rendering.

    To Reproduce Steps to reproduce the behavior:

    1. Go to notion and create a new page.
    2. Add contents manuel and append a new block as child block with notion api to your page.
    3. Share it and use the library (vue3-notion) to render your notion page in a vue app
    4. See error

    Expected behavior I expect my child blocks render in my page.

    Desktop (please complete the following information):

    • OS: Windows 11
    • Browser Chrome
    • Version 103.0.5060.134
    opened by barisener 1
  • Make import of default styles optional

    Make import of default styles optional

    Is your feature request related to a problem? Please describe. I'd like a way to opt-in/opt-out of importing the default stylesheet.

    Describe the solution you'd like Ideally we would get this from the user module options and conditionally push the css import depending on value. Maybe use a boolean to enable/disable default styles and accept a string too to automatically import this for the user (not sure if the string option is really necessary, just a thought).

    Describe alternatives you've considered Not sure there is any alternative.

    Additional context https://github.com/zernonia/vue3-notion/blob/34026f65fea3611b89fe2f1360c653505ec877a1/nuxt/index.ts#L21

    enhancement 
    opened by hacknug 1
  • Toggle with Heading Bug

    Toggle with Heading Bug

    Describe the bug Toggle block will not work if it is with Heading style.

    To Reproduce Steps to reproduce the behavior:

    1. Set a Toggle Block
    2. Set Toggle text as Heading 3
    3. yarn dev or refresh
    4. See error

    Expected behavior image

    Screenshots

    image

    Desktop (please complete the following information):

    • OS: [e.g. iOS] MacOS
    • Browser [e.g. chrome, safari] Chrome
    opened by designedbyclu 0
  • Database support to create blog pages from Notion tables

    Database support to create blog pages from Notion tables

    Describe the solution you'd like I'd love to work together with you to develop database support so we can iterate on posts and create the custom CMS page for each.

    Describe alternatives you've considered Previously, I was using Gatsby <> Notion integration but its since been depreciated. Your solution is great but doesn't allow me to add a custom blog template for blog pages, and also specify slug, page descriptions, etc.

    Additional context I hosted a livestream today where I built with your tool live and would love to continue developing more!

    opened by conradlin 2
Releases(v0.1.38)
  • v0.1.38(Nov 10, 2022)

    What's Changed

    • remove package from transpile by @zernonia in https://github.com/zernonia/vue3-notion/pull/34

    Full Changelog: https://github.com/zernonia/vue3-notion/compare/v0.1.37...v0.1.38

    Source code(tar.gz)
    Source code(zip)
  • v0.1.37(Nov 10, 2022)

    What's Changed

    • render content inside callout by @zernonia in https://github.com/zernonia/vue3-notion/pull/26
    • 28 toggle with heading bug by @zernonia in https://github.com/zernonia/vue3-notion/pull/32
    • remove fragment-for-vue dependencies by @zernonia in https://github.com/zernonia/vue3-notion/pull/31

    Full Changelog: https://github.com/zernonia/vue3-notion/compare/v0.1.36...v0.1.37

    Source code(tar.gz)
    Source code(zip)
  • v0.1.35(Jul 5, 2022)

    What's Changed

    • 18 add embeds by @zernonia in https://github.com/zernonia/vue3-notion/pull/24

    Full Changelog: https://github.com/zernonia/vue3-notion/compare/v0.1.34...v0.1.35

    Source code(tar.gz)
    Source code(zip)
  • v0.1.34(Jun 22, 2022)

    What's Changed

    • 20 add tweet embed by @zernonia in https://github.com/zernonia/vue3-notion/pull/23

    Full Changelog: https://github.com/zernonia/vue3-notion/compare/v0.1.33...v0.1.34

    Source code(tar.gz)
    Source code(zip)
  • v0.1.33(May 4, 2022)

    What's Changed

    • Add linked block by @zernonia in https://github.com/zernonia/vue3-notion/pull/17

    Full Changelog: https://github.com/zernonia/vue3-notion/compare/v0.1.32...v0.1.33

    Source code(tar.gz)
    Source code(zip)
Owner
zernonia
I self-taught Web Developer, and fell in love💚 with VueJS. === Working on some open-source project during my free time!
zernonia
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jacking 51 Jun 20, 2021
A vue3 version of vue-element-admin

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.

Ziwen Mei 445 Dec 28, 2022
Nuxt version of Mazer - Free Bootstrap 5 Admin Dashboard Template and Landing Page

Mazer is a Admin Dashboard Template that can help you develop faster. Made with Bootstrap 5. No jQuery dependency.

Muhammad Fauzan 62 Jan 3, 2023
apiAutoTest front-end and back-end separation, visualization version, using FastAPI + Vue2 implementation, on the basis of apiAutoTest to add timing tasks, graphql specification interface testing

apiAutoTest front-end and back-end separation, visualization version, using FastAPI + Vue2 implementation, on the basis of apiAutoTest to add timing tasks, graphql specification interface testing

null 15 Nov 7, 2021
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 15.5k Jan 1, 2023
wt-vite-vue3-element-ruoyi-ts 若以 若依 typescript ts vue3 vue vite vite2.0 模版

wt-vite-vue3-element-ruoyi-ts ?? 全网首发 ?? 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 Project setup npm i -g

superDragon 5 May 5, 2022
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

?? A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

kuanghua 228 Dec 30, 2022
👏A magical vue3 admin using vue3(script-setup) + vite2 + element-plus

vue3-admin-plus English | 中文 vue3 admin plus provides enterprise-level development demo A new generation admin construct using vue3(setup-script)+vite

kuanghua 625 Jan 7, 2023
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus + typescript

vue3-admin-ts English | 中文 A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint A new generation adm

kuanghua 194 Dec 15, 2022
Tauri-vue3-vuetify3-template - Power by tauri add vue3 vuetify3 typescript cross platform gui template

First EVN 1、install cargo curl https://sh.rustup.rs -sSf | sh 2、install cargo-ta

庄文达 4 Oct 25, 2022
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro

Ant Design Vue Pro An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue 基于 Vite2 Vue3 Ant-Design-of-

Ones 80 Dec 16, 2022
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

null 21 Dec 26, 2022
vue3.0 + vite2.0 + element-plus + Vuex4.0 + Vue-router4.0 + axios + node-server(前后端分离)

Explain Vite2.0, Vue3.0, ElementPlus, Vuex4.0, Vue-router4.0, Axios Development Explain 路由,api,vuex,模块所用图片 请根据模块进行划分,添加方式请参考当前目录结构 Project setup npm

hell 18 Sep 28, 2022
vue3.0 + vite2.0 + element-plus + Vuex4.0 + Vue-router4.0 + axios + node-server(前后端分离)

Explain Vite2.0, Vue3.0, ElementPlus, Vuex4.0, Vue-router4.0, Axios Development Explain 路由,api,vuex,模块所用图片 请根据模块进行划分,添加方式请参考当前目录结构 Project setup npm

hell 18 Sep 28, 2022
vue-vben-admin-2.0 mini template.vue3,vite,typescript

Vue vben admin English | 中文 Introduction Vue Vben Admin is a free and open source middle and back-end template. Using the latest vue3, vite2, TypeScri

Vben 1.8k Dec 30, 2022
soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

Soybean 2k Jan 4, 2023
vue3 typescript ant-vue admin!

Vue3 Vite Typescript 预览地址 项目介绍 使用 Vue3 Vite Typescript 搭配 Antd-Vue 框架,搭建项目, 实现 按需加载,和自定义 theme 依赖管理工具 pnpm pnpx create-vite Select a framework: va

*Smile 1 Jan 4, 2022
Vue3-todo-withapi - VUE 3 ToDo App With Rest API

Description VUE 3 ToDo App With Rest API Screenshot Installation Prerequisites F

Abdurrahman Gazi DİŞ 7 Nov 16, 2022
Ip-tracking-app-vue3 - IP Adress Tracker App with Vue 3

IP Adress Tracker App with Vue 3 This application gives the location, time zone,

Berkin Düz 5 Sep 19, 2022