Merge pull request #12 from Geminii/nuxt-build-modules

Nuxt build modules

Author: janniks

README.md

@@ -57,6 +57,21 @@ This package doesn't handle the communication with the API. Check out [notion-ap
 npm install vue-notion
 ```
 
+### NuxtJS Module
+```js
+// nuxt.config.js
+
+export default {
+  // ...
+  buildModules: [
+    'vue-notion/nuxt'
+  ]
+  notion: {
+    // additionals configuration
+  }
+}
+```
+
 ## How To
 
 ### Docs
@@ -65,7 +80,7 @@ npm install vue-notion
 
 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).
 
-### Basic Example
+### Basic Example for Vue
 
 This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
 
@@ -95,6 +110,33 @@ export default {
 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 Nuxt
+
+This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
+
+```vue
+<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 }
+  },
+};
+
+<style>
+@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
+</style>
+```
+</script>
+
+
 > ⚠️ Use with caution.
 > The `getPageBlocks` and `getPageTable` are based on the private Notion API.
 > We can not gurantee it will stay stable.

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,11 @@ 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'
+  ]
 };

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"
+  }
 }

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" });
     }

example/pages/basic-example.vue

@@ -3,14 +3,13 @@
 </template>
 
 <script>
-import { NotionRenderer, getPageBlocks } from "vue-notion";
-
 export default {
-  components: { NotionRenderer },
   data: () => ({ blockMap: null }),
-  async created() {
+  async asyncData({ $notion }) {
     // get Notion blocks from the API via a Notion pageId
-    this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
+    const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
+
+    return { blockMap }
   },
 };
 </script>

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