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.

Perform a query

Queries are performed through the $prismic.api object from @nuxtjs/prismic.

Here’s an example querying a document of type page by its UID:

pages/_uid.vue
Copy
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' })
    }
  }
}

Query helpers

Here are the most commonly-used query helper methods:

getByUID()

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

Copy
const document = await $prismic.api.getByUID('page', params.uid)

getSingle()

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

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

Use cases

Here are a few common use cases.

Query from a component

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:

components/header.vue
Copy
<script>
export default {
  data() {
    return {
      document: {}
    }
  },
  async fetch() {
    this.document = await this.$prismic.api.getSingle('header')
  }
}
</script>

From a dynamic page

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.

pages/_uid.vue
Copy
<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>

Query all documents

Use the query method and pass an empty string to query all documents.

pages/index.vue
Copy
<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>

Query all documents of a type

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.

pages/index.vue
Copy
<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>

Query by language

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):

pages/index.vue
Copy
<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).

pages/lang/_uid.vue
Copy
<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>

Was this article helpful?
Not really
Yes, Thanks

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.