🗒️
Nuxt Notion Integration

Reference

Issues & Limitations

  • Tidak mendukung Database, Checkbox, dan Table of Content (tidak akan pernah diimplementasikan) Jenis-jenis database:
    • Notion image
  • Belum mendukung Equation block
  • 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
    1. npm i -D vue-notion @types/prismjs
      npm i prismjs prism-themes
  1. Masukkan vue-notion ke dalam buildModules
    1. // nuxt.config.js
      
      export default {
        // ...
        buildModules: ["vue-notion/nuxt"],
      };
  1. Masukkan @types/prismjs ke dalam tsconfig.json
    1. // tsconfig.json
      
      {
        "compilerOptions": {
          ...
          "types": [
            ...
            "@types/prismjs"
          ]
        },
        ...
      }
  1. Gunakan vue-notion sebagai $notion pada asyncData tiap page. Selebihnya dapat melihat dokumentasi vue-notion dan contoh-contohnya.
    1. async asyncData({ $notion }) {
          ...
      }
  1. 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.
    1. 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'