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.
<script setup>
const { client } = usePrismic();
const { data: home } = await useAsyncData("home", () =>
client.getByUID("page", "home")
);
</script>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(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>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.
Here are a few common use cases.
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>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("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>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>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("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?
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.