nuxt-promote-yourself/components/editor/index.vue

<template>
  <div class="editor editor-squished">
     <bubble-menu :editor="editor" />
    <editor-content
      class="editor__content"
      :editor="editor"
    />
  </div>
</template>

<script>
import { Editor, EditorContent } from "tiptap"
import BubbleMenu from '~/components/editor/BubbleMenu'
import { Heading } from 'tiptap-extensions'
export default {
  components: {
    EditorContent,
    BubbleMenu
  },
  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>