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,17 +11,13 @@ 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 ?? {
+const initialContent = { ops: [{ insert: "読み込み中…" }] };
+const defaultContent = {
   ops: [
     { insert: "メモ帳\n", attributes: { header: 1 } },
     { insert: "こんにちは!\n" },
@@ -29,28 +25,29 @@ export default {
     {
       insert:
         "ここに入力した内容は自動的にHasuraに送信されデータベースに保存されます。\n",
-            attributes: {
-              link: endpoint,
-            },
+      attributes: { link: endpoint },
     },
   ],
 };
-      console.log("content", content);
+
+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);
-    return { editor, update };
-  },
-};
 </script>
 
 <template>
   <QuillEditor
     ref="editor"
-    :content="{ ops: [{ insert: '読み込み中…' }] }"
+    :content="initialContent"
     @update:content="update"
     toolbar="full"
   />