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 install step.

Perform a query

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

pages/[uid].vue
Copy
<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()

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
<script setup>
const { client } = usePrismic();

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

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
<script setup>
const { client } = usePrismic();

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

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

pages/_uid.vue
Copy
<script setup>
const { client } = usePrismic();
const route = useRoute();

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

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

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

pages/[lang]/[uid].vue
Copy
<script setup>
const { client } = usePrismic();
const route = useRoute();

const { data: home } = await useAsyncData("home", 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>

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.