Using the Rich Text Component in Vue

Question

So I wanna use the Rich Text Component like described in the Docs:

https://prismic.io/docs/vuejs/templating/rich-text

So my HTML in that specific part that causes the Error looks like this:

  <template v-if="slice.slice_type === 'text'">
    <div>
      <prismic-rich-text :field="slice.primary.text"/> 
    </div>
  </template>

Now on Page Reload the correct HTML rendered shows up but after like 0.5s it disappears and I get the following Errors in the Console:

Now I do not know how to get those Errors away. Specially the 2 in the middle.

your server dom dont match client dom. Try to use this plugin as client only — Aldarund, Apr 07 '19 at 11:22

score 0 · Answer 1 · answered Apr 07 '19 at 11:24

The error is most probably been thrown because you are passing the Object that is missing necessary names. Try to check the props before passing them:

  <template v-if="slice.slice_type === 'text'">
    <div v-if="slice.primary && slice.primary.text" >
      <prismic-rich-text :field="slice.primary.text"/> 
    </div>
  </template>

Hope this helps

Using the Rich Text Component in Vue

1 Answers1