Fetch Data

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

Perform a query

To perform a query, use the client object from the usePrismic() hook:

<script setup>
  const { client } = usePrismic();

  const { data: home } = await useAsyncData("home", () =>
    client.getByUID("page", "home")
  );
</script>

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.

<script setup>
  const { client } = usePrismic();

  client.getByUID("page", "contact");
</script>

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.

<script setup>
  const { client } = usePrismic();

  client.getByUID();
  client.getSingle("homepage");
</script>

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:

<script setup>
  const { client } = usePrismic();

  const { data: header } = await useAsyncData("header", () =>
    client.getSingle("header")
  );
</script>

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

<script setup>
  const { client } = usePrismic();
  const route = useRoute();

  const { data: page } = await useAsyncData(route.params.uid, async () => {
    const document = await client.getByUID("page", route.params.uid);

    if (document) {
      return document;
    } else {
      throw createError({ statusCode: 404, message: "Page not found" });
    }
  });
</script>

Query all documents

Use the getAllByType() method and pass the name of the custom type to query all documents of that custom type.

<script setup>
  const { client } = usePrismic();

  const { data: posts } = await useAsyncData("posts", () =>
    client.getAllByType("blog_post")
  );
</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):

<script setup>
  const { client } = usePrismic();

  const { data: homepage } = await useAsyncData("homepage", () =>
    client.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).

<script setup>
  const { client } = usePrismic();
  const route = useRoute();

  const { data: home } = await useAsyncData(route.params.lang, async () => {
    const document = await client.getSingle("home", { lang: route.params.lang });

    if (document) {
      return document;
    } else {
      throw createError({ statusCode: 404, message: "Page not found" });
    }
  });
</script>