Tiptap: commands v-slot is not defined

[ondrejlohnisky]

console throws me:
Property or method "commands" is not defined on the instance but referenced during render.

my component is :

<template>
   <div>
      <div class="row">
         <div class="col-md-8">
            <div class="md-form">
               <div class="editor">
                  <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
                     <div class="menubar">

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.bold() }"
                        @click="commands.bold"
                     >
                        <icon name="bold" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.italic() }"
                        @click="commands.italic"
                     >
                        <icon name="italic" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.strike() }"
                        @click="commands.strike"
                     >
                        <icon name="strike" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.underline() }"
                        @click="commands.underline"
                     >
                        <icon name="underline" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.code() }"
                        @click="commands.code"
                     >
                        <icon name="code" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.paragraph() }"
                        @click="commands.paragraph"
                     >
                        <icon name="paragraph" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.heading({ level: 1 }) }"
                        @click="commands.heading({ level: 1 })"
                     >
                        H1
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.heading({ level: 2 }) }"
                        @click="commands.heading({ level: 2 })"
                     >
                        H2
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.heading({ level: 3 }) }"
                        @click="commands.heading({ level: 3 })"
                     >
                        H3
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.bullet_list() }"
                        @click="commands.bullet_list"
                     >
                        <icon name="ul" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.ordered_list() }"
                        @click="commands.ordered_list"
                     >
                        <icon name="ol" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.blockquote() }"
                        @click="commands.blockquote"
                     >
                        <icon name="quote" />
                     </button>

                     <button
                        class="menubar__button"
                        :class="{ 'is-active': isActive.code_block() }"
                        @click="commands.code_block"
                     >
                        <icon name="code" />
                     </button>

                     <button
                        class="menubar__button"
                        @click="commands.horizontal_rule"
                     >
                        <icon name="hr" />
                     </button>

                     <button
                        class="menubar__button"
                        @click="commands.undo"
                     >
                        <icon name="undo" />
                     </button>

                     <button
                        class="menubar__button"
                        @click="commands.redo"
                     >
                        <icon name="redo" />
                     </button>

                     </div>
                  </editor-menu-bar>

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

<script>
import Icon from '../components/icon'
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
  Blockquote,
  CodeBlock,
  HardBreak,
  Heading,
  HorizontalRule,
  OrderedList,
  BulletList,
  ListItem,
  TodoItem,
  TodoList,
  Bold,
  Code,
  Italic,
  Link,
  Strike,
  Underline,
  History,
} from 'tiptap-extensions'

export default {
   components: {
      EditorContent,
      EditorMenuBar,
      Icon,
   },
   data(){
      return{
         editor:new Editor({
            extensions: [
               new Blockquote(),
               new BulletList(),
               new CodeBlock(),
               new HardBreak(),
               new Heading({ levels: [1, 2, 3] }),
               new HorizontalRule(),
               new ListItem(),
               new OrderedList(),
               new TodoItem(),
               new TodoList(),
               new Link(),
               new Bold(),
               new Code(),
               new Italic(),
               new Strike(),
               new Underline(),
               new History(),
            ],
            content: `
               <h2>
                  Napište něco o sobě.
               </h2>
            `,
         }),
      }
   },
   methods:{ },
   beforeDestroy() {
      this.editor.destroy()
   },
}
</script>

[philippkuehn]

please provide a codesandbox.

[okaminouta]

So, i faced this problem also, i used code snippet for simple menu:

<template>
<div>
    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
        <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
          Bold
        </button>
    </editor-menu-bar>
    <editor-content :editor="editor" />
  </div>
</template>

and i got a ton of errors because variables from v-slot directive (commands, isActive) was not defined,
also i got error that pointed to the root of the problem:
this.$scopedSlots.default() is not a function(or something like that) points to node_modules/tiptap/dist/tiptap.esm.js:1500.
and then with some help from google i changed my template to:

<template>
  <div>
    <editor-menu-bar :editor="editor">
      <div slot-scope="{ commands, isActive }">
        <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
          Bold
        </button>
      </div>
    </editor-menu-bar>
    <editor-content :editor="editor" />
  </div>
</template>

and it works fine for now.
Sorry that i have no time to create codesandbox, but i hope this will help someone.

[eyalankri]

@okaminouta, thank you very much!

[MattWohler]

I am also running into this error.

[simonepozzobon]

I had the same issue...fixed upgrading vue, vue-loader and vue-template-compiler

"vue": "^2.6.10",
"vue-loader": "<15.0.0",
"vue-template-compiler": "^2.6.10"

<editor-menu-bar
    :editor="editor"
    v-slot="{ commands, isActive }"
>
    <div class="menubar">
        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.bold() }"
            @click="commands.bold"
        >
            B
        </button>
    </div>
</editor-menu-bar>
<editor-content :editor="editor" />

[hanspagel]

Thanks for sharing!