From ca096c9d1bb9ab9bd14a349004c757de24dfc6bd Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 7 Sep 2025 13:24:27 +0200
Subject: [PATCH 1/4] feat(i18n,a11y): change last update logic

---
 .../components/VPDocFooterLastUpdated.vue     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 5ec3cfeb13ec..6812285e57e1 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted } from 'vue'
+import { ref, computed, watchEffect, onMounted, useTemplateRef } from 'vue'
 import { useData } from '../composables/data'
+import { useNavigatorLanguage } from '@vueuse/core'
 
 const { theme, page, lang } = useData()
+const { language } = useNavigatorLanguage()
+
+const timeRef = useTemplateRef('timeRef')
 
 const date = computed(
   () => new Date(page.value.lastUpdated!)
@@ -14,13 +18,20 @@ const datetime = ref('')
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
+    const browserLang = theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : language.value
     datetime.value = new Intl.DateTimeFormat(
-      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      browserLang,
       theme.value.lastUpdated?.formatOptions ?? {
-        dateStyle: 'short',
-        timeStyle: 'short'
+        dateStyle: 'medium',
+        timeStyle: 'medium'
       }
     ).format(date.value)
+    if (browserLang && lang.value !== browserLang) {
+      timeRef.value?.setAttribute('lang', browserLang)
+    }
+    else {
+      timeRef.value?.removeAttribute('lang')
+    }
   })
 })
 </script>
@@ -28,7 +39,7 @@ onMounted(() => {
 <template>
   <p class="VPLastUpdated">
     {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-    <time :datetime="isoDatetime">{{ datetime }}</time>
+    <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>
 

From 90379b24a6bd9d965c5137714bbfdb3ab68122b4 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 7 Sep 2025 17:01:41 +0530
Subject: [PATCH 2/4] rename stuff and format

---
 .../components/VPDocFooterLastUpdated.vue     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 6812285e57e1..78b9e2fb92f1 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -3,14 +3,12 @@ import { ref, computed, watchEffect, onMounted, useTemplateRef } from 'vue'
 import { useData } from '../composables/data'
 import { useNavigatorLanguage } from '@vueuse/core'
 
-const { theme, page, lang } = useData()
-const { language } = useNavigatorLanguage()
+const { theme, page, lang: pageLang } = useData()
+const { language: browserLang } = useNavigatorLanguage()
 
 const timeRef = useTemplateRef('timeRef')
 
-const date = computed(
-  () => new Date(page.value.lastUpdated!)
-)
+const date = computed(() => new Date(page.value.lastUpdated!))
 const isoDatetime = computed(() => date.value.toISOString())
 const datetime = ref('')
 
@@ -18,18 +16,21 @@ const datetime = ref('')
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
-    const browserLang = theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : language.value
+    const lang = theme.value.lastUpdated?.formatOptions?.forceLocale
+      ? pageLang.value
+      : browserLang.value
+
     datetime.value = new Intl.DateTimeFormat(
-      browserLang,
+      lang,
       theme.value.lastUpdated?.formatOptions ?? {
         dateStyle: 'medium',
         timeStyle: 'medium'
       }
     ).format(date.value)
-    if (browserLang && lang.value !== browserLang) {
-      timeRef.value?.setAttribute('lang', browserLang)
-    }
-    else {
+
+    if (lang && pageLang.value !== lang) {
+      timeRef.value?.setAttribute('lang', lang)
+    } else {
       timeRef.value?.removeAttribute('lang')
     }
   })

From 91f8fb0813782f615b5e59598dc24e2885c5ad07 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 7 Sep 2025 17:02:11 +0530
Subject: [PATCH 3/4] organize imports

---
 .../theme-default/components/VPDocFooterLastUpdated.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 78b9e2fb92f1..eba1156fdf31 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted, useTemplateRef } from 'vue'
-import { useData } from '../composables/data'
 import { useNavigatorLanguage } from '@vueuse/core'
+import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+import { useData } from '../composables/data'
 
 const { theme, page, lang: pageLang } = useData()
 const { language: browserLang } = useNavigatorLanguage()

From bbd0ad6913ea71b8e7303b6b2d4ee420552a9713 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 7 Sep 2025 17:03:51 +0530
Subject: [PATCH 4/4] use shallowref

---
 .../theme-default/components/VPDocFooterLastUpdated.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index eba1156fdf31..576a87d41f50 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useNavigatorLanguage } from '@vueuse/core'
-import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+import { computed, onMounted, shallowRef, useTemplateRef, watchEffect } from 'vue'
 import { useData } from '../composables/data'
 
 const { theme, page, lang: pageLang } = useData()
@@ -10,7 +10,7 @@ const timeRef = useTemplateRef('timeRef')
 
 const date = computed(() => new Date(page.value.lastUpdated!))
 const isoDatetime = computed(() => date.value.toISOString())
-const datetime = ref('')
+const datetime = shallowRef('')
 
 // set time on mounted hook to avoid hydration mismatch due to
 // potential differences in timezones of the server and clients