Fetch Data
In this article, you'll learn how to perform queries to the Prismic API to get content into your Nuxt application.
Before you proceed
First, you’ll need a project with Nuxt.js and Prismic. If you don’t have one yet, start with the setup step.
Queries are performed through the $prismic.api object from @nuxtjs/prismic.
Here’s an example querying a document of type page by its UID:
export default {
async asyncData({ $prismic, params, error }) {
const document = await $prismic.api.getByUID('page', params.uid)
if (document) {
return { document }
} else {
error({ statusCode: 404, message: 'Page not found' })
}
}
}getByUID(type, uid)
getByUID(type, uid, params)Queries a document from the Prismic repository with a UID and custom type. type refers to the API ID of the custom type.
const document = await $prismic.api.getByUID('page', params.uid)getSingle(type)
getSingle(type, params)This method queries a singleton document from the Prismic repository for a specific custom type. type refers to the API ID of the custom type.
In this example, we query for the only document of the custom type homepage.
const document = await $prismic.api.getSingle('homepage')Further Learning
There are many more methods for querying the API. These queries can accept params options to filter, sort, paginate and translate your query response. See them all in the @prismicio/client V5 Technical Reference.
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.
Here's what the query might look like for a header component:
<script>
export default {
data() {
return {
document: {}
}
},
async fetch() {
this.document = await this.$prismic.api.getSingle('header')
}
}
</script>We recommend adding a UID field on repeatable documents — a unique identifier. Prismic formats each document's UID, so it's URL-friendly and unique to its 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 UID and the API ID of the custom type.
<script>
export default {
async asyncData({ $prismic, params, error }) {
const document = await $prismic.api.getByUID("page", params.uid)
if (document) {
return { document }
} else {
error({ statusCode: 404, message: "Page not found" })
}
}
}
</script><script>
export default {
async asyncData({ $prismic, params, error }) {
const document = await $prismic.api.query('')
if (document) {
return { document }
} else {
error({ statusCode: 404, message: 'Page not found' })
}
}
}
</script>To get all documents of a specific type, you'd use a predicate to search for all documents where the "type" matches a given value. For more specific queries, you can use Prismic's predicates.
<script>
export default {
async asyncData({ $prismic, params, error }) {
const document = await $prismic.api.query(
this.$prismic.predicates.at('document.type','blog_post')
)
if (document) {
return { document }
} else {
error({ statusCode: 404, message: 'Page not found' })
}
}
}
</script>Prismic allows you to publish your content in different languages. By default, the API will return content in your primary language. Add an options object with a lang option and a locale code to get content in a different language.
Here's an example of how to query the document of the type homepage in French (fr-fr):
<script>
export default {
data() {
return {
document: {}
}
},
async fetch() {
this.document = await this.$prismic.api.getSingle('homepage', { lang: 'fr-fr' })
}
}
</script>You can render localized content dynamically by including the language in the URL path (For example, /fr-fr/bonjour-le-monde).
<script>
export default {
async asyncData({ $prismic, params, error }) {
const document = await $prismic.api.getByUID("page", params.uid, { lang: params.lang })
if (document) {
return { document }
} else {
error({ statusCode: 404, message: "Page not found" })
}
}
}
</script>Can't find what you're looking for?
Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.