tiptab>Editor Component init>mounted,beforeDestroy

components/editor/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="editor editor-squished">
+    <editor-content
+      class="edito__content"
+      :editor="editor"
+    />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from "tiptap";
+import { Heading } from 'tiptap-extensions'
+export default {
+  components: {
+    EditorContent
+  },
+  data(){
+    return {
+      editor: null
+    }
+  },
+  // This is called only on client (in browser)
+  mounted(){
+    this.editor = new Editor({
+      extensions: [
+        new Heading({ levels: [1, 2, 3]})
+      ]
+    })
+  },
+  beforeDestroy(){
+    // Always destroy your editor instance when it's no longer needed
+    this.editor && this.editor.destroy()
+  }
+}
+</script>

pages/instructor/blog/editor.vue

@@ -8,6 +8,7 @@
       <div class="container">
         Editor
         <!-- Editor Component here! -->
+        <Editor />
       </div>
     </div>
   </div>
@@ -15,10 +16,11 @@
 
 <script>
 import Header from '~/components/shared/Header'
+import Editor from '~/components/editor'
 export default {
   layout: 'instructor',
   components: {
-    Header
+    Header, Editor
   }
 }
 </script>