update dependencies

Author: zernonia

demo/nuxt/nuxt.config.ts

@@ -6,5 +6,5 @@ export default defineNuxtConfig({
       link: [{ rel: "icon", type: "image/png", href: "/logo.png" }],
     },
   },
-  modules: [["vue3-notion/nuxt", { css: true }]],
+  modules: ["@nuxt/devtools", ["vue3-notion/nuxt", { css: true }]],
 });

demo/nuxt/package.json

@@ -11,7 +11,10 @@
   },
   "dependencies": {
     "notion-client": "^6.15.6",
-    "nuxt": "^3.0.0-rc.12",
-    "vue3-notion": "^0.1.38"
+    "nuxt": "^3.4.3",
+    "vue3-notion": "^0.1.44"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^0.4.6"
   }
 }

demo/nuxt/yarn.lock

@@ -10,7 +10,7 @@
   "dependencies": {
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
-    "vue3-notion": "^0.1.26"
+    "vue3-notion": "^0.1.44"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",

demo/vue/package.json

@@ -1,8 +1,8 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import { router } from "./router";
-import "vue3-notion/dist/style.css";
 
+import "vue3-notion/dist/style.css";
 import "prismjs/themes/prism.css";
 import "katex/dist/katex.min.css";
 

demo/vue/src/main.ts

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { NotionRenderer, useGetPageBlocks } from "vue3-notion"
+import { NotionRenderer, useGetPageBlocks } from "vue3-notion";
 
-const { data: blockMap } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
+const { data: blockMap } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a");
 </script>
 
 <template>

demo/vue/src/view/Index.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
-import { useRoute } from "vue-router"
-import { NotionRenderer, getPageBlocks } from "vue3-notion"
+import { useRoute } from "vue-router";
+import { NotionRenderer, useGetPageBlocks } from "vue3-notion";
 
-const route = useRoute()
-const blockMap = ref()
-onMounted(async () => {
-  blockMap.value = await getPageBlocks(route.params.id as string)
-})
+const route = useRoute();
+
+const { data: blockMap } = useGetPageBlocks(route.params.id?.toString());
 </script>
 
 <template>

demo/vue/src/view/Page.vue

@@ -1,12 +1,12 @@
 import { BlockMap } from "../lib/types";
 
-const getPageTable = async (pageId: string, apiUrl = "https://api.vue-notion.workers.dev/v1") =>
+const getPageTable = async (pageId: string, apiUrl = "https://api.vue-notion.workers.dev/v1"): Promise<BlockMap> =>
   await fetch(`${apiUrl}/table/${pageId}`)
     .then((res) => res.json())
     .then((data) => data as BlockMap)
     .catch((err) => err);
 
-const getPageBlocks = async (pageId: string, apiUrl = "https://api.vue-notion.workers.dev/v1") =>
+const getPageBlocks = async (pageId: string, apiUrl = "https://api.vue-notion.workers.dev/v1"): Promise<BlockMap> =>
   await fetch(`${apiUrl}/page/${pageId}`)
     .then((res) => res.json())
     .then((data) => data as BlockMap)