Date Templating with Vue.js

The Date field allows content writers to add a date that represents a calendar day.

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.

Default Format

Here's an example of how to integrate a Date field into your template. Date value is a string formatted as "YYYY-MM-DD" (like: "2018-04-24").
In this example, the Date field has the API ID of birthday.

Copy
<template>
  <div>
    <p>Birthday: {{ fields.birthday }}</p>
  </div>
</template>

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

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

Custom Format

If you wish the date value string to be in a different format, you will have to use a library such as Moment, or just by using the inbuilt DateTimeFormat method.

Copy
<p class="date">
  {{ fields.formattedBirthday }}
</p>

//... Code is same as above

.then((document) => {
  this.fields.birthday = document.data.birthday;
  this.fields.formattedBirthday = Intl.DateTimeFormat('en-US',{
    year: 'numeric',
    month: 'short',
    day: '2-digit'}).format(new Date(this.fields.birthday));
    // Formatted in Mon dd, YYYY 
})