Quick Query Helper Functions

We've included helper functions to make creating certain queries quicker and easier with Vue.js. This page provides the description and examples for each of the helper functions.

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.

getByUID( custom-type, uid, options )

The getByUID function is used to query the specified custom type by a certain uid.

Note that this requires that the custom type of the document contains the UID field.

This function will only ever retrieve one document as there can only be one instance of a given uid for each custom type.

custom-type

string (required)

The API ID of the custom type you are searching for

uid

string (required)

The uid of the document you want

options

object (optional)

The option parameters and values

Here is an example that queries 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
});

Here is an example with options.

Copy
const options = { fetch : 'page.title' };

this.$prismic.client.getByUID('page', 'about-us', options).then((document) => {
  // 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.

getByID( id, options )

The getByID function is used to query a certain document by its id. Every document is automatically assigned a unique id when it is created. The id will look something like this: "WAjgAygABN3B0a-a".

This function will only ever retrieve one document as each document has a unique id value.

id

string (required)

The id of the document you want

options

object (optional)

The option parameters and values

Here is an example that queries a document by its id "WAjgAygABN3B0a-a".

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

Here is an example with options.

Copy
const options = { fetch : 'product.title'};

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

getByIDs( ids, options )

The getByIDs function is used to query multiple documents by their ids. This will return the documents in the same order specified in the array, unless options are added to sort them otherwise.

ids

array (required)

An array of strings with the ids of the documents you want

options

object (optional)

The option parameters and values

Here is an example that queries multiple documents by their ids.

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
});

Here is an example with options that sort the documents by their titles.

Copy
const ids = ['WAjgAygAAN3B0a-a', 'WC7GECUAAHBHQd-Y', 'WEE_gikAAC2feA-z'];
const options = { orderings : '[my.page.title]' };

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

getSingle( custom-type, options )

The getSingle function is used to query the document of a Single custom type. Single custom types only allow for the creation of one document of that type.

This will only ever retrieve one document.

custom-type

string (required)

The API ID of the single custom type you are searching for

options

object (optional)

The option parameters and values

Here is an example that retrieves the document of the Single type "navigation".

Copy
this.$prismic.client.getSingle('navigation').then((document) => {
  // document contains the document content
});