fix: fixes dev issue not working

src/App.vue

@@ -1,119 +1,97 @@
 <template>
   <div id="app">
-    <button @click="deleteImage">Delete</button>
-    <VueEditor
-      ref="vEditor"
-      v-model="content"
-      use-custom-image-handler
-      use-markdown-shortcuts
-      @focus="onEditorFocus"
-      @blur="onEditorBlur"
-      @imageAdded="handleImageAdded"
-      @image-removed="handleImageRemoved"
-    />
+    <!-- <button @click="deleteImage">Delete</button> -->
+    <button @click="savePost">Save Post</button>
+    <div>new</div>
+    <VueEditor v-model="content" />
+    <!-- <NuxtEditor /> -->
+    <br />
+    <hr />
+    <pre>{{ posts }}</pre>
   </div>
 </template>
 
 <script>
-// import axiosInstance from "@/helpers/axios";
+/* eslint-disable no-undef */
 import axios from "axios";
-import Quill from "quill";
-const AlignStyle = Quill.import("attributors/style/align");
-Quill.register(AlignStyle, true);
-
-const BlockEmbed = Quill.import("blots/block/embed");
-
-const CLIENT_ID = "993793b1d8d3e2e";
-
-/**
- * Customize image so we can add an `id` attribute
- */
-class ImageBlot extends BlockEmbed {
-  static create(value) {
-    const node = super.create();
-    node.setAttribute("src", value.url);
-    node.setAttribute("id", value.id);
-    return node;
-  }
-
-  static value(node) {
-    return {
-      url: node.getAttribute("src"),
-      id: node.getAttribute("id")
-    };
-  }
-}
-
-ImageBlot.blotName = "image";
-ImageBlot.tagName = "img";
-Quill.register(ImageBlot);
-
+// import { NuxtEditor } from "./index";
+// import Quill from 'quill';
+// import { ImageDrop } from 'quill-image-drop-module';
+// import ImageResize from "quill-image-resize-module";
+// Quill.register('modules/imageDrop', ImageDrop);
+// Quill.register("modules/imageResize", ImageResize);
+
+// eslint-disable-next-line no-console
+// console.log('TCL: Quill', Quill);
 export default {
+  // components: { NuxtEditor },
+
   data: () => ({
-    content: ""
+    content: "<h1>Starting content 2</h1>",
+    posts: [],
+    numberOfPosts: null
   }),
 
-  methods: {
-    handleTextChange(obj) {
-      console.log("TCL: handleTextChange -> obj", obj);
-    },
-
-    onEditorBlur(quill) {
-      console.log("editor blur!", quill);
-    },
-
-    onEditorFocus(quill) {
-      console.log("editor focus!", quill);
-    },
-
-    deleteImage(id) {
-      const ACCESS_TOKEN = "1d3ee7fe34576a55a24ec551061b2365b6ebaf23";
-
-      axios({
-        url: `https://api.imgur.com/3/image/${id}`,
-        method: "DELETE",
-        headers: { Authorization: "Bearer " + ACCESS_TOKEN }
-      }).then(result => console.log("DELETE RESULT: ", result));
-    },
-
-    async handleImageAdded(file, Editor, cursorLocation) {
-      const formData = new FormData();
-      formData.append("image", file);
+  mounted() {
+    this.getPosts();
+  },
 
-      const { data } = await axios({
-        url: "https://api.imgur.com/3/image",
-        method: "POST",
-        headers: { Authorization: "Client-ID " + CLIENT_ID },
-        data: formData
-      });
-      console.log("TCL: handleImageAdded -> data", data);
-
-      const { link, id } = data.data;
-      Editor.insertEmbed(
-        cursorLocation,
-        "image",
-        {
-          id,
-          url: link
-        },
-        Quill.sources.USER
+  methods: {
+    async savePost() {
+      const content = JSON.stringify(this.content);
+      console.log("🚀 ~ file: App.vue ~ line 75 ~ savePost ~ content", content);
+      const newPostNumber = this.numberOfPosts + 1;
+
+      const postData = {
+        title: `Post ${newPostNumber}`,
+        slug: `post-${newPostNumber}`,
+        content: this.content
+      };
+
+      const stringifiedData = JSON.stringify(postData);
+
+      console.log(
+        "🚀 ~ file: App.vue ~ line 83 ~ savePost ~ stringifiedData",
+        stringifiedData
       );
-    },
+      var dbConfig = {
+        method: "post",
+        url: "https://devdb-75cc.restdb.io/rest/posts",
+        headers: {
+          "x-apikey": "610201c449cd3a5cfbd22d63",
+          "Content-Type": "application/json"
+        },
+        data: stringifiedData
+      };
 
-    handleImageRemoved(image) {
-      console.log("handleImageRemoved -> image", image);
-      this.deleteImage(image.id);
+      const { data } = await axios(dbConfig);
+      console.log("🚀 ~ file: App.vue ~ line 88 ~ savePost ~ data", data);
+    },
+    async getPosts() {
+      var dbConfig = {
+        method: "get",
+        url: "https://devdb-75cc.restdb.io/rest/posts",
+        headers: {
+          "x-apikey": "610201c449cd3a5cfbd22d63"
+        }
+      };
+
+      const { data } = await axios(dbConfig);
+      console.log("🚀 ~ file: App.vue ~ line 79 ~ getPosts ~ data", data);
+      this.posts = data;
+      this.content = data[2].content;
+      this.numberOfPosts = data.length;
     }
   }
 };
 </script>
 
-<style lang="scss">
+<style>
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  // text-align: center;
+  /* text-align: center; */
   color: #2c3e50;
   margin-top: 60px;
 }