Template Content
On this page, you'll learn how to display content from the Prismic API in your Vue application. This page will also teach you how to use these methods:
And these components:
By the end of this page, you will have content from Prismic displayed in your app.
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.
The examples on this page
Most of the examples on this page assume that you have queried a single document from the Prismic API and stored it in a variable called document, like so:
data() {
return {
document: null
}
},
methods: {
async getContent() {
const document = await this.$prismic.client.getByUID('page','example-page')
this.document = document
}
},
created() {
this.getContent()
}
Learn more about the structure of your response in "The structure of the API response," below.
With simple field types, you can inject them directly into your application:
<span>{{ document.data.example_number }}</span>
<!-- <span>74.5</span> -->
For structured fields 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" />
Further learning: fields
You can learn more about all of these fields in our Content Modeling documentation.
To get started, lets look at the structure of raw API response.
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 fields:
{
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,
}
},
// ...
]
}
So, 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 Vue, 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>
Unlike most queries, the helper functions $prismic.client.getSingle(), $prismic.client.getByUID(), and $prismic.client.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'
The simple fields 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
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)
The Geopoint field 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
// 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 with the embed component:
<prismic-embed :field="document.data.example_embed" />
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 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.
Here's how to render Rich Text or a Title with the rich text component (HTML Serializer is optional):
<prismic-rich-text :field="document.data.example_rich_text" :htmlSerializer="optionalHtmlSerializer" />
What is an HTML Serializer?
The HTML Serializer defines the markup of your Rich Text. (For example: italic text should have <em> tags.) @prismicio/vue contains a default HTML Serializer for standard markup, but you can create your own HTML Serializer if you want to customize your markup. To learn how, see the section on Advanced Templating.
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)" />
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 in Rich Text
Links in Rich Text are rendered with the default Link Resolver function defined in your Vue app setup. See more info on link resolving below.
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:
Internal linking always requires a Link Resolver.
What is a Link Resolver?
You may remember that you created a Link Resolver in the setup step. If you need a refresher, return to the setup page.
In simple terms, Prismic does not know the structure of your Vue app. A Link Resolver is a function that tells Vue how to construct URLs for Prismic documents.
By default, @prismicio/vue will use the Link Resolver that you added in your setup to resolve links. However, when templating Links and Content Relationships, you can also pass a custom Link Resolver.
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>
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 section on Advanced Querying.
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 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> -->
Slices and Groups both allow you to create repeatable content templates. Groups are available in the main section of your document, and Slices are available in the Slice Zone.
The difference between Groups and Slices is that Groups can only be repeated, while Slices can be repeated and rearranged.
// 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>
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'
}
}
]
Slices cannot have "Group" fields, but every Slice has a "non-repeatable" and "repeatable" section. The repeatable section functions just like a group field.
In principle, Slices are rendered by looping over the body array and then executing a switch statement on each Slices to determine how to template it. However, we recommend using the SliceZone component to render your Slices. To learn how to use the SliceZone, see the SliceZone section.
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.
You should now have some content from Prismic displayed in your Vue app. On the next page, we'll deploy your app.
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.