Rich Text / Title Templating with Vue.js

The Rich Text field (formerly called Structured Text) is a configurable text field with formatting options. This field provides content writers with a WYSIWYG editor where they can define the text as a heading or paragraph, make it bold or italic, add links, etc. The Title field is a specific Rich Text field for setting only headings (HTML elements h1, h2, h3, h4, h5 and h6).

Before Reading

This page assumes that you have already included the prismic-vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

Output as HTML

Here's an example of how to output a Rich Text field as HTML into your template.
In this example, the Rich Text field has the API ID of article_content.

Copy
<template>
  <div>
    <prismic-rich-text :field="fields.articleContent"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        articleContent: null
      }
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.fields.articleContent = document.data.article_content;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

Customizing the HTML output

You can customize the HTML output of the <prismic-rich-text/> component by passing an HTML Serializer function to its optional htmlSerializer prop.

To learn more about this, check out the HTML Serializer documentation page.

Your Rich Text content may contain a link that points to a Document in your Prismic repository. To make this link work properly within your website, you need to have a Link Resolver function that returns the appropriate path within your website. This Link Resolver function will take a Prismic Document object as an argument and return the corresponding route path of your website.

To learn more about this, check out the Link Resolving documentation page.

Output as plain text

You can use the richTextAsPlain method from the prismic-vue plugin for outputting a Rich Text field as plain text. It takes a Rich Text field as an argument and will return it as a string (without HTML elements).

Here's an example that outputs a Rich Text field's content as plain text into your template.
In this example, the Rich Text field has the API ID of author.

Copy
<template>
  <div>
    <p>{{ $prismic.richTextAsPlain(fields.author) }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        author: null
      }
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.fields.author = document.data.author;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

To learn more about the Rich Text field check out the user guide.