Migrate from vue-cli / webpack to vite

src/App.vue

@@ -10,19 +10,15 @@
   </div>
 </template>
 
-<style lang="scss">
-@import "styles/main";
-</style>
-
 <script>
 import { mapActions } from "vuex";
 
 import * as types from "@/store/mutation-types";
 import { log } from "@/logging";
-import AppHeader from "@/components/AppHeader";
-import DownloadModal from "@/components/modals/DownloadModal";
-import InformationModal from "@/components/modals/InformationModal";
-import LoadingModal from "@/components/modals/LoadingModal";
+import AppHeader from "@/components/AppHeader.vue";
+import DownloadModal from "@/components/modals/DownloadModal.vue";
+import InformationModal from "@/components/modals/InformationModal.vue";
+import LoadingModal from "@/components/modals/LoadingModal.vue";
 
 export default {
   components: { AppHeader, DownloadModal, InformationModal, LoadingModal },
@@ -95,3 +91,7 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+@import "styles/main";
+</style>

src/components/AppHeader.vue

@@ -93,7 +93,7 @@
           <option :value="null">
             {{ $t("Show all") }}
           </option>
-          <option v-for="user in users" :value="user" :key="user">
+          <option v-for="user in users" :key="user" :value="user">
             {{ user }}
           </option>
         </select>
@@ -110,8 +110,8 @@
           </option>
           <option
             v-for="device in devices[selectedUser]"
-            :value="device"
             :key="`${selectedUser}-${device}`"
+            :value="device"
           >
             {{ device }}
           </option>
@@ -161,18 +161,6 @@
   </header>
 </template>
 
-<style lang="scss" scoped>
-.distance-travelled {
-  text-align: right;
-  line-height: 1.2;
-
-  .feather {
-    margin-top: 3px;
-    margin-right: 0 !important;
-  }
-}
-</style>
-
 <script>
 import moment from "moment";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
@@ -191,7 +179,7 @@ import {
 import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
 import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";
 
-import DropdownButton from "@/components/DropdownButton";
+import DropdownButton from "@/components/DropdownButton.vue";
 import { DATE_TIME_FORMAT } from "@/constants";
 import * as types from "@/store/mutation-types";
 import { humanReadableDistance } from "@/util";
@@ -292,3 +280,15 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.distance-travelled {
+  text-align: right;
+  line-height: 1.2;
+
+  .feather {
+    margin-top: 3px;
+    margin-right: 0 !important;
+  }
+}
+</style>

src/components/DropdownButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown" v-focus-outside="hide" v-click-outside="hide">
+  <div v-focus-outside="hide" v-click-outside="hide" class="dropdown">
     <button class="dropdown-button button" :title="title" @click="toggle">
       {{ label }}
     </button>

src/components/LDeviceLocationPopup.vue

@@ -54,30 +54,6 @@
   </LPopup>
 </template>
 
-<style lang="scss" scoped>
-.device {
-  display: inline-block;
-  position: relative;
-  top: -5px;
-  color: var(--color-primary);
-  font-weight: bold;
-}
-.wrapper {
-  display: flex;
-  margin-top: 10px;
-
-  img {
-    align-self: start;
-    margin-right: 20px;
-  }
-}
-.regions {
-  border-top: 1px solid var(--color-separator);
-  margin-top: 15px;
-  padding-top: 15px;
-}
-</style>
-
 <script>
 import {
   BatteryIcon,
@@ -188,3 +164,27 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.device {
+  display: inline-block;
+  position: relative;
+  top: -5px;
+  color: var(--color-primary);
+  font-weight: bold;
+}
+.wrapper {
+  display: flex;
+  margin-top: 10px;
+
+  img {
+    align-self: start;
+    margin-right: 20px;
+  }
+}
+.regions {
+  border-top: 1px solid var(--color-separator);
+  margin-top: 15px;
+  padding-top: 15px;
+}
+</style>

src/components/LHeatmap.vue

@@ -2,12 +2,6 @@
   <div />
 </template>
 
-<style scoped>
-div {
-  display: none;
-}
-</style>
-
 <script>
 // See https://github.com/KoRiGaN/Vue2Leaflet/blob/e0cf0f29bc519f0a70f0f1eb6e579f947e7ea4ce/src/utils/utils.js
 // to understand the `custom` attribute of each prop, how the `set<Prop>`
@@ -136,3 +130,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+div {
+  display: none;
+}
+</style>

src/components/modals/DownloadModal.vue

@@ -3,9 +3,9 @@
     <pre class="data"><code>{{ data }}</code></pre>
     <div class="options">
       <input
+        id="option-minify-json"
         v-model="options.minifyJson"
         type="checkbox"
-        id="option-minify-json"
       />
       <label for="option-minify-json">
         {{ $t("Minify JSON") }}
@@ -30,33 +30,6 @@
   </modal>
 </template>
 
-<style lang="scss" scoped>
-.data {
-  max-height: 300px;
-}
-
-.options {
-  margin-top: 30px;
-}
-
-.buttons {
-  display: flex;
-  margin-top: 30px;
-
-  button {
-    flex: 1;
-
-    &:first-child {
-      margin-right: 10px;
-    }
-
-    &:last-child {
-      margin-left: 10px;
-    }
-  }
-}
-</style>
-
 <script>
 import { mapState } from "vuex";
 import copy from "clipboard-copy";
@@ -108,3 +81,30 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.data {
+  max-height: 300px;
+}
+
+.options {
+  margin-top: 30px;
+}
+
+.buttons {
+  display: flex;
+  margin-top: 30px;
+
+  button {
+    flex: 1;
+
+    &:first-child {
+      margin-right: 10px;
+    }
+
+    &:last-child {
+      margin-left: 10px;
+    }
+  }
+}
+</style>

src/components/modals/LoadingModal.vue

@@ -13,6 +13,20 @@
   </modal>
 </template>
 
+<script>
+import { mapState } from "vuex";
+import { LoaderIcon } from "vue-feather-icons";
+
+export default {
+  components: {
+    LoaderIcon,
+  },
+  computed: {
+    ...mapState(["requestAbortController"]),
+  },
+};
+</script>
+
 <style scoped>
 .loader-icon {
   animation: spinning 2s linear infinite;
@@ -33,17 +47,3 @@
   }
 }
 </style>
-
-<script>
-import { mapState } from "vuex";
-import { LoaderIcon } from "vue-feather-icons";
-
-export default {
-  components: {
-    LoaderIcon,
-  },
-  computed: {
-    ...mapState(["requestAbortController"]),
-  },
-};
-</script>

src/i18n.js

@@ -3,17 +3,29 @@ import VueI18n from "vue-i18n";
 
 import config from "@/config";
 
+// TODO: This should be possible to do with https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n,
+// but that breaks at runtime - may only work with vue-i18n@9?
+import da_DK from "@/locales/da-DK.json";
+import de_DE from "@/locales/de-DE.json";
+import en_GB from "@/locales/en-GB.json";
+import en_US from "@/locales/en-US.json";
+import es_ES from "@/locales/es-ES.json";
+import fr_FR from "@/locales/fr-FR.json";
+import sk_SK from "@/locales/sk-SK.json";
+import tr_TR from "@/locales/tr-TR.json";
+
 Vue.use(VueI18n);
 
-const locales = require.context("./locales", true, /[A-Za-z0-9-_,\s]+\.json$/i);
-const messages = {};
-locales.keys().forEach((key) => {
-  const matched = key.match(/([A-Za-z0-9-_]+)\./i);
-  if (matched && matched.length > 1) {
-    const locale = matched[1];
-    messages[locale] = locales(key);
-  }
-});
+const messages = {
+  da_DK: da_DK,
+  de_DE: de_DE,
+  en_GB: en_GB,
+  en_US: en_US,
+  es_ES: es_ES,
+  fr_FR: fr_FR,
+  sk_SK: sk_SK,
+  tr_TR: tr_TR,
+};
 
 export default new VueI18n({
   locale: config.locale,

src/store/index.js

@@ -11,7 +11,7 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     isLoading: false,
-    frontendVersion: process.env.PACKAGE_VERSION,
+    frontendVersion: import.meta.env.PACKAGE_VERSION,
     recorderVersion: "",
     users: [],
     devices: {},

src/views/Map.vue

@@ -14,14 +14,14 @@
     <LControlScale
       v-if="controls.scale.display"
       :position="controls.scale.position"
-      :maxWidth="controls.scale.maxWidth"
+      :max-width="controls.scale.maxWidth"
       :metric="controls.scale.metric"
       :imperial="controls.scale.imperial"
     />
     <LTileLayer
       :url="url"
       :attribution="attribution"
-      :tileSize="tileSize"
+      :tile-size="tileSize"
       :options="{ maxNativeZoom, maxZoom, zoomOffset }"
     />
 
@@ -134,8 +134,8 @@ import {
 import "leaflet/dist/leaflet.css";
 import * as types from "@/store/mutation-types";
 import LCustomMarker from "@/components/LCustomMarker";
-import LHeatmap from "@/components/LHeatmap";
-import LDeviceLocationPopup from "@/components/LDeviceLocationPopup";
+import LHeatmap from "@/components/LHeatmap.vue";
+import LDeviceLocationPopup from "@/components/LDeviceLocationPopup.vue";
 
 export default {
   components: {
@@ -179,11 +179,6 @@ export default {
       },
     };
   },
-  mounted() {
-    this.$root.$on("fitView", () => {
-      this.fitView();
-    });
-  },
   computed: {
     ...mapGetters([
       "filteredLocationHistory",
@@ -192,6 +187,21 @@ export default {
     ]),
     ...mapState(["lastLocations", "map"]),
   },
+  watch: {
+    lastLocations() {
+      if (this.$config.onLocationChange.fitView) {
+        this.fitView();
+      }
+    },
+    filteredLocationHistory() {
+      this.fitView();
+    },
+  },
+  mounted() {
+    this.$root.$on("fitView", () => {
+      this.fitView();
+    });
+  },
   methods: {
     ...mapMutations({
       setMapCenter: types.SET_MAP_CENTER,
@@ -241,15 +251,5 @@ export default {
       }));
     },
   },
-  watch: {
-    lastLocations() {
-      if (this.$config.onLocationChange.fitView) {
-        this.fitView();
-      }
-    },
-    filteredLocationHistory() {
-      this.fitView();
-    },
-  },
 };
 </script>