├── .github
└── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.md
├── .gitignore
├── .vscode
└── extensions.json
├── LICENSE
├── README.md
├── assets
└── vue3-notion.png
├── demo
├── nuxt
│ ├── app.vue
│ ├── composables
│ │ └── useProps.ts
│ ├── nuxt.config.ts
│ ├── package.json
│ ├── pages
│ │ ├── index.vue
│ │ └── page
│ │ │ └── [id].vue
│ ├── pnpm-lock.yaml
│ ├── public
│ │ └── logo.png
│ ├── server
│ │ └── api
│ │ │ └── page
│ │ │ └── [pageId].ts
│ └── tsconfig.json
└── vue
│ ├── .gitignore
│ ├── .vscode
│ └── extensions.json
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── public
│ └── favicon.ico
│ ├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ ├── router
│ │ └── index.ts
│ └── view
│ │ ├── Index.vue
│ │ └── Page.vue
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
├── env.d.ts
├── nuxt
├── index.ts
└── plugin.ts
├── package.json
├── playground
├── App.vue
├── assets
│ └── logo.png
├── index.html
├── main.ts
├── public
│ └── favicon.ico
├── router
│ └── index.ts
├── tsconfig.json
├── view
│ ├── Index.vue
│ └── Page.vue
└── vite.config.ts
├── pnpm-lock.yaml
├── scripts
└── postpublish.sh
├── src
├── blocks
│ ├── bookmark.vue
│ ├── callout.vue
│ ├── code.vue
│ ├── column.vue
│ ├── decorator.vue
│ ├── equation.vue
│ ├── header.vue
│ ├── helpers
│ │ ├── asset.vue
│ │ ├── column-spacer.vue
│ │ ├── default-page-icon.vue
│ │ ├── figure.vue
│ │ ├── google-drive.vue
│ │ ├── header-renderer.vue
│ │ ├── image.vue
│ │ ├── katex.vue
│ │ ├── nested-list.vue
│ │ ├── page-header.vue
│ │ ├── page-icon.vue
│ │ ├── prism.ts
│ │ ├── prism.vue
│ │ ├── table-of-contents-item.vue
│ │ ├── text-renderer.vue
│ │ └── tweet.ts
│ ├── list.vue
│ ├── page.vue
│ ├── quote.vue
│ ├── sync-block.vue
│ ├── sync-pointer-block.vue
│ ├── table-of-contents.vue
│ ├── table-row.vue
│ ├── table.vue
│ ├── text.vue
│ ├── todo.vue
│ ├── toggle.vue
│ └── tweet.vue
├── components
│ ├── block.vue
│ ├── index.ts
│ └── notion-renderer.vue
├── index.ts
├── lib
│ ├── api.ts
│ ├── blockable.ts
│ ├── composables.ts
│ ├── constant.ts
│ ├── props.ts
│ ├── types.ts
│ └── utils.ts
└── style.css
├── tsconfig.json
└── vite.config.ts
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.log
6 | *.local
7 | .nuxt
8 | .output
9 | .env
10 | .log
11 | .vercel
12 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar"]
3 | }
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 zernonia
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |

3 |
An unofficial Notion renderer (Vue 3) version
4 |
5 |
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | ---
29 |
30 | A **Vue 3** renderer for Notion pages (ported from [vue-notion](https://github.com/janniks/vue-notion)). Special thanks to [Jannik Siebert](https://twitter.com/jnnksbrt) & all the `vue-notion` contributors that made the `vue-notion` possible!
31 |
32 | Use **Notion as CMS** for your blog, documentation or personal site.
33 | Also check out [react-notion](https://github.com/splitbee/react-notion) (developed by [Splitbee 🐝](https://splitbee.io/) – a fast, reliable, free, and modern analytics for any team)
34 |
35 | This package doesn't handle the communication with the API (I planned to add this!). Check out [notion-api-worker](https://github.com/splitbee/notion-api-worker) from [Splitbee](https://splitbee.io/) for an easy solution.
36 |
37 | Created by Zernonia
38 |
39 | ## Features
40 |
41 | 🌎 **SSR / Static Generation Support** – Functions to work with [**Nuxt3**](https://v3.nuxtjs.org/) and other frameworks
42 |
43 | 🎯 **Accurate** – Results are _almost_ identical
44 |
45 | 🎨 **Custom Styles** – Styles are easily adaptable. Optional styles included
46 |
47 | 🔮 **Syntax-Highlighting** – Beautiful themeable code highlighting using Prism.js
48 |
49 | ## Install
50 |
51 | ### Vue 3
52 |
53 | ```bash
54 | npm install vue3-notion
55 | # yarn add vue3-notion
56 | ```
57 |
58 | ### Nuxt3 Module
59 |
60 | Install as a dev-dependency and add `"vue3-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`.
61 |
62 | ```bash
63 | npm install vue3-notion --save-dev
64 | ```
65 |
66 | ```ts
67 | // nuxt.config.ts
68 | import { defineNuxtConfig } from "nuxt3"
69 |
70 | export default defineNuxtConfig({
71 | //...
72 | modules: [
73 | ["vue3-notion/nuxt", { css: true }], // css is not imported by default. Set `true` to import css
74 | ],
75 | })
76 | ```
77 |
78 | ## Examples
79 |
80 | These examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/notion-api-worker) to access the Notion page data.
81 | It is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part.
82 |
83 | > Use the `getPageBlocks` and `getPageTable` methods with caution!
84 | > They are based on the private Notion API.
85 | > We can NOT guarantee that it will stay stable.
86 | > The private API is warpped by [notion-api-worker](https://github.com/splitbee/notion-api-worker).
87 |
88 | ### Basic Example for **Vue 3**
89 |
90 | This example is a part of [`demo/`](https://github.com/zeronnia/vue3-notion/demo/) and is hosted at [vue3-notion.vercel.app](https://vue3-notion.vercel.app).
91 |
92 | ```vue
93 |
107 |
108 |
109 |
110 |
111 |
112 |
117 | ```
118 |
119 | ### Basic Example for **Nuxt3**
120 |
121 | This example is a part of [`demo/`](https://github.com/zeronnia/vue3-notion/demo/) and is hosted at [vue3-notion.vercel.app](https://vue3-notion.vercel.app).
122 |
123 | ```vue
124 |
128 |
129 |
130 |
131 |
132 | ```
133 |
134 | ## Supported Blocks
135 |
136 | Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
137 |
138 | | Block Type | Supported | Notes |
139 | | ----------------- | ---------- | ---------------------- |
140 | | Text | ✅ Yes | |
141 | | Heading | ✅ Yes | |
142 | | Image | ✅ Yes | |
143 | | Image Caption | ✅ Yes | |
144 | | Bulleted List | ✅ Yes | |
145 | | Numbered List | ✅ Yes | |
146 | | Quote | ✅ Yes | |
147 | | Callout | ✅ Yes | |
148 | | Column | ✅ Yes | |
149 | | iframe | ✅ Yes | |
150 | | Video | ✅ Yes | Only embedded videos |
151 | | Divider | ✅ Yes | |
152 | | Link | ✅ Yes | |
153 | | Code | ✅ Yes | |
154 | | Web Bookmark | ✅ Yes | |
155 | | Toggle List | ✅ Yes | |
156 | | Page Links | ✅ Yes | |
157 | | Cover | ✅ Yes | Enable with `fullPage` |
158 | | Equations | ✅ Yes | |
159 | | Checkbox | ✅ Yes | |
160 | | Simple Tables | ✅ Yes | |
161 | | Table Of Contents | ✅ Yes | |
162 | | Databases | ☑️ Planned | |
163 |
164 | Please, feel free to [open an issue](https://github.com/zernonia/vue3-notion/issues/new) if you notice any important blocks missing or anything wrong with existing blocks.
165 |
166 | # 🌎 Local Development
167 |
168 | ## Prerequisites
169 |
170 | Yarn
171 |
172 | - ```sh
173 | npm install --global yarn
174 | ```
175 |
176 | ## Development
177 |
178 | 1. Clone the repo
179 | ```sh
180 | git clone https://github.com/zernonia/vue3-notion.git
181 | ```
182 | 2. Install NPM packages
183 | ```sh
184 | yarn
185 | ```
186 | 3. Run Development instance
187 | ```sh
188 | yarn dev
189 | ```
190 |
191 | ## Credits
192 |
193 | - [Jannik Siebert](https://twitter.com/jnnksbrt) – vue-notion Code
194 | - [All vue-notion contributors!](https://github.com/janniks/vue-notion/graphs/contributors)
195 |
196 | ## License ⚖️
197 |
198 | MIT © [zernonia](https://twitter.com/zernonia)
199 |
--------------------------------------------------------------------------------
/assets/vue3-notion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/69a3e61f7339f5ac644153289110803b5706c43f/assets/vue3-notion.png
--------------------------------------------------------------------------------
/demo/nuxt/app.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
30 |
--------------------------------------------------------------------------------
/demo/nuxt/composables/useProps.ts:
--------------------------------------------------------------------------------
1 | export const useProps = () => {
2 | const mapPageUrl = (pageId: String) => {
3 | return `/page/${pageId}`
4 | }
5 |
6 | const pageLinkOptions = computed(() => ({
7 | component: defineNuxtLink({}),
8 | href: "to",
9 | }))
10 |
11 | return {
12 | mapPageUrl,
13 | pageLinkOptions,
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/demo/nuxt/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtConfig({
2 | app: {
3 | head: {
4 | title: "Nuxt3 Notion",
5 | meta: [{ charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }],
6 | link: [{ rel: "icon", type: "image/png", href: "/logo.png" }],
7 | },
8 | },
9 | modules: ["@nuxt/devtools", ["vue3-notion/nuxt", { css: true }]],
10 | routeRules:{
11 | '**': { isr: 120 } // every 2 * 60 seconds
12 | }
13 | });
14 |
--------------------------------------------------------------------------------
/demo/nuxt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nuxt3-notion",
3 | "version": "0.0.1",
4 | "type": "module",
5 | "description": "Nuxt 3 Notion Renderer.",
6 | "license": "MIT",
7 | "scripts": {
8 | "dev": "nuxt dev",
9 | "build": "nuxt build",
10 | "preview": "nuxt preview",
11 | "start": "node .output/server/index.mjs"
12 | },
13 | "dependencies": {
14 | "notion-client": "^6.15.6",
15 | "nuxt": "^3.13.2",
16 | "vue3-notion": "^0.1.46"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/demo/nuxt/pages/index.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/demo/nuxt/pages/page/[id].vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 | Loading...
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/demo/nuxt/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/69a3e61f7339f5ac644153289110803b5706c43f/demo/nuxt/public/logo.png
--------------------------------------------------------------------------------
/demo/nuxt/server/api/page/[pageId].ts:
--------------------------------------------------------------------------------
1 | import { NotionAPI } from "notion-client";
2 |
3 | export default defineEventHandler(async (event) => {
4 | const pageId = event.context.params.pageId;
5 |
6 | const api = new NotionAPI();
7 | const page = await api.getPage(pageId.toString());
8 |
9 | return page;
10 | });
11 |
--------------------------------------------------------------------------------
/demo/nuxt/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.nuxt/tsconfig.json",
3 | "compilerOptions": {
4 | "target": "esnext",
5 | "module": "esnext",
6 | "moduleResolution": "node",
7 | "strict": true,
8 | "jsx": "preserve",
9 | "sourceMap": true,
10 | "resolveJsonModule": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "lib": ["esnext", "dom"],
14 | "types": ["@nuxt/types"]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/demo/vue/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/demo/vue/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["johnsoncodehk.volar"]
3 | }
4 |
--------------------------------------------------------------------------------
/demo/vue/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + Typescript + Vite
2 |
3 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `
12 |