Timestamp Templating with Vue.js

The Timestamp field allows content writers to add a date and time.

Before Reading

This page assumes that you have already included the prismic-vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

Usage

Here's an example of how to integrate a Timestamp field into your template. The Timestamp value is a string formatted as "YYYY-MM-DDTHH:MM:SS+0000" (such as: "2018-04-25T10:07:00+0000").
In the following example, the Timestamp field has the API ID of event_timestamp.

Copy
<template>
  <div>
    <p>Event timestamp: {{ fields.eventTimestamp }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        eventTimestamp: null
      }
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.fields.eventTimestamp = document.data.event_timestamp;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

To learn more about the Timestamp field check out the user guide.