use <script setup> syntax

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を自分の作成したプロジェクトのものに書き換えると完成です。

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 {
+const editor = ref();
-  components: { QuillEditor },
+const initialContent = { ops: [{ insert: "読み込み中…" }] };
-  setup() {
+const defaultContent = {
-    const editor = ref();
+  ops: [
-    onMounted(async () => {
+    { insert: "メモ帳\n", attributes: { header: 1 } },
-      console.log("endpoint", endpoint);
+    { insert: "こんにちは!\n" },
-      const res = await axios.get(endpoint);
+    { insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" },
-      const content = res.data.page?.content ?? {
+    {
-        ops: [
+      insert:
-          { insert: "メモ帳\n", attributes: { header: 1 } },
+        "ここに入力した内容は自動的にHasuraに送信されデータベースに保存されます。\n",
-          { insert: "こんにちは!\n" },
+      attributes: { link: endpoint },
-          { 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 };
-  },
 };
+
+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"
   />