Print the current year in a Vue template

Printing the current year can be useful in for example a copyright statement in your website footer. Rendering the current year in your Vue.js template doesn't require much more than calling a plain JavaScript function.

In the example below we render the current year by calling a computed property from our template.

<template>
  <footer>© {{ currentYear }}</footer>
</template>

<script>
  export default {
    computed: {
      currentYear() {
        return new Date().getFullYear();
      },
    },
  };
</script>

The Date object we creates a date representation using the date and time that is configured locally in the user's browser taking its timezone into account.