How do I remove wrapping div from prismic-rich-text

Developing with Prismic
1

This has been driving me crazy for 2 years now and I still have not found a solution. I can't figure out how to do it in html-serializer. I know for individual paragraphs I can do this:

{{$prismic.asText(slice.primary.content)}}

<template>
    <section class ="rc-percent-row py-5">
        <b-container>
            <b-row>
                <b-col>            
                    <prismic-rich-text :field="slice.primary.content" />
                </b-col>
            </b-row>
        </b-container>
    </section>

It outputs this:

       <section>
        <div class="container">
            <div class="row">
                <div class="col">
                    <div>
                        <p>blah vlah</p>
                        <p>blah blah</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

But, I just want to remove that wrapping div from ever showing up when I put in prismic-rich-text.

Why is that div there around the rich text ? `It has been driving us absolutely crazy. Is there a way to remove that in html-serialzer? I can't find a clue anywhere.

Thanks

3

Hi Rob,

I did some research, and it turns out this wrapping dev comes from the vue.js RichText component.

And you can't modify (I will confirm later) this when you implement your own Html serializer.

But can you tell us why you need to remove this dev? You know you reset your div style such as:

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

Looking forward to your reply,
Fares

4

And a better solution would be to use the RichText from prismic-dom directly such as:

<template>
    <section class ="rc-percent-row py-5">
        <b-container>
            <b-row>
                <b-col v-html="$prismic.asHtml(slice.primary.content)" />
            </b-row>
        </b-container>
    </section>
</template>

Note: remember to do:

import { RichText } from 'prismic-dom'

As the wrapper is been added by the VUE.js SDK.

5

This issue has been closed due to inactivity. Flag to reopen.