Developers / Vue.js / Fetch Data

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.

Perform a query

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:

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

Query helpers

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

getSingle( type )

Queries the API for the document of a given singleton type. type refers to the API ID of the document's custom type.

Copy
$prismic.client.getSingle('homepage')

getByUID( type, uid )

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.

Copy
$prismic.client.getByUID('blog-post', 'hello-world')

query( query )

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.

Copy
$prismic.client.query('')

Use cases

Here are a few typical use cases.

Query a nav menu or config document

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.

Copy
this.$prismic.client.getSingle('footer')

Query one instance of a repeatable document

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.

Copy
this.$prismic.client.getByUID('example_custom_type', 'example_uid')

Query all documents

To query all documents, use the query method and pass an empty string.

Copy
this.$prismic.client.query('')

Query all documents from a custom type

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:

Copy
this.$prismic.client.query(
  this.$prismic.predicate.at('document.type','blog_post')
)

Query by language

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:

Copy
this.$prismic.client.getSingle('footer', { lang: 'fr-fr' })

Query by content relationship

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:

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

Query by a field within a group

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.

Copy
this.$prismic.client.query(
  this.$prismic.predicate.at('my.blog_post.categories.category', 'WNje3SUAAEGBu8bc')
)

Next Steps

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.

← Previous

Setup

Next →

Template Content

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.

Adjust cookie settings