Template Content

On this page, you’ll learn how to display content from the Prismic API in your Nuxt application. This page will also teach you how to use these methods:

• $prismic.asHTML()
• $prismic.asText()
• $prismic.asDate()
• $prismic.asLink()

And these components:

• <prismic-rich-text />
• <prismic-text />
• <prismic-embed />
• <prismic-image />
• <prismic-link />
• <slice-zone />

By the end of this page, you will have content from Prismic displayed in your app.

Intro to templating

Content from Prismic comes in more than a dozen types. Most of these are simple primitive values, like numbers or booleans. Others are more complex structured values, like titles, rich texts, and links.

With simple content types, you can inject them directly into your application:

<span>{{ document.data.example_number }}</span>
<!-- <span>74.5</span> -->

For structured content types, we provide special utilities. To render rich text, for instance, we provide a rich text component:

<prismic-rich-text
  :field="document.data.example_rich_text"
/>

To get started, lets look at the structure of raw API response.

The structure of the API response

Multiple documents

When you make a standard query to the Prismic API, you will get a JSON object filled with results. Here is a truncated example of an API response containing some simple content types:

{
  page: 1,
  // ...
  results: [
    {
      uid: 'example_document',
      // ...
      data: {
        example_date: '2020-12-10',
        example_timestamp: '2020-12-10T04:05:09+0000',
        example_color: '#c7ab5d',
        example_number: 74.5,
        example_key_text: 'Example Key Text Value',
        example_select: 'North',
        example_boolean: true,
      }
    },
    // ...
  ]
}

If you store the response in a variable called “response,” you might access a single data point like this:

response.results[0].data.example_key_text; // 'Example Key Text Value'

In Nuxt, you might use that like this:

<div>{{ response.results[0].data.example_key_text }}</div>

Or, more likely, you would loop over the results array and template each item, like this:

<ul>
  <li
    v-for="document in response.results"
    :key="document.id"
  >
    {{ document.data.example_key_text }}
  </li>
</ul>

A single document

Unlike most queries, the helper functions $prismic.api.getSingle(), $prismic.api.getByUID(), and $prismic.api.getByID() will return the data for an individual document directly.

Here’s a truncated example of the response for one of those queries:

{
  uid: 'about',
  // Metadata for this result
  // ...
  data: {
    example_date: '2020-12-10',
    example_color: '#c7ab5d',
    example_key_text: 'Example Key Text Value',
    // More content
    // ...
  }
}

Notice that the document is not nested in an array of results within a query response object, like in a query for multiple documents.

With a single document query, you might access your color field like this:

document.data.example_color;
// '#c7ab5d'

Slices

Slices are repeatable, rearrangeable content sections. Slices are found in the body section of your document:

// document.data.body
[
  {
    slice_type: "title_slice",
    slice_label: null,
    items: [{}],
    primary: {
      title: "Some colorful numbers and birthdays",
    },
  },
  {
    slice_type: "birthday_slice",
    slice_label: null,
    items: [{}],
    primary: {
      person: "Alan Turing",
      birthday: "1912-06-23",
    },
  },
  {
    slice_type: "birthday_slice",
    slice_label: null,
    items: [{}],
    primary: {
      person: "Grace Hopper",
      birthday: "1906-12-09",
    },
  },
];

Coding slices

Slice components receive four props, which you can use:

• slice: The content of the slice object being rendered.
• index: The index of the slice within the slice zone.
• slices: The list of all slice objects in the slice zone.
• context: Arbitrary data passed to the <SliceZone>’s context prop.

Because defining props in Vue.js is verbose, we provide a helper function to do so: getSliceComponentProps(). With it, a simple slice component could look like this:

<template>
  <PrismicRichText :field="slice.primary.text" />
</template>

<!-- Options API -->
<script>
  import { getSliceComponentProps } from "@prismicio/vue/components";

  export default {
    // The array passed to `getSliceComponentProps` is purely optional and acts as a visual hint for you
    props: getSliceComponentProps([
      "slice",
      "index",
      "slices",
      "context",
    ]),
  };
</script>

Every slice may have a “non-repeatable” and a “repeatable” section. The repeatable section functions just like a group field.

When modeling your slices, Slice Machine provides code snippets that you can copy-paste into your Vue component to template your slice.

Rendering the slice zone

The @nuxtjs/prismic module provides a <SliceZone> component to render slices. Import the slices from your slices directory and pass them to the SliceZone component along with a slices object from a document from the Prismic API.

<template>
  <slice-zone
    :components="components"
    :slices="document.data.slices"
  />
</template>

<script>
  import { components } from "~/slices";

  export default {
    data: function () {
      return { components };
    },
    async asyncData({ $prismic, params, error }) {
      const document = await $prismic.api.getByUID(
        "example-custom-type",
        "example-uid",
      );

      if (document) {
        return { document };
      } else {
        error({
          statusCode: 404,
          message: "Page not found",
        });
      }
    },
  };
</script>

Simple content types

The simple content types are:

• Boolean
• Color
• Date
• Timestamp
• Number
• Key text
• Select

These are represented as either a string, a number, or a boolean, and you can access them directly, like so:

document.data.example_number
// 74.5

Note: Working with dates

Dates come from the API as a string, in the formay YYYY-MM-DD. To convert a date string to a JavaScript Date object, you can use the built-in $prismic.asDate() method:

document.data.example_date
// '2020-12-10'

$prismic.asDate(document.data.example_date)
// Thu Dec 10 2020 01:00:00 GMT+0100 (Central European Standard Time)

Geopoints

The geopoint content type is served as an object with two properties: latitude and longitude. This is the structure of a geopoint:

// document.data.example_geopoint
{
  latitude: 48.85392410000001,
  longitude: 2.2913515000000073
},

You can access these properties directly:

document.data.example_geopoint.latitude;
// 48.85392410000001

document.data.example_geopoint.longitude;
// 2.2913515000000073

Embeds

This is the structure of an embed field:

// document.data.example_embed
{
  version: "1.0",
  url: "https://prismic.io",
  type: "link",
  title: "Make your website editable for the whole team - Prismic",
  provider_name: null,
  thumbnail_url: "https://images.prismic.io/prismic-website/6e49007fec52f99861047cdd55b3ab190ea04295_dev-landing-page-image.png?auto=compress,format",
  html: "<div data-type=\"unknown\"><a href=\"https://prismic.io\"><h1>Make your website editable for the whole team - Prismic</h1><img src=\"https://images.prismic.io/prismic-website/6e49007fec52f99861047cdd55b3ab190ea04295_dev-landing-page-image.png?auto=compress,format\"><p>Choose your technology. Use the API to fetch content. Empower your content team.</p></a></div>",
  embed_url: "https://prismic.io/"
},

You can template an embed field with the Embed component:

<prismic-embed :field="document.data.example_embed" />

Images

In Prismic, you can define an image’s alt text, copyright, and alternate crops — all of which can also have their own alt text. All of this information is served in the API response. A simple image field might look like this:

// document.data.example_image
{
  dimensions: {
    width: 1920,
    height: 1302
  },
  alt: null,
  copyright: null,
  url: "https://images.prismic.io/sm-20201204-2/7d1fba99-5bec-4d59-b8eb-402706e2d36c_a-pril-62u95KgB49w-unsplash.jpg?auto=compress,format"
},

You can template an image with the image component:

<prismic-image :field="document.data.example_image" />

Rich text and titles

Rich text and titles are delivered in an array that contains information about the text structure. Here’s an example of a rich text field (title fields follow the same format):

// document.data.example_rich_text
[
  {
    type: "paragraph",
    text: "Example Rich Text Value",
    spans: [
      {
        start: 8,
        end: 17,
        type: "strong"
      }
    ]
  }
],

@prismicio/vue provides three ways to work with text.

Rich text component

Here’s how to render rich text or a title with the rich text component (HTML serializer and wrapper are optional):

<prismic-rich-text
  :field="document.data.example_rich_text"
  :htmlSerializer="optionalHtmlSerializer"
  wrapper="article"
/>

Text component

Here’s how to render rich text or a title with the text component (wrapper is optional):

<prismic-text
  :field="document.data.example_rich_text"
  wrapper="article"
/>

Rich text helper function

Here’s how to render rich text or a title with the rich text helper function:

<div
  v-html="$prismic.asHTML(document.data.example_rich_text, optionalHtmlSerializer)"
/>

Text helper function

Here is how to get plain text from a rich text or title field with the plaintext helper function:

<div>
  {{ $prismic.asText(document.data.example_rich_text) }}
</div>

Links and content relationships

The link field allows you to link to an external webpage, an internal Prismic document, or an item in your Media Library (like a PDF). The content relationship field allows you to link specifically to an internal Prismic document.

Here’s an example content relationship (a link takes a similar format):

// document.data.example_content_relationship
{
  id: "X9C65hEAAEFIAuLo",
  type: "page",
  tags: [],
  slug: "another-document",
  lang: "en-us",
  uid: "another-document",
  link_type: "Document",
  isBroken: false
},

There are two things that you might want to do with a link:

• Link to another page or media item, internally or externally
• Pull in content from another document

Here’s how to do those two things:

Link to another page

Internal linking always requires a route resolver, which you should have created in the Define Routes step. Here is how to create a link with the link component:

<prismic-link :field="document.data.example_link">
  Example Link
</prismic-link>

Here is how to create a link with the link helper function:

<router-link :to="$prismic.asLink(document.data.example_link)" />
  Example Link
</router-link>

Pull in content from another document

To pull in content from another content, you must fetch that content in your API Query, using the graphQuery or fetchLinks option. To do so, add an options object to your query, with fetchLinks as a key, and the field that you want to fetch as the value. The field is formatted as [custom-type].[field]:

$prismic.client.getByUID('post', 'hello-world', { fetchLinks: 'page.example_key_text' })

You can learn more about how to use these options in the @prismicio/client version 5 Technical Reference.

Once you have adjusted your API query, the linked content will appear in a “data” object nested in the link or content relationship field:

// document.data.example_content_relationship
{
  id: "X9C65hEAAEFIAuLo",
  type: "page",
  tags: [],
  slug: "another-page-title",
  lang: "en-us",
  uid: "page-2",
  data: {
    example_key_text: "Another Page's Key Text"
  },
  link_type: "Document",
  isBroken: false
},

You can then template that content as usual:

<span
  >{{
  document.data.example_content_relationship.data.example_key_text
  }}</span
>
<!-- <span>Another Page Key Text</span> -->

Groups

The group field is a repeatable collection of fields. This is useful for a data point that might have multiple instances, such as document categories or authors.

A group field renders an array of content groups:

// document.data.example_group
[
  {
    example_boolean_in_group: true,
    example_number_in_group: 3,
    example_key_text_in_group: "dog"
  },
  {
    example_boolean_in_group: false,
    example_number_in_group: 7,
    example_key_text_in_group: "cat"
  },
],

To template a group, you can use a v-for:

<ul>
  <li
    v-for="item in document.data.example_group"
    key="item.example_key_text_in_group"
  >
    {{ example_key_text_in_group }} - {{
    example_number_in_group }}
  </li>
</ul>

Metadata

An API response also contains metadata for the API response and for the individual result. Here’s a truncated example for a standard query of multiple documents, as discussed above:

{
  // Response metadata
  page: 1,
  results_per_page: 20,
  results_size: 3,
  total_results_size: 3,
  total_pages: 1,
  next_page: null,
  prev_page: null,
  results: [
    {
      // Document metadata
      id: 'YBQvbxUAACUAa5jh',
      uid: 'example-uid',
      type: 'page',
      href: 'https://your-repo-name.cdn.prismic.io/api/v2/documents/sear...',
      tags: [],
      first_publication_date: '2021-01-29T15:53:23+0000',
      last_publication_date: '2021-01-29T15:53:23+0000',
      slugs: ['hello-world'],
      linked_documents: [],
      lang: 'en-us',
      alternate_languages: [],
      data: {
        // Document data
        example_date: '2020-12-10',
        example_timestamp: '2020-12-10T04:05:09+0000',
        // ... More document data
      }
    },
    // ... More documents
  ]
}

The response metadata is often used for more advanced query functions, such as pagination.

The metadata for a single document includes some useful information, such as the document’s UID and published date.