From 694144907fccf10651152e3116e1485524966790 Mon Sep 17 00:00:00 2001
From: Kohei Watanabe <kou029w@gmail.com>
Date: Mon, 1 Aug 2022 21:07:11 +0900
Subject: [PATCH] use `<script setup>` syntax

---
 docs/create-vue-app.md |  2 +-
 frontend/src/App.vue   | 63 ++++++++++++++++++++----------------------
 2 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/docs/create-vue-app.md b/docs/create-vue-app.md
index cfbf970..4b70b04 100644
--- a/docs/create-vue-app.md
+++ b/docs/create-vue-app.md
@@ -16,7 +16,7 @@
 
 ```js
 // src/App.vue
-{{#include ../frontend/src/App.vue:14:15}}
+{{#include ../frontend/src/App.vue:14:16}}
 ```
 
 このエンドポイントURLを自分の作成したプロジェクトのものに書き換えると完成です。
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7a40c56..960dcb0 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,4 +1,4 @@
-<script>
+<script setup>
 import { ref, onMounted } from "vue";
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
@@ -11,46 +11,43 @@ const id =
 
 window.localStorage.setItem("id", id);
 
-// ここに作成したREST APIエンドポイントを指定します。`memo-demo` の部分にHasura Cloudプロジェクト名を指定します。
+// ここに作成したREST APIエンドポイントを指定
+// `memo-demo` の部分をHasura Cloudプロジェクト名に書き換えてください
 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 ?? {
-        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 });
-      console.log("updated", content);
-    }, 1000);
-    return { editor, update };
-  },
+const editor = ref();
+const initialContent = { ops: [{ insert: "読み込み中…" }] };
+const defaultContent = {
+  ops: [
+    { insert: "メモ帳\n", attributes: { header: 1 } },
+    { insert: "こんにちは!\n" },
+    { insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" },
+    {
+      insert:
+        "ここに入力した内容は自動的にHasuraに送信されデータベースに保存されます。\n",
+      attributes: { link: endpoint },
+    },
+  ],
 };
+
+onMounted(async () => {
+  console.log("endpoint", endpoint);
+  const res = await axios.get(endpoint);
+  const content = res.data.page?.content ?? defaultContent;
+  editor.value.setContents(content);
+  console.log("content", content);
+});
+
+const update = debounce(async (content) => {
+  await axios.put(endpoint, { content });
+  console.log("updated", content);
+}, 1000);
 </script>
 
 <template>
   <QuillEditor
     ref="editor"
-    :content="{ ops: [{ insert: '読み込み中…' }] }"
+    :content="initialContent"
     @update:content="update"
     toolbar="full"
   />