Merge pull request #1 from Atinux/nuxt-build-modules

chore: make it work for nuxt

Author: Geminii

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,12 @@ 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: [
     'vue-notion/nuxt'
-  ],
-
-  // Modules (https://go.nuxtjs.dev/config-modules)
-  modules: [],
+  ]
 
-  // Build Configuration (https://go.nuxtjs.dev/config-build)
-  build: {},
 };

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

nuxt/index.js

@@ -1,27 +1,25 @@
-
 import path from 'path'
-// import defu from 'defu'
+import defu from 'defu'
+
+const defaultOptions = {}
 
 module.exports = function (moduleOptions) {
-  // const options = defu({
-  //   ...this.options.notion,
-  //   ...moduleOptions
-  // }, defaultOptions)
+  const options = defu({
+    ...this.options.notion,
+    ...moduleOptions
+  }, defaultOptions)
 
   this.nuxt.hook('build:before', () => {
     console.log('this.options.build => ', this.options.build)
 
     // Enable transpilation of `src/` directory
-    this.options.build.transpile.push('vue-notion/src')
+    this.options.build.transpile.push('vue-notion')
 
     console.log('this.options.build after => ', this.options.build)
 
     this.addPlugin({
       src: path.resolve(__dirname, 'plugin.js'),
-      mode: 'client',
-      ssr: false,
-      fileName: 'vue-notion.client.js',
-      // options
+      fileName: 'vue-notion.js'
     })
   })
 }

nuxt/plugin.js

@@ -1,8 +1,10 @@
-import Notion from 'vue-notion'
+import Vue from 'vue'
+import VueNotion from 'vue-notion'
+import { getPageBlocks, getPageTable } from 'vue-notion'
 
-const NotionPlugin = (context, inject) => {
-  const notion = Notion
-  inject('notion', notion)
-}
+Vue.use(VueNotion)
 
-export default NotionPlugin
+export default (_, inject) => {
+  const notion = { getPageBlocks, getPageTable }
+  inject('notion', notion)
+}

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "cross-fetch": "^3.0.6",
+    "defu": "^3.2.2",
     "vue-fragment": "^1.5.1",
     "vue-prism-component": "^1.2.0"
   },

yarn.lock

@@ -3231,6 +3231,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defu@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-3.2.2.tgz#be20f4cc49b9805d54ee6b610658d53894942e97"
+  integrity sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==
+
 del@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"