Reference

Start building with the Notion API

Connect Notion pages and databases to the tools you use every day, creating powerful workflows. Get started Aggregate data from many sources into your team's workspace. Spend less time context switching, and increase visibility across the software and services you rely on.

https://developers.notion.com/

janniks/vue-notion

An unofficial Notion renderer 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 - a fast, reliable, free, and modern analytics for any team) This package doesn't handle the communication with the API.

https://github.com/janniks/vue-notion

Issues & Limitations

• Tidak mendukung Database, Checkbox, dan Table of Content (tidak akan pernah diimplementasikan) Jenis-jenis database:

• Belum mendukung Equation block

• Tidak menggunakan API Official Notion. Sekarang masih menggunakan API Private Notion wrapper sehingga bisa jadi tidak stabil kedepannya. Sayangnya, API Official Notion juga masih baru dan dalam tahap beta.

• Kalau notionnya private, tidak bisa ngefetch gambar (butuh cookie login session dari client side). Solusi alternatifnya simpan gambarnya di tempat lain (embed) bukan langsung ditaruh di Notion.

• Belum support typescript (gaada @typesnya)

• Belum support synced blocks/page

Steps (menggunakan public worker)

1. Install vue-notion dan prismjs

npm i -D vue-notion @types/prismjs
npm i prismjs prism-themes

2. Masukkan vue-notion ke dalam buildModules

// nuxt.config.js

export default {
  // ...
  buildModules: ["vue-notion/nuxt"],
};

3. Masukkan @types/prismjs ke dalam tsconfig.json

// tsconfig.json

{
  "compilerOptions": {
    ...
    "types": [
      ...
      "@types/prismjs"
    ]
  },
  ...
}

4. Gunakan vue-notion sebagai $notion pada asyncData tiap page. Selebihnya dapat melihat dokumentasi vue-notion dan contoh-contohnya.

async asyncData({ $notion }) {
    ...
}

5. Secara default, prismjs hanya dapat melakukan syntax highlighting pada markup, css, c-like, dan javascript. Agar dapat support lebih banyak bahasa pemrograman dapat meng-import komponen bahasa yang dibutuhkan (contoh di bawah) atau menggunakan babel plugin.

import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-dart'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-yaml'