All Technologies / Vue.js / Query the API

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 repo in your Vue project.

Perform a query

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:

Copy
<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>

Query helpers

@prismic/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:

$prismic.client.getSingle(type)

Queries the API for the document of a given singleton type. type refers to the API ID of the document's custom type.

Copy
$prismic.client.getSingle('homepage')

$prismic.client.getByUID(type, uid)

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.

Copy
$prismic.client.getByUID('blog-post', 'hello-world')

$prismic.client.query(query)

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.

Copy
$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.

Use cases

Here are a few common use cases.

Query a nav menu or config document

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.

Copy
this.$prismic.client.getSingle('footer')

Query one instance of a repeatable document

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 UID and the API ID of the custom type.

Copy
this.$prismic.client.getByUID('page', 'hello-world')

Query all documents

To query all documents, use the query method and pass an empty string.

Copy
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.

Query all documents of a type

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:

Copy
this.$prismic.client.query(this.$prismic.Predicates.at('document.type','blog_post'))

You can learn more about predicates in the Advanced Queries section.

Query by language

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:

Copy
this.$prismic.client.getSingle('footer', { lang: 'fr-fr' })

Next Steps

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.

← Previous

Setup

Next →

Template Content