Menu navigation

Query Documents by ID or UID

This page gives examples of how to query for a document either by its ID or its UID. It provides examples for both using the query helper functions and doing the query manually.

Before reading

This page assumes that you're using the Vue.js starter project or that you have setup your project as explained on the Integrating with existing project page.

Querying by Language

Note that if you are trying to query a document that isn't in the master language of your repository, you will need to specify the language code or wildcard language value. You can read how to do this on the Query by Language page.

If you are using one of the query helper functions below, you do not need to do this.

Query by ID

With the helper function

Here is an example showing how to query a document by its id using the helper function.

Copy 
this.$prismic.client.getByID('WAjgAygABN3B0a-a').then((document) => {
  // document contains the document content
});

Without the helper function

Here is an example of how to query a document by its id without the helper function.

Copy 
this.$prismic.client.query(
  this.$prismic.Predicates.at('document.id', 'WAjgAygAAN3B0a-a')
).then((response) => {
  const document = response.results[0]
  // document contains the document content
});

Query multiple documents by their IDs

With the helper function

Here is an example of how to query multiple documents by their ids using the helper function.

Copy 
const ids = ['WAjgAygAAN3B0a-a', 'WC7GECUAAHBHQd-Y', 'WEE_gikAAC2feA-z'];

this.$prismic.client.getByIDs(ids).then((response) => {
  // response is the response object, response.results holds the documents
});

Without the helper function

You can also query multiple documents by their ids without the helper function by using the in predicate.

Copy 
const ids = ['WAjgAygAAN3B0a-a', 'WC7GECUAAHBHQd-Y', 'WEE_gikAAC2feA-z'];

this.$prismic.client.query(
  this.$prismic.Predicates.in('document.id', ids)
).then((response) => {
  // response is the response object, response.results holds the documents
});

Query by UID

With the helper function

Here is an example of how to query a document of the type "page" by its uid "about-us".

Copy 
this.$prismic.client.getByUID('page', 'about-us').then((document) => {
  // document contains the document content
});

Without the helper function

Here is an example of how to query a document of the type "page" by its uid "about-us" without using the helper function.

Copy 
this.$prismic.client.query(
  this.$prismic.Predicates.at('my.page.uid', 'about-us')
).then((response) => {
  const document = response.results[0]
  // document contains the document content
});

Vue Router: Reacting to params changes

If your component is retrieving content from the Prismic API based on one of the route params, make sure to take a look at our Reacting to params changes page.

Table of Contents