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"
}