From 7c48e69c1103c81edd7a91a38f13b607e8cfc904 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Fri, 23 Dec 2022 21:21:06 -0600
Subject: [PATCH] Initial Typescript impl.

---
 frontend/npm-shrinkwrap.json                  |  41 ++++++
 frontend/package.json                         |   5 +
 frontend/tsconfig.json                        |   4 +-
 .../vue/components/Account/ApiKeyNewKey.vue   |   4 +-
 frontend/vue/components/Admin/ApiKeys.vue     |  32 ++---
 frontend/vue/components/Admin/AuditLog.vue    |   2 +-
 frontend/vue/components/Admin/Backups.vue     |  22 ++--
 .../Admin/Backups/ConfigureModal.vue          |  71 +++++------
 .../Admin/Backups/LastOutputModal.vue         |   2 +-
 .../Admin/Backups/RunBackupModal.vue          |  15 +--
 frontend/vue/components/Admin/Branding.vue    |   6 +-
 .../vue/components/Admin/CustomFields.vue     |  14 +--
 .../Admin/CustomFields/EditModal.vue          |  11 +-
 frontend/vue/components/Admin/GeoLite.vue     | 117 ++++++++----------
 .../vue/components/Common/AudioPlayer.vue     |   7 +-
 frontend/vue/components/Common/DataTable.vue  |  13 +-
 frontend/vue/components/Common/ModalForm.vue  |  10 +-
 .../Common/{NowPlaying.js => NowPlaying.ts}   |   0
 .../Entity/{NowPlaying.js => NowPlaying.ts}   |   0
 .../{RadioAdapters.js => RadioAdapters.ts}    |   0
 ...ResettableForm.js => UseResettableForm.ts} |   0
 ...elidateOnForm.js => UseVuelidateOnForm.ts} |   0
 frontend/vue/components/InlinePlayer.vue      |   4 +-
 frontend/vue/components/Public/Player.vue     |   4 +-
 .../Stations/Media/MediaToolbar.vue           |   2 +-
 frontend/vue/components/Stations/Profile.vue  |   2 +-
 .../Stations/Profile/BackendPanel.vue         |   2 +-
 .../Stations/Profile/FrontendPanel.vue        |   2 +-
 .../Stations/Profile/NowPlayingPanel.vue      |   2 +-
 frontend/vue/components/Stations/Remotes.vue  |   2 +-
 .../Stations/Streamers/BroadcastsModal.vue    |   2 +-
 frontend/vue/pages/Admin/AuditLog.js          |   2 +-
 frontend/vue/pages/Admin/Branding.js          |   2 +-
 frontend/vue/pages/Dashboard.js               |   4 +-
 frontend/vue/pages/Public/FullPlayer.js       |   4 +-
 frontend/vue/pages/Public/History.js          |   2 +-
 frontend/vue/pages/Public/Schedule.js         |   2 +-
 frontend/vue/pages/Stations/Media.js          |   4 +-
 frontend/vue/pages/Stations/Playlists.js      |   2 +-
 frontend/vue/pages/Stations/Podcasts.js       |   4 +-
 frontend/vue/pages/Stations/Profile.js        |   4 +-
 frontend/vue/pages/Stations/Queue.js          |   2 +-
 .../vue/pages/Stations/Reports/Listeners.js   |   2 +-
 .../vue/pages/Stations/Reports/Overview.js    |   2 +-
 .../vue/pages/Stations/Reports/Requests.js    |   2 +-
 .../pages/Stations/Reports/SoundExchange.js   |   2 +-
 .../vue/pages/Stations/Reports/Timeline.js    |   2 +-
 frontend/vue/pages/Stations/Streamers.js      |   4 +-
 frontend/vue/vendor/{axios.js => axios.ts}    |   7 +-
 .../vue/vendor/{azuracast.js => azuracast.ts} |   2 +
 .../{bootstrapVue.js => bootstrapVue.ts}      |   0
 frontend/vue/vendor/chartjs.js                |  20 ---
 frontend/vue/vendor/chartjs.ts                |  15 +++
 frontend/vue/vendor/{events.js => events.ts}  |   0
 .../vue/vendor/{fancybox.js => fancybox.ts}   |   0
 .../vue/vendor/{gettext.js => gettext.ts}     |   0
 frontend/vue/vendor/{luxon.js => luxon.ts}    |   2 +-
 frontend/vue/vendor/{pinia.js => pinia.ts}    |   0
 .../vendor/{sweetalert.js => sweetalert.ts}   |   0
 templates/partials/bodyjs.phtml               |   2 +-
 60 files changed, 267 insertions(+), 225 deletions(-)
 rename frontend/vue/components/Common/{NowPlaying.js => NowPlaying.ts} (100%)
 rename frontend/vue/components/Entity/{NowPlaying.js => NowPlaying.ts} (100%)
 rename frontend/vue/components/Entity/{RadioAdapters.js => RadioAdapters.ts} (100%)
 rename frontend/vue/components/Form/{UseResettableForm.js => UseResettableForm.ts} (100%)
 rename frontend/vue/components/Form/{UseVuelidateOnForm.js => UseVuelidateOnForm.ts} (100%)
 rename frontend/vue/vendor/{axios.js => axios.ts} (91%)
 rename frontend/vue/vendor/{azuracast.js => azuracast.ts} (93%)
 rename frontend/vue/vendor/{bootstrapVue.js => bootstrapVue.ts} (100%)
 delete mode 100644 frontend/vue/vendor/chartjs.js
 create mode 100644 frontend/vue/vendor/chartjs.ts
 rename frontend/vue/vendor/{events.js => events.ts} (100%)
 rename frontend/vue/vendor/{fancybox.js => fancybox.ts} (100%)
 rename frontend/vue/vendor/{gettext.js => gettext.ts} (100%)
 rename frontend/vue/vendor/{luxon.js => luxon.ts} (86%)
 rename frontend/vue/vendor/{pinia.js => pinia.ts} (100%)
 rename frontend/vue/vendor/{sweetalert.js => sweetalert.ts} (100%)

diff --git a/frontend/npm-shrinkwrap.json b/frontend/npm-shrinkwrap.json
index 462e72b96..7f15bdeb8 100644
--- a/frontend/npm-shrinkwrap.json
+++ b/frontend/npm-shrinkwrap.json
@@ -78,6 +78,11 @@
         "webpack-assets-manifest": "^5",
         "webpack-cli": "^5",
         "zxcvbn": "^4.4.2"
+      },
+      "devDependencies": {
+        "@types/lodash": "^4.14.191",
+        "@types/luxon": "^3.1.0",
+        "@types/store": "^2.0.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2098,6 +2103,18 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
+    "node_modules/@types/luxon": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.1.0.tgz",
+      "integrity": "sha512-gCd/HcCgjqSxfMrgtqxCgYk/22NBQfypwFUG7ZAyG/4pqs51WLTcUzVp1hqTbieDYeHS3WoVEh2Yv/2l+7B0Vg==",
+      "dev": true
+    },
     "node_modules/@types/minimatch": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -2118,6 +2135,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "node_modules/@types/store": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/store/-/store-2.0.2.tgz",
+      "integrity": "sha512-ZPHnXkzmGMfk+pHqAGzTSpA9CbsHmJLgkvOl5w52LZ0XTxB1ZIHWZzQ7lEtjTNWScBbsQekg8TjApMXkMe4nkw==",
+      "dev": true
+    },
     "node_modules/@types/vinyl": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.7.tgz",
@@ -12607,6 +12630,18 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
+    "@types/luxon": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.1.0.tgz",
+      "integrity": "sha512-gCd/HcCgjqSxfMrgtqxCgYk/22NBQfypwFUG7ZAyG/4pqs51WLTcUzVp1hqTbieDYeHS3WoVEh2Yv/2l+7B0Vg==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -12627,6 +12662,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "@types/store": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/store/-/store-2.0.2.tgz",
+      "integrity": "sha512-ZPHnXkzmGMfk+pHqAGzTSpA9CbsHmJLgkvOl5w52LZ0XTxB1ZIHWZzQ7lEtjTNWScBbsQekg8TjApMXkMe4nkw==",
+      "dev": true
+    },
     "@types/vinyl": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.7.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ede537e9e..f6376892e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -79,5 +79,10 @@
     "webpack-assets-manifest": "^5",
     "webpack-cli": "^5",
     "zxcvbn": "^4.4.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.191",
+    "@types/luxon": "^3.1.0",
+    "@types/store": "^2.0.2"
   }
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index fa24535c1..0285a11ed 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -26,7 +26,9 @@
     "types": []
   },
   "include": [
-    "vue/**/*.ts"
+    "vue/**/*.ts",
+    "vue/**/*.vue",
+    "vue/**/*.js"
   ],
   "exclude": [
     "node_modules"
diff --git a/frontend/vue/components/Account/ApiKeyNewKey.vue b/frontend/vue/components/Account/ApiKeyNewKey.vue
index 0d8392b51..3821ce34e 100644
--- a/frontend/vue/components/Account/ApiKeyNewKey.vue
+++ b/frontend/vue/components/Account/ApiKeyNewKey.vue
@@ -27,8 +27,8 @@
     </p>
 </template>
 
-<script setup>
-import CopyToClipboardButton from "~/components/Common/CopyToClipboardButton";
+<script setup lang="ts">
+import CopyToClipboardButton from "~/components/Common/CopyToClipboardButton.vue";
 
 const props = defineProps({
     newKey: String
diff --git a/frontend/vue/components/Admin/ApiKeys.vue b/frontend/vue/components/Admin/ApiKeys.vue
index a85fe6ec9..880dd212a 100644
--- a/frontend/vue/components/Admin/ApiKeys.vue
+++ b/frontend/vue/components/Admin/ApiKeys.vue
@@ -19,8 +19,8 @@
     </section>
 </template>
 
-<script setup>
-import DataTable from "~/components/Common/DataTable";
+<script setup lang="ts">
+import DataTable from "~/components/Common/DataTable.vue";
 import {ref} from "vue";
 import {useSweetAlert} from "~/vendor/sweetalert";
 import {useNotify} from "~/vendor/bootstrapVue";
@@ -31,22 +31,29 @@ const props = defineProps({
     apiUrl: String
 });
 
+const {$gettext} = useTranslate();
+
 const fields = ref([
     {
         key: 'comment',
         isRowHeader: true,
-        label: this.$gettext('API Key Description/Comments'),
+        label: $gettext('API Key Description/Comments'),
         sortable: false
     },
     {
         key: 'owner',
-        label: this.$gettext('Owner'),
+        label: $gettext('Owner'),
         sortable: false
     },
-    {key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
+    {
+        key: 'actions',
+        label: $gettext('Actions'),
+        sortable: false,
+        class: 'shrink'
+    }
 ]);
 
-const datatable = ref(); // Datatable
+const datatable = ref<InstanceType<typeof DataTable>>();
 
 const relist = () => {
     datatable.value.relist();
@@ -55,22 +62,19 @@ const relist = () => {
 const {confirmDelete} = useSweetAlert();
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
-const {$gettext} = useTranslate();
 
 const doDelete = (url) => {
     confirmDelete({
-        title: this.$gettext('Delete API Key?'),
+        title: $gettext('Delete API Key?'),
     }).then((result) => {
         if (result.value) {
-            this.$wrapWithLoading(
-                this.axios.delete(url)
+            wrapWithLoading(
+                axios.delete(url)
             ).then((resp) => {
-                this.$notifySuccess(resp.data.message);
-                this.relist();
+                notifySuccess(resp.data.message);
+                relist();
             });
         }
     });
 }
-
-
 </script>
diff --git a/frontend/vue/components/Admin/AuditLog.vue b/frontend/vue/components/Admin/AuditLog.vue
index 4f5cf8374..1b2832628 100644
--- a/frontend/vue/components/Admin/AuditLog.vue
+++ b/frontend/vue/components/Admin/AuditLog.vue
@@ -84,7 +84,7 @@ pre.changes {
 }
 </style>
 
-<script setup>
+<script setup lang="ts">
 import {DateTime} from "luxon";
 import {computed, ref} from "vue";
 import {useTranslate} from "~/vendor/gettext";
diff --git a/frontend/vue/components/Admin/Backups.vue b/frontend/vue/components/Admin/Backups.vue
index cbc9291e1..972641e63 100644
--- a/frontend/vue/components/Admin/Backups.vue
+++ b/frontend/vue/components/Admin/Backups.vue
@@ -107,14 +107,14 @@
     </div>
 </template>
 
-<script setup>
-import Icon from "~/components/Common/Icon";
-import DataTable from "~/components/Common/DataTable";
-import AdminBackupsLastOutputModal from "./Backups/LastOutputModal";
+<script setup lang="ts">
+import Icon from "~/components/Common/Icon.vue";
+import DataTable from "~/components/Common/DataTable.vue";
+import AdminBackupsLastOutputModal from "./Backups/LastOutputModal.vue";
 import {DateTime} from 'luxon';
 import formatFileSize from "~/functions/formatFileSize";
-import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal";
-import AdminBackupsRunBackupModal from "~/components/Admin/Backups/RunBackupModal";
+import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal.vue";
+import AdminBackupsRunBackupModal from "~/components/Admin/Backups/RunBackupModal.vue";
 import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";
 import {useAzuraCast} from "~/vendor/azuracast";
 import {onMounted, ref} from "vue";
@@ -131,7 +131,7 @@ const props = defineProps({
     isDocker: Boolean,
 });
 
-const settingsLoading = ref(false);
+const settingsLoading = ref<Boolean>(false);
 
 const blankSettings = {
     backupEnabled: false,
@@ -168,7 +168,7 @@ const fields = [
     }
 ];
 
-const datatable = ref(); // Template Ref
+const datatable = ref<InstanceType<typeof DataTable>>();
 
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
@@ -203,17 +203,17 @@ const toLocaleTime = (timestamp) => {
     );
 };
 
-const lastOutputModal = ref(); // Template Ref
+const lastOutputModal = ref<InstanceType<typeof AdminBackupsLastOutputModal>>();
 const showLastOutput = () => {
     lastOutputModal.value.show();
 };
 
-const configureModal = ref(); // Template Ref
+const configureModal = ref<InstanceType<typeof AdminBackupsConfigureModal>>();
 const doConfigure = () => {
     configureModal.value.open();
 };
 
-const runBackupModal = ref(); // Template Ref
+const runBackupModal = ref<InstanceType<typeof AdminBackupsRunBackupModal>>();
 const doRunBackup = () => {
     runBackupModal.value.open();
 };
diff --git a/frontend/vue/components/Admin/Backups/ConfigureModal.vue b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
index bf3e3debd..26f821114 100644
--- a/frontend/vue/components/Admin/Backups/ConfigureModal.vue
+++ b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
@@ -1,6 +1,6 @@
 <template>
     <modal-form ref="modal" size="lg" :title="$gettext('Configure Backups')" :loading="loading"
-                :disable-save-button="v$.$invalid" @submit="submit" @hidden="clearContents">
+                :disable-save-button="v$.$invalid" @submit="submit" @hidden="resetForm">
         <b-form-fieldset>
             <div class="form-row mb-3">
                 <b-wrapped-form-checkbox class="col-md-12" id="form_edit_backup_enabled"
@@ -78,18 +78,18 @@
     </modal-form>
 </template>
 
-<script setup>
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
-import ModalForm from "~/components/Common/ModalForm";
-import BFormFieldset from "~/components/Form/BFormFieldset";
-import mergeExisting from "~/functions/mergeExisting";
-import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
-import TimeCode from "~/components/Common/TimeCode";
-import objectToFormOptions from "~/functions/objectToFormOptions";
+<script setup lang="ts">
+import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
+import ModalForm from "~/components/Common/ModalForm.vue";
+import BFormFieldset from "~/components/Form/BFormFieldset.vue";
+import mergeExisting from "~/functions/mergeExisting.js";
+import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
+import TimeCode from "~/components/Common/TimeCode.vue";
+import objectToFormOptions from "~/functions/objectToFormOptions.js";
 import {computed, ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 import {useNotify} from "~/vendor/bootstrapVue";
-import useVuelidate from "@vuelidate/core";
+import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
 
 const props = defineProps({
     settingsUrl: String,
@@ -98,23 +98,29 @@ const props = defineProps({
 
 const emit = defineEmits(['relist']);
 
-const loading = ref(true);
-const error = ref(null);
+const loading = ref<Boolean>(true);
+const error = ref<string | null>(null);
 
-const form = ref({});
+const modal = ref<InstanceType<typeof ModalForm>>();
 
-const modal = ref(); // Template Ref
-
-const validations = {
-    'backup_enabled': {},
-    'backup_time_code': {},
-    'backup_exclude_media': {},
-    'backup_keep_copies': {},
-    'backup_storage_location': {},
-    'backup_format': {},
-};
-
-const v$ = useVuelidate(validations, form);
+const {form, resetForm, v$} = useVuelidateOnForm(
+    {
+        'backup_enabled': {},
+        'backup_time_code': {},
+        'backup_exclude_media': {},
+        'backup_keep_copies': {},
+        'backup_storage_location': {},
+        'backup_format': {},
+    },
+    {
+        backup_enabled: false,
+        backup_time_code: null,
+        backup_exclude_media: null,
+        backup_keep_copies: null,
+        backup_storage_location: null,
+        backup_format: null,
+    }
+);
 
 const storageLocationOptions = computed(() => {
     return objectToFormOptions(props.storageLocations);
@@ -137,19 +143,6 @@ const formatOptions = computed(() => {
     ];
 });
 
-const clearContents = () => {
-    v$.value.$reset();
-
-    form.value = {
-        backup_enabled: false,
-        backup_time_code: null,
-        backup_exclude_media: null,
-        backup_keep_copies: null,
-        backup_storage_location: null,
-        backup_format: null,
-    };
-};
-
 const {axios} = useAxios();
 
 const close = () => {
@@ -158,7 +151,7 @@ const close = () => {
 };
 
 const open = () => {
-    clearContents();
+    resetForm();
     loading.value = true;
 
     modal.value.show();
diff --git a/frontend/vue/components/Admin/Backups/LastOutputModal.vue b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
index ca518b66c..d5a753e6e 100644
--- a/frontend/vue/components/Admin/Backups/LastOutputModal.vue
+++ b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
@@ -5,7 +5,7 @@
     </b-modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {ref} from "vue";
 
 const props = defineProps({
diff --git a/frontend/vue/components/Admin/Backups/RunBackupModal.vue b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
index e0cef8ced..d73589a4c 100644
--- a/frontend/vue/components/Admin/Backups/RunBackupModal.vue
+++ b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
@@ -79,17 +79,18 @@
     </b-modal>
 </template>
 
-<script setup>
-import BFormFieldset from "~/components/Form/BFormFieldset";
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
-import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
-import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
+<script setup lang="ts">
+import BFormFieldset from "~/components/Form/BFormFieldset.vue";
+import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
+import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
+import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
 import objectToFormOptions from "~/functions/objectToFormOptions";
-import StreamingLogView from "~/components/Common/StreamingLogView";
+import StreamingLogView from "~/components/Common/StreamingLogView.vue";
 import {computed, ref} from "vue";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
+import {BModal} from "bootstrap-vue";
 
 const props = defineProps({
     runBackupUrl: String,
@@ -104,7 +105,7 @@ const storageLocationOptions = computed(() => {
 
 const logUrl = ref(null);
 const error = ref(null);
-const modal = ref(); // BModal
+const modal = ref<InstanceType<typeof BModal>>();
 
 const {form, resetForm, v$} = useVuelidateOnForm(
     {
diff --git a/frontend/vue/components/Admin/Branding.vue b/frontend/vue/components/Admin/Branding.vue
index f232a84e8..3aca52ecd 100644
--- a/frontend/vue/components/Admin/Branding.vue
+++ b/frontend/vue/components/Admin/Branding.vue
@@ -26,9 +26,9 @@
     </div>
 </template>
 
-<script setup>
-import CustomAssetForm from "./Branding/CustomAssetForm";
-import BrandingForm from "./Branding/BrandingForm";
+<script setup lang="ts">
+import CustomAssetForm from "./Branding/CustomAssetForm.vue";
+import BrandingForm from "./Branding/BrandingForm.vue";
 
 const props = defineProps({
     settingsApiUrl: String,
diff --git a/frontend/vue/components/Admin/CustomFields.vue b/frontend/vue/components/Admin/CustomFields.vue
index 3e5052863..b378f4e16 100644
--- a/frontend/vue/components/Admin/CustomFields.vue
+++ b/frontend/vue/components/Admin/CustomFields.vue
@@ -43,11 +43,11 @@
                 @relist="relist"></edit-modal>
 </template>
 
-<script setup>
-import DataTable from '~/components/Common/DataTable';
-import EditModal from './CustomFields/EditModal';
-import Icon from '~/components/Common/Icon';
-import InfoCard from '~/components/Common/InfoCard';
+<script setup lang="ts">
+import DataTable from '~/components/Common/DataTable.vue';
+import EditModal from './CustomFields/EditModal.vue';
+import Icon from '~/components/Common/Icon.vue';
+import InfoCard from '~/components/Common/InfoCard.vue';
 import _ from 'lodash';
 import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
@@ -72,13 +72,13 @@ const getAutoAssignName = (autoAssign) => {
     return _.get(props.autoAssignTypes, autoAssign, $gettext('None'));
 };
 
-const datatable = ref(); // Template Ref
+const datatable = ref<InstanceType<typeof DataTable>>();
 
 const relist = () => {
     datatable.value.refresh();
 };
 
-const editmodal = ref(); // Template Ref
+const editmodal = ref<InstanceType<typeof EditModal>>();
 
 const doCreate = () => {
     editmodal.value.create();
diff --git a/frontend/vue/components/Admin/CustomFields/EditModal.vue b/frontend/vue/components/Admin/CustomFields/EditModal.vue
index 0b36356a0..daece78fd 100644
--- a/frontend/vue/components/Admin/CustomFields/EditModal.vue
+++ b/frontend/vue/components/Admin/CustomFields/EditModal.vue
@@ -8,13 +8,14 @@
     </modal-form>
 </template>
 
-<script>
+<script lang="ts">
 import {required} from '@vuelidate/validators';
-import BaseEditModal from '~/components/Common/BaseEditModal';
-import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form";
+import BaseEditModal from '~/components/Common/BaseEditModal.vue';
+import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form.vue";
 import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     name: 'AdminCustomFieldsEditModal',
     mixins: [BaseEditModal],
     components: {AdminCustomFieldsForm},
@@ -48,5 +49,5 @@ export default {
                 : this.$gettext('Add Custom Field');
         }
     },
-};
+});
 </script>
diff --git a/frontend/vue/components/Admin/GeoLite.vue b/frontend/vue/components/Admin/GeoLite.vue
index f155cd6be..bd40a47f1 100644
--- a/frontend/vue/components/Admin/GeoLite.vue
+++ b/frontend/vue/components/Admin/GeoLite.vue
@@ -86,18 +86,21 @@
     </div>
 </template>
 
-<script setup>
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
-import '~/vendor/sweetalert.js';
-import InfoCard from "~/components/Common/InfoCard";
-import {ref} from "vue";
+<script setup lang="ts">
+import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
+import InfoCard from "~/components/Common/InfoCard.vue";
+import {computed, onMounted, ref} from "vue";
 import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
+import {useSweetAlert} from "~/vendor/sweetalert";
+import {useAxios} from "~/vendor/axios";
+import {useTranslate} from "~/vendor/gettext";
+import {useNotify} from "~/vendor/bootstrapVue";
 
 const props = defineProps({
     apiUrl: String
 });
 
-const loading = ref(true);
+const loading = ref<Boolean>(true);
 const version = ref(null);
 
 const {form, resetForm, v$} = useVuelidateOnForm(
@@ -109,66 +112,54 @@ const {form, resetForm, v$} = useVuelidateOnForm(
     }
 );
 
+const {$gettext} = useTranslate();
 
-</script>
-
-<script>
-
-
-export default {
-    setup() {
-        return {v$: useVuelidate()}
-    },
-    props: {},
-    data() {
-        return {
-            loading: true,
-            key: null,
-            version: null
-        };
-    },
-    validations: {},
-    computed: {
-        langInstalledVersion() {
-            const text = this.$gettext('GeoLite version "%{ version }" is currently installed.');
-            return this.$gettextInterpolate(text, {
-                version: this.version
-            });
+const langInstalledVersion = computed(() => {
+    return $gettext(
+        'GeoLite version "%{ version }" is currently installed.',
+        {
+            version: version.value
         }
-    },
-    mounted() {
-        this.doFetch();
-    },
-    methods: {
-        doFetch() {
-            this.loading = true;
-            this.axios.get(this.apiUrl).then((resp) => {
-                this.key = resp.data.key;
-                this.version = resp.data.version;
+    );
+});
 
-                this.loading = false;
-            });
-        },
-        doUpdate() {
-            this.loading = true;
-            this.$wrapWithLoading(
-                this.axios.post(this.apiUrl, {
-                    geolite_license_key: this.key
-                })
-            ).then((resp) => {
-                this.version = resp.data.version;
-            }).finally(() => {
-                this.loading = false;
-            });
-        },
-        doDelete() {
-            this.$confirmDelete().then((result) => {
-                if (result.value) {
-                    this.key = null;
-                    this.doUpdate();
-                }
-            });
+const {axios} = useAxios();
+
+const doFetch = () => {
+    loading.value = true;
+
+    axios.get(props.apiUrl).then((resp) => {
+        form.value.key = resp.data.key;
+        version.value = resp.data.version;
+        loading.value = false;
+    });
+};
+
+onMounted(doFetch);
+
+const {wrapWithLoading} = useNotify();
+
+const doUpdate = () => {
+    loading.value = true;
+    wrapWithLoading(
+        axios.post(props.apiUrl, {
+            geolite_license_key: form.value.key
+        })
+    ).then((resp) => {
+        version.value = resp.data.version;
+    }).finally(() => {
+        loading.value = false;
+    });
+};
+
+const {confirmDelete} = useSweetAlert();
+
+const doDelete = () => {
+    confirmDelete().then((result) => {
+        if (result.value) {
+            form.value.key = null;
+            doUpdate();
         }
-    }
+    });
 }
 </script>
diff --git a/frontend/vue/components/Common/AudioPlayer.vue b/frontend/vue/components/Common/AudioPlayer.vue
index dc4d756ad..0b1e730b5 100644
--- a/frontend/vue/components/Common/AudioPlayer.vue
+++ b/frontend/vue/components/Common/AudioPlayer.vue
@@ -2,12 +2,13 @@
     <audio ref="audio" v-if="isPlaying" v-bind:title="title"/>
 </template>
 
-<script>
+<script lang="ts">
 import getLogarithmicVolume from '~/functions/getLogarithmicVolume.js';
 import Hls from 'hls.js';
 import {usePlayerStore} from "~/store.js";
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     props: {
         title: String,
         volume: {
@@ -169,5 +170,5 @@ export default {
             }
         },
     }
-};
+});
 </script>
diff --git a/frontend/vue/components/Common/DataTable.vue b/frontend/vue/components/Common/DataTable.vue
index 9e4b26ab9..86367f2f6 100644
--- a/frontend/vue/components/Common/DataTable.vue
+++ b/frontend/vue/components/Common/DataTable.vue
@@ -153,12 +153,13 @@ table.b-table-selectable {
 }
 </style>
 
-<script>
+<script lang="ts">
 import store from 'store';
 import _ from 'lodash';
-import Icon from './Icon';
+import Icon from './Icon.vue';
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     name: 'DataTable',
     components: {Icon},
     props: {
@@ -209,7 +210,7 @@ export default {
     },
     data() {
         let allFields = [];
-        _.forEach(this.fields, function (field) {
+        _.forEach(this.fields, function (field: object) {
             allFields.push({
                 ...{
                     label: '',
@@ -394,7 +395,7 @@ export default {
             this.filter = newTerm;
         },
         loadItems(ctx) {
-            let queryParams = {
+            let queryParams: { [k: string]: any } = {
                 internal: true
             };
 
@@ -460,5 +461,5 @@ export default {
             this.$emit('filtered', filter);
         }
     }
-};
+});
 </script>
diff --git a/frontend/vue/components/Common/ModalForm.vue b/frontend/vue/components/Common/ModalForm.vue
index 0d2582b1e..eec2c5c8b 100644
--- a/frontend/vue/components/Common/ModalForm.vue
+++ b/frontend/vue/components/Common/ModalForm.vue
@@ -33,10 +33,12 @@
     </b-modal>
 </template>
 
-<script>
-import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
+<script lang="ts">
+import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
+import {defineComponent} from "vue";
+import _ from "lodash";
 
-export default {
+export default defineComponent({
     components: {InvisibleSubmitButton},
     emits: ['submit', 'shown', 'hidden'],
     props: {
@@ -101,5 +103,5 @@ export default {
             this.$refs.modal.show();
         }
     }
-}
+});
 </script>
diff --git a/frontend/vue/components/Common/NowPlaying.js b/frontend/vue/components/Common/NowPlaying.ts
similarity index 100%
rename from frontend/vue/components/Common/NowPlaying.js
rename to frontend/vue/components/Common/NowPlaying.ts
diff --git a/frontend/vue/components/Entity/NowPlaying.js b/frontend/vue/components/Entity/NowPlaying.ts
similarity index 100%
rename from frontend/vue/components/Entity/NowPlaying.js
rename to frontend/vue/components/Entity/NowPlaying.ts
diff --git a/frontend/vue/components/Entity/RadioAdapters.js b/frontend/vue/components/Entity/RadioAdapters.ts
similarity index 100%
rename from frontend/vue/components/Entity/RadioAdapters.js
rename to frontend/vue/components/Entity/RadioAdapters.ts
diff --git a/frontend/vue/components/Form/UseResettableForm.js b/frontend/vue/components/Form/UseResettableForm.ts
similarity index 100%
rename from frontend/vue/components/Form/UseResettableForm.js
rename to frontend/vue/components/Form/UseResettableForm.ts
diff --git a/frontend/vue/components/Form/UseVuelidateOnForm.js b/frontend/vue/components/Form/UseVuelidateOnForm.ts
similarity index 100%
rename from frontend/vue/components/Form/UseVuelidateOnForm.js
rename to frontend/vue/components/Form/UseVuelidateOnForm.ts
diff --git a/frontend/vue/components/InlinePlayer.vue b/frontend/vue/components/InlinePlayer.vue
index 35ea85cc9..c5a3ef252 100644
--- a/frontend/vue/components/InlinePlayer.vue
+++ b/frontend/vue/components/InlinePlayer.vue
@@ -64,7 +64,7 @@
 }
 </style>
 
-<script setup>
+<script setup lang="ts">
 import AudioPlayer from '~/components/Common/AudioPlayer.vue';
 import formatTime from '~/functions/formatTime.js';
 import Icon from '~/components/Common/Icon.vue';
@@ -79,7 +79,7 @@ const current = toRef(store, 'current');
 const volume = useStorage('player_volume', 55);
 const isMuted = useStorage('player_is_muted', false);
 const isMounted = useMounted();
-const player = ref(); // AudioPlayer
+const player = ref<InstanceType<typeof AudioPlayer>>();
 
 const duration = computed(() => {
     return player.value?.getDuration();
diff --git a/frontend/vue/components/Public/Player.vue b/frontend/vue/components/Public/Player.vue
index 1e3d5d3bb..3e1dd2883 100644
--- a/frontend/vue/components/Public/Player.vue
+++ b/frontend/vue/components/Public/Player.vue
@@ -208,7 +208,7 @@
 </style>
 
 <script>
-import {nowPlayingProps} from '~/components/Common/NowPlaying.js';
+import {nowPlayingProps} from '~/components/Common/NowPlaying';
 
 export const radioPlayerProps = {
     ...nowPlayingProps,
@@ -239,7 +239,7 @@ import {computed, onMounted, ref, shallowRef, watch} from "vue";
 import {useIntervalFn, useMounted, useStorage} from "@vueuse/core";
 import formatTime from "~/functions/formatTime";
 import {useTranslate} from "~/vendor/gettext";
-import useNowPlaying from "~/components/Common/NowPlaying.js";
+import useNowPlaying from "~/components/Common/NowPlaying";
 
 const props = defineProps({
     ...radioPlayerProps
diff --git a/frontend/vue/components/Stations/Media/MediaToolbar.vue b/frontend/vue/components/Stations/Media/MediaToolbar.vue
index e4fdc2cd9..bec24c627 100644
--- a/frontend/vue/components/Stations/Media/MediaToolbar.vue
+++ b/frontend/vue/components/Stations/Media/MediaToolbar.vue
@@ -78,7 +78,7 @@
 <script>
 import _ from 'lodash';
 import Icon from '~/components/Common/Icon';
-import '~/vendor/sweetalert.js';
+import '~/vendor/sweetalert';
 
 export default {
     name: 'station-media-toolbar',
diff --git a/frontend/vue/components/Stations/Profile.vue b/frontend/vue/components/Stations/Profile.vue
index e5e6bc243..a0c9ee8b7 100644
--- a/frontend/vue/components/Stations/Profile.vue
+++ b/frontend/vue/components/Stations/Profile.vue
@@ -49,7 +49,7 @@ import ProfileFrontend, {profileFrontendProps} from './Profile/FrontendPanel';
 import ProfileBackendNone from './Profile/BackendNonePanel';
 import ProfileBackend, {profileBackendProps} from './Profile/BackendPanel';
 import {profileEmbedModalProps} from './Profile/EmbedModal';
-import {BACKEND_NONE, FRONTEND_REMOTE} from '~/components/Entity/RadioAdapters.js';
+import {BACKEND_NONE, FRONTEND_REMOTE} from '~/components/Entity/RadioAdapters';
 import NowPlaying from '~/components/Entity/NowPlaying';
 import {computed, onMounted, shallowRef} from "vue";
 import {useAxios} from "~/vendor/axios";
diff --git a/frontend/vue/components/Stations/Profile/BackendPanel.vue b/frontend/vue/components/Stations/Profile/BackendPanel.vue
index 4850dd8d5..7a9e94d54 100644
--- a/frontend/vue/components/Stations/Profile/BackendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/BackendPanel.vue
@@ -58,7 +58,7 @@ export default {
 </script>
 
 <script setup>
-import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
+import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
 import Icon from '~/components/Common/Icon';
 import RunningBadge from "~/components/Common/Badges/RunningBadge.vue";
 import {useTranslate} from "~/vendor/gettext";
diff --git a/frontend/vue/components/Stations/Profile/FrontendPanel.vue b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
index 8f28bc845..d281f15a9 100644
--- a/frontend/vue/components/Stations/Profile/FrontendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <script setup>
-import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters.js';
+import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters';
 import CopyToClipboardButton from '~/components/Common/CopyToClipboardButton';
 import Icon from '~/components/Common/Icon';
 import RunningBadge from "~/components/Common/Badges/RunningBadge.vue";
diff --git a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
index 3663f9d71..02aa43eaa 100644
--- a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
+++ b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
@@ -137,7 +137,7 @@ export default {
 </script>
 
 <script setup>
-import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
+import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
 import Icon from '~/components/Common/Icon';
 import {computed, onMounted, ref} from "vue";
 import {useIntervalFn} from "@vueuse/core";
diff --git a/frontend/vue/components/Stations/Remotes.vue b/frontend/vue/components/Stations/Remotes.vue
index 4d48950cb..df52abc17 100644
--- a/frontend/vue/components/Stations/Remotes.vue
+++ b/frontend/vue/components/Stations/Remotes.vue
@@ -59,7 +59,7 @@ import Icon from '~/components/Common/Icon';
 import InfoCard from '~/components/Common/InfoCard';
 import RemoteEditModal from "./Remotes/EditModal";
 import StationMayNeedRestart from '~/components/Stations/Common/MayNeedRestart.vue';
-import '~/vendor/sweetalert.js';
+import '~/vendor/sweetalert';
 
 export default {
     name: 'StationMounts',
diff --git a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
index 9c1c71465..840ca0585 100644
--- a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
+++ b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
@@ -42,7 +42,7 @@ import InlinePlayer from '~/components/InlinePlayer';
 import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 import {DateTime} from 'luxon';
-import '~/vendor/sweetalert.js';
+import '~/vendor/sweetalert';
 import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
diff --git a/frontend/vue/pages/Admin/AuditLog.js b/frontend/vue/pages/Admin/AuditLog.js
index 1aba5d2ce..edcf81488 100644
--- a/frontend/vue/pages/Admin/AuditLog.js
+++ b/frontend/vue/pages/Admin/AuditLog.js
@@ -1,5 +1,5 @@
 import initBase from '~/base.js';
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import AuditLog from '~/components/Admin/AuditLog.vue';
 
diff --git a/frontend/vue/pages/Admin/Branding.js b/frontend/vue/pages/Admin/Branding.js
index a6d16f700..9b8988ea7 100644
--- a/frontend/vue/pages/Admin/Branding.js
+++ b/frontend/vue/pages/Admin/Branding.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
 
 import AdminBranding from '~/components/Admin/Branding.vue';
 
diff --git a/frontend/vue/pages/Dashboard.js b/frontend/vue/pages/Dashboard.js
index f7a6a7174..5a2b2e94c 100644
--- a/frontend/vue/pages/Dashboard.js
+++ b/frontend/vue/pages/Dashboard.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
-import '~/vendor/fancybox.js';
-import '~/vendor/chartjs.js';
+import '~/vendor/fancybox';
+import '~/vendor/chartjs';
 
 import '~/pages/InlinePlayer.js';
 
diff --git a/frontend/vue/pages/Public/FullPlayer.js b/frontend/vue/pages/Public/FullPlayer.js
index 5fedfe9e0..7da838258 100644
--- a/frontend/vue/pages/Public/FullPlayer.js
+++ b/frontend/vue/pages/Public/FullPlayer.js
@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
-import '~/vendor/luxon.js';
+import '~/vendor/fancybox';
+import '~/vendor/luxon';
 
 import FullPlayer from '~/components/Public/FullPlayer.vue';
 
diff --git a/frontend/vue/pages/Public/History.js b/frontend/vue/pages/Public/History.js
index 81433dcb1..f0acc4481 100644
--- a/frontend/vue/pages/Public/History.js
+++ b/frontend/vue/pages/Public/History.js
@@ -1,7 +1,7 @@
 import initBase
   from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import History
   from '~/components/Public/History.vue';
diff --git a/frontend/vue/pages/Public/Schedule.js b/frontend/vue/pages/Public/Schedule.js
index c9d7f63d0..6dc408744 100644
--- a/frontend/vue/pages/Public/Schedule.js
+++ b/frontend/vue/pages/Public/Schedule.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Schedule from '~/components/Public/Schedule.vue';
 
diff --git a/frontend/vue/pages/Stations/Media.js b/frontend/vue/pages/Stations/Media.js
index 22f6404b9..276347733 100644
--- a/frontend/vue/pages/Stations/Media.js
+++ b/frontend/vue/pages/Stations/Media.js
@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
-import '~/vendor/luxon.js';
+import '~/vendor/fancybox';
+import '~/vendor/luxon';
 
 import '~/pages/InlinePlayer.js';
 
diff --git a/frontend/vue/pages/Stations/Playlists.js b/frontend/vue/pages/Stations/Playlists.js
index 7ad8e038a..22ad87cdf 100644
--- a/frontend/vue/pages/Stations/Playlists.js
+++ b/frontend/vue/pages/Stations/Playlists.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 import '~/store';
 
 import Playlists from '~/components/Stations/Playlists.vue';
diff --git a/frontend/vue/pages/Stations/Podcasts.js b/frontend/vue/pages/Stations/Podcasts.js
index 32bdd1dbe..316837eb6 100644
--- a/frontend/vue/pages/Stations/Podcasts.js
+++ b/frontend/vue/pages/Stations/Podcasts.js
@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
-import '~/vendor/luxon.js';
+import '~/vendor/fancybox';
+import '~/vendor/luxon';
 
 import Podcasts from '~/components/Stations/Podcasts.vue';
 
diff --git a/frontend/vue/pages/Stations/Profile.js b/frontend/vue/pages/Stations/Profile.js
index 2a38b812b..a8961e6d9 100644
--- a/frontend/vue/pages/Stations/Profile.js
+++ b/frontend/vue/pages/Stations/Profile.js
@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
-import '~/vendor/luxon.js';
+import '~/vendor/fancybox';
+import '~/vendor/luxon';
 
 import '~/pages/InlinePlayer.js';
 
diff --git a/frontend/vue/pages/Stations/Queue.js b/frontend/vue/pages/Stations/Queue.js
index e37608097..12cddeb06 100644
--- a/frontend/vue/pages/Stations/Queue.js
+++ b/frontend/vue/pages/Stations/Queue.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Queue from '~/components/Stations/Queue.vue';
 
diff --git a/frontend/vue/pages/Stations/Reports/Listeners.js b/frontend/vue/pages/Stations/Reports/Listeners.js
index cc528af7a..c38884a49 100644
--- a/frontend/vue/pages/Stations/Reports/Listeners.js
+++ b/frontend/vue/pages/Stations/Reports/Listeners.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Listeners from '~/components/Stations/Reports/Listeners.vue';
 
diff --git a/frontend/vue/pages/Stations/Reports/Overview.js b/frontend/vue/pages/Stations/Reports/Overview.js
index 768952bd8..4d4694f0a 100644
--- a/frontend/vue/pages/Stations/Reports/Overview.js
+++ b/frontend/vue/pages/Stations/Reports/Overview.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/chartjs.js';
+import '~/vendor/chartjs';
 
 import Overview from '~/components/Stations/Reports/Overview.vue';
 
diff --git a/frontend/vue/pages/Stations/Reports/Requests.js b/frontend/vue/pages/Stations/Reports/Requests.js
index 2d8e0ab43..ec2e85a4a 100644
--- a/frontend/vue/pages/Stations/Reports/Requests.js
+++ b/frontend/vue/pages/Stations/Reports/Requests.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Requests from '~/components/Stations/Reports/Requests.vue';
 
diff --git a/frontend/vue/pages/Stations/Reports/SoundExchange.js b/frontend/vue/pages/Stations/Reports/SoundExchange.js
index 81826cc40..3eda31810 100644
--- a/frontend/vue/pages/Stations/Reports/SoundExchange.js
+++ b/frontend/vue/pages/Stations/Reports/SoundExchange.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import SoundExchange from '~/components/Stations/Reports/SoundExchange.vue';
 
diff --git a/frontend/vue/pages/Stations/Reports/Timeline.js b/frontend/vue/pages/Stations/Reports/Timeline.js
index 50cf08bbe..061081865 100644
--- a/frontend/vue/pages/Stations/Reports/Timeline.js
+++ b/frontend/vue/pages/Stations/Reports/Timeline.js
@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Timeline from '~/components/Stations/Reports/Timeline.vue';
 
diff --git a/frontend/vue/pages/Stations/Streamers.js b/frontend/vue/pages/Stations/Streamers.js
index 579e0848e..b661b61b4 100644
--- a/frontend/vue/pages/Stations/Streamers.js
+++ b/frontend/vue/pages/Stations/Streamers.js
@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
-import '~/vendor/luxon.js';
+import '~/vendor/fancybox';
+import '~/vendor/luxon';
 
 import Streamers from '~/components/Stations/Streamers.vue';
 
diff --git a/frontend/vue/vendor/axios.js b/frontend/vue/vendor/axios.ts
similarity index 91%
rename from frontend/vue/vendor/axios.js
rename to frontend/vue/vendor/axios.ts
index 43db81854..d1a9e1ce8 100644
--- a/frontend/vue/vendor/axios.js
+++ b/frontend/vue/vendor/axios.ts
@@ -1,14 +1,17 @@
 import axios from "axios";
 import VueAxios from "vue-axios";
+import type {InjectionKey} from "vue";
 import {inject} from "vue";
 import {useAzuraCast} from "~/vendor/azuracast";
 import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 
+const axiosKey = Symbol() as InjectionKey<typeof axios>;
+
 /* Composition API Axios utilities */
 export function useAxios() {
     return {
-        axios: inject('axios')
+        axios: inject(axiosKey)
     };
 }
 
@@ -57,5 +60,5 @@ export default function installAxios(vueApp) {
 
     vueApp.use(VueAxios, axios);
 
-    vueApp.provide('axios', axios);
+    vueApp.provide(axiosKey, axios);
 }
diff --git a/frontend/vue/vendor/azuracast.js b/frontend/vue/vendor/azuracast.ts
similarity index 93%
rename from frontend/vue/vendor/azuracast.js
rename to frontend/vue/vendor/azuracast.ts
index 1da335fad..37c0abf0e 100644
--- a/frontend/vue/vendor/azuracast.js
+++ b/frontend/vue/vendor/azuracast.ts
@@ -1,4 +1,6 @@
 export function useAzuraCast() {
+    const App = globalThis.App;
+
     return {
         lang: {
             confirm: App.lang.confirm ?? 'Are you sure?',
diff --git a/frontend/vue/vendor/bootstrapVue.js b/frontend/vue/vendor/bootstrapVue.ts
similarity index 100%
rename from frontend/vue/vendor/bootstrapVue.js
rename to frontend/vue/vendor/bootstrapVue.ts
diff --git a/frontend/vue/vendor/chartjs.js b/frontend/vue/vendor/chartjs.js
deleted file mode 100644
index 87af60441..000000000
--- a/frontend/vue/vendor/chartjs.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import '~/vendor/luxon.js';
-
-import {
-  Chart,
-  registerables
-} from 'chart.js';
-
-import 'chartjs-adapter-luxon';
-
-import colorSchemesPlugin
-  from './chartjs-colorschemes/plugin.colorschemes.js';
-
-import zoomPlugin
-  from 'chartjs-plugin-zoom';
-
-Chart.register(...registerables);
-
-Chart.register(colorSchemesPlugin);
-
-Chart.register(zoomPlugin);
diff --git a/frontend/vue/vendor/chartjs.ts b/frontend/vue/vendor/chartjs.ts
new file mode 100644
index 000000000..e395f9d9c
--- /dev/null
+++ b/frontend/vue/vendor/chartjs.ts
@@ -0,0 +1,15 @@
+import '~/vendor/luxon';
+
+import {Chart, registerables} from 'chart.js';
+
+import 'chartjs-adapter-luxon';
+
+import colorSchemesPlugin from './chartjs-colorschemes/plugin.colorschemes.js';
+
+import zoomPlugin from 'chartjs-plugin-zoom';
+
+Chart.register(...registerables);
+
+Chart.register(colorSchemesPlugin);
+
+Chart.register(zoomPlugin);
diff --git a/frontend/vue/vendor/events.js b/frontend/vue/vendor/events.ts
similarity index 100%
rename from frontend/vue/vendor/events.js
rename to frontend/vue/vendor/events.ts
diff --git a/frontend/vue/vendor/fancybox.js b/frontend/vue/vendor/fancybox.ts
similarity index 100%
rename from frontend/vue/vendor/fancybox.js
rename to frontend/vue/vendor/fancybox.ts
diff --git a/frontend/vue/vendor/gettext.js b/frontend/vue/vendor/gettext.ts
similarity index 100%
rename from frontend/vue/vendor/gettext.js
rename to frontend/vue/vendor/gettext.ts
diff --git a/frontend/vue/vendor/luxon.js b/frontend/vue/vendor/luxon.ts
similarity index 86%
rename from frontend/vue/vendor/luxon.js
rename to frontend/vue/vendor/luxon.ts
index 771afc415..b65c9c955 100644
--- a/frontend/vue/vendor/luxon.js
+++ b/frontend/vue/vendor/luxon.ts
@@ -5,5 +5,5 @@ const {localeWithDashes} = useAzuraCast();
 
 document.addEventListener('DOMContentLoaded', function () {
     Settings.defaultLocale = localeWithDashes;
-    Settings.defaultZoneName = 'UTC';
+    Settings.defaultZone = 'UTC';
 });
diff --git a/frontend/vue/vendor/pinia.js b/frontend/vue/vendor/pinia.ts
similarity index 100%
rename from frontend/vue/vendor/pinia.js
rename to frontend/vue/vendor/pinia.ts
diff --git a/frontend/vue/vendor/sweetalert.js b/frontend/vue/vendor/sweetalert.ts
similarity index 100%
rename from frontend/vue/vendor/sweetalert.js
rename to frontend/vue/vendor/sweetalert.ts
diff --git a/templates/partials/bodyjs.phtml b/templates/partials/bodyjs.phtml
index 55394aedc..df1db6e84 100644
--- a/templates/partials/bodyjs.phtml
+++ b/templates/partials/bodyjs.phtml
@@ -54,7 +54,7 @@ $app = [
     });
     <?php endif; ?>
 
-    let App = <?=json_encode($app, JSON_THROW_ON_ERROR) ?>;
+    var App = <?=json_encode($app, JSON_THROW_ON_ERROR) ?>;
 
     let currentTheme = document.documentElement.getAttribute('data-theme');
     if (currentTheme === 'browser') {