Fetch Data
This technology has no Slice Machine integration
This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.
You get content from Prismic into your project via the Prismic API. You can query the Prismic API with a few lines of code. By the end of this page, you'll have content from your Prismic repository in your Vue project.
In Vue, you can define your query as an async method, and then call the method on the created lifecycle hook. Here's what that looks like:
<template>
<div>
<h1>Here's your raw API response:</h1>
<pre id="app" v-html="JSON.stringify(response, null, 2)"></pre>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
// Initialize "response"
response: null
}
},
methods: {
async getContent() {
// Query the API and assign the response to "response"
const response = await this.$prismic.client.query('')
this.response = response
}
},
created() {
// Call the API query method
this.getContent()
}
}
</script>@prismicio/vue injects a collections of helper functions into your Vue project.
All of these methods can accept an options object. The options object configures language, ordering, pagination, linked data, and more. For more information on the options object, see the @prismicio/client v5 Technical Reference.
They are all available globally via $prismic.client. Here are the three most commonly-used helpers:
Queries the API for the document of a given singleton type. type refers to the API ID of the document's custom type.
$prismic.client.getSingle('homepage')Queries the API for the document of a given type with a given UID. type refers to the API ID of the document's custom type, and uid refers to the document's UID.
$prismic.client.getByUID('blog-post', 'hello-world')Used for building more advanced queries, but will return all documents if query is an empty string (""). query is either a predicate function (see the note below on advanced queries) or an empty string.
$prismic.client.query('')Here are a few typical 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.
this.$prismic.client.getSingle('footer')On repeatable documents, we recommend adding a UID field — a unique identifier. Prismic makes UIDs URL-friendly and unique to each 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 API ID and UID of the custom type.
this.$prismic.client.getByUID('example_custom_type', 'example_uid')this.$prismic.client.query('')For more specific queries, you can use Prismic's predicates. Filters are search parameters. To get all documents of a certain type, you'd use a predicate to search for all documents where the "type" matches a given value.
Here's what that looks like:
this.$prismic.client.query(
this.$prismic.predicate.at('document.type','blog_post')
)Prismic allows you to publish your content in different languages. By default, the API will return content in your master language. To get content in a different language, add an options object with a lang option and a locale code:
this.$prismic.client.getSingle('footer', { lang: 'fr-fr' })Content relationships can be used to create content taxonomies. To query by content relationship, use the at predicate with the path my.[custom-type].[content-relationship-field] and the ID of the linked document:
this.$prismic.client.query([
this.$prismic.predicate.at('my.blog_post.category', 'WNje3SUAAEGBu8bc')
])To query by content relationship, you must use the linked document's ID. The ID is a randomly-generated string that looks like this: WNje3SUAAEGBu8bc. You can find it in the metadata of the document's API result.
In the following example, a blog post can have multiple categories. The search looks for documents that have one category within a group of categories that match the given ID.
this.$prismic.client.query(
this.$prismic.predicate.at('my.blog_post.categories.category', 'WNje3SUAAEGBu8bc')
)Now that we've got data in your Vue project, it's time to display it on the page. That's what we'll explore next.
Can't find what you're looking for?
Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.