@nuxtjs/prismic v4 - changes to the rich-text-serializer

I have a Nuxt project. I just updated all my dependencies and noticed some breaking changes moving to v4 of "@nuxtjs/prismic"

"@nuxtjs/prismic": "^4.0.1",

What seems to be affected are the <PrismicRichText /> blocks. I have added a wrapper div to all of them to keep my styling as it was since the default wrapper has been removed.

But I have a problem understanding what needs to be done to make the htmlSerializer work again. What I had was the following:

// ./prismic/htmlSerializer.ts

export const htmlSerializer: prismicH.HTMLMapSerializer = {
  paragraph: ({ children }) => {
    //...
  },
  hyperlink: ({ children, node }) => {
    //...
  },
  label: ({ node, children }) => {
    //...
  },
}
<script setup lang="ts">
import { htmlSerializer } from '@/prismic/htmlSerializer'
</script>

<template>
      <PrismicRichText
        :field="props.slice.primary.content"
        :html-serializer="htmlSerializer"
        wrapper="div"
      />
</template>

This does not seem to be working anymore.

I found this here: @prismicio/vue - v5 - Documentation - Prismic - but it is not very clear I find.

Would appreciate tips on how to fix this...

Thanks.

PS: besides the PrismicRichText, is there something else I should be looking at?

Your Role

Developer

Package.json file


  "dependencies": {
    "@prismicio/helpers": "^2.3.9",
    "nuxt": "^3.15.4",
  },
  "devDependencies": {
    "@nuxtjs/prismic": "^4.0.1",
    "@slicemachine/adapter-nuxt": "^0.3.66",
    "slice-machine-ui": "^2.12.3"
  }

Hi @leopold,

Just to clarify, you did the move from v3 -> v4? Is it just the htmlSerializer not working, are you getting any specific error related to it? The documentation for Vue v4 mentions this:

You can check it out here: @prismicio/vue - v4 - Documentation - Prismic, maybe that will help?

The link you referred to is for v5, so that might be a different step altogether. You could also try upgrading to v5 and see if it fixes it!

Yes, I moved from

"@nuxtjs/prismic": "^3.4.5",

to:

"@nuxtjs/prismic": "^4.0.1",

and @nuxtjs/prismic v4 uses @prismicio/vue v5 if I understand correctly

This is what I was looking for:

1 Like

Ah excellent, good eye! Has that solved it for you? :slight_smile:

Yes, and no.

This works, but seems to be deprecated. The following gets logged to the console after setting things up the following way:

import { htmlSerializer } from '@/prismic/htmlSerializer'

      <PrismicRichText
        :field="someField"
        :serializer="() => htmlSerializer"
        wrapper="div"
      />

[PrismicRichText] You're using the deprecated version of <PrismicRichText> because either the serializer prop or the plugin richTextSerializer option were provided. This API will be removed in a future major.

If you have info on how to refactor this to be future proof, I would appreciate that.