Query the API
You get content from Prismic into your project via the Prismic API. You can query the Prismic API with a few lines of code. By the end of this page, you'll have content from your Prismic repository in your Vue project.
In Vue, you can define your query as an async method, and then call the method on the created lifecycle hook. Here's what that looks like:
<template>
<div>
<h1>Here's your raw API response:</h1>
<pre id="app" v-html="JSON.stringify(response, null, 2)"></pre>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
// Initialize "response"
response: null
}
},
methods: {
async getContent() {
// Query the API and assign the response to "response"
const response = await this.$prismic.client.query('')
this.response = response
}
},
created() {
// Call the API query method
this.getContent()
}
}
</script>
@prismicio/vue injects a collections of helper functions into your Vue project. They are all available globally via $prismic.client. Here are the three most commonly-used helpers:
Queries the API for the document of a given singleton type. type refers to the API ID of the document's Custom Type.
$prismic.client.getSingle('homepage')
Queries the API for the document of a given type with a given UID. type refers to the API ID of the document's custom type, and uid refers to the document's UID.
$prismic.client.getByUID('blog-post', 'hello-world')
Used for building more advanced queries, but will return all documents if query is an empty string (""). query is either a predicate function (see the note below on advanced queries) or an empty string.
$prismic.client.query('')
Further Learning: Advanced Queries
All of these queries can accept an options object and a callback function as additional arguments, like this: $prismic.client.getSingle(type, options, callback).
Furthermore, $prismic.client.query() can perform extremely powerful and specific searches. You can learn more about options, callbacks, and advanced queries in the Advanced Queries section.
Here are a few common use cases.
In Prismic, you can create a singleton custom type to store site components, like a header, footer, nav menu, or SEO configuration.
To query a singleton, use the getSingle() method with the API ID of the singleton custom type.
this.$prismic.client.getSingle('footer')
On repeatable documents, we recommend adding a UID field — a unique identifier. Prismic makes UIDs URL-friendly and unique to each Custom Type.
To query a specific document of a given Custom Type, like a blog post, you can use the getByUID() method.
To use getByUID(), pass the API ID and UID of the custom type.
this.$prismic.client.getByUID('example_custom_type', 'example_uid')
this.$prismic.client.query('')
Note: the query method can also be used for performing more advanced queries. Learn more in the section on Advanced Querying.
For more specific queries, you can use Prismic's predicates. Predicates are search parameters. To get all documents of a certain type, you'd use a predicate to search for all documents where the "type" matches a given value.
Here's what that looks like:
this.$prismic.client.query(
this.$prismic.Predicates.at('document.type','blog_post')
)
You can learn more about predicates in the Advanced Queries section.
Prismic allows you to publish your content in different languages. By default, the API will return content in your master language. To get content in a different language, add an options object with a lang option and a locale code:
this.$prismic.client.getSingle('footer', { lang: 'fr-fr' })
Now that we've got data in your Vue project, it's time to display it on the page. That's what we'll explore next.
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.