Fixed date format by adding leading zeros.

components/BlogPostCard.vue

@@ -3,7 +3,7 @@
     <img alt="Blog post image" :src="post.image || 'https://cryptic-game.net/open-graph.jpg'" :style="imageStyle" class="blog-post-card__image">
     <div class="blog-post-card__info">
       <span class="blog-post-card__title">{{ post.title }}</span>
-      <small class="blog-post-card__date">{{ new Date(post.created).toLocaleDateString() }}</small>
+      <small class="blog-post-card__date">{{ getDateWithLZero(Intl.DateTimeFormat().format(new Date(post.created))) }}</small>
       <span>{{ post.description }}</span>
       <div class="blog-post-card__footer">
         <nuxt-link :to="localePath(`/blog/${post.id.postId}`)" class="blog-post-card__link link">
@@ -15,8 +15,10 @@
 </template>
 
 <script>
+import DateUtils from '../mixins/DateUtils.js'
 export default {
   name: 'BlogPostCard',
+  mixins: [DateUtils],
   props: {
     post: {
       type: Object,

mixins/DateUtils.js

@@ -0,0 +1,23 @@
+export default {
+  methods: {
+    getDateWithLZero (date) {
+      // eslint-disable-next-line prefer-const
+      let dateA = []
+      let s = false
+      if (date.includes('.')) { dateA = date.split('.') } else if (date.includes('/')) { dateA = date.split('/'); s = true }
+
+      if (dateA[0].length === 1) {
+        dateA[0] = '0' + dateA[0]
+      }
+      if (dateA[1].length === 1) {
+        dateA[1] = '0' + dateA[1]
+      }
+      if (!s) {
+        return dateA.join('.')
+      } else {
+        return dateA.join('/')
+      }
+    }
+
+  }
+}

pages/blog/_slug.vue

@@ -4,7 +4,7 @@
     <NavigationBar title="Blog" />
     <article class="content formatted">
       <img :alt="`Title Image from: ${post.title}`" :src="post.image" class="post-page__image"><br>
-      <span>{{ Intl.DateTimeFormat($i18n.localeProperties.iso).format(new Date(post.created)) }}</span>
+      <span>{{ getDateWithLZero(Intl.DateTimeFormat($i18n.localeProperties.iso).format(new Date(post.created))).toString() }}</span>
       <h2 class="post-page__title">
         {{ post.title || "untitled post" }}
       </h2>
@@ -16,11 +16,12 @@
 </template>
 
 <script>
+import DateUtils from '../../mixins/DateUtils.js'
 import NavigationBar from '@/components/NavigationBar'
-
 export default {
   name: 'PostPage',
   components: { NavigationBar },
+  mixins: [DateUtils],
   asyncData ({ route }) {
     return { slug: route.params.slug }
   },

pages/changelog.vue

@@ -10,7 +10,7 @@
             <div>
               <h3>{{ change.name }}</h3>
               <client-only>
-                <small>{{ getPrettyDate(change.date) }}</small>
+                <small>{{ getDateWithLZero(getPrettyDate(change.date)) }}</small>
               </client-only>
               <div />
               <div v-if="change.additions" class="additions">
@@ -63,11 +63,13 @@
 
 <script>
 import NavigationBar from '@/components/NavigationBar'
+import DateUtils from '@/mixins/DateUtils'
 export default {
   name: 'ChangelogPage',
   components: {
     NavigationBar
   },
+  mixins: [DateUtils],
   data () {
     return {
       changes: []