From 5ae24298ae4d6414039c9151f7a801f6220b6ae5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Sun, 6 Dec 2020 17:50:56 +0100
Subject: [PATCH] Add vue-moment 3rd party for date/time formating

---
 package.json        |  1 +
 src/main.js         |  2 ++
 src/views/Fruit.vue |  3 ++-
 yarn.lock           | 12 ++++++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index deb66c2..0073533 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "core-js": "^3.6.5",
     "fruit-api": "^1.1.3",
     "vue": "^2.6.11",
+    "vue-moment": "^4.1.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
diff --git a/src/main.js b/src/main.js
index 1505f06..db3ad5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,8 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 
+Vue.use(require("vue-moment"));
+
 Vue.config.productionTip = false;
 
 new Vue({
diff --git a/src/views/Fruit.vue b/src/views/Fruit.vue
index c92cbc8..4b31283 100644
--- a/src/views/Fruit.vue
+++ b/src/views/Fruit.vue
@@ -14,7 +14,7 @@
         <hr />
 
         <p class="price">{{ "$" + fruit.price }}</p>
-        {{ fruit.expires }}
+        {{ "expires" }} {{ fruit.expires | moment("from", "now") }}
       </section>
     </article>
   </div>
@@ -22,6 +22,7 @@
 
 <script>
 import { mapState } from "vuex";
+
 export default {
   name: "FruitDetails",
   computed: {
diff --git a/yarn.lock b/yarn.lock
index 9772cb6..f0c1a1b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7663,6 +7663,11 @@ moment@2.24.0:
   resolved "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s=
 
+moment@^2.19.2:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 morgan@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
@@ -11081,6 +11086,13 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-moment@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"
+  integrity sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==
+  dependencies:
+    moment "^2.19.2"
+
 vue-router@^3.2.0:
   version "3.4.9"
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1606723745188&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"