update vue app

docs/create-vue-app.md

@@ -16,7 +16,7 @@
 
 ```js
 // src/App.vue
-{{#include ../frontend/src/App.vue:8:9}}
+{{#include ../frontend/src/App.vue:14:15}}
 ```
 
 このエンドポイントURLを自分の作成したプロジェクトのものに書き換えると完成です。

frontend/src/App.vue

@@ -5,18 +5,38 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import axios from "axios";
 import debounce from "lodash.debounce";
 
+const id =
+  window.localStorage.getItem("id") ??
+  String(window.crypto.getRandomValues(new Uint16Array(1))[0]);
+
+window.localStorage.setItem("id", id);
+
 // ここに作成したREST APIエンドポイントを指定します。`memo-demo` の部分にHasura Cloudプロジェクト名を指定します。
-const endpoint = "https://memo-demo.hasura.app/api/rest/page/1";
+const endpoint = `https://memo-demo.hasura.app/api/rest/page/${id}`;
 
 export default {
   components: { QuillEditor },
   setup() {
     const editor = ref();
     onMounted(async () => {
+      console.log("endpoint", endpoint);
       const res = await axios.get(endpoint);
-      const content = res.data.page?.content;
-      editor.value.setContents(content);
+      const content = res.data.page?.content ?? {
+        ops: [
+          { insert: "メモ帳\n", attributes: { header: 1 } },
+          { insert: "こんにちは!\n" },
+          { insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" },
+          {
+            insert:
+              "ここに入力した内容は自動的にHasuraに送信されデータベースに保存されます。\n",
+            attributes: {
+              link: endpoint,
+            },
+          },
+        ],
+      };
       console.log("content", content);
+      editor.value.setContents(content);
     });
     const update = debounce(async (content) => {
       await axios.put(endpoint, { content });