Display a section as serialized html in prismic nuxtjs

Question

I'm new to Prismic and tried to pull a page using PrismicDOM.RichText.asText and it worked but when I tried to display a section/field using asHtml, it displays a literal html code. Been searching on the docs and tried the HTML Serializer but still not working. Maybe I miss something.

<script>
import Prismic from "prismic-javascript";
import PrismicConfig from "~/prismic.config.js";
import PrismicDOM from "prismic-dom";
import linkResolver from "~/plugins/link-resolver.js";
import htmlSerializer from "~/plugins/html-serializer.js";

export default {
  async asyncData({ context, error, req }) {
    try {
      const api = await Prismic.getApi(PrismicConfig.apiEndpoint, { req });

      let document = {};
      const result = await api.getSingle("homepage");
      document = result.data;
      const title = PrismicDOM.RichText.asText(document.title);
      const desc = PrismicDOM.RichText.asText(document.summary);
      const cta = PrismicDOM.RichText.asHtml(document.job_extra, linkResolver, htmlSerializer); //Display as Html

      if (process.client) window.prismic.setupEditButton();

      return {
        document,
        title,
        cta,
        desc,
        documentId: result.id
      };
    } catch (e) {
      error({ statusCode: 404, message: "Page not found" });
    }
  }
};
</script>

https://vuejs.org/v2/guide/syntax.html#Raw-HTML – Aldarund Oct 23 '19 at 12:12 — Aldarund, Oct 23 '19 at 12:12
@Aldarund, Jeezz thanks man – claudios Oct 23 '19 at 13:13 — claudios, Oct 23 '19 at 13:13

score 2 · Answer 1 · answered Nov 26 '20 at 06:27

You also have to define an HTML serializer and pass that in:

import PrismicDOM from 'prismic-dom'
import Prismic from 'prismic-javascript'
import PrismicConfig from '~/prismic.config.js'
import linkResolver from '~/plugins/link-resolver.js'
import htmlSerializer from '~/plugins/html-serializer.js'

  async asyncData({ params, error, req }) {
    try {
      // Fetching the API object
      const api = await Prismic.getApi(PrismicConfig.apiEndpoint, { req })
      // Query to get the home page content
      let post = {};
      const result = await api.getByUID('post', params.slug);
      post = result.data;

      const body = PrismicDOM.RichText.asHtml(
        post.body,
        linkResolver,
        htmlSerializer
      )

      return {
        // Event item content
        post,
        body
      }
    } catch (e) {
      error({ statusCode: 404, message: 'Page not found' })
    }
  },

Display a section as serialized html in prismic nuxtjs

1 Answers1