Fetch Data

Make queries to the Prismic API to get content into your Nuxt application.

In this article, you’ll learn how to perform queries to the Prismic API to get content into your Nuxt application.

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

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

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

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

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

<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

<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

<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

<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

<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

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