Use NuxtTime for hydration issues

Author: cmpadden

components/section/BlogPosts.vue

@@ -19,17 +19,15 @@ const props = defineProps({
                 <div class="flex-1 text-lg font-bold md:text-xl">
                   {{ article.title }}
                 </div>
-                <div v-if="show_dates" class="text-sm font-light text-gray-400">
-                  {{
-                    new Date(article.date).toLocaleDateString("en-US", {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric",
-                    })
-                  }}
-                </div>
+                <NuxtTime
+                  v-if="show_dates"
+                  :datetime="article.date" 
+                  class="text-sm font-light text-gray-400"
+                  year="numeric"
+                  month="short"
+                  day="2-digit"
+                />
               </div>
-
               <div class="line-clamp-3 text-sm text-gray-300">
                 {{ article.description }}
               </div>

pages/articles/index.vue

@@ -91,9 +91,13 @@ function toggleCategory(cat) {
       <div class="col-span-4 lg:col-span-3">
         <div class="grid grid-cols-10 gap-y-4 lg:gap-y-6">
           <template v-for="article in visibleArticles" :key="article._id">
-            <div class="col-span-10 lg:col-span-2">
-              {{ formatDate(article.date) }}
-            </div>
+            <NuxtTime
+              :datetime="article.date" 
+              class="col-span-10 lg:col-span-2"
+              year="numeric"
+              month="short"
+              day="2-digit"
+            />
             <div class="col-span-10 lg:col-span-8">
               <div class="flex-col space-y-2">
                 <NuxtLink class="text-orange-500" :to="article.path">{{

pages/talks.vue

@@ -73,7 +73,13 @@ const talks = [
     <h1 class="my-6 text-2xl font-extrabold">Talks</h1>
     <div class="grid grid-cols-10 gap-y-6">
       <template v-for="(talk, ix) in talks" :key="ix">
-        <div class="col-span-2">{{ formatDate(talk.date) }}</div>
+        <NuxtTime
+          :datetime="talk.date" 
+          class="col-span-2"
+          year="numeric"
+          month="short"
+          day="2-digit"
+        />
         <div class="col-span-8">
           <div class="flex-col space-y-2">
             <!-- <div class=""> -->

utils/index.ts

@@ -1,3 +1,7 @@
+// Warning! This utility was created before becoming aware of <NuxtTime>.
+//
+// Date formatting can cause hydration issues due to the difference locale on server and client.
+// See: https://www.leopold.is/blog/nuxt-hydration-issues-and-dates/
 export const formatDate = function (date) {
   return new Date(date).toLocaleDateString("en-US", {
     month: "short",