janniks · janniks · Dec 27, 2020 · Dec 23, 2020 · Dec 27, 2020 · Dec 27, 2020
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
+yarn.lock
 
-# Created by https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue
-# Edit at https://www.toptal.com/developers/gitignore?templates=macOS,Node,Vuejs,Vue
+# Created by https://www.toptal.com/developers/gitignore/api/Vue,Node,macOS,Vuejs,yarn
+# Edit at https://www.toptal.com/developers/gitignore?templates=Vue,Node,macOS,Vuejs,yarn
 
 ### macOS ###
 # General
@@ -159,4 +160,20 @@ dist/
 npm-debug.log
 yarn-error.log
 
-# End of https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue
+### yarn ###
+# https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored
+
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+!.yarn/cache
+
+# and uncomment the following lines
+# .pnp.*
+
+# End of https://www.toptal.com/developers/gitignore/api/Vue,Node,macOS,Vuejs,yarn

diff --git a/README.md b/README.md
@@ -8,10 +8,10 @@
   <span> · </span>
   <a href="#install">Install</a>
   <span> · </span>
-  <a href="#basic-example">Example</a>
-  <span> · </span>
   <a href="#docs">Docs</a>
   <span> · </span>
+  <a href="#examples">Examples</a>
+  <span> · </span>
   <a href="#credits">Credits</a>
 </h3>
 
@@ -49,25 +49,48 @@ This package doesn't handle the communication with the API. Check out [notion-ap
 
 🔮 **Syntax-Highlighting** – Beautiful themeable code highlighting using Prism.js
 
-🌎 **SSR / Static Generation Support** – Functions to work with Nuxt and other frameworks
+🌎 **SSR / Static Generation Support** – Functions to work with NuxtJS and other frameworks
 
 ## Install
 
+### Vue
+
 ```bash
 npm install vue-notion
 ```
 
-## How To
+### NuxtJS Module
+
+Install as shown above and add `"vue-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`.
+
+```js
+// nuxt.config.js
+export default {
+  // ...
+  buildModules: ["vue-notion/nuxt"],
+};
+```
+
+## Docs
 
-### Docs
+<!-- todo: add # links to doc links -->
 
-> Check out a demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
+- `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
+- Syntax Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
+- Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
+- Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
 
-More information on the `NotionRenderer` specification, syntax-highlighting, the Notion API, and integration with Nuxt can be found at [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs).
+> Check out a full working demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
+> The code for the demo is in [`example/`](https://github.com/janniks/vue-notion/tree/main/example).
 
-### Basic Example
+## Examples
 
-This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
+These examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/notion-api-worker).
+It is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part.
+
+### Basic Example for Vue
+
+This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/vue](https://vue-notion.now.sh/vue).
 
 ```vue
 <template>
@@ -92,17 +115,39 @@ export default {
 </style>
 ```
 
-The example above uses a simple wrapper around the [notion-api-worker](https://github.com/splitbee/notion-api-worker).
-It is also possible to store and use plain `.json` objects received from the Notion API.
+### Basic Example for NuxtJS
+
+This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/nuxt](https://vue-notion.now.sh/nuxt).
+
+```vue
+<template>
+  <NotionRenderer :blockMap="blockMap" fullPage />
+</template>
 
-> ⚠️ Use with caution.
+<script>
+export default {
+  data: () => ({ blockMap: null }),
+  async asyncData({ $notion }) {
+    // use Notion module to get Notion blocks from the API via a Notion pageId
+    const blockMap = await $notion.getPageBlocks(
+      "8c1ab01960b049f6a282dda64a94afc7"
+    );
+    return { blockMap };
+  },
+};
+</script>
+
+<style>
+@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
+</style>
+```
+
+> ⚠️ Use with caution!
 > The `getPageBlocks` and `getPageTable` are based on the private Notion API.
-> We can not gurantee it will stay stable.
+> We can NOT guarantee that it will stay stable.
 > The private API is warpped by [notion-api-worker](https://github.com/splitbee/notion-api-worker).
 > If you use these methods a lot, please consider hosting you own instance, as described in [`docs#notion-api`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api).
 
-A [full working example using Nuxt and static generation](https://vue-notion.now.sh/) can be found inside the `example` directory.
-
 ## Roadmap
 
 [Add issues](https://github.com/janniks/vue-notion/issues/new), request features and upvote [block types](https://github.com/janniks/vue-notion/issues?q=is%3Aissue+is%3Aopen+label%3Ablock) that you want to see next!
@@ -118,42 +163,45 @@ List of pages that are using this library.
 
 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`   |
-| Databases         | ❌ Not planned |                          |
-| Checkbox          | ❌ Not planned |                          |
-| Table Of Contents | ❌ Not planned |                          |
-
-Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any missing blocks or anything wrong with existing 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         | ✅ Planned     |                        |
+| Databases         | ❌ Not planned |                        |
+| Checkbox          | ❌ Not planned |                        |
+| Table Of Contents | ❌ Not planned |                        |
+
+Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any important blocks missing or anything wrong with existing blocks.
 
 ## Credits
 
 - [Jannik Siebert](https://twitter.com/jnnksbrt) – vue-notion Code
 - [Dominik Sobe](https://twitter.com/sobedominik) – vue-notion Inspiration, Debugging
+- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
 - [Tobias Lins](https://tobi.sh) – react-notion Idea, Code
 - [Timo Lins](https://timo.sh) – react-notion Code, Documentation
 - [samwightt](https://github.com/samwightt) – react-notion Inspiration & API Typings
-- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
 - [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors)
 
+- Big thanks to [NuxtJS](https://nuxtjs.org) for being awesome!
+
 ## License ⚖️
 
 MIT © [Jannik Siebert](https://twitter.com/jnnksbrt)
diff --git a/docs/README.md b/docs/README.md
@@ -57,7 +57,7 @@ mapPageUrl(pageId = "") {
 – are used to override links to other Notion pages with custom Vue components.
 `pageLinkOptions` is an `Object` that requires a `component` and a `href` parameter.
 
-e.g. to use `NuxtLink` components instead of HTML `a` elements
+e.g., to use `NuxtLink` components instead of HTML `a` elements
 
 ```js
 pageLinkOptions: {
@@ -114,7 +114,7 @@ const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
 
 > Feel free to open an issue if something is unclear or additional documentation is needed...
 
-## Nuxt – Server-Side Rendering & Static Site Generation
+## NuxtJS – Server-Side Rendering & Static Site Generation
 
 > For a running project check out the extensive example at [example/](/example).
 
@@ -123,16 +123,17 @@ const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
 There are a few required steps to allow Nuxt to work with vue-notion
 
 - Install vue-notion as a dependency to your Nuxt project – `npm install vue-notion`
-- Add `"vue-notion"` to the `build.transpile` array in `nuxt.config.js`.
+- Add `"vue-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`.
 
 ```js
-build: {
-  transpile: ["vue-notion"];
-}
+// nuxt.config.js
+export default {
+  // ...
+  buildModules: ["vue-notion/nuxt"],
+};
 ```
 
-- Import the `NotionRenderer` in any component you want to use vue-notion in – `import { NotionRenderer } from "vue-notion"`
-- Voila, you can now use vue-notion as shown in the examples.
+- Voila, you can now use vue-notion (i.e., the `NotionRenderer` component and the Notion API methods via NuxtJS `$notion`) as shown in the examples.
 
 ### Static Pages
 

diff --git a/example/.gitignore b/example/.gitignore
@@ -1,4 +1,5 @@
 package-lock.json
+yarn.lock
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template

diff --git a/example/nuxt.config.js b/example/nuxt.config.js
@@ -1,4 +1,5 @@
 export default {
+  // Telemetry (https://github.com/nuxt/telemetry)
   telemetry: false,
 
   // Target (https://go.nuxtjs.dev/config-target)
@@ -15,23 +16,9 @@ export default {
     link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
   },
 
-  // Global CSS (https://go.nuxtjs.dev/config-css)
-  css: [],
-
-  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [],
-
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
 
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
-  buildModules: [],
-
-  // Modules (https://go.nuxtjs.dev/config-modules)
-  modules: [],
-
-  // Build Configuration (https://go.nuxtjs.dev/config-build)
-  build: {
-    transpile: ["vue-notion"],
-  },
+  buildModules: ["vue-notion/nuxt"],
 };
diff --git a/example/package.json b/example/package.json
@@ -11,8 +11,9 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "nuxt": "^2.14.12",
-    "prismjs": "^1.22.0",
-    "vue-notion": "^0.2.15"
+    "prismjs": "^1.22.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "vue-notion": "^0.2.15"
+  }
 }
diff --git a/example/pages/_slug.vue b/example/pages/_slug.vue
@@ -8,24 +8,21 @@
 </template>
 
 <script>
-import { NotionRenderer, getPageBlocks, getPageTable } from "vue-notion";
-
 import "prismjs";
 import "prismjs/themes/prism.css";
 
 export default {
-  components: { NotionRenderer },
   data() {
     return {
       pageLinkOptions: { component: "NuxtLink", href: "to" },
     };
   },
-  async asyncData({ params, error }) {
-    const pageTable = await getPageTable("10327f9074b7433aad577ccd0020e971");
+  async asyncData({ $notion, params, error }) {
+    const pageTable = await $notion.getPageTable("10327f9074b7433aad577ccd0020e971");
     const page = pageTable.find(
       (item) => item.published && item.slug === params.slug
     );
-    const blockMap = await getPageBlocks(page ? page.id : params.slug);
+    const blockMap = await $notion.getPageBlocks(page ? page.id : params.slug);
     if (!blockMap || blockMap.error) {
       return error({ statusCode: 404, message: "Post not found" });
     }

diff --git a/example/pages/index.vue b/example/pages/index.vue
@@ -35,9 +35,7 @@
 
       <h2>Example from README</h2>
       <div class="links">
-        <NuxtLink class="button--green" to="/basic-example">
-          Basic Example
-        </NuxtLink>
+        <NuxtLink class="button--green" to="/nuxt">Basic Example</NuxtLink>
       </div>
 
       <h2>Static Generated Examples</h2>

diff --git a/example/pages/nuxt.vue b/example/pages/nuxt.vue
@@ -0,0 +1,20 @@
+<template>
+  <NotionRenderer :blockMap="blockMap" fullPage />
+</template>
+
+<script>
+export default {
+  data: () => ({ blockMap: null }),
+  async asyncData({ $notion }) {
+    // use Notion module to get Notion blocks from the API via a Notion pageId
+    const blockMap = await $notion.getPageBlocks(
+      "8c1ab01960b049f6a282dda64a94afc7"
+    );
+    return { blockMap };
+  },
+};
+</script>
+
+<style>
+@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
+</style>
diff --git a/example/pages/posts.vue b/example/pages/posts.vue
@@ -35,11 +35,9 @@
 </template>
 
 <script>
-import { getPageTable } from "vue-notion";
-
 export default {
-  async asyncData({ params, error }) {
-    const pageTable = await getPageTable("10327f9074b7433aad577ccd0020e971");
+  async asyncData({ $notion, params, error }) {
+    const pageTable = await $notion.getPageTable("10327f9074b7433aad577ccd0020e971");
 
     // sort published pages
     const posts = pageTable