Various problems with documentation (or me ^^)

[cdefy]

Hi,

1. I reckon there's an error in the Nuxt documentation: https://www.tiptap.dev/installation/nuxt
   At step 2, we install @tiptap/vue-2 and at step 5, the example for v-model is importing @tiptap/vue-3 in Editor.vue

2. I couldn't make the v-model to work like in the example. I had to actually use a basic prop and watch for the event.

// index.vue
<template>
  <Editor :prop-content="content" @change="updateContent" />
</template>

<script>
import Editor from '~/components/tiptap'

export default {
  data() {
    return {
      content: '',
    }
  },
  methods: {
    updateContent(content) {
        this.content = content
    },
  }
}
</script>

// editor.vue
props: {
    propContent: {
      type: String,
      default: '',
    },
},
watch: {
    propContent() {
      this.editor.commands.setContent(this.propContent, false)
    },
  },
mounted() {
    this.editor = new Editor({
      extensions: [StarterKit],
      content: this.propContent,
      onUpdate: () => {
        this.$emit('change', this.editor.getHTML())
      },
    })
  },

3. Can't find an example on how to render a basic menu bar for @tiptap/vue-2 (and Nuxt), if I try the example here (but it's importing @tiptap/vue-3) https://www.tiptap.dev/examples/default/ , a click on a button reload the page (and do nothing on the content)!

Thanks to anyone for any help or advice. Please ask for more info if needed.
Cheers!

[hanspagel]

Thanks, we’re in the process of upgrading everything to Vue 3.

Can you make a screen recording for 3?

[cdefy]

Thanks for your quick answer! Actually I'll be glad to keep finding documentation for @tiptap/vue-2 because if I'm not mistaken Nuxt is still using Vue 2 :)
For example, I managed to found documentation for tiptap v1 : https://v1.tiptap.dev/docs/#why-tiptap-was-built and I think it's nice of you to keep old documentation.

About the same example:
a. At step 5 <editor /> is not wrapped in a <client-only> tag. At step 4, you say it's important :) (It seems to work with or without it)
b. I have to say it's a bit confusing that until step 4 the component is called tiptap.vue, then on step 5 it's called editor.vue
c. If editor.vue (or tiptap.vue) is in the components directory, I'm not sure but import should be import Editor from '~/components/editor.vue' instead of import Editor from './Editor.vue'

For my third point: I wanted to do a sandbox for you but couldn't make it work :( (stuck on welcome screen). I did an app from scratch and it was a good idea because I don't have the reload bug! I'll have to investigate in my app what's causing it. Instead and just because I did my first screen recording for you :D here is one showing v-model is not working (new app and copy-paste of your example).

PS. : following this older tutorial and probably older version of tiptap: https://dev.to/casualcoder/tiptap-with-vuetify-1lmi, I don't have the reload problem.

Enregistrement.de.l.ecran.2021-09-01.a.10.27.57.mov

[hanspagel]

Okay, I’ll need to go through the Nuxt.js integration guide again. If someone want’s to chime in and help here, that would be amazing! I’ll probably need a while until I can tackle this.

[dosstx]

Hello, I am trying to understand: Does tiptap work with Nuxt2? @cdefy did you get it working?

[kompetenzlandkarte]

I got it to work. This is my component (Typescript) (WIP):

HTML

<template>
<div>
  <div v-if="editor" class="mb-2">
    <span v-if="label && showLabel" class="v-label">{{ label }}</span>

    <v-row no-gutters>
      <v-col cols="12">
        <v-btn-toggle dense class="mr-1">
          <v-btn :disabled="disabled" small>
            <v-icon small>$align-left</v-icon>
          </v-btn>

          <v-btn :disabled="disabled" small>
            <v-icon small>$align-center</v-icon>
          </v-btn>

          <v-btn :disabled="disabled" small>
            <v-icon small>$align-right</v-icon>
          </v-btn>

          <v-btn :disabled="disabled" small>
            <v-icon small>$align-justify</v-icon>
          </v-btn>
        </v-btn-toggle>

        <v-btn-toggle dense>
          <v-btn
            :disabled="disabled"
            small
            :class="{
              'v-btn v-item--active v-btn--active': editor.isActive('bold'),
            }"
            @click="editor.chain().focus().toggleBold().run()"
          >
            <v-icon small>$bold</v-icon>
          </v-btn>
          <v-btn
            :disabled="disabled"
            small
            :class="{
              'v-btn v-item--active v-btn--active': editor.isActive('italic'),
            }"
            @click="editor.chain().focus().toggleItalic().run()"
          >
            <v-icon small>$italic</v-icon>
          </v-btn>
          <v-btn
            :disabled="disabled"
            small
            :class="{
              'v-btn v-item--active v-btn--active':
                editor.isActive('underline'),
            }"
          >
            <v-icon small>$underline</v-icon>
          </v-btn>
        </v-btn-toggle>
      </v-col>
    </v-row>
  </div>

  <editor-content :editor="editor" />

  <v-alert
    v-for="(item, index) of errorMessages"
    :key="index"
    type="error"
    border="left"
    >{{ item }}
  </v-alert>
</div>
</template>

Script

import { Component, Prop, Vue } from "nuxt-property-decorator";
import { Editor, EditorContent } from "@tiptap/vue-2";
import StarterKit from "@tiptap/starter-kit";
import { debounce } from "lodash";

@Component({
components: { EditorContent },
})
export default class AppEditor extends Vue {
@Prop({ required: true, default: "" }) readonly value!: string;
@Prop({ required: false, default: false }) readonly disabled!: boolean;
@Prop({ required: true }) readonly label: string;
@Prop({ required: false, default: true }) readonly showLabel!: boolean;
@Prop({ required: false }) readonly rules: string;
@Prop({ required: false }) readonly errorMessages: string[];

editor: Editor = null;

debounceInput: () => void = null;

created() {
  this.debounceInput = debounce(() => {
    this.$emit("input", this.editor.getHTML());
  }, 300);
}

mounted() {
  this.editor = new Editor({
    content: this.value,
    // injectCSS: true,
    editable: !this.disabled,
    onUpdate: () => {
      // this.$emit('input', this.editor.getHTML())
      this.debounceInput();
    },
    extensions: [StarterKit],
  });
}

beforeDestroy() {
  this.editor.destroy();
}
}

SCSS

/* Basic editor styles */
.ProseMirror {
> * + * {
  margin-top: 0.75em;
}

ul,
ol {
  padding: 0 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

code {
  background-color: rgba(#616161, 0.1);
  color: #616161;
}

pre {
  background: #0d0d0d;
  color: #fff;
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;

  code {
    color: inherit;
    padding: 0;
    background: none;
    font-size: 0.8rem;
  }
}

img {
  max-width: 100%;
  height: auto;
}

blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(#0d0d0d, 0.1);
}

hr {
  border: none;
  border-top: 2px solid rgba(#0d0d0d, 0.1);
  margin: 2rem 0;
}
}

Using:

• nuxt - 2.15.8
• @nuxtjs/vuetify - 1.12.1
• @tiptap/vue-2 - 2.0.0-beta.60
• @tiptap/starter-kit - 2.0.0-beta.127

[dosstx]

Thanks, @kompetenzlandkarte ! I will study it. It seems, however, quite a bit of a difference compared to what the docs stated. Is the author's focus now with Nuxt3/Vue3?

[cdefy]

@dosstx I managed to have something working following this tutorial : https://dev.to/casualcoder/tiptap-with-vuetify-1lmi but I'm using an older version of tiptap": "^1.32.2" and "tiptap-extensions": "^1.35.2". For your last question, yes they said they were in the process of upgrading everything to Vue 3.

Thanks for sharing @kompetenzlandkarte , I might retry the integration with your example!

[dosstx]

I got it to work. This is my component (Typescript) (WIP):

Ok dumb question: Do I need to use Typescript to use your example?

[kompetenzlandkarte]

No Typescript is optional. I use the Class API (https://typescript.nuxtjs.org/examples/class-api/basic) which is not used in the normal JS code. Migrating the code should be pretty easy however.

[petrcimala]

Hi guys,

The solution for this problem is pretty straightforward. Of course, I spent a couple of hours figuring out what is the problem.

The problem lies in Nuxt itself which uses Vue2, but the Tiptap example for Nuxt was written for Vue3. So, till stable Nuxt3, we have to put a few lines of code into the Editor.vue component to prepare it for the new Nuxt version. Here is the code, i.e. the script part:

// ~/components/Editor.vue

// The template part is the same

<script>
// Yes, we have to use Vue2
import { Editor, EditorContent } from '@tiptap/vue-2';
import StarterKit from '@tiptap/starter-kit';

export default {
  components: {
    EditorContent,
  },

  // This part was missing, more info why it is important here:
  // https://v3.vuejs.org/guide/migration/v-model.html#_2-x-syntax
  model: {
    prop: 'modelValue',
    event: 'update:modelValue',
  },

 // the rest is the same

I hope it helps.

[hanspagel]

@philippkuehn Can you check the v-model examples?

1. https://tiptap.dev/installation/vue2#5-use-v-model
2. https://tiptap.dev/installation/vue3#5-use-v-model
3. https://tiptap.dev/installation/nuxt#5-use-v-model

It might be wrong. We’re using Vue.js 3 in the docs, but the interactive example is only on the Vue 2 and Nuxt.js page.

[philippkuehn]

yep. fixed it!

[cdefy]

Thanks for the correction. I did another install following the tutorial and manage to have a working version this time.

About my third point in the original post, I finally found a fix: #729 !