Add $config Vue instance property

src/App.vue

@@ -17,7 +17,6 @@
 <script>
 import { mapActions } from "vuex";
 
-import config from "@/config";
 import * as types from "@/store/mutation-types";
 import { log } from "@/logging";
 import AppHeader from "@/components/AppHeader";
@@ -30,7 +29,7 @@ export default {
   created() {
     document.documentElement.style.setProperty(
       "--color-primary",
-      config.primaryColor
+      this.$config.primaryColor
     );
     this.populateStateFromQuery(this.$route.query);
     this.loadData();

src/components/AppHeader.vue

@@ -35,8 +35,8 @@
         <VueCtkDateTimePicker
           v-model="startDateTime"
           :format="DATE_TIME_FORMAT"
-          :color="config.primaryColor"
-          :locale="config.locale"
+          :color="$config.primaryColor"
+          :locale="$config.locale"
           :max-date="endDateTime"
           :button-now-translation="$t('Now')"
         >
@@ -50,8 +50,8 @@
         <VueCtkDateTimePicker
           v-model="endDateTime"
           :format="DATE_TIME_FORMAT"
-          :color="config.primaryColor"
-          :locale="config.locale"
+          :color="$config.primaryColor"
+          :locale="$config.locale"
           :min-date="startDateTime"
           :button-now-translation="$t('Now')"
         >
@@ -139,7 +139,6 @@ import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
 import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";
 
 import Dropdown from "@/components/Dropdown";
-import config from "@/config";
 import { DATE_TIME_FORMAT } from "@/constants";
 import * as types from "@/store/mutation-types";
 
@@ -157,7 +156,6 @@ export default {
   data() {
     return {
       DATE_TIME_FORMAT,
-      config,
       layerSettingsOptions: [
         { layer: "last", label: this.$t("Show last known locations") },
         { layer: "line", label: this.$t("Show location history (line)") },

src/components/LDeviceLocationPopup.vue

@@ -7,7 +7,7 @@
       <ul class="info-list">
         <li :title="$t('Timestamp')">
           <ClockIcon size="1x" aria-hidden="true" role="img" />
-          {{ new Date(timestamp * 1000).toLocaleString(locale) }}
+          {{ new Date(timestamp * 1000).toLocaleString($config.locale) }}
         </li>
         <li :title="$t('Location')">
           <MapPinIcon size="1x" aria-hidden="true" role="img" />
@@ -64,8 +64,6 @@ import {
 } from "vue-feather-icons";
 import { LPopup } from "vue2-leaflet";
 
-import config from "@/config";
-
 export default {
   name: "LDeviceLocationPopup",
   components: {
@@ -122,11 +120,6 @@ export default {
       default: null,
     },
   },
-  data() {
-    return {
-      locale: config.locale,
-    };
-  },
   computed: {
     /**
      * Return the face image as a data URI string which can be used for an image's src attribute

src/main.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import App from "@/App.vue";
+import config from "@/config";
 import i18n from "@/i18n";
 import router from "@/router";
 import store from "@/store";
@@ -11,6 +12,8 @@ Vue.use(VOutsideEvents);
 
 Vue.config.productionTip = false;
 
+Vue.prototype.$config = config;
+
 new Vue({
   i18n,
   router,

src/views/Map.vue

@@ -118,7 +118,6 @@ import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
 import markerShadow from "leaflet/dist/images/marker-shadow.png";
 
 import * as types from "@/store/mutation-types";
-import config from "@/config";
 import LHeatmap from "@/components/LHeatmap";
 import LDeviceLocationPopup from "@/components/LDeviceLocationPopup";
 
@@ -145,26 +144,27 @@ export default {
   },
   data() {
     return {
-      attribution: config.map.attribution,
+      attribution: this.$config.map.attribution,
       center: this.$store.state.map.center,
-      controls: config.map.controls,
-      heatmap: config.map.heatmap,
-      maxZoom: config.map.maxZoom,
-      maxNativeZoom: config.map.maxNativeZoom,
-      url: config.map.url,
+      controls: this.$config.map.controls,
+      heatmap: this.$config.map.heatmap,
+      maxZoom: this.$config.map.maxZoom,
+      maxNativeZoom: this.$config.map.maxNativeZoom,
+      url: this.$config.map.url,
       zoom: this.$store.state.map.zoom,
       circle: {
-        ...config.map.circle,
-        color: config.map.circle.color || config.primaryColor,
-        fillColor: config.map.circle.fillColor || config.primaryColor,
+        ...this.$config.map.circle,
+        color: this.$config.map.circle.color || this.$config.primaryColor,
+        fillColor:
+          this.$config.map.circle.fillColor || this.$config.primaryColor,
       },
       circleMarker: {
-        ...config.map.circleMarker,
-        color: config.map.circleMarker.color || config.primaryColor,
+        ...this.$config.map.circleMarker,
+        color: this.$config.map.circleMarker.color || this.$config.primaryColor,
       },
       polyline: {
-        ...config.map.polyline,
-        color: config.map.polyline.color || config.primaryColor,
+        ...this.$config.map.polyline,
+        color: this.$config.map.polyline.color || this.$config.primaryColor,
       },
     };
   },