덧글 및 기사 날짜필터적용 + DateFNS

nuxt.config.js

@@ -36,7 +36,8 @@ export default {
   plugins: [
     { src: '~/plugins/vue-material' },
     { src: '~/plugins/axios' },
-    { src: '~/plugins/firestore' }
+    { src: '~/plugins/firestore' },
+    { src: '~/plugins/time-filters' }
   ],
   /*
   ** Nuxt.js dev-modules

package-lock.json

@@ -3786,6 +3786,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.8.1.tgz",
+      "integrity": "sha512-EL/C8IHvYRwAHYgFRse4MGAPSqlJVlOrhVYZ75iQBKrnv+ZedmYsgwH3t+BCDuZDXpoo07+q9j4qgSSOa7irJg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/proxy": "^1.3.3",
+    "date-fns": "^2.8.1",
     "firebase": "^7.6.1",
     "js-cookie": "^2.2.1",
     "md5": "^2.2.1",

pages/headlines/_slug.vue

@@ -41,7 +41,7 @@
           <md-avatar><img :src="comment.user.avatar" :alt="comment.user.username"></md-avatar>
           <div class="md-list-item-text">
             <span>{{ comment.user.username }}</span>
-            <span>{{ comment.publishedAt }}</span>
+            <span>{{ comment.publishedAt | commentTimeToNow }}</span>
             <p>{{ comment.text }}</p>
           </div>
 

pages/index.vue

@@ -182,7 +182,7 @@
                   </md-icon>
                 </div>
                 <div class="md-subhead">
-                  {{ headline.publishedAt }}
+                  {{ headline.publishedAt | publishedTimeToNow }}
                   <md-icon class="small-icon">
                     alarm
                   </md-icon>

plugins/time-filters.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import { formatDistanceToNow, parseISO } from 'date-fns'
+
+Vue.filter('publishedTimeToNow', (time) => {
+  return `${formatDistanceToNow(parseISO(time))} ago`
+})
+
+Vue.filter('commentTimeToNow', (timestamp) => {
+  const timeElapsed = formatDistanceToNow(timestamp, {
+    includeSeconds: true
+  })
+  return `${timeElapsed} ago`
+})