chore: extract distance display component and remove numeral filter

components/pages/events/Event/distance.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-layout
+    row
+    wrap
+  >
+    <v-flex xs12 sm6>
+      <v-icon>mdi-home</v-icon>
+      <span
+      ><strong>{{ distance.origin }}</strong></span
+      >
+    </v-flex>
+    <v-flex xs12 sm6>
+      <v-icon>mdi-car</v-icon>
+      <span>{{ numericDistance }} km</span>
+      <v-icon>mdi-clock-outline</v-icon>
+      <span>{{ distance.duration }}</span>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script lang='ts'>
+import { computed, defineComponent, PropType } from 'vue'
+import { DanceHallDistance } from '~/graphql/generated/operations'
+
+export default defineComponent({
+  name: 'DistanceDisplay',
+  props: {
+    distance: {
+      type: Object as PropType<DanceHallDistance>,
+      required: true
+    }
+  },
+  setup(props) {
+    const numericDistance = computed(() =>
+      Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }))
+    return {
+      numericDistance
+    }
+  }
+})
+</script>

components/pages/events/Event/index.vue

@@ -88,25 +88,7 @@
         </v-flex
         >
       </v-layout>
-      <v-layout
+      <distance-display v-for='distance in event.distances' :key='distance.origin' :distance='distance'/>
-        v-for='distance in event.distances'
-        :key='distance.origin'
-        row
-        wrap
-      >
-        <v-flex xs12 sm6>
-          <v-icon>mdi-home</v-icon>
-          <span
-          ><strong>{{ distance.origin }}</strong></span
-          >
-        </v-flex>
-        <v-flex xs12 sm6>
-          <v-icon>mdi-car</v-icon>
-          <span>{{ (distance.distance / 1000) | numeral('0,0.00') }} km</span>
-          <v-icon>mdi-clock-outline</v-icon>
-          <span>{{ distance.duration }}</span>
-        </v-flex>
-      </v-layout>
     </v-container>
   </v-card>
 </template>
@@ -118,9 +100,11 @@ import { format, formatDistanceToNow, parseISO } from 'date-fns'
 import { enGB, sv } from 'date-fns/locale'
 import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
 import { Event } from '~/graphql/generated/operations'
+import DistanceDisplay from '~/components/pages/events/Event/distance.vue'
 
 export default defineComponent({
   name: 'EventDetail',
+  components: { DistanceDisplay },
   props: {
     event: {
       type: Object as PropType<Event>,

nuxt.config.js

@@ -112,13 +112,11 @@ export default defineNuxtConfig({
   },
   modules: [
     '@nuxtjs/i18n',
-    '@nuxtjs/sentry',
+    '@nuxtjs/sentry'
-    ['@nuxtjs/moment', { locales: ['sv'], defaultLocale: 'sv' }]
   ],
   plugins: [
     '~/plugins/apollo',
-    '~/plugins/i18n',
+    '~/plugins/i18n'
-    '~/plugins/vue-numeral-filter.js'
   ],
   router: {
     middleware: ['auth']

package.json

@@ -26,7 +26,6 @@
     "@graphql-codegen/typescript-operations": "^2.5.7",
     "@graphql-codegen/typescript-vue-apollo": "^3.3.6",
     "@nuxtjs/i18n": "^7.3.0",
-    "@nuxtjs/moment": "^1.1.0",
     "@nuxtjs/sentry": "^6.0.1",
     "@nuxtjs/vuetify": "^1.12.3",
     "@snyk/protect": "^1.1060.0",
@@ -37,13 +36,11 @@
     "date-fns": "^2.29.3",
     "graphql": "^15.8.0",
     "graphql-tag": "^2.12.6",
-    "moment": "^2.29.4",
     "node-sass": "^8.0.0",
     "nuxt-edge": "latest",
     "sass-loader": "^10.1.1",
     "vue": "2.7.14",
     "vue-demi": "^0.13.11",
-    "vue-numeral-filter": "^2.2.0",
     "vue-server-renderer": "2.7.14",
     "vue-template-compiler": "2.7.14",
     "vuetify": "^2.6.12",

plugins/vue-numeral-filter.js

@@ -1,5 +0,0 @@
-import Vue from 'vue'
-import vueNumeralFilterInstaller from 'vue-numeral-filter'
-
-// TODO: Switch to sv-se when PR (https://github.com/adamwdraper/Numeral-js/pull/534) is merged
-Vue.use(vueNumeralFilterInstaller, { locale: 'no' })

yarn.lock

@@ -2473,16 +2473,6 @@
     ufo "^0.8.5"
     vue-i18n "^8.27.2"
 
-"@nuxtjs/moment@^1.1.0":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/moment/-/moment-1.6.1.tgz#a4e98a861c9d21e34f983046143f4c9bb92bdb7c"
-  integrity sha512-Mo2/3NQB0XryMQuNCTVnAclrDvt9I9sr6dwVm56KhYCoiWTKgQ78tDV9tmrxw7lahw1IBwyPGhw+3pwkM4phAA==
-  dependencies:
-    moment "^2.25.3"
-    moment-locales-webpack-plugin "^1.2.0"
-    moment-timezone "^0.5.28"
-    moment-timezone-data-webpack-plugin "^1.3.0"
-
 "@nuxtjs/sentry@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@nuxtjs/sentry/-/sentry-6.0.1.tgz#5a1c804696ed61bce91ad68f8003a5f18308c05a"
@@ -9861,7 +9851,7 @@ make-dir@^2.0.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0, make-dir@~3.1.0:
+make-dir@^3.0.2, make-dir@^3.1.0, make-dir@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -10286,29 +10276,7 @@ mlly@^0.5.14, mlly@^0.5.16, mlly@^0.5.2:
     pkg-types "^0.3.5"
     ufo "^0.8.5"
 
-moment-locales-webpack-plugin@^1.2.0:
+moment@^2.19.2, moment@^2.20.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz#9af83876a44053706b868ceece5119584d10d7aa"
-  integrity sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==
-  dependencies:
-    lodash.difference "^4.5.0"
-
-moment-timezone-data-webpack-plugin@^1.3.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/moment-timezone-data-webpack-plugin/-/moment-timezone-data-webpack-plugin-1.5.1.tgz#9d35dfd3768db55058e1e809d77a2b64bd6d03a4"
-  integrity sha512-1le6a35GgYdWMVYFzrfpE/F6Pk4bj0M3QKD6Iv6ba9LqWGoVqHQRHyCTLvLis5E1J98Sz40ET6yhZzMVakwpjg==
-  dependencies:
-    find-cache-dir "^3.0.0"
-    make-dir "^3.0.0"
-
-moment-timezone@^0.5.28:
-  version "0.5.38"
-  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.38.tgz#9674a5397b8be7c13de820fd387d8afa0f725aad"
-  integrity sha512-nMIrzGah4+oYZPflDvLZUgoVUO4fvAqHstvG3xAUnMolWncuAiLDWNnJZj6EwJGMGfb1ZcuTFE6GI3hNOVWI/Q==
-  dependencies:
-    moment ">= 2.9.0"
-
-"moment@>= 2.9.0", moment@^2.19.2, moment@^2.20.1, moment@^2.25.3, moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@@ -10783,11 +10751,6 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
 
-numeral@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
-  integrity sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==
-
 nuxi@3.0.0-rc.12:
   version "3.0.0-rc.12"
   resolved "https://registry.yarnpkg.com/nuxi/-/nuxi-3.0.0-rc.12.tgz#4c0d11f2db31b698dbc7d7943fc22d4de258b0c3"
@@ -15068,13 +15031,6 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
-vue-numeral-filter@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/vue-numeral-filter/-/vue-numeral-filter-2.2.0.tgz#51e2f6af1bee898d0c067db3697f93511c16e286"
-  integrity sha512-w9Wq2ACdJTxDQR1joKyZERbBcW86M3couf39M6FQy1nQFmi0tgNYAeIwLhA6b40jRO8TRZwCkzbs59PYxjpC/A==
-  dependencies:
-    numeral "^2.0.6"
-
 vue-router@^3.6.4:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"