diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index b43ee51c4..e83ab16ac 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -4,7 +4,11 @@ module.exports = {
         'plugin:vue/vue3-recommended'
     ],
     rules: {
+        "vue/no-v-html": "off",
         "vue/multi-word-component-names": "off",
+        "no-unused-vars": ["error", {
+            "varsIgnorePattern": "^_|props",
+        }],
         "vue/html-indent": ["error", 4, {
             "attribute": 1,
             "baseIndent": 1,
diff --git a/frontend/npm-shrinkwrap.json b/frontend/npm-shrinkwrap.json
index 2ad476ac2..5bc3a79e6 100644
--- a/frontend/npm-shrinkwrap.json
+++ b/frontend/npm-shrinkwrap.json
@@ -52,6 +52,7 @@
         "imports-loader": "^4",
         "jquery": "^3.6.0",
         "leaflet": "^1.7.1",
+        "leaflet-defaulticon-compatibility": "^0.1.1",
         "leaflet.fullscreen": "^2",
         "lodash": "^4.17.21",
         "luxon": "^2",
@@ -7271,6 +7272,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
       "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
     },
+    "node_modules/leaflet-defaulticon-compatibility": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.1.tgz",
+      "integrity": "sha512-vDBFdlUAwjSEGep9ih8kfJilf6yN8V9zTbF5NC/1ZwLeGko3RUQepspPnGCRMFV51dY3Lb3hziboicrFz+rxQA=="
+    },
     "node_modules/leaflet.fullscreen": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/leaflet.fullscreen/-/leaflet.fullscreen-2.4.0.tgz",
@@ -17324,6 +17330,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
       "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
     },
+    "leaflet-defaulticon-compatibility": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.1.tgz",
+      "integrity": "sha512-vDBFdlUAwjSEGep9ih8kfJilf6yN8V9zTbF5NC/1ZwLeGko3RUQepspPnGCRMFV51dY3Lb3hziboicrFz+rxQA=="
+    },
     "leaflet.fullscreen": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/leaflet.fullscreen/-/leaflet.fullscreen-2.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 676ccaf9d..69dbcb763 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -53,6 +53,7 @@
     "imports-loader": "^4",
     "jquery": "^3.6.0",
     "leaflet": "^1.7.1",
+    "leaflet-defaulticon-compatibility": "^0.1.1",
     "leaflet.fullscreen": "^2",
     "lodash": "^4.17.21",
     "luxon": "^2",
diff --git a/frontend/vue/components/Account.vue b/frontend/vue/components/Account.vue
index 4bf2ce9d8..559a9281b 100644
--- a/frontend/vue/components/Account.vue
+++ b/frontend/vue/components/Account.vue
@@ -237,11 +237,28 @@ import {useAxios} from "~/vendor/axios";
 import {useSweetAlert} from "~/vendor/sweetalert";
 
 const props = defineProps({
-    userUrl: String,
-    changePasswordUrl: String,
-    twoFactorUrl: String,
-    apiKeysApiUrl: String,
-    supportedLocales: Object
+    userUrl: {
+        type: String,
+        required: true,
+    },
+    changePasswordUrl: {
+        type: String,
+        required: true
+    },
+    twoFactorUrl: {
+        type: String,
+        required: true
+    },
+    apiKeysApiUrl: {
+        type: String,
+        required: true
+    },
+    supportedLocales: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    }
 });
 
 const userLoading = ref(true);
diff --git a/frontend/vue/components/Account/ApiKeyModal.vue b/frontend/vue/components/Account/ApiKeyModal.vue
index ed27335dd..6f339c311 100644
--- a/frontend/vue/components/Account/ApiKeyModal.vue
+++ b/frontend/vue/components/Account/ApiKeyModal.vue
@@ -8,7 +8,7 @@
         no-enforce-focus
         @hidden="clearContents"
     >
-        <template #default="slotProps">
+        <template #default>
             <b-alert
                 variant="danger"
                 :show="error != null"
@@ -78,7 +78,10 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    createUrl: String
+    createUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['relist']);
diff --git a/frontend/vue/components/Account/ApiKeyNewKey.vue b/frontend/vue/components/Account/ApiKeyNewKey.vue
index d485f9893..8ba6ce3b9 100644
--- a/frontend/vue/components/Account/ApiKeyNewKey.vue
+++ b/frontend/vue/components/Account/ApiKeyNewKey.vue
@@ -32,7 +32,10 @@
 <script setup>
 import CopyToClipboardButton from "~/components/Common/CopyToClipboardButton.vue";
 
-const props = defineProps({
-    newKey: String
+defineProps({
+    newKey: {
+        type: String,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Account/ChangePasswordModal.vue b/frontend/vue/components/Account/ChangePasswordModal.vue
index f4b8a6c15..ec1b4f0cc 100644
--- a/frontend/vue/components/Account/ChangePasswordModal.vue
+++ b/frontend/vue/components/Account/ChangePasswordModal.vue
@@ -60,7 +60,10 @@ import {useAxios} from "~/vendor/axios";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    changePasswordUrl: String
+    changePasswordUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['relist']);
@@ -101,10 +104,6 @@ const open = () => {
     $modal.value.show();
 };
 
-const close = () => {
-    $modal.value.hide();
-}
-
 const {wrapWithLoading} = useNotify();
 const {axios} = useAxios();
 
diff --git a/frontend/vue/components/Account/EditForm.vue b/frontend/vue/components/Account/EditForm.vue
index f783a2ce0..350e0c5b2 100644
--- a/frontend/vue/components/Account/EditForm.vue
+++ b/frontend/vue/components/Account/EditForm.vue
@@ -37,10 +37,10 @@
                     <template #label>
                         {{ $gettext('Language') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="localeOptions"
                         />
@@ -55,10 +55,10 @@
                     <template #label>
                         {{ $gettext('Site Theme') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="themeOptions"
                         />
@@ -72,10 +72,10 @@
                     <template #label>
                         {{ $gettext('Time Display') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="show24hourOptions"
                         />
@@ -94,8 +94,14 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    form: Object,
-    supportedLocales: Object
+    form: {
+        type: Object,
+        required: true
+    },
+    supportedLocales: {
+        type: Object,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Account/EditModal.vue b/frontend/vue/components/Account/EditModal.vue
index 92bf50d3c..ce2883f6e 100644
--- a/frontend/vue/components/Account/EditModal.vue
+++ b/frontend/vue/components/Account/EditModal.vue
@@ -26,8 +26,14 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    userUrl: String,
-    supportedLocales: Object
+    userUrl: {
+        type: String,
+        required: true
+    },
+    supportedLocales: {
+        type: Object,
+        required: true
+    }
 });
 
 const emit = defineEmits(['reload']);
diff --git a/frontend/vue/components/Account/TwoFactorModal.vue b/frontend/vue/components/Account/TwoFactorModal.vue
index ed41f6507..1f9a61b78 100644
--- a/frontend/vue/components/Account/TwoFactorModal.vue
+++ b/frontend/vue/components/Account/TwoFactorModal.vue
@@ -86,7 +86,10 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    twoFactorUrl: String
+    twoFactorUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['relist']);
diff --git a/frontend/vue/components/Admin/ApiKeys.vue b/frontend/vue/components/Admin/ApiKeys.vue
index 1496f63bb..68f871a85 100644
--- a/frontend/vue/components/Admin/ApiKeys.vue
+++ b/frontend/vue/components/Admin/ApiKeys.vue
@@ -41,8 +41,11 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 import {useTranslate} from "~/vendor/gettext";
 
-const props = defineProps({
-    apiUrl: String
+defineProps({
+    apiUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Admin/AuditLog.vue b/frontend/vue/components/Admin/AuditLog.vue
index d7a704009..3005611de 100644
--- a/frontend/vue/components/Admin/AuditLog.vue
+++ b/frontend/vue/components/Admin/AuditLog.vue
@@ -123,7 +123,10 @@ import DateRangeDropdown from "~/components/Common/DateRangeDropdown.vue";
 import Icon from "~/components/Common/Icon.vue";
 
 const props = defineProps({
-    baseApiUrl: String,
+    baseApiUrl: {
+        type: String,
+        required: true,
+    }
 });
 
 const dateRange = ref({
diff --git a/frontend/vue/components/Admin/Backups.vue b/frontend/vue/components/Admin/Backups.vue
index ce26c7055..309d088fd 100644
--- a/frontend/vue/components/Admin/Backups.vue
+++ b/frontend/vue/components/Admin/Backups.vue
@@ -178,11 +178,26 @@ import {useAxios} from "~/vendor/axios";
 import {useSweetAlert} from "~/vendor/sweetalert";
 
 const props = defineProps({
-    listUrl: String,
-    settingsUrl: String,
-    runBackupUrl: String,
-    storageLocations: Object,
-    isDocker: Boolean,
+    listUrl: {
+        type: String,
+        required: true
+    },
+    settingsUrl: {
+        type: String,
+        required: true
+    },
+    runBackupUrl: {
+        type: String,
+        required: true
+    },
+    storageLocations: {
+        type: Object,
+        required: true
+    },
+    isDocker: {
+        type: Boolean,
+        default: true
+    },
 });
 
 const settingsLoading = ref(false);
diff --git a/frontend/vue/components/Admin/Backups/ConfigureModal.vue b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
index e3d5e8aaa..73614b10c 100644
--- a/frontend/vue/components/Admin/Backups/ConfigureModal.vue
+++ b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
@@ -41,11 +41,11 @@
                     <template #description>
                         {{ $gettext('If the end time is before the start time, the playlist will play overnight.') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <time-code
-                            :id="props.id"
-                            v-model="props.field.$model"
-                            :state="props.state"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
+                            :state="slotProps.state"
                         />
                     </template>
                 </b-wrapped-form-group>
@@ -90,10 +90,10 @@
                     <template #label>
                         {{ $gettext('Storage Location') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-select
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             :options="storageLocationOptions"
                         />
                     </template>
@@ -107,10 +107,10 @@
                     <template #label>
                         {{ $gettext('Backup Format') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="formatOptions"
                         />
@@ -135,14 +135,19 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 
 const props = defineProps({
-    settingsUrl: String,
-    storageLocations: Object
+    settingsUrl: {
+        type: String,
+        required: true
+    },
+    storageLocations: {
+        type: Object,
+        required: true
+    }
 });
 
 const emit = defineEmits(['relist']);
 
 const loading = ref(true);
-const error = ref(null);
 
 const $modal = ref(); // ModalForm
 
diff --git a/frontend/vue/components/Admin/Backups/LastOutputModal.vue b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
index d5d5a0331..e4add9b1f 100644
--- a/frontend/vue/components/Admin/Backups/LastOutputModal.vue
+++ b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
@@ -17,7 +17,10 @@
 import {ref} from "vue";
 
 const props = defineProps({
-    lastOutput: String,
+    lastOutput: {
+        type: String,
+        required: true
+    },
 });
 
 const $modal = ref(); // Template ref
diff --git a/frontend/vue/components/Admin/Backups/RunBackupModal.vue b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
index 8e5c29d8d..1b1ea34d8 100644
--- a/frontend/vue/components/Admin/Backups/RunBackupModal.vue
+++ b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
@@ -7,7 +7,7 @@
         :title="$gettext('Run Manual Backup')"
         @hidden="clearContents"
     >
-        <template #default="slotProps">
+        <template #default>
             <b-alert
                 variant="danger"
                 :show="error != null"
@@ -30,10 +30,10 @@
                             <template #label>
                                 {{ $gettext('Storage Location') }}
                             </template>
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-select
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                     :options="storageLocationOptions"
                                 />
                             </template>
@@ -132,8 +132,14 @@ import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 import {BModal} from "bootstrap-vue";
 
 const props = defineProps({
-    runBackupUrl: String,
-    storageLocations: Object
+    runBackupUrl: {
+        type: String,
+        required: true
+    },
+    storageLocations: {
+        type: Object,
+        required: true
+    }
 });
 
 const emit = defineEmits(['relist']);
diff --git a/frontend/vue/components/Admin/Branding.vue b/frontend/vue/components/Admin/Branding.vue
index 575b9465a..145b0373c 100644
--- a/frontend/vue/components/Admin/Branding.vue
+++ b/frontend/vue/components/Admin/Branding.vue
@@ -44,11 +44,23 @@
 import CustomAssetForm from "./Branding/CustomAssetForm.vue";
 import BrandingForm from "./Branding/BrandingForm.vue";
 
-const props = defineProps({
-    settingsApiUrl: String,
-    browserIconApiUrl: String,
-    backgroundApiUrl: String,
-    albumArtApiUrl: String
+defineProps({
+    settingsApiUrl: {
+        type: String,
+        required: true,
+    },
+    browserIconApiUrl: {
+        type: String,
+        required: true
+    },
+    backgroundApiUrl: {
+        type: String,
+        required: true
+    },
+    albumArtApiUrl: {
+        type: String,
+        required: true
+    }
 });
 </script>
 
diff --git a/frontend/vue/components/Admin/Branding/BrandingForm.vue b/frontend/vue/components/Admin/Branding/BrandingForm.vue
index 8355411d9..98434535c 100644
--- a/frontend/vue/components/Admin/Branding/BrandingForm.vue
+++ b/frontend/vue/components/Admin/Branding/BrandingForm.vue
@@ -40,10 +40,10 @@
                                         $gettext('Select a theme to use as a base for station public pages and the login page.')
                                     }}
                                 </template>
-                                <template #default="props">
+                                <template #default="slotProps">
                                     <b-form-radio-group
-                                        :id="props.id"
-                                        v-model="props.field.$model"
+                                        :id="slotProps.id"
+                                        v-model="slotProps.field.$model"
                                         stacked
                                         :options="publicThemeOptions"
                                     />
@@ -124,10 +124,10 @@
                                         $gettext('This CSS will be applied to the station public pages and login page.')
                                     }}
                                 </template>
-                                <template #default="props">
+                                <template #default="slotProps">
                                     <codemirror-textarea
-                                        :id="props.id"
-                                        v-model="props.field.$model"
+                                        :id="slotProps.id"
+                                        v-model="slotProps.field.$model"
                                         mode="css"
                                     />
                                 </template>
@@ -146,10 +146,10 @@
                                         $gettext('This javascript code will be applied to the station public pages and login page.')
                                     }}
                                 </template>
-                                <template #default="props">
+                                <template #default="slotProps">
                                     <codemirror-textarea
-                                        :id="props.id"
-                                        v-model="props.field.$model"
+                                        :id="slotProps.id"
+                                        v-model="slotProps.field.$model"
                                         mode="javascript"
                                     />
                                 </template>
@@ -168,10 +168,10 @@
                                         $gettext('This CSS will be applied to the main management pages, like this one.')
                                     }}
                                 </template>
-                                <template #default="props">
+                                <template #default="slotProps">
                                     <codemirror-textarea
-                                        :id="props.id"
-                                        v-model="props.field.$model"
+                                        :id="slotProps.id"
+                                        v-model="slotProps.field.$model"
                                         mode="css"
                                     />
                                 </template>
@@ -205,7 +205,10 @@ import {useTranslate} from "~/vendor/gettext";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 
 const props = defineProps({
-  apiUrl: String,
+    apiUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const loading = ref(true);
diff --git a/frontend/vue/components/Admin/Branding/CustomAssetForm.vue b/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
index 4ee54b0a5..1715169ba 100644
--- a/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
+++ b/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
@@ -43,9 +43,18 @@
 export default {
     name: 'CustomAssetForm',
     props: {
-        id: String,
-        apiUrl: String,
-        caption: String
+        id: {
+            type: String,
+            required: true
+        },
+        apiUrl: {
+            type: String,
+            required: true
+        },
+        caption: {
+            type: String,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Admin/CustomFields.vue b/frontend/vue/components/Admin/CustomFields.vue
index d3557d3a7..567df7241 100644
--- a/frontend/vue/components/Admin/CustomFields.vue
+++ b/frontend/vue/components/Admin/CustomFields.vue
@@ -79,8 +79,14 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    listUrl: String,
-    autoAssignTypes: Object
+    listUrl: {
+        type: String,
+        required: true
+    },
+    autoAssignTypes: {
+        type: Object,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Admin/CustomFields/EditModal.vue b/frontend/vue/components/Admin/CustomFields/EditModal.vue
index db2b53a39..92b81e98c 100644
--- a/frontend/vue/components/Admin/CustomFields/EditModal.vue
+++ b/frontend/vue/components/Admin/CustomFields/EditModal.vue
@@ -27,7 +27,10 @@ export default defineComponent({
     components: {AdminCustomFieldsForm},
     mixins: [BaseEditModal],
     props: {
-        autoAssignTypes: Object
+        autoAssignTypes: {
+            type: Object,
+            required: true
+        }
     },
     setup() {
         const {form, resetForm, v$} = useVuelidateOnForm(
diff --git a/frontend/vue/components/Admin/CustomFields/Form.vue b/frontend/vue/components/Admin/CustomFields/Form.vue
index 2731b1932..91220c268 100644
--- a/frontend/vue/components/Admin/CustomFields/Form.vue
+++ b/frontend/vue/components/Admin/CustomFields/Form.vue
@@ -44,10 +44,10 @@
                         $gettext('Optionally select an ID3v2 metadata field that, if present, will be used to set this field\'s value.')
                     }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-select
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         :options="autoAssignOptions"
                     />
                 </template>
@@ -63,8 +63,14 @@ import {useTranslate} from "~/vendor/gettext";
 import {forEach} from "lodash";
 
 const props = defineProps({
-    form: Object,
-    autoAssignTypes: Object
+    form: {
+        type: Object,
+        required: true
+    },
+    autoAssignTypes: {
+        type: Object,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Admin/GeoLite.vue b/frontend/vue/components/Admin/GeoLite.vue
index 31835ff4d..3a4a0da17 100644
--- a/frontend/vue/components/Admin/GeoLite.vue
+++ b/frontend/vue/components/Admin/GeoLite.vue
@@ -119,13 +119,16 @@ import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 
 const props = defineProps({
-    apiUrl: String
+    apiUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const loading = ref(true);
 const version = ref(null);
 
-const {form, resetForm, v$} = useVuelidateOnForm(
+const {form, v$} = useVuelidateOnForm(
     {
         key: {}
     },
diff --git a/frontend/vue/components/Admin/Index.vue b/frontend/vue/components/Admin/Index.vue
index 5ba119ca9..28929b9f9 100644
--- a/frontend/vue/components/Admin/Index.vue
+++ b/frontend/vue/components/Admin/Index.vue
@@ -472,18 +472,26 @@
 
 <script>
 import Icon from '~/components/Common/Icon';
-import InfoCard from '~/components/Common/InfoCard';
 import CpuStatsHelpModal from "./Index/CpuStatsHelpModal";
 import MemoryStatsHelpModal from "./Index/MemoryStatsHelpModal";
 import _ from 'lodash';
 
 export default {
     name: 'AdminIndex',
-    components: {InfoCard, CpuStatsHelpModal, MemoryStatsHelpModal, Icon},
+    components: {CpuStatsHelpModal, MemoryStatsHelpModal, Icon},
     props: {
-        adminPanels: Object,
-        statsUrl: String,
-        servicesUrl: String
+        adminPanels: {
+            type: Object,
+            required: true
+        },
+        statsUrl: {
+            type: String,
+            required: true
+        },
+        servicesUrl: {
+            type: String,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Admin/Logs.vue b/frontend/vue/components/Admin/Logs.vue
index 1dea893bc..40aa49820 100644
--- a/frontend/vue/components/Admin/Logs.vue
+++ b/frontend/vue/components/Admin/Logs.vue
@@ -49,9 +49,17 @@ import LogList from "~/components/Common/LogList";
 import StreamingLogModal from "~/components/Common/StreamingLogModal";
 import {ref} from "vue";
 
-const props = defineProps({
-    systemLogsUrl: String,
-    stationLogs: Array
+defineProps({
+    systemLogsUrl: {
+        type: String,
+        required: true,
+    },
+    stationLogs: {
+        type: Array,
+        default: () => {
+            return [];
+        }
+    }
 });
 
 const $modal = ref(); // StreamingLogModal
diff --git a/frontend/vue/components/Admin/Permissions.vue b/frontend/vue/components/Admin/Permissions.vue
index b1e945dc3..677240b71 100644
--- a/frontend/vue/components/Admin/Permissions.vue
+++ b/frontend/vue/components/Admin/Permissions.vue
@@ -91,10 +91,22 @@ export default {
     name: 'AdminPermissions',
     components: {InfoCard, Icon, EditModal, DataTable},
     props: {
-        listUrl: String,
-        stations: Array,
-        globalPermissions: Array,
-        stationPermissions: Array
+        listUrl: {
+            type: String,
+            required: true
+        },
+        stations: {
+            type: Array,
+            required: true
+        },
+        globalPermissions: {
+            type: Array,
+            required: true
+        },
+        stationPermissions: {
+            type: Array,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Admin/Permissions/EditModal.vue b/frontend/vue/components/Admin/Permissions/EditModal.vue
index 64eb9d0df..53c2343bf 100644
--- a/frontend/vue/components/Admin/Permissions/EditModal.vue
+++ b/frontend/vue/components/Admin/Permissions/EditModal.vue
@@ -39,9 +39,18 @@ export default {
     components: {AdminPermissionsStationForm, AdminPermissionsGlobalForm},
     mixins: [BaseEditModal],
     props: {
-        stations: Object,
-        globalPermissions: Object,
-        stationPermissions: Object
+        stations: {
+            type: Object,
+            required: true
+        },
+        globalPermissions: {
+            type: Object,
+            required: true
+        },
+        stationPermissions: {
+            type: Object,
+            required: true
+        }
     },
     setup() {
         const {form, resetForm, v$} = useVuelidateOnForm(
diff --git a/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue b/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue
index 13b6504f9..df2adf9a6 100644
--- a/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue
+++ b/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue
@@ -28,10 +28,10 @@
                             $gettext('Users with this role will have these permissions across the entire installation.')
                         }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-checkbox-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             :options="globalPermissionOptions"
                             stacked
                         />
@@ -48,16 +48,22 @@ import {map} from 'lodash';
 import {computed} from "vue";
 
 const props = defineProps({
-  form: Object,
-  globalPermissions: Object
+    form: {
+        type: Object,
+        required: true
+    },
+    globalPermissions: {
+        type: Object,
+        required: true
+    }
 });
 
 const globalPermissionOptions = computed(() => {
-  return map(props.globalPermissions, (permissionName, permissionKey) => {
-    return {
-      text: permissionName,
-      value: permissionKey
-    };
-  });
+    return map(props.globalPermissions, (permissionName, permissionKey) => {
+        return {
+            text: permissionName,
+            value: permissionKey
+        };
+    });
 });
 </script>
diff --git a/frontend/vue/components/Admin/Permissions/Form/StationForm.vue b/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
index 22ed23604..44c5c04ad 100644
--- a/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
+++ b/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
@@ -37,9 +37,18 @@ import PermissionsFormStationRow from "~/components/Admin/Permissions/Form/Stati
 import {computed} from "vue";
 
 const props = defineProps({
-    form: Object,
-    stations: Object,
-    stationPermissions: Object
+    form: {
+        type: Object,
+        required: true
+    },
+    stations: {
+        type: Object,
+        required: true
+    },
+    stationPermissions: {
+        type: Object,
+        required: true
+    }
 });
 
 const remainingStations = computed(() => {
diff --git a/frontend/vue/components/Admin/Permissions/Form/StationRow.vue b/frontend/vue/components/Admin/Permissions/Form/StationRow.vue
index 7fc1748db..f182cb955 100644
--- a/frontend/vue/components/Admin/Permissions/Form/StationRow.vue
+++ b/frontend/vue/components/Admin/Permissions/Form/StationRow.vue
@@ -35,10 +35,10 @@
                         <template #description>
                             {{ $gettext('Users with this role will have these permissions for this single station.') }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <b-form-checkbox-group
-                                :id="props.id"
-                                v-model="props.field.$model"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
                                 :options="stationPermissionOptions"
                                 stacked
                             />
@@ -59,9 +59,18 @@ import {useVModel} from "@vueuse/core";
 import {computed} from "vue";
 
 const props = defineProps({
-    row: Object,
-    stations: Object,
-    stationPermissions: Object
+    row: {
+        type: Object,
+        required: true
+    },
+    stations: {
+        type: Object,
+        required: true
+    },
+    stationPermissions: {
+        type: Object,
+        required: true
+    }
 });
 
 const emit = defineEmits(['remove', 'update:row']);
diff --git a/frontend/vue/components/Admin/Settings.vue b/frontend/vue/components/Admin/Settings.vue
index 998734788..ddacdb2b9 100644
--- a/frontend/vue/components/Admin/Settings.vue
+++ b/frontend/vue/components/Admin/Settings.vue
@@ -91,9 +91,18 @@ import {useTranslate} from "~/vendor/gettext";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 
 const props = defineProps({
-    apiUrl: String,
-    testMessageUrl: String,
-    acmeUrl: String,
+    apiUrl: {
+        type: String,
+        required: true,
+    },
+    testMessageUrl: {
+        type: String,
+        required: true
+    },
+    acmeUrl: {
+        type: String,
+        required: true
+    },
     releaseChannel: {
         type: String,
         default: 'rolling',
@@ -103,7 +112,7 @@ const props = defineProps({
 
 const emit = defineEmits(['saved']);
 
-const {form, resetForm, v$} = useVuelidateOnForm(
+const {form, v$} = useVuelidateOnForm(
     {
         base_url: {required},
         instance_name: {},
diff --git a/frontend/vue/components/Admin/Settings/GeneralTab.vue b/frontend/vue/components/Admin/Settings/GeneralTab.vue
index 812c4facb..66f3571fe 100644
--- a/frontend/vue/components/Admin/Settings/GeneralTab.vue
+++ b/frontend/vue/components/Admin/Settings/GeneralTab.vue
@@ -75,10 +75,10 @@
                         $gettext('Set longer to preserve more playback history and listener metadata for stations. Set shorter to save disk space.')
                     }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="historyKeepDaysOptions"
                     />
@@ -126,7 +126,10 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue b/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue
index 6b893201b..ad5e6859c 100644
--- a/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue
+++ b/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue
@@ -18,10 +18,10 @@
                         $gettext('Aggregate listener statistics are used to show station reports across the system. IP-based listener statistics are used to view live listener tracking and may be required for royalty reports.')
                     }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                     >
                         <b-form-radio value="all">
@@ -100,6 +100,9 @@ import BFormFieldset from "~/components/Form/BFormFieldset.vue";
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
 
 const props = defineProps({
-  form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Admin/Settings/ServicesTab.vue b/frontend/vue/components/Admin/Settings/ServicesTab.vue
index b572748bb..f59a24fbe 100644
--- a/frontend/vue/components/Admin/Settings/ServicesTab.vue
+++ b/frontend/vue/components/Admin/Settings/ServicesTab.vue
@@ -229,10 +229,10 @@
                 <template #label>
                     {{ $gettext('Avatar Service') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="avatarServiceOptions"
                     />
@@ -318,10 +318,22 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    form: Object,
-    releaseChannel: String,
-    testMessageUrl: String,
-    acmeUrl: String,
+    form: {
+        type: Object,
+        required: true
+    },
+    releaseChannel: {
+        type: String,
+        required: true
+    },
+    testMessageUrl: {
+        type: String,
+        required: true
+    },
+    acmeUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Admin/Settings/TestMessageModal.vue b/frontend/vue/components/Admin/Settings/TestMessageModal.vue
index 55375605f..e8648f6f1 100644
--- a/frontend/vue/components/Admin/Settings/TestMessageModal.vue
+++ b/frontend/vue/components/Admin/Settings/TestMessageModal.vue
@@ -44,10 +44,13 @@ import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 import {BModal} from "bootstrap-vue";
 
 const props = defineProps({
-    testMessageUrl: String
+    testMessageUrl: {
+        type: String,
+        required: true
+    }
 });
 
-const {form, resetForm, v$} = useVuelidateOnForm(
+const {form, v$} = useVuelidateOnForm(
     {
         emailAddress: {required, email}
     },
diff --git a/frontend/vue/components/Admin/Shoutcast.vue b/frontend/vue/components/Admin/Shoutcast.vue
index b41a4ca34..4738c5faa 100644
--- a/frontend/vue/components/Admin/Shoutcast.vue
+++ b/frontend/vue/components/Admin/Shoutcast.vue
@@ -90,7 +90,10 @@ import {useTranslate} from "~/vendor/gettext";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    apiUrl: String
+    apiUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const loading = ref(true);
diff --git a/frontend/vue/components/Admin/Stations.vue b/frontend/vue/components/Admin/Stations.vue
index 8aaf31a87..e499ebc12 100644
--- a/frontend/vue/components/Admin/Stations.vue
+++ b/frontend/vue/components/Admin/Stations.vue
@@ -87,7 +87,6 @@
 <script>
 import DataTable from '~/components/Common/DataTable';
 import Icon from '~/components/Common/Icon';
-import InfoCard from '~/components/Common/InfoCard';
 import AdminStationsEditModal from "./Stations/EditModal";
 import _ from "lodash";
 import AdminStationsCloneModal from "./Stations/CloneModal";
@@ -95,12 +94,21 @@ import stationFormProps from "./Stations/stationFormProps";
 
 export default {
     name: 'AdminPermissions',
-    components: {AdminStationsCloneModal, AdminStationsEditModal, InfoCard, Icon, DataTable},
+    components: {AdminStationsCloneModal, AdminStationsEditModal, Icon, DataTable},
     props: {
         ...stationFormProps,
-        listUrl: String,
-        frontendTypes: Object,
-        backendTypes: Object
+        listUrl: {
+            type: String,
+            required: true
+        },
+        frontendTypes: {
+            type: Object,
+            required: true
+        },
+        backendTypes: {
+            type: Object,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Admin/Stations/CloneModalForm.vue b/frontend/vue/components/Admin/Stations/CloneModalForm.vue
index 625761554..462aebb51 100644
--- a/frontend/vue/components/Admin/Stations/CloneModalForm.vue
+++ b/frontend/vue/components/Admin/Stations/CloneModalForm.vue
@@ -29,10 +29,10 @@
             <template #label>
                 {{ $gettext('Copy to New Station') }}
             </template>
-            <template #default="props">
+            <template #default="slotProps">
                 <b-form-checkbox-group
-                    :id="props.id"
-                    v-model="props.field.$model"
+                    :id="slotProps.id"
+                    v-model="slotProps.field.$model"
                     :options="cloneOptions"
                     stacked
                 />
@@ -47,7 +47,10 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Admin/Stations/EditModal.vue b/frontend/vue/components/Admin/Stations/EditModal.vue
index 3d8b1c4c8..a2cbd155f 100644
--- a/frontend/vue/components/Admin/Stations/EditModal.vue
+++ b/frontend/vue/components/Admin/Stations/EditModal.vue
@@ -17,8 +17,8 @@
             :is-edit-mode="isEditMode"
             @error="close"
             @submitted="onSubmit"
-            @validUpdate="onValidUpdate"
-            @loadingUpdate="onLoadingUpdate"
+            @valid-update="onValidUpdate"
+            @loading-update="onLoadingUpdate"
         >
             <template #submitButton>
                 <invisible-submit-button />
@@ -54,7 +54,10 @@ import stationFormProps from "~/components/Admin/Stations/stationFormProps";
 
 const props = defineProps({
     ...stationFormProps,
-    createUrl: String
+    createUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['relist']);
diff --git a/frontend/vue/components/Admin/Stations/Form/AdminForm.vue b/frontend/vue/components/Admin/Stations/Form/AdminForm.vue
index 96e111a7a..1f679c499 100644
--- a/frontend/vue/components/Admin/Stations/Form/AdminForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/AdminForm.vue
@@ -48,10 +48,10 @@
                         <template #label>
                             {{ $gettext('Media Storage Location') }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <b-form-select
-                                :id="props.id"
-                                v-model="props.field.$model"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
                                 :options="storageLocationOptions.media_storage_location"
                             />
                         </template>
@@ -65,10 +65,10 @@
                         <template #label>
                             {{ $gettext('Live Recordings Storage Location') }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <b-form-select
-                                :id="props.id"
-                                v-model="props.field.$model"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
                                 :options="storageLocationOptions.recordings_storage_location"
                             />
                         </template>
@@ -82,10 +82,10 @@
                         <template #label>
                             {{ $gettext('Podcasts Storage Location') }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <b-form-select
-                                :id="props.id"
-                                v-model="props.field.$model"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
                                 :options="storageLocationOptions.podcasts_storage_location"
                             />
                         </template>
@@ -105,9 +105,18 @@ import {onMounted, reactive, ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    form: Object,
-    isEditMode: Boolean,
-    storageLocationApiUrl: String,
+    form: {
+        type: Object,
+        required: true
+    },
+    isEditMode: {
+        type: Boolean,
+        required: true
+    },
+    storageLocationApiUrl: {
+        type: String,
+        required: true
+    },
     showAdvanced: {
         type: Boolean,
         default: true
diff --git a/frontend/vue/components/Admin/Stations/Form/BackendForm.vue b/frontend/vue/components/Admin/Stations/Form/BackendForm.vue
index 6c7572fb5..dcbe5553e 100644
--- a/frontend/vue/components/Admin/Stations/Form/BackendForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/BackendForm.vue
@@ -14,10 +14,10 @@
                         $gettext('This software shuffles from playlists of music constantly and plays when no other radio source is available.')
                     }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="backendTypeOptions"
                     />
@@ -42,10 +42,10 @@
                             $gettext('Choose a method to use when transitioning from one song to another. Smart Mode considers the volume of the two tracks when fading for a smoother effect, but requires more CPU resources.')
                         }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="crossfadeOptions"
                         />
@@ -81,10 +81,10 @@
                             $gettext('Choose a method to use for processing audio which produces a more uniform and "full" sound for your station.')
                         }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="audioProcessingOptions"
                         />
@@ -233,10 +233,10 @@
                             $gettext('For most cases, use the default UTF-8 encoding. The older ISO-8859-1 encoding can be used if accepting connections from Shoutcast 1 DJs or using other legacy software.')
                         }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="charsetOptions"
                         />
@@ -257,10 +257,10 @@
                             $gettext('If your installation is constrained by CPU or memory, you can change this setting to tune the resources used by Liquidsoap.')
                         }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                             :options="performanceModeOptions"
                         />
@@ -305,12 +305,18 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-  form: Object,
-  station: Object,
-  isStereoToolInstalled: {
-    type: Boolean,
-    default: true
-  },
+    form: {
+        type: Object,
+        required: true
+    },
+    station: {
+        type: Object,
+        required: true
+    },
+    isStereoToolInstalled: {
+        type: Boolean,
+        default: true
+    },
     showAdvanced: {
         type: Boolean,
         default: true
diff --git a/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue b/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue
index f902e11a6..4fc0ca54f 100644
--- a/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue
@@ -12,10 +12,10 @@
                 <template #description>
                     {{ $gettext('This software delivers your broadcast to the listening audience.') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="frontendTypeOptions"
                     />
@@ -176,10 +176,10 @@
                     <template #description>
                         {{ $gettext('Select the countries that are not allowed to connect to the streams.') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-select
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             :options="countryOptions"
                             style="min-height: 300px;"
                             multiple
@@ -236,12 +236,18 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-  form: Object,
-  isShoutcastInstalled: {
-    type: Boolean,
-    default: false
+    form: {
+        type: Object,
+        required: true
+    },
+    isShoutcastInstalled: {
+        type: Boolean,
+        default: false
+    },
+    countries: {
+        type: Object,
+        required: true
     },
-    countries: Object,
     showAdvanced: {
         type: Boolean,
         default: true
diff --git a/frontend/vue/components/Admin/Stations/Form/HlsForm.vue b/frontend/vue/components/Admin/Stations/Form/HlsForm.vue
index dda0b1a6f..703459454 100644
--- a/frontend/vue/components/Admin/Stations/Form/HlsForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/HlsForm.vue
@@ -104,10 +104,16 @@ import BackendDisabled from "./Common/BackendDisabled.vue";
 import {computed} from "vue";
 
 const props = defineProps({
-  form: Object,
-  station: Object,
-  showAdvanced: {
-    type: Boolean,
+    form: {
+        type: Object,
+        required: true
+    },
+    station: {
+        type: Object,
+        required: true
+    },
+    showAdvanced: {
+        type: Boolean,
         default: true
     },
 });
diff --git a/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue b/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue
index ee1e44555..dba395c91 100644
--- a/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue
@@ -61,10 +61,10 @@
                         $gettext('Scheduled playlists and other timed items will be controlled by this time zone.')
                     }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-select
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         :options="timezoneOptions"
                     />
                 </template>
@@ -117,10 +117,10 @@
                         $gettext('Customize the number of songs that will appear in the "Song History" section for this station and in all public APIs.')
                     }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-select
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         :options="historyItemsOptions"
                     />
                 </template>
@@ -198,8 +198,14 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    form: Object,
-    timezones: Object,
+    form: {
+        type: Object,
+        required: true
+    },
+    timezones: {
+        type: Object,
+        required: true
+    },
     showAdvanced: {
         type: Boolean,
         default: true
diff --git a/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue b/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue
index b5d5ec6fa..7cb3b9ed0 100644
--- a/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue
@@ -80,10 +80,16 @@ import BackendDisabled from "./Common/BackendDisabled.vue";
 import {computed} from "vue";
 
 const props = defineProps({
-  form: Object,
-  station: Object,
-  showAdvanced: {
-    type: Boolean,
+    form: {
+        type: Object,
+        required: true
+    },
+    station: {
+        type: Object,
+        required: true
+    },
+    showAdvanced: {
+        type: Boolean,
         default: true
     },
 });
diff --git a/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue b/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue
index b6c11016a..8c5ad132a 100644
--- a/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue
@@ -55,10 +55,10 @@
                                 {{ $gettext('Live Broadcast Recording Format') }}
                             </template>
 
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-radio-group
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                     stacked
                                     :options="recordStreamsOptions"
                                 />
@@ -74,10 +74,10 @@
                                 {{ $gettext('Live Broadcast Recording Bitrate (kbps)') }}
                             </template>
 
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-radio-group
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                     stacked
                                     :options="recordBitrateOptions"
                                 />
@@ -178,10 +178,16 @@ import BackendDisabled from "./Common/BackendDisabled.vue";
 import {computed} from "vue";
 
 const props = defineProps({
-  form: Object,
-  station: Object,
-  showAdvanced: {
-    type: Boolean,
+    form: {
+        type: Object,
+        required: true
+    },
+    station: {
+        type: Object,
+        required: true
+    },
+    showAdvanced: {
+        type: Boolean,
         default: true
     },
 });
diff --git a/frontend/vue/components/Admin/Stations/StationForm.vue b/frontend/vue/components/Admin/Stations/StationForm.vue
index fde3dea04..09453bf1c 100644
--- a/frontend/vue/components/Admin/Stations/StationForm.vue
+++ b/frontend/vue/components/Admin/Stations/StationForm.vue
@@ -158,9 +158,18 @@ import stationFormProps from "~/components/Admin/Stations/stationFormProps";
 
 const props = defineProps({
     ...stationFormProps,
-    createUrl: String,
-    editUrl: String,
-    isEditMode: Boolean,
+    createUrl: {
+        type: String,
+        required: true
+    },
+    editUrl: {
+        type: String,
+        required: true
+    },
+    isEditMode: {
+        type: Boolean,
+        required: true
+    },
     isModal: {
         type: Boolean,
         default: false
diff --git a/frontend/vue/components/Admin/StereoTool.vue b/frontend/vue/components/Admin/StereoTool.vue
index 282da8f47..d29a91981 100644
--- a/frontend/vue/components/Admin/StereoTool.vue
+++ b/frontend/vue/components/Admin/StereoTool.vue
@@ -100,7 +100,10 @@ import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    apiUrl: String
+    apiUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const loading = ref(true);
diff --git a/frontend/vue/components/Admin/StorageLocations.vue b/frontend/vue/components/Admin/StorageLocations.vue
index 15f72bd2c..0aeeb77bf 100644
--- a/frontend/vue/components/Admin/StorageLocations.vue
+++ b/frontend/vue/components/Admin/StorageLocations.vue
@@ -103,7 +103,10 @@ export default {
     name: 'AdminStorageLocations',
     components: {Icon, EditModal, DataTable},
     props: {
-        listUrl: String
+        listUrl: {
+            type: String,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Admin/StorageLocations/EditModal.vue b/frontend/vue/components/Admin/StorageLocations/EditModal.vue
index f0ae653ae..678cd2935 100644
--- a/frontend/vue/components/Admin/StorageLocations/EditModal.vue
+++ b/frontend/vue/components/Admin/StorageLocations/EditModal.vue
@@ -25,7 +25,10 @@ export default {
     components: {StorageLocationForm},
     mixins: [BaseEditModal],
     props: {
-        type: String
+        type: {
+            type: String,
+            required: true
+        }
     },
     setup() {
         const blankForm = {
diff --git a/frontend/vue/components/Admin/StorageLocations/Form.vue b/frontend/vue/components/Admin/StorageLocations/Form.vue
index bdbec6f4d..86a2f73e9 100644
--- a/frontend/vue/components/Admin/StorageLocations/Form.vue
+++ b/frontend/vue/components/Admin/StorageLocations/Form.vue
@@ -9,10 +9,10 @@
                 <template #label>
                     {{ $gettext('Storage Adapter') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                     >
                         <b-form-radio value="local">
@@ -258,6 +258,9 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Admin/Users.vue b/frontend/vue/components/Admin/Users.vue
index d868bc80a..200cde352 100644
--- a/frontend/vue/components/Admin/Users.vue
+++ b/frontend/vue/components/Admin/Users.vue
@@ -90,14 +90,19 @@
 import DataTable from '~/components/Common/DataTable';
 import EditModal from './Users/EditModal';
 import Icon from '~/components/Common/Icon';
-import InfoCard from '~/components/Common/InfoCard';
 
 export default {
     name: 'AdminPermissions',
-    components: {InfoCard, Icon, EditModal, DataTable},
+    components: {Icon, EditModal, DataTable},
     props: {
-        listUrl: String,
-        roles: Object
+        listUrl: {
+            type: String,
+            required: true
+        },
+        roles: {
+            type: Object,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Admin/Users/EditModal.vue b/frontend/vue/components/Admin/Users/EditModal.vue
index 78389448e..bf0f4a175 100644
--- a/frontend/vue/components/Admin/Users/EditModal.vue
+++ b/frontend/vue/components/Admin/Users/EditModal.vue
@@ -29,7 +29,10 @@ export default {
     components: {AdminUsersForm},
     mixins: [BaseEditModal],
     props: {
-        roles: Object
+        roles: {
+            type: Object,
+            required: true
+        }
     },
     setup() {
         return {v$: useVuelidate()}
diff --git a/frontend/vue/components/Admin/Users/Form.vue b/frontend/vue/components/Admin/Users/Form.vue
index d8ef0ae5b..9d8837129 100644
--- a/frontend/vue/components/Admin/Users/Form.vue
+++ b/frontend/vue/components/Admin/Users/Form.vue
@@ -24,7 +24,7 @@
                 </template>
                 <template
                     v-if="isEditMode"
-                    #description="{lang}"
+                    #description
                 >
                     {{ $gettext('Leave blank to use the current password.') }}
                 </template>
@@ -48,10 +48,10 @@
                 <template #label>
                     {{ $gettext('Roles') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-checkbox-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         :options="roleOptions"
                     />
                 </template>
@@ -66,9 +66,18 @@ import objectToFormOptions from "~/functions/objectToFormOptions";
 import {computed} from "vue";
 
 const props = defineProps({
-    form: Object,
-    roles: Object,
-    isEditMode: Boolean
+    form: {
+        type: Object,
+        required: true
+    },
+    roles: {
+        type: Object,
+        required: true
+    },
+    isEditMode: {
+        type: Boolean,
+        required: true
+    }
 });
 
 const roleOptions = computed(() => {
diff --git a/frontend/vue/components/Common/AlbumArt.vue b/frontend/vue/components/Common/AlbumArt.vue
index d578bb6ee..d9877b06d 100644
--- a/frontend/vue/components/Common/AlbumArt.vue
+++ b/frontend/vue/components/Common/AlbumArt.vue
@@ -19,7 +19,10 @@
 import {computed} from "vue";
 
 const props = defineProps({
-    src: String,
+    src: {
+        type: String,
+        required: true
+    },
     width: {
         type: Number,
         default: 40
diff --git a/frontend/vue/components/Common/AudioPlayer.vue b/frontend/vue/components/Common/AudioPlayer.vue
index 3521b97a2..fb4bf9d8b 100644
--- a/frontend/vue/components/Common/AudioPlayer.vue
+++ b/frontend/vue/components/Common/AudioPlayer.vue
@@ -14,7 +14,10 @@ import {defineComponent} from "vue";
 
 export default defineComponent({
     props: {
-        title: String,
+        title: {
+            type: String,
+            required: true
+        },
         volume: {
             type: Number,
             default: 55
diff --git a/frontend/vue/components/Common/Avatar.vue b/frontend/vue/components/Common/Avatar.vue
index bf82e00ba..308bd1a4c 100644
--- a/frontend/vue/components/Common/Avatar.vue
+++ b/frontend/vue/components/Common/Avatar.vue
@@ -20,9 +20,18 @@ import {useTranslate} from "~/vendor/gettext";
 import {computed} from "vue";
 
 const props = defineProps({
-    url: String,
-    service: String,
-    serviceUrl: String,
+    url: {
+        type: String,
+        required: true
+    },
+    service: {
+        type: String,
+        required: true
+    },
+    serviceUrl: {
+        type: String,
+        required: true
+    },
     width: {
         type: Number,
         default: 64
diff --git a/frontend/vue/components/Common/Badges/EnabledBadge.vue b/frontend/vue/components/Common/Badges/EnabledBadge.vue
index 243dbb453..203e3f7e3 100644
--- a/frontend/vue/components/Common/Badges/EnabledBadge.vue
+++ b/frontend/vue/components/Common/Badges/EnabledBadge.vue
@@ -10,7 +10,10 @@ import {computed} from "vue";
 import {useGettext} from "vue3-gettext";
 
 const props = defineProps({
-    enabled: Boolean
+    enabled: {
+        type: Boolean,
+        required: true
+    }
 });
 
 const badgeClass = computed(() => {
diff --git a/frontend/vue/components/Common/Badges/RunningBadge.vue b/frontend/vue/components/Common/Badges/RunningBadge.vue
index e876f4591..547f99b14 100644
--- a/frontend/vue/components/Common/Badges/RunningBadge.vue
+++ b/frontend/vue/components/Common/Badges/RunningBadge.vue
@@ -10,7 +10,10 @@ import {computed} from "vue";
 import {useGettext} from "vue3-gettext";
 
 const props = defineProps({
-    running: Boolean
+    running: {
+        type: Boolean,
+        required: true
+    }
 });
 
 const badgeClass = computed(() => {
diff --git a/frontend/vue/components/Common/BaseEditModal.vue b/frontend/vue/components/Common/BaseEditModal.vue
index 781ddcbd7..c9d62d158 100644
--- a/frontend/vue/components/Common/BaseEditModal.vue
+++ b/frontend/vue/components/Common/BaseEditModal.vue
@@ -11,7 +11,10 @@ export default {
     name: 'BaseEditModal',
     components: {ModalForm},
     props: {
-        createUrl: String
+        createUrl: {
+            type: String,
+            required: true
+        }
     },
     emits: ['relist'],
     setup() {
diff --git a/frontend/vue/components/Common/Charts/HourChart.vue b/frontend/vue/components/Common/Charts/HourChart.vue
index 84a755116..42b45f3c3 100644
--- a/frontend/vue/components/Common/Charts/HourChart.vue
+++ b/frontend/vue/components/Common/Charts/HourChart.vue
@@ -9,11 +9,21 @@ import {Tableau20} from "~/vendor/chartjs-colorschemes/colorschemes.tableau";
 import {Chart} from "chart.js";
 import {useTranslate} from "~/vendor/gettext";
 import {onMounted, onUnmounted, ref} from "vue";
+import {defaultsDeep} from "lodash";
 
 const props = defineProps({
-    options: Object,
-    data: Array,
-    labels: Array
+    options: {
+        type: Object,
+        required: true
+    },
+    data: {
+        type: Array,
+        default: []
+    },
+    labels: {
+        type: Array,
+        default: []
+    }
 });
 
 let $chart = null;
@@ -58,7 +68,7 @@ onMounted(() => {
         $chart.destroy();
     }
 
-    let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
+    let chartOptions = defaultsDeep({}, props.options, defaultOptions);
     $chart = new Chart($canvas.value.getContext('2d'), chartOptions);
 });
 
diff --git a/frontend/vue/components/Common/Charts/PieChart.vue b/frontend/vue/components/Common/Charts/PieChart.vue
index d5dad356b..38f8d093d 100644
--- a/frontend/vue/components/Common/Charts/PieChart.vue
+++ b/frontend/vue/components/Common/Charts/PieChart.vue
@@ -8,11 +8,21 @@
 import {Tableau20} from "~/vendor/chartjs-colorschemes/colorschemes.tableau";
 import {Chart} from "chart.js";
 import {onMounted, onUnmounted, ref} from "vue";
+import {defaultsDeep} from "lodash";
 
 const props = defineProps({
-    options: Object,
-    data: Array,
-    labels: Array,
+    options: {
+        type: Object,
+        required: true
+    },
+    data: {
+        type: Array,
+        default: []
+    },
+    labels: {
+        type: Array,
+        default: []
+    },
     aspectRatio: {
         type: Number,
         default: 2
@@ -43,7 +53,7 @@ onMounted(() => {
         $chart.destroy();
     }
 
-    let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
+    let chartOptions = defaultsDeep({}, props.options, defaultOptions);
     $chart = new Chart($canvas.value.getContext('2d'), chartOptions);
 });
 
diff --git a/frontend/vue/components/Common/Charts/TimeSeriesChart.vue b/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
index fff8eda3c..12db9c224 100644
--- a/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
+++ b/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
@@ -14,8 +14,14 @@ import {onMounted, onUnmounted, ref} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    options: Object,
-    data: Array
+    options: {
+        type: Object,
+        required: true
+    },
+    data: {
+        type: Array,
+        default: []
+    }
 });
 
 const $canvas = ref(); // Template ref
diff --git a/frontend/vue/components/Common/CodemirrorTextarea.vue b/frontend/vue/components/Common/CodemirrorTextarea.vue
index 238dfc833..beac0886f 100644
--- a/frontend/vue/components/Common/CodemirrorTextarea.vue
+++ b/frontend/vue/components/Common/CodemirrorTextarea.vue
@@ -16,8 +16,14 @@ import {javascript} from "@codemirror/lang-javascript";
 import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
-    modelValue: String,
-    mode: String
+    modelValue: {
+        type: String,
+        required: true
+    },
+    mode: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/frontend/vue/components/Common/DataTable.vue b/frontend/vue/components/Common/DataTable.vue
index 891f85aa3..81e74c63f 100644
--- a/frontend/vue/components/Common/DataTable.vue
+++ b/frontend/vue/components/Common/DataTable.vue
@@ -123,6 +123,8 @@
             <b-table
                 ref="table"
                 v-model:current-page="currentPage"
+                v-model:sort-by="sortBy"
+                v-model:sort-desc="sortDesc"
                 show-empty
                 striped
                 hover
@@ -138,12 +140,10 @@
                 :no-provider-sorting="handleClientSide"
                 :no-provider-filtering="handleClientSide"
                 tbody-tr-class="align-middle"
-                @row-selected="onRowSelected"
                 thead-tr-class="align-middle"
                 selected-variant=""
                 :filter="filter"
-                v-model:sort-by="sortBy"
-                v-model:sort-desc="sortDesc"
+                @row-selected="onRowSelected"
                 @filtered="onFiltered"
                 @refreshed="onRefreshed"
                 @sort-changed="onSortChanged"
@@ -217,7 +217,7 @@
 
 <script>
 import store from 'store';
-import _ from 'lodash';
+import {forEach, filter, map} from 'lodash';
 import Icon from './Icon.vue';
 import {defineComponent} from "vue";
 
@@ -225,7 +225,10 @@ export default defineComponent({
     name: 'DataTable',
     components: {Icon},
     props: {
-        id: String,
+        id: {
+            type: String,
+            required: true
+        },
         apiUrl: {
             type: String,
             default: null
@@ -254,7 +257,10 @@ export default defineComponent({
             type: Number,
             default: 10
         },
-        fields: Array,
+        fields: {
+            type: Array,
+            required: true
+        },
         selectable: {
             type: Boolean,
             default: false
@@ -267,12 +273,25 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        requestConfig: Function,
-        requestProcess: Function
+        requestConfig: {
+            type: Function,
+            default: () => {
+            }
+        },
+        requestProcess: {
+            type: Function,
+            default: () => {
+            }
+        }
     },
+    emits: [
+        'refreshed',
+        'row-selected',
+        'filtered'
+    ],
     data() {
         let allFields = [];
-        _.forEach(this.fields, function (field) {
+        forEach(this.fields, function (field) {
             allFields.push({
                 ...{
                     label: '',
@@ -345,7 +364,7 @@ export default defineComponent({
                 return fields;
             }
 
-            return _.filter(fields, (field) => {
+            return filter(fields, (field) => {
                 if (!field.selectable) {
                     return true;
                 }
@@ -354,7 +373,7 @@ export default defineComponent({
             });
         },
         selectableFields() {
-            return _.filter(this.allFields.slice(), (field) => {
+            return filter(this.allFields.slice(), (field) => {
                 return field.selectable;
             });
         },
@@ -394,7 +413,7 @@ export default defineComponent({
 
                 this.perPage = _.defaultTo(settings.perPage, this.defaultPerPage);
 
-                _.forEach(this.selectableFields, (field) => {
+                forEach(this.selectableFields, (field) => {
                     field.visible = _.includes(settings.visibleFields, field.key);
                 });
 
@@ -413,7 +432,7 @@ export default defineComponent({
                 'perPage': this.perPage,
                 'sortBy': this.sortBy,
                 'sortDesc': this.sortDesc,
-                'visibleFields': _.map(this.visibleFields, 'key')
+                'visibleFields': map(this.visibleFields, 'key')
             };
 
             store.set(this.storeKey, settings);
diff --git a/frontend/vue/components/Common/DateRangeDropdown.vue b/frontend/vue/components/Common/DateRangeDropdown.vue
index 63385e5b5..df7e6eb42 100644
--- a/frontend/vue/components/Common/DateRangeDropdown.vue
+++ b/frontend/vue/components/Common/DateRangeDropdown.vue
@@ -84,7 +84,7 @@ export default {
             get() {
                 return this.modelValue;
             },
-            set(newValue) {
+            set() {
                 // Noop
             }
         },
diff --git a/frontend/vue/components/Common/FlowUpload.vue b/frontend/vue/components/Common/FlowUpload.vue
index 31fe11c71..1722d2e97 100644
--- a/frontend/vue/components/Common/FlowUpload.vue
+++ b/frontend/vue/components/Common/FlowUpload.vue
@@ -74,10 +74,13 @@ import {useAzuraCast} from "~/vendor/azuracast";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-  targetUrl: String,
-  allowMultiple: {
-    type: Boolean,
-    default: false
+    targetUrl: {
+        type: String,
+        required: true
+    },
+    allowMultiple: {
+        type: Boolean,
+        default: false
     },
     validMimeTypes: {
         type: Array,
@@ -183,7 +186,7 @@ onMounted(() => {
     flow.on('error', (message, file, chunk) => {
         console.error(message, file, chunk);
 
-      let messageText = $gettext('Could not upload file.');
+        let messageText = $gettext('Could not upload file.');
         try {
             if (typeof message !== 'undefined') {
                 let messageJson = JSON.parse(message);
@@ -195,6 +198,7 @@ onMounted(() => {
                 }
             }
         } catch (e) {
+            // Noop
         }
 
         files.get(file).error = messageText;
diff --git a/frontend/vue/components/Common/LogList.vue b/frontend/vue/components/Common/LogList.vue
index 65b7f760f..cf6f08f89 100644
--- a/frontend/vue/components/Common/LogList.vue
+++ b/frontend/vue/components/Common/LogList.vue
@@ -17,7 +17,10 @@
 export default {
     name: 'LogList',
     props: {
-        url: String,
+        url: {
+            type: String,
+            required: true
+        },
     },
     emits: ['view'],
     data() {
diff --git a/frontend/vue/components/Common/ModalForm.vue b/frontend/vue/components/Common/ModalForm.vue
index 623fe3f22..0d640187c 100644
--- a/frontend/vue/components/Common/ModalForm.vue
+++ b/frontend/vue/components/Common/ModalForm.vue
@@ -109,7 +109,8 @@ export default defineComponent({
             default: false,
         },
         error: {
-            type: String
+            type: String,
+            default: null
         }
     },
     emits: ['submit', 'shown', 'hidden'],
diff --git a/frontend/vue/components/Common/PlayButton.vue b/frontend/vue/components/Common/PlayButton.vue
index 578563b5b..328c5b914 100644
--- a/frontend/vue/components/Common/PlayButton.vue
+++ b/frontend/vue/components/Common/PlayButton.vue
@@ -20,7 +20,10 @@ import {useTranslate} from "~/vendor/gettext";
 import getUrlWithoutQuery from "~/functions/getUrlWithoutQuery";
 
 const props = defineProps({
-    url: String,
+    url: {
+        type: String,
+        required: true
+    },
     isStream: {
         type: Boolean,
         default: false
@@ -29,7 +32,10 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
-    iconClass: String
+    iconClass: {
+        type: String,
+        default: null
+    }
 });
 
 const $store = usePlayerStore();
diff --git a/frontend/vue/components/Common/ScheduleView.vue b/frontend/vue/components/Common/ScheduleView.vue
index 0efde9d4c..0a8ca19c9 100644
--- a/frontend/vue/components/Common/ScheduleView.vue
+++ b/frontend/vue/components/Common/ScheduleView.vue
@@ -15,8 +15,14 @@ import {shallowRef} from "vue";
 import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
-    scheduleUrl: String,
-    stationTimeZone: String
+    scheduleUrl: {
+        type: String,
+        required: true
+    },
+    stationTimeZone: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['click']);
diff --git a/frontend/vue/components/Common/TimeCode.vue b/frontend/vue/components/Common/TimeCode.vue
index 88e39f14c..331a2cd69 100644
--- a/frontend/vue/components/Common/TimeCode.vue
+++ b/frontend/vue/components/Common/TimeCode.vue
@@ -14,7 +14,10 @@ import {computed} from "vue";
 import _ from 'lodash';
 
 const props = defineProps({
-    modelValue: String
+    modelValue: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/frontend/vue/components/Common/Waveform.vue b/frontend/vue/components/Common/Waveform.vue
index 4fae99161..8c04bc158 100644
--- a/frontend/vue/components/Common/Waveform.vue
+++ b/frontend/vue/components/Common/Waveform.vue
@@ -78,8 +78,14 @@ import {onMounted, onUnmounted, ref, watch} from "vue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    audioUrl: String,
-    waveformUrl: String
+    audioUrl: {
+        type: String,
+        required: true
+    },
+    waveformUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['ready']);
diff --git a/frontend/vue/components/Dashboard.vue b/frontend/vue/components/Dashboard.vue
index 0747d66df..7125934e6 100644
--- a/frontend/vue/components/Dashboard.vue
+++ b/frontend/vue/components/Dashboard.vue
@@ -332,16 +332,46 @@ import AlbumArt from "~/components/Common/AlbumArt";
 export default {
     components: {PlayButton, Avatar, Icon, DataTable, TimeSeriesChart, AlbumArt},
     props: {
-        userUrl: String,
-        profileUrl: String,
-        adminUrl: String,
-        showAdmin: Boolean,
-        notificationsUrl: String,
-        showCharts: Boolean,
-        chartsUrl: String,
-        manageStationsUrl: String,
-        stationsUrl: String,
-        showAlbumArt: Boolean
+        userUrl: {
+            type: String,
+            required: true
+        },
+        profileUrl: {
+            type: String,
+            required: true
+        },
+        adminUrl: {
+            type: String,
+            required: true
+        },
+        showAdmin: {
+            type: Boolean,
+            required: true
+        },
+        notificationsUrl: {
+            type: String,
+            required: true
+        },
+        showCharts: {
+            type: Boolean,
+            required: true
+        },
+        chartsUrl: {
+            type: String,
+            required: true
+        },
+        manageStationsUrl: {
+            type: String,
+            required: true
+        },
+        stationsUrl: {
+            type: String,
+            required: true
+        },
+        showAlbumArt: {
+            type: Boolean,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Form/BWrappedFormCheckbox.vue b/frontend/vue/components/Form/BWrappedFormCheckbox.vue
index 13609b90d..0c75f538d 100644
--- a/frontend/vue/components/Form/BWrappedFormCheckbox.vue
+++ b/frontend/vue/components/Form/BWrappedFormCheckbox.vue
@@ -69,6 +69,7 @@ const props = defineProps({
     },
     name: {
         type: String,
+        required: true,
     },
     field: {
         type: Object,
diff --git a/frontend/vue/components/Form/BWrappedFormGroup.vue b/frontend/vue/components/Form/BWrappedFormGroup.vue
index 64a7fd913..ca6265aac 100644
--- a/frontend/vue/components/Form/BWrappedFormGroup.vue
+++ b/frontend/vue/components/Form/BWrappedFormGroup.vue
@@ -94,6 +94,7 @@ const props = defineProps({
     },
     name: {
         type: String,
+        required: true
     },
     field: {
         type: Object,
diff --git a/frontend/vue/components/Form/VuelidateError.vue b/frontend/vue/components/Form/VuelidateError.vue
index bce5303f9..b03c41752 100644
--- a/frontend/vue/components/Form/VuelidateError.vue
+++ b/frontend/vue/components/Form/VuelidateError.vue
@@ -12,7 +12,10 @@ import {get, map} from "lodash";
 import {computed} from "vue";
 
 const props = defineProps({
-    field: Object
+    field: {
+        type: Object,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Public/FullPlayer/SongHistory.vue b/frontend/vue/components/Public/FullPlayer/SongHistory.vue
index 8a6f981c2..2b9621e53 100644
--- a/frontend/vue/components/Public/FullPlayer/SongHistory.vue
+++ b/frontend/vue/components/Public/FullPlayer/SongHistory.vue
@@ -29,7 +29,10 @@
 import {DateTime} from "luxon";
 
 const props = defineProps({
-    history: Array,
+    history: {
+        type: Array,
+        default: []
+    },
     showAlbumArt: {
         type: Boolean,
         default: true
diff --git a/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue b/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue
index 9f2df715e..1633577d7 100644
--- a/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue
+++ b/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue
@@ -18,7 +18,10 @@
 import SongHistory from './SongHistory';
 
 const props = defineProps({
-    history: Array,
+    history: {
+        type: Array,
+        default: []
+    },
     showAlbumArt: {
         type: Boolean,
         default: true
diff --git a/frontend/vue/components/Public/OnDemand.vue b/frontend/vue/components/Public/OnDemand.vue
index 0ad132a39..869d86ce0 100644
--- a/frontend/vue/components/Public/OnDemand.vue
+++ b/frontend/vue/components/Public/OnDemand.vue
@@ -95,10 +95,22 @@ import PlayButton from "~/components/Common/PlayButton";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    listUrl: String,
-    stationName: String,
-    customFields: Array,
-    showDownloadButton: Boolean
+    listUrl: {
+        type: String,
+        required: true
+    },
+    stationName: {
+        type: String,
+        required: true
+    },
+    customFields: {
+        type: Array,
+        default: []
+    },
+    showDownloadButton: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Public/Schedule.vue b/frontend/vue/components/Public/Schedule.vue
index 896318fe1..321c3c9d0 100644
--- a/frontend/vue/components/Public/Schedule.vue
+++ b/frontend/vue/components/Public/Schedule.vue
@@ -44,9 +44,18 @@
 import Schedule from '~/components/Common/ScheduleView';
 
 const props = defineProps({
-    scheduleUrl: String,
-    stationName: String,
-    stationTimeZone: String
+    scheduleUrl: {
+        type: String,
+        required: true
+    },
+    stationName: {
+        type: String,
+        required: true
+    },
+    stationTimeZone: {
+        type: String,
+        required: true
+    }
 });
 </script>
 
diff --git a/frontend/vue/components/Public/WebDJ.vue b/frontend/vue/components/Public/WebDJ.vue
index 3f640734b..c76066d88 100644
--- a/frontend/vue/components/Public/WebDJ.vue
+++ b/frontend/vue/components/Public/WebDJ.vue
@@ -58,9 +58,18 @@ export default {
         };
     },
     props: {
-        stationName: String,
-        libUrls: Array,
-        baseUri: String
+        stationName: {
+            type: String,
+            required: true
+        },
+        libUrls: {
+            type: Array,
+            default: []
+        },
+        baseUri: {
+            type: String,
+            required: true
+        }
     },
     data: function () {
         return {
diff --git a/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue b/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue
index 969fc0ed1..ad1e1bd99 100644
--- a/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue
+++ b/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue
@@ -183,7 +183,10 @@ export default {
     components: {VolumeSlider, Icon},
     extends: track,
     props: {
-        id: String
+        id: {
+            type: String,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Public/WebDJ/SettingsPanel.vue b/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
index e03d25cc4..a6c181bff 100644
--- a/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
+++ b/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
@@ -313,9 +313,18 @@
 export default {
     inject: ['getStream', 'resumeStream'],
     props: {
-        stationName: String,
-        libUrls: Array,
-        baseUri: String
+        stationName: {
+            type: String,
+            required: true
+        },
+        libUrls: {
+            type: Array,
+            default: []
+        },
+        baseUri: {
+            type: String,
+            required: true
+        }
     },
     data () {
         return {
diff --git a/frontend/vue/components/Public/WebDJ/VolumeSlider.vue b/frontend/vue/components/Public/WebDJ/VolumeSlider.vue
index 79bafd3ee..905805b96 100644
--- a/frontend/vue/components/Public/WebDJ/VolumeSlider.vue
+++ b/frontend/vue/components/Public/WebDJ/VolumeSlider.vue
@@ -26,7 +26,10 @@ import {onMounted, ref} from "vue";
 import {useVModel} from "@vueuse/core";
 
 const props = defineProps({
-    modelValue: String
+    modelValue: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/frontend/vue/components/Recover.vue b/frontend/vue/components/Recover.vue
index b46123811..3af178756 100644
--- a/frontend/vue/components/Recover.vue
+++ b/frontend/vue/components/Recover.vue
@@ -72,11 +72,17 @@ import {required} from '@vuelidate/validators';
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 
 const props = defineProps({
-    csrf: String,
-    error: String,
+    csrf: {
+        type: String,
+        required: true
+    },
+    error: {
+        type: String,
+        default: null
+    },
 });
 
-const {form, v$} = useVuelidateOnForm(
+const {v$} = useVuelidateOnForm(
     {
         password: {required, validatePassword}
     },
diff --git a/frontend/vue/components/Setup/Register.vue b/frontend/vue/components/Setup/Register.vue
index 82d70ad77..b2b82feba 100644
--- a/frontend/vue/components/Setup/Register.vue
+++ b/frontend/vue/components/Setup/Register.vue
@@ -104,8 +104,14 @@ import validatePassword from "~/functions/validatePassword";
 import useVuelidate from "@vuelidate/core";
 
 const props = defineProps({
-    csrf: String,
-    error: String,
+    csrf: {
+        type: String,
+        required: true
+    },
+    error: {
+        type: String,
+        default: null
+    },
 });
 
 const form = reactive({
diff --git a/frontend/vue/components/Setup/Settings.vue b/frontend/vue/components/Setup/Settings.vue
index 625cd3e3e..ede8c2774 100644
--- a/frontend/vue/components/Setup/Settings.vue
+++ b/frontend/vue/components/Setup/Settings.vue
@@ -29,7 +29,10 @@ import SetupStep from "./SetupStep";
 import InfoCard from "~/components/Common/InfoCard";
 
 const props = defineProps({
-    apiUrl: String,
+    apiUrl: {
+        type: String,
+        required: true
+    },
     releaseChannel: {
         type: String,
         default: 'rolling',
diff --git a/frontend/vue/components/Setup/SetupStep.vue b/frontend/vue/components/Setup/SetupStep.vue
index 77d7ec2e3..de706a55f 100644
--- a/frontend/vue/components/Setup/SetupStep.vue
+++ b/frontend/vue/components/Setup/SetupStep.vue
@@ -39,7 +39,10 @@
 import Icon from "~/components/Common/Icon";
 
 const props = defineProps({
-    step: Number
+    step: {
+        type: Number,
+        default: 1
+    }
 });
 
 const getStepperClass = (currentStep) => {
diff --git a/frontend/vue/components/Setup/Station.vue b/frontend/vue/components/Setup/Station.vue
index 69cfde9ee..00ae1bbf2 100644
--- a/frontend/vue/components/Setup/Station.vue
+++ b/frontend/vue/components/Setup/Station.vue
@@ -37,7 +37,10 @@ import stationFormProps from "~/components/Admin/Stations/stationFormProps";
 
 const props = defineProps({
     ...stationFormProps,
-    createUrl: String,
+    createUrl: {
+        type: String,
+        required: true
+    },
     continueUrl: {
         type: String,
         required: true
diff --git a/frontend/vue/components/Stations/BulkMedia.vue b/frontend/vue/components/Stations/BulkMedia.vue
index 00c6096fd..187562f96 100644
--- a/frontend/vue/components/Stations/BulkMedia.vue
+++ b/frontend/vue/components/Stations/BulkMedia.vue
@@ -155,13 +155,13 @@
 </template>
 
 <script>
-import FlowUpload from '~/components/Common/FlowUpload';
-
 export default {
     name: 'StationsBulkMedia',
-    components: {FlowUpload},
     props: {
-        apiUrl: String
+        apiUrl: {
+            type: String,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Stations/Fallback.vue b/frontend/vue/components/Stations/Fallback.vue
index 56eca360c..945e443c9 100644
--- a/frontend/vue/components/Stations/Fallback.vue
+++ b/frontend/vue/components/Stations/Fallback.vue
@@ -74,8 +74,14 @@ import {ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    apiUrl: String,
-    recordHasFallback: Boolean
+    apiUrl: {
+        type: String,
+        required: true
+    },
+    recordHasFallback: {
+        type: Boolean,
+        required: true
+    }
 });
 
 const hasFallback = ref(props.recordHasFallback);
diff --git a/frontend/vue/components/Stations/Help.vue b/frontend/vue/components/Stations/Help.vue
index c08fd2bf5..acd2c59f0 100644
--- a/frontend/vue/components/Stations/Help.vue
+++ b/frontend/vue/components/Stations/Help.vue
@@ -64,7 +64,10 @@ import LogList from "~/components/Common/LogList";
 import {ref} from "vue";
 
 const props = defineProps({
-    logsUrl: String,
+    logsUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const $modal = ref(); // BModal
diff --git a/frontend/vue/components/Stations/HlsStreams.vue b/frontend/vue/components/Stations/HlsStreams.vue
index 046d26d78..c24e81a20 100644
--- a/frontend/vue/components/Stations/HlsStreams.vue
+++ b/frontend/vue/components/Stations/HlsStreams.vue
@@ -85,7 +85,10 @@ import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
     ...mayNeedRestartProps,
-    listUrl: String
+    listUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Stations/HlsStreams/EditModal.vue b/frontend/vue/components/Stations/HlsStreams/EditModal.vue
index 8cde8bb21..126a7835c 100644
--- a/frontend/vue/components/Stations/HlsStreams/EditModal.vue
+++ b/frontend/vue/components/Stations/HlsStreams/EditModal.vue
@@ -28,7 +28,7 @@ export default {
     name: 'EditModal',
     components: {FormBasicInfo},
     mixins: [BaseEditModal],
-    emits: ['needs-restart'],
+    emits: ['relist', 'needs-restart'],
     setup() {
         const {form, resetForm, v$} = useVuelidateOnForm(
             {
diff --git a/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue b/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue
index 07d12c3f2..f25aa7d90 100644
--- a/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue
@@ -28,12 +28,12 @@
                     <template #label>
                         {{ $gettext('Audio Format') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
-                            :state="props.state"
+                            :state="slotProps.state"
                             :options="formatOptions"
                         />
                     </template>
@@ -46,12 +46,12 @@
                     <template #label>
                         {{ $gettext('Audio Bitrate (kbps)') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
-                            :state="props.state"
+                            :state="slotProps.state"
                             :options="bitrateOptions"
                         />
                     </template>
@@ -66,8 +66,14 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import {map} from "lodash";
 
 const props = defineProps({
-    form: Object,
-    stationFrontendType: String
+    form: {
+        type: Object,
+        required: true
+    },
+    stationFrontendType: {
+        type: String,
+        required: true
+    }
 });
 
 const formatOptions = [
diff --git a/frontend/vue/components/Stations/LiquidsoapConfig.vue b/frontend/vue/components/Stations/LiquidsoapConfig.vue
index 039262714..71e4e7b63 100644
--- a/frontend/vue/components/Stations/LiquidsoapConfig.vue
+++ b/frontend/vue/components/Stations/LiquidsoapConfig.vue
@@ -84,9 +84,18 @@ import {useNotify} from "~/vendor/bootstrapVue";
 
 const props = defineProps({
     ...mayNeedRestartProps,
-    settingsUrl: String,
-    config: Array,
-    sections: Array,
+    settingsUrl: {
+        type: String,
+        required: true
+    },
+    config: {
+        type: Array,
+        required: true
+    },
+    sections: {
+        type: Array,
+        required: true
+    },
 });
 
 const buildForm = () => {
diff --git a/frontend/vue/components/Stations/Media.vue b/frontend/vue/components/Stations/Media.vue
index 2dc58366e..165129544 100644
--- a/frontend/vue/components/Stations/Media.vue
+++ b/frontend/vue/components/Stations/Media.vue
@@ -303,10 +303,22 @@ export default {
             required: false,
             default: () => []
         },
-        stationTimeZone: String,
-        showSftp: Boolean,
-        sftpUrl: String,
-        supportsImmediateQueue: Boolean
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        showSftp: {
+            type: Boolean,
+            default: true
+        },
+        sftpUrl: {
+            type: String,
+            required: true
+        },
+        supportsImmediateQueue: {
+            type: Boolean,
+            required: true
+        }
     },
     data() {
         let fields = [
diff --git a/frontend/vue/components/Stations/Media/Breadcrumb.vue b/frontend/vue/components/Stations/Media/Breadcrumb.vue
index 8e3e8e035..561c93e43 100644
--- a/frontend/vue/components/Stations/Media/Breadcrumb.vue
+++ b/frontend/vue/components/Stations/Media/Breadcrumb.vue
@@ -7,7 +7,10 @@
             href="#"
             @click.prevent="changeDirectory('')"
         >{{ $gettext('Home') }}</a>
-        <template v-for="part in directoryParts">
+        <template
+            v-for="part in directoryParts"
+            :key="part.dir"
+        >
             &blacktriangleright;
             <a
                 href="#"
@@ -21,7 +24,10 @@
 import {computed} from "vue";
 
 const props = defineProps({
-    currentDirectory: String
+    currentDirectory: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['change-directory']);
diff --git a/frontend/vue/components/Stations/Media/EditModal.vue b/frontend/vue/components/Stations/Media/EditModal.vue
index cd235ba4b..0d72d9911 100644
--- a/frontend/vue/components/Stations/Media/EditModal.vue
+++ b/frontend/vue/components/Stations/Media/EditModal.vue
@@ -90,8 +90,14 @@ import {useAxios} from "~/vendor/axios";
 import {useNotify} from "~/vendor/bootstrapVue";
 
 const props = defineProps({
-    customFields: Array,
-    playlists: Array
+    customFields: {
+        type: Array,
+        required: true
+    },
+    playlists: {
+        type: Array,
+        required: true
+    }
 });
 
 const emit = defineEmits(['relist']);
diff --git a/frontend/vue/components/Stations/Media/FileUpload.vue b/frontend/vue/components/Stations/Media/FileUpload.vue
index 6f6b33671..683965cc1 100644
--- a/frontend/vue/components/Stations/Media/FileUpload.vue
+++ b/frontend/vue/components/Stations/Media/FileUpload.vue
@@ -16,9 +16,18 @@ export default {
     name: 'FileUpload',
     components: {FlowUpload},
     props: {
-        uploadUrl: String,
-        currentDirectory: String,
-        searchPhrase: String,
+        uploadUrl: {
+            type: String,
+            required: true
+        },
+        currentDirectory: {
+            type: String,
+            required: true
+        },
+        searchPhrase: {
+            type: String,
+            required: true
+        },
         validMimeTypes: {
             type: Array,
             default() {
@@ -26,6 +35,7 @@ export default {
             }
         }
     },
+    emits: ['relist'],
     data() {
         return {
             flow: null,
diff --git a/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue b/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue
index 3a153fe00..04c116281 100644
--- a/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue
+++ b/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue
@@ -121,7 +121,13 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object,
-    songLength: String
+    form: {
+        type: Object,
+        required: true
+    },
+    songLength: {
+        type: String,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Media/Form/AlbumArt.vue b/frontend/vue/components/Stations/Media/Form/AlbumArt.vue
index b1ade2ff7..d537ece9c 100644
--- a/frontend/vue/components/Stations/Media/Form/AlbumArt.vue
+++ b/frontend/vue/components/Stations/Media/Form/AlbumArt.vue
@@ -39,7 +39,10 @@ import {syncRef} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    albumArtUrl: String
+    albumArtUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const albumArtSrc = ref(null);
diff --git a/frontend/vue/components/Stations/Media/Form/BasicInfo.vue b/frontend/vue/components/Stations/Media/Form/BasicInfo.vue
index 49524d36e..11b7f310a 100644
--- a/frontend/vue/components/Stations/Media/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Media/Form/BasicInfo.vue
@@ -85,6 +85,9 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Media/Form/CustomFields.vue b/frontend/vue/components/Stations/Media/Form/CustomFields.vue
index e7d1af886..6ba1a0282 100644
--- a/frontend/vue/components/Stations/Media/Form/CustomFields.vue
+++ b/frontend/vue/components/Stations/Media/Form/CustomFields.vue
@@ -20,7 +20,13 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object,
-    customFields: Array
+    form: {
+        type: Object,
+        required: true
+    },
+    customFields: {
+        type: Array,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Media/Form/Playlists.vue b/frontend/vue/components/Stations/Media/Form/Playlists.vue
index 4b0a310b7..fe1c98ff5 100644
--- a/frontend/vue/components/Stations/Media/Form/Playlists.vue
+++ b/frontend/vue/components/Stations/Media/Form/Playlists.vue
@@ -9,10 +9,10 @@
                 <template #label>
                     {{ $gettext('Playlists') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-checkbox-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         :options="options"
                         stacked
                     />
@@ -28,8 +28,14 @@ import {map} from "lodash";
 import {computed} from "vue";
 
 const props = defineProps({
-    form: Object,
-    playlists: Array
+    form: {
+        type: Object,
+        required: true
+    },
+    playlists: {
+        type: Array,
+        required: true
+    }
 });
 
 const options = computed(() => {
diff --git a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
index 38f793fa7..6e866c8a6 100644
--- a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
+++ b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
@@ -85,9 +85,18 @@ import Icon from '~/components/Common/Icon';
 import {ref} from "vue";
 
 const props = defineProps({
-    form: Object,
-    audioUrl: String,
-    waveformUrl: String
+    form: {
+        type: Object,
+        required: true
+    },
+    audioUrl: {
+        type: String,
+        required: true
+    },
+    waveformUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const $waveform = ref(); // Waveform
diff --git a/frontend/vue/components/Stations/Media/MediaToolbar.vue b/frontend/vue/components/Stations/Media/MediaToolbar.vue
index 58d37fc18..23678755a 100644
--- a/frontend/vue/components/Stations/Media/MediaToolbar.vue
+++ b/frontend/vue/components/Stations/Media/MediaToolbar.vue
@@ -23,6 +23,7 @@
                     >
                         <div
                             v-for="playlist in playlists"
+                            :key="playlist.id"
                             class="form-group"
                         >
                             <div class="custom-control custom-checkbox">
@@ -156,13 +157,29 @@ export default {
     name: 'StationMediaToolbar',
     components: {Icon},
     props: {
-        currentDirectory: String,
-        selectedItems: Object,
-        playlists: Array,
-        batchUrl: String,
-        supportsImmediateQueue: Boolean
+        currentDirectory: {
+            type: String,
+            required: true
+        },
+        selectedItems: {
+            type: Object,
+            required: true
+        },
+        playlists: {
+            type: Array,
+            default: []
+        },
+        batchUrl: {
+            type: String,
+            required: true
+        },
+        supportsImmediateQueue: {
+            type: Boolean,
+            required: true
+        }
     },
-    data () {
+    emits: ['relist', 'add-playlist'],
+    data() {
         return {
             checkedPlaylists: [],
             newPlaylist: '',
diff --git a/frontend/vue/components/Stations/Media/MoveFilesModal.vue b/frontend/vue/components/Stations/Media/MoveFilesModal.vue
index c69936759..6466ef30f 100644
--- a/frontend/vue/components/Stations/Media/MoveFilesModal.vue
+++ b/frontend/vue/components/Stations/Media/MoveFilesModal.vue
@@ -80,17 +80,30 @@ export default {
     name: 'MoveFilesModal',
     components: {Icon, DataTable},
     props: {
-        selectedItems: Object,
-        currentDirectory: String,
-        batchUrl: String,
-        listDirectoriesUrl: String
+        selectedItems: {
+            type: Object,
+            required: true
+        },
+        currentDirectory: {
+            type: String,
+            required: true
+        },
+        batchUrl: {
+            type: String,
+            required: true
+        },
+        listDirectoriesUrl: {
+            type: String,
+            required: true
+        }
     },
-    data () {
+    emits: ['relist'],
+    data() {
         return {
             destinationDirectory: '',
             dirHistory: [],
             fields: [
-                { key: 'directory', label: this.$gettext('Directory'), sortable: false }
+                {key: 'directory', label: this.$gettext('Directory'), sortable: false}
             ]
         };
     },
diff --git a/frontend/vue/components/Stations/Media/NewDirectoryModal.vue b/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
index 07aebfa58..d255bceb3 100644
--- a/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
+++ b/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
@@ -41,9 +41,16 @@ export default {
     name: 'NewDirectoryModal',
     components: {BWrappedFormGroup},
     props: {
-        currentDirectory: String,
-        mkdirUrl: String
+        currentDirectory: {
+            type: String,
+            required: true
+        },
+        mkdirUrl: {
+            type: String,
+            required: true
+        }
     },
+    emits: ['relist'],
     setup() {
         return {v$: useVuelidate()}
     },
diff --git a/frontend/vue/components/Stations/Media/RenameModal.vue b/frontend/vue/components/Stations/Media/RenameModal.vue
index bdb00822e..dfc7aa765 100644
--- a/frontend/vue/components/Stations/Media/RenameModal.vue
+++ b/frontend/vue/components/Stations/Media/RenameModal.vue
@@ -41,8 +41,12 @@ export default {
     name: 'RenameModal',
     components: {BWrappedFormGroup},
     props: {
-        renameUrl: String
+        renameUrl: {
+            type: String,
+            required: true
+        }
     },
+    emits: ['relist'],
     setup() {
         return {v$: useVuelidate()}
     },
diff --git a/frontend/vue/components/Stations/Mounts.vue b/frontend/vue/components/Stations/Mounts.vue
index a63026954..f19e53536 100644
--- a/frontend/vue/components/Stations/Mounts.vue
+++ b/frontend/vue/components/Stations/Mounts.vue
@@ -97,9 +97,18 @@ import showFormatAndBitrate from "~/functions/showFormatAndBitrate";
 
 const props = defineProps({
     ...mayNeedRestartProps,
-    listUrl: String,
-    newIntroUrl: String,
-    stationFrontendType: String,
+    listUrl: {
+        type: String,
+        required: true
+    },
+    newIntroUrl: {
+        type: String,
+        required: true
+    },
+    stationFrontendType: {
+        type: String,
+        required: true
+    },
     showAdvanced: {
         type: Boolean,
         default: true
diff --git a/frontend/vue/components/Stations/Mounts/EditModal.vue b/frontend/vue/components/Stations/Mounts/EditModal.vue
index 668f9bda9..1a8e1d40c 100644
--- a/frontend/vue/components/Stations/Mounts/EditModal.vue
+++ b/frontend/vue/components/Stations/Mounts/EditModal.vue
@@ -51,14 +51,20 @@ export default {
     components: {MountFormIntro, MountFormAdvanced, MountFormAutoDj, MountFormBasicInfo},
     mixins: [BaseEditModal],
     props: {
-        stationFrontendType: String,
-        newIntroUrl: String,
+        stationFrontendType: {
+            type: String,
+            required: true
+        },
+        newIntroUrl: {
+            type: String,
+            required: true
+        },
         showAdvanced: {
             type: Boolean,
             default: true
         },
     },
-    emits: ['needs-restart'],
+    emits: ['relist', 'needs-restart'],
     setup() {
         return {v$: useVuelidate()}
     },
@@ -143,7 +149,7 @@ export default {
             this.record = d;
             this.form = mergeExisting(this.form, d);
         },
-        onSubmitSuccess(response) {
+        onSubmitSuccess() {
             this.$notifySuccess();
 
             this.$emit('needs-restart');
diff --git a/frontend/vue/components/Stations/Mounts/Form/Advanced.vue b/frontend/vue/components/Stations/Mounts/Form/Advanced.vue
index e689353e6..37ac34243 100644
--- a/frontend/vue/components/Stations/Mounts/Form/Advanced.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/Advanced.vue
@@ -52,8 +52,14 @@ export default {
     name: 'MountFormAdvanced',
     components: {BWrappedFormGroup},
     props: {
-        form: Object,
-        stationFrontendType: String
+        form: {
+            type: Object,
+            required: true
+        },
+        stationFrontendType: {
+            type: String,
+            required: true
+        }
     },
     computed: {
         isIcecast() {
diff --git a/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue b/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue
index 048206364..fb6c79d2b 100644
--- a/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue
@@ -28,12 +28,12 @@
                     <template #label>
                         {{ $gettext('AutoDJ Format') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
-                            :state="props.state"
+                            :state="slotProps.state"
                             :options="formatOptions"
                         />
                     </template>
@@ -47,12 +47,12 @@
                     <template #label>
                         {{ $gettext('AutoDJ Bitrate (kbps)') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
-                            :state="props.state"
+                            :state="slotProps.state"
                             :options="bitrateOptions"
                         />
                     </template>
@@ -71,8 +71,14 @@ export default {
     name: 'MountFormAutoDj',
     components: {BWrappedFormCheckbox, BWrappedFormGroup},
     props: {
-        form: Object,
-        stationFrontendType: String
+        form: {
+            type: Object,
+            required: true
+        },
+        stationFrontendType: {
+            type: String,
+            required: true
+        }
     },
     computed: {
         formatOptions() {
diff --git a/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue b/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue
index 86726db46..8b3a3ae20 100644
--- a/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue
@@ -156,8 +156,14 @@ export default {
     name: 'MountFormBasicInfo',
     components: {BWrappedFormCheckbox, BWrappedFormGroup},
     props: {
-        form: Object,
-        stationFrontendType: String
+        form: {
+            type: Object,
+            required: true
+        },
+        stationFrontendType: {
+            type: String,
+            required: true
+        }
     },
     computed: {
         langAuthhashDesc() {
diff --git a/frontend/vue/components/Stations/Mounts/Form/Intro.vue b/frontend/vue/components/Stations/Mounts/Form/Intro.vue
index 55f1427c1..df45ddd6c 100644
--- a/frontend/vue/components/Stations/Mounts/Form/Intro.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/Intro.vue
@@ -63,10 +63,22 @@ import {computed, toRef} from "vue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    modelValue: Object,
-    recordHasIntro: Boolean,
-    editIntroUrl: String,
-    newIntroUrl: String
+    modelValue: {
+        type: Object,
+        required: true
+    },
+    recordHasIntro: {
+        type: Boolean,
+        required: true
+    },
+    editIntroUrl: {
+        type: String,
+        required: true
+    },
+    newIntroUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/frontend/vue/components/Stations/Playlists.vue b/frontend/vue/components/Stations/Playlists.vue
index f721785af..52c59923d 100644
--- a/frontend/vue/components/Stations/Playlists.vue
+++ b/frontend/vue/components/Stations/Playlists.vue
@@ -100,7 +100,10 @@
                                 <b-dropdown-item @click.prevent="doClone(row.item.name, row.item.links.clone)">
                                     {{ $gettext('Duplicate') }}
                                 </b-dropdown-item>
-                                <template v-for="format in ['pls', 'm3u']">
+                                <template
+                                    v-for="format in ['pls', 'm3u']"
+                                    :key="format"
+                                >
                                     <b-dropdown-item
                                         :href="row.item.links.export[format]"
                                         target="_blank"
@@ -230,13 +233,34 @@ export default {
     name: 'StationPlaylists',
     components: {CloneModal, Icon, QueueModal, ImportModal, ReorderModal, EditModal, Schedule, DataTable},
     props: {
-        listUrl: String,
-        scheduleUrl: String,
-        filesUrl: String,
-        restartStatusUrl: String,
-        stationTimeZone: String,
-        useManualAutoDj: Boolean,
-        enableAdvancedFeatures: Boolean
+        listUrl: {
+            type: String,
+            required: true
+        },
+        scheduleUrl: {
+            type: String,
+            required: true
+        },
+        filesUrl: {
+            type: String,
+            required: true
+        },
+        restartStatusUrl: {
+            type: String,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        useManualAutoDj: {
+            type: Boolean,
+            required: true
+        },
+        enableAdvancedFeatures: {
+            type: Boolean,
+            required: true
+        }
     },
     data () {
         return {
@@ -280,16 +304,22 @@ export default {
                     return this.$gettext('General Rotation') + '<br>' + this.$gettext('Weight') + ': ' + record.weight;
 
                 case 'once_per_x_songs':
-                    let oncePerSongs = this.$gettext('Once per %{songs} Songs');
-                    return this.$gettextInterpolate(oncePerSongs, { songs: record.play_per_songs });
+                    return this.$gettext(
+                        'Once per %{songs} Songs',
+                        {songs: record.play_per_songs}
+                    );
 
                 case 'once_per_x_minutes':
-                    let oncePerMinutes = this.$gettext('Once per %{minutes} Minutes');
-                    return this.$gettextInterpolate(oncePerMinutes, { minutes: record.play_per_minutes });
+                    return this.$gettext(
+                        'Once per %{minutes} Minutes',
+                        {minutes: record.play_per_minutes}
+                    );
 
                 case 'once_per_hour':
-                    let oncePerHour = this.$gettext('Once per Hour (at %{minute})');
-                    return this.$gettextInterpolate(oncePerHour, { minute: record.play_per_hour_minute });
+                    return this.$gettext(
+                        'Once per Hour (at %{minute})',
+                        {minute: record.play_per_hour_minute}
+                    );
 
                 default:
                     return this.$gettext('Custom');
diff --git a/frontend/vue/components/Stations/Playlists/CloneModal.vue b/frontend/vue/components/Stations/Playlists/CloneModal.vue
index 2aede5fc0..8b4970017 100644
--- a/frontend/vue/components/Stations/Playlists/CloneModal.vue
+++ b/frontend/vue/components/Stations/Playlists/CloneModal.vue
@@ -27,10 +27,10 @@
                 <template #label>
                     {{ $gettext('Customize Copy') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-checkbox-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                     >
                         <b-form-checkbox value="media">
@@ -49,13 +49,12 @@
 <script>
 import useVuelidate from "@vuelidate/core";
 import {required} from '@vuelidate/validators';
-import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import ModalForm from "~/components/Common/ModalForm";
 
 export default {
     name: 'CloneModal',
-    components: {ModalForm, BWrappedFormGroup, InvisibleSubmitButton},
+    components: {ModalForm, BWrappedFormGroup},
     emits: ['relist', 'needs-restart'],
     setup() {
         return {v$: useVuelidate()}
diff --git a/frontend/vue/components/Stations/Playlists/EditModal.vue b/frontend/vue/components/Stations/Playlists/EditModal.vue
index 1f0e822f4..8deff5c23 100644
--- a/frontend/vue/components/Stations/Playlists/EditModal.vue
+++ b/frontend/vue/components/Stations/Playlists/EditModal.vue
@@ -39,10 +39,16 @@ export default {
     components: {FormSchedule, FormBasicInfo, FormAdvanced},
     mixins: [BaseEditModal],
     props: {
-        stationTimeZone: String,
-        enableAdvancedFeatures: Boolean
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        enableAdvancedFeatures: {
+            type: Boolean,
+            required: true
+        }
     },
-    emits: ['needs-restart'],
+    emits: ['relist', 'needs-restart'],
     setup() {
         return {v$: useVuelidate()}
     },
diff --git a/frontend/vue/components/Stations/Playlists/Form/Advanced.vue b/frontend/vue/components/Stations/Playlists/Form/Advanced.vue
index 4faa77035..35436949a 100644
--- a/frontend/vue/components/Stations/Playlists/Form/Advanced.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/Advanced.vue
@@ -13,10 +13,10 @@
                     <template #description>
                         {{ $gettext('Control how this playlist is handled by the AutoDJ software.') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-checkbox-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                         >
                             <b-form-checkbox value="interrupt">
@@ -40,6 +40,9 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue b/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue
index 7641f6e7c..dbe886a5f 100644
--- a/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue
@@ -38,10 +38,10 @@
                     <template #label>
                         {{ $gettext('Source') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
                         >
                             <b-form-radio value="songs">
@@ -111,10 +111,10 @@
                                     $gettext('If requests are enabled for your station, users will be able to request media that is on this playlist.')
                                 }}
                             </template>
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-checkbox
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                 >
                                     {{ $gettext('Allow Requests from This Playlist') }}
                                 </b-form-checkbox>
@@ -131,10 +131,10 @@
                                     $gettext('Enable this setting to prevent metadata from being sent to the AutoDJ for files in this playlist. This is useful if the playlist contains jingles or bumpers.')
                                 }}
                             </template>
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-checkbox
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                 >
                                     {{ $gettext('Hide Metadata from Listeners ("Jingle Mode")') }}
                                 </b-form-checkbox>
@@ -149,10 +149,10 @@
                             <template #label>
                                 {{ $gettext('Playlist Type') }}
                             </template>
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-radio-group
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                     stacked
                                 >
                                     <b-form-radio value="default">
@@ -197,10 +197,10 @@
                             <template #label>
                                 {{ $gettext('Song Playback Order') }}
                             </template>
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-radio-group
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                     stacked
                                 >
                                     <b-form-radio value="shuffle">
@@ -247,12 +247,12 @@
                                         $gettext('Higher weight playlists are played more frequently compared to other lower-weight playlists.')
                                     }}
                                 </template>
-                                <template #default="props">
+                                <template #default="slotProps">
                                     <b-form-select
-                                        :id="props.id"
-                                        v-model="props.field.$model"
+                                        :id="slotProps.id"
+                                        v-model="slotProps.field.$model"
                                         :options="weightOptions"
-                                        :state="props.state"
+                                        :state="slotProps.state"
                                     />
                                 </template>
                             </b-wrapped-form-group>
@@ -372,10 +372,10 @@
                             <template #label>
                                 {{ $gettext('Remote URL Type') }}
                             </template>
-                            <template #default="props">
+                            <template #default="slotProps">
                                 <b-form-radio-group
-                                    :id="props.id"
-                                    v-model="props.field.$model"
+                                    :id="slotProps.id"
+                                    v-model="slotProps.field.$model"
                                     stacked
                                 >
                                     <b-form-radio value="stream">
@@ -401,7 +401,7 @@
                                     $gettext('The length of playback time that Liquidsoap should buffer when playing this remote playlist. Shorter times may lead to intermittent playback on unstable connections.')
                                 }}
                             </template>
-                            <template #default="props">
+                            <template #default>
                                 <b-form-input
                                     id="form_edit_remote_buffer"
                                     v-model="form.remote_buffer.$model"
@@ -428,7 +428,10 @@ export default {
     name: 'PlaylistEditBasicInfo',
     components: {BFormFieldset, BWrappedFormCheckbox, BWrappedFormGroup},
     props: {
-        form: Object
+        form: {
+            type: Object,
+            required: true
+        }
     },
     data() {
         let weightOptions = [
diff --git a/frontend/vue/components/Stations/Playlists/Form/Schedule.vue b/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
index 01b8e5a0c..422643629 100644
--- a/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
@@ -35,20 +35,27 @@
 
 <script>
 import Icon from '~/components/Common/Icon';
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
-import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 import PlaylistsFormScheduleRow from "~/components/Stations/Playlists/Form/ScheduleRow.vue";
 
 export default {
     name: 'PlaylistEditSchedule',
-    components: {PlaylistsFormScheduleRow, BWrappedFormCheckbox, BWrappedFormGroup, Icon},
+    components: {PlaylistsFormScheduleRow, Icon},
     props: {
-        form: Object,
-        stationTimeZone: String,
-        scheduleItems: Array
+        form: {
+            type: Object,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        scheduleItems: {
+            type: Array,
+            default: []
+        }
     },
     methods: {
-        add () {
+        add() {
             this.scheduleItems.push({
                 start_time: null,
                 end_time: null,
diff --git a/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue b/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue
index d1613aac4..bb866c586 100644
--- a/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue
@@ -35,11 +35,11 @@
                         <template #description>
                             {{ $gettext('To play once per day, set the start and end times to the same value.') }}.00
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <playlist-time
-                                :id="props.id"
-                                v-model="props.field.$model"
-                                :state="props.state"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
+                                :state="slotProps.state"
                             />
                         </template>
                     </b-wrapped-form-group>
@@ -57,11 +57,11 @@
                                 $gettext('If the end time is before the start time, the playlist will play overnight.')
                             }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <playlist-time
-                                :id="props.id"
-                                v-model="props.field.$model"
-                                :state="props.state"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
+                                :state="slotProps.state"
                             />
                         </template>
                     </b-wrapped-form-group>
@@ -91,12 +91,12 @@
                                 $gettext('To set this schedule to run only within a certain date range, specify a start and end date.')
                             }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <b-form-input
-                                :id="props.id"
-                                v-model="props.field.$model"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
                                 type="date"
-                                :state="props.state"
+                                :state="slotProps.state"
                             />
                         </template>
                     </b-wrapped-form-group>
@@ -109,12 +109,12 @@
                         <template #label>
                             {{ $gettext('End Date') }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <b-form-input
-                                :id="props.id"
-                                v-model="props.field.$model"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
                                 type="date"
-                                :state="props.state"
+                                :state="slotProps.state"
                             />
                         </template>
                     </b-wrapped-form-group>
@@ -143,7 +143,7 @@
                         <template #description>
                             {{ $gettext('Leave blank to play on every day of the week.') }}
                         </template>
-                        <template #default="props">
+                        <template #default>
                             <b-checkbox-group
                                 :id="'edit_form_days_'+index"
                                 v-model="v$.row.days.$model"
@@ -170,9 +170,18 @@ export default {
     name: 'PlaylistsFormScheduleRow',
     components: {BWrappedFormCheckbox, BWrappedFormGroup, Icon, PlaylistTime},
     props: {
-        index: Number,
-        row: Object,
-        stationTimeZone: String,
+        index: {
+            type: Number,
+            required: true
+        },
+        row: {
+            type: Object,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
     },
     emits: ['remove'],
     setup() {
diff --git a/frontend/vue/components/Stations/Playlists/ImportModal.vue b/frontend/vue/components/Stations/Playlists/ImportModal.vue
index cd2b6b9ed..078f10549 100644
--- a/frontend/vue/components/Stations/Playlists/ImportModal.vue
+++ b/frontend/vue/components/Stations/Playlists/ImportModal.vue
@@ -96,8 +96,9 @@ import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
 
 export default {
     name: 'PlaylistImportModal',
-    components: { InvisibleSubmitButton },
-    data () {
+    components: {InvisibleSubmitButton},
+    emits: ['relist'],
+    data() {
         return {
             importPlaylistUrl: null,
             playlistFile: null,
@@ -105,7 +106,7 @@ export default {
         };
     },
     methods: {
-        open (importPlaylistUrl) {
+        open(importPlaylistUrl) {
             this.playlistFile = null;
             this.importPlaylistUrl = importPlaylistUrl;
 
diff --git a/frontend/vue/components/Stations/Playlists/QueueModal.vue b/frontend/vue/components/Stations/Playlists/QueueModal.vue
index 584274368..2daa19574 100644
--- a/frontend/vue/components/Stations/Playlists/QueueModal.vue
+++ b/frontend/vue/components/Stations/Playlists/QueueModal.vue
@@ -31,7 +31,7 @@
                 </b-thead>
                 <b-tbody>
                     <tr
-                        v-for="(row,index) in media"
+                        v-for="row in media"
                         :key="row.id"
                         class="align-middle"
                     >
diff --git a/frontend/vue/components/Stations/Playlists/ReorderModal.vue b/frontend/vue/components/Stations/Playlists/ReorderModal.vue
index c40569fd6..efa16ea6e 100644
--- a/frontend/vue/components/Stations/Playlists/ReorderModal.vue
+++ b/frontend/vue/components/Stations/Playlists/ReorderModal.vue
@@ -47,7 +47,7 @@
                 >
                     <tr
                         v-for="(row,index) in media"
-                        :key="media.id"
+                        :key="row.media.id"
                         class="align-middle"
                     >
                         <td class="pr-2">
diff --git a/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue b/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue
index da56690fe..4661648e7 100644
--- a/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue
+++ b/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue
@@ -49,13 +49,24 @@
 
 import {computed, ref, toRef, watch} from "vue";
 import {useAxios} from "~/vendor/axios";
-import {syncRef} from "@vueuse/core";
 
 const props = defineProps({
-    modelValue: Object,
-    artworkSrc: String,
-    editArtUrl: String,
-    newArtUrl: String,
+    modelValue: {
+        type: Object,
+        required: true
+    },
+    artworkSrc: {
+        type: String,
+        required: true
+    },
+    editArtUrl: {
+        type: String,
+        required: true
+    },
+    newArtUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
index 783b72f59..2a14c2fee 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
@@ -47,11 +47,26 @@ export default {
     components: {EpisodeFormMedia, PodcastCommonArtwork, EpisodeFormBasicInfo},
     mixins: [BaseEditModal],
     props: {
-        stationTimeZone: String,
-        locale: String,
-        podcastId: String,
-        newArtUrl: String,
-        newMediaUrl: String
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        locale: {
+            type: String,
+            required: true
+        },
+        podcastId: {
+            type: String,
+            required: true
+        },
+        newArtUrl: {
+            type: String,
+            required: true
+        },
+        newMediaUrl: {
+            type: String,
+            required: true
+        }
     },
     setup() {
         return {v$: useVuelidate()}
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue b/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue
index c82d91335..e6e1b13b9 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue
@@ -55,11 +55,11 @@
                     <template #description>
                         {{ $gettext('The date when the episode should be published.') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-datepicker
-                            :id="props.id"
-                            v-model="props.field.$model"
-                            :state="props.state"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
+                            :state="slotProps.state"
                             :locale="locale"
                         />
                     </template>
@@ -78,11 +78,11 @@
                             $gettext('The time when the episode should be published (according to the stations timezone).')
                         }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-timepicker
-                            :id="props.id"
-                            v-model="props.field.$model"
-                            :state="props.state"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
+                            :state="slotProps.state"
                             :locale="locale"
                         />
                     </template>
@@ -112,7 +112,13 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 
 const props = defineProps({
-    form: Object,
-    locale: String
+    form: {
+        type: Object,
+        required: true
+    },
+    locale: {
+        type: String,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue b/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue
index fa158cf93..b34cec39f 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue
@@ -63,11 +63,26 @@ import {useAxios} from "~/vendor/axios";
 import {syncRef} from "@vueuse/core";
 
 const props = defineProps({
-    modelValue: Object,
-    recordHasMedia: Boolean,
-    downloadUrl: String,
-    editMediaUrl: String,
-    newMediaUrl: String
+    modelValue: {
+        type: Object,
+        required: true
+    },
+    recordHasMedia: {
+        type: Boolean,
+        required: true
+    },
+    downloadUrl: {
+        type: String,
+        required: true
+    },
+    editMediaUrl: {
+        type: String,
+        required: true
+    },
+    newMediaUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodesView.vue b/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
index 025fd2125..d3e40fb6c 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
@@ -123,17 +123,18 @@ import DataTable from '~/components/Common/DataTable';
 import EditModal from './EpisodeEditModal';
 import Icon from '~/components/Common/Icon';
 import AlbumArt from '~/components/Common/AlbumArt';
-import EpisodeFormBasicInfo from './EpisodeForm/BasicInfo';
-import PodcastCommonArtwork from './Common/Artwork';
 import StationsCommonQuota from "~/components/Stations/Common/Quota";
 import episodesViewProps from "~/components/Stations/Podcasts/episodesViewProps";
 
 export default {
     name: 'EpisodesView',
-    components: {StationsCommonQuota, PodcastCommonArtwork, EpisodeFormBasicInfo, AlbumArt, Icon, EditModal, DataTable},
+    components: {StationsCommonQuota, AlbumArt, Icon, EditModal, DataTable},
     props: {
         ...episodesViewProps,
-        podcast: Object
+        podcast: {
+            type: Object,
+            required: true
+        }
     },
     emits: ['clear-podcast'],
     data() {
diff --git a/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue b/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
index fc8109da7..4305b0389 100644
--- a/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
+++ b/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
@@ -41,10 +41,22 @@ export default {
     components: {PodcastCommonArtwork, PodcastFormBasicInfo},
     mixins: [BaseEditModal],
     props: {
-        stationTimeZone: String,
-        languageOptions: Object,
-        categoriesOptions: Object,
-        newArtUrl: String
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        languageOptions: {
+            type: Object,
+            required: true
+        },
+        categoriesOptions: {
+            type: Object,
+            required: true
+        },
+        newArtUrl: {
+            type: String,
+            required: true
+        }
     },
     setup() {
         return {v$: useVuelidate()}
diff --git a/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue b/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue
index cbdb55439..7ae3eb1a0 100644
--- a/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue
@@ -55,12 +55,12 @@
                     <template #description>
                         {{ $gettext('The language spoken on the podcast.') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-select
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             :options="languageOptions"
-                            :state="props.state"
+                            :state="slotProps.state"
                         />
                     </template>
                 </b-wrapped-form-group>
@@ -107,12 +107,12 @@
                     <template #description>
                         {{ $gettext('Select the category/categories that best reflects the content of your podcast.') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-select
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             :options="categoriesOptions"
-                            :state="props.state"
+                            :state="slotProps.state"
                             multiple
                         />
                     </template>
@@ -126,8 +126,17 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object,
-    languageOptions: Object,
-    categoriesOptions: Object
+    form: {
+        type: Object,
+        required: true
+    },
+    languageOptions: {
+        type: Object,
+        required: true
+    },
+    categoriesOptions: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Profile.vue b/frontend/vue/components/Stations/Profile.vue
index 53fe409b3..389409ec4 100644
--- a/frontend/vue/components/Stations/Profile.vue
+++ b/frontend/vue/components/Stations/Profile.vue
@@ -97,10 +97,22 @@ const props = defineProps({
     ...publicPagesPanelProps,
     ...requestsPanelProps,
     ...streamersPanelProps,
-    profileApiUri: String,
-    stationTimeZone: String,
-    stationSupportsRequests: Boolean,
-    stationSupportsStreamers: Boolean
+    profileApiUri: {
+        type: String,
+        required: true
+    },
+    stationTimeZone: {
+        type: String,
+        required: true
+    },
+    stationSupportsRequests: {
+        type: Boolean,
+        required: true
+    },
+    stationSupportsStreamers: {
+        type: Boolean,
+        required: true
+    }
 });
 
 const np = shallowRef({
diff --git a/frontend/vue/components/Stations/Profile/BackendPanel.vue b/frontend/vue/components/Stations/Profile/BackendPanel.vue
index 116d8e42b..4f1649c63 100644
--- a/frontend/vue/components/Stations/Profile/BackendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/BackendPanel.vue
@@ -78,7 +78,10 @@ import backendPanelProps from "~/components/Stations/Profile/backendPanelProps";
 
 const props = defineProps({
     ...backendPanelProps,
-    np: Object
+    np: {
+        type: Object,
+        required: true
+    }
 });
 
 const {$gettext, $ngettext} = useTranslate();
diff --git a/frontend/vue/components/Stations/Profile/FrontendPanel.vue b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
index 0e07d4140..7a2d41e16 100644
--- a/frontend/vue/components/Stations/Profile/FrontendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
@@ -139,7 +139,10 @@ import frontendPanelProps from "~/components/Stations/Profile/frontendPanelProps
 
 const props = defineProps({
     ...frontendPanelProps,
-    np: Object
+    np: {
+        type: Object,
+        required: true
+    }
 });
 
 const frontendName = computed(() => {
diff --git a/frontend/vue/components/Stations/Profile/HeaderPanel.vue b/frontend/vue/components/Stations/Profile/HeaderPanel.vue
index 71c8fbba9..30a579db8 100644
--- a/frontend/vue/components/Stations/Profile/HeaderPanel.vue
+++ b/frontend/vue/components/Stations/Profile/HeaderPanel.vue
@@ -50,6 +50,9 @@ import headerPanelProps from "~/components/Stations/Profile/headerPanelProps";
 
 const props = defineProps({
     ...headerPanelProps,
-    np: Object
+    np: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
index fb60f1fc5..20041bf23 100644
--- a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
+++ b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
@@ -212,7 +212,10 @@ import nowPlayingPanelProps from "~/components/Stations/Profile/nowPlayingPanelP
 
 const props = defineProps({
     ...nowPlayingPanelProps,
-    np: Object
+    np: {
+        type: Object,
+        required: true
+    }
 });
 
 const npElapsed = ref(0);
diff --git a/frontend/vue/components/Stations/Profile/SchedulePanel.vue b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
index b5ede9c6f..8b09a5990 100644
--- a/frontend/vue/components/Stations/Profile/SchedulePanel.vue
+++ b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
@@ -12,7 +12,10 @@
             </div>
             <table class="table table-striped mb-0">
                 <tbody>
-                    <tr v-for="row in processedScheduleItems">
+                    <tr
+                        v-for="row in processedScheduleItems"
+                        :key="row.id"
+                    >
                         <td>
                             <div class="d-flex w-100 justify-content-between align-items-center">
                                 <h5 class="m-0">
@@ -58,8 +61,14 @@ import {computed} from "vue";
 import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
-    scheduleItems: Array,
-    stationTimeZone: String
+    scheduleItems: {
+        type: Array,
+        required: true
+    },
+    stationTimeZone: {
+        type: String,
+        required: true
+    }
 });
 
 const {timeConfig} = useAzuraCast();
diff --git a/frontend/vue/components/Stations/Profile/StreamsPanel.vue b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
index bd577dd63..f42337f1e 100644
--- a/frontend/vue/components/Stations/Profile/StreamsPanel.vue
+++ b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
@@ -28,6 +28,7 @@
                 <tbody>
                     <tr
                         v-for="mount in np.station.mounts"
+                        :key="mount.id"
                         class="align-middle"
                     >
                         <td class="pr-1">
@@ -75,6 +76,7 @@
                 <tbody>
                     <tr
                         v-for="remote in np.station.remotes"
+                        :key="remote.id"
                         class="align-middle"
                     >
                         <td class="pr-1">
@@ -176,6 +178,9 @@ import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 
 const props = defineProps({
-    np: Object
+    np: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/ProfileEdit.vue b/frontend/vue/components/Stations/ProfileEdit.vue
index d8960e9f0..125246bbf 100644
--- a/frontend/vue/components/Stations/ProfileEdit.vue
+++ b/frontend/vue/components/Stations/ProfileEdit.vue
@@ -26,7 +26,10 @@ import stationFormProps from "~/components/Admin/Stations/stationFormProps";
 
 const props = defineProps({
     ...stationFormProps,
-    editUrl: String,
+    editUrl: {
+        type: String,
+        required: true
+    },
     continueUrl: {
         type: String,
         required: true
diff --git a/frontend/vue/components/Stations/Queue.vue b/frontend/vue/components/Stations/Queue.vue
index 3e47ba6b8..bd2e77cb0 100644
--- a/frontend/vue/components/Stations/Queue.vue
+++ b/frontend/vue/components/Stations/Queue.vue
@@ -81,9 +81,18 @@ export default {
     name: 'StationQueue',
     components: {QueueLogsModal, DataTable, Icon},
     props: {
-        listUrl: String,
-        clearUrl: String,
-        stationTimeZone: String
+        listUrl: {
+            type: String,
+            required: true
+        },
+        clearUrl: {
+            type: String,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Stations/Remotes.vue b/frontend/vue/components/Stations/Remotes.vue
index 680a53246..cbf35cc98 100644
--- a/frontend/vue/components/Stations/Remotes.vue
+++ b/frontend/vue/components/Stations/Remotes.vue
@@ -96,7 +96,10 @@ import showFormatAndBitrate from "~/functions/showFormatAndBitrate";
 
 const props = defineProps({
     ...mayNeedRestartProps,
-    listUrl: String,
+    listUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Stations/Remotes/EditModal.vue b/frontend/vue/components/Stations/Remotes/EditModal.vue
index 47ea51b70..513206040 100644
--- a/frontend/vue/components/Stations/Remotes/EditModal.vue
+++ b/frontend/vue/components/Stations/Remotes/EditModal.vue
@@ -33,7 +33,7 @@ export default {
         RemoteFormBasicInfo
     },
     mixins: [BaseEditModal],
-    emits: ['needs-restart'],
+    emits: ['relist', 'needs-restart'],
     setup() {
         return {v$: useVuelidate()}
     },
diff --git a/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue b/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue
index 50a47127f..222f5cdee 100644
--- a/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue
+++ b/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue
@@ -29,10 +29,10 @@
                 <template #label>
                     {{ $gettext('AutoDJ Format') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="formatOptions"
                     />
@@ -48,10 +48,10 @@
                 <template #label>
                     {{ $gettext('AutoDJ Bitrate (kbps)') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="bitrateOptions"
                     />
@@ -141,8 +141,14 @@ export default {
     name: 'RemoteFormAutoDj',
     components: {BWrappedFormCheckbox, BWrappedFormGroup},
     props: {
-        form: Object,
-        stationFrontendType: String
+        form: {
+            type: Object,
+            required: true
+        },
+        stationFrontendType: {
+            type: String,
+            required: true
+        }
     },
     computed: {
         formatOptions() {
diff --git a/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue b/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue
index 6b5df304b..ebc97f0c9 100644
--- a/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue
@@ -13,12 +13,12 @@
                     <template #label>
                         {{ $gettext('Remote Station Type') }}
                     </template>
-                    <template #default="props">
+                    <template #default="slotProps">
                         <b-form-radio-group
-                            :id="props.id"
-                            v-model="props.field.$model"
+                            :id="slotProps.id"
+                            v-model="slotProps.field.$model"
                             stacked
-                            :state="props.state"
+                            :state="slotProps.state"
                             :options="typeOptions"
                         />
                     </template>
@@ -112,7 +112,10 @@ export default {
     name: 'RemoteFormBasicInfo',
     components: {BWrappedFormCheckbox, BWrappedFormGroup},
     props: {
-        form: Object
+        form: {
+            type: Object,
+            required: true
+        }
     },
     computed: {
         typeOptions() {
diff --git a/frontend/vue/components/Stations/Reports/Listeners.vue b/frontend/vue/components/Stations/Reports/Listeners.vue
index 562564f71..42d12457a 100644
--- a/frontend/vue/components/Stations/Reports/Listeners.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners.vue
@@ -160,9 +160,18 @@ export default {
     name: 'StationReportsListeners',
     components: {DateRangeDropdown, DataTable, StationReportsListenersMap, Icon},
     props: {
-        apiUrl: String,
-        attribution: String,
-        stationTimeZone: String,
+        apiUrl: {
+            type: String,
+            required: true
+        },
+        attribution: {
+            type: String,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
     },
     data() {
         const nowTz = DateTime.now().setZone(this.stationTimeZone);
@@ -242,7 +251,7 @@ export default {
                 if (this.isLive) {
                     setTimeout(this.updateListeners, (!document.hidden) ? 15000 : 30000);
                 }
-            }).catch(() => {
+            }).catch((error) => {
                 if (this.isLive && (!error.response || error.response.data.code !== 403)) {
                     setTimeout(this.updateListeners, (!document.hidden) ? 30000 : 120000);
                 }
diff --git a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
index 6538a0c18..7232145d9 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
@@ -12,11 +12,14 @@
 
 <script setup>
 import {onMounted, provide, ref, shallowRef} from "vue";
-import L from "leaflet";
+import L from "~/vendor/leaflet";
 import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
-    attribution: String
+    attribution: {
+        type: String,
+        required: true
+    }
 });
 
 const $container = ref(); // Template Ref
@@ -27,15 +30,6 @@ provide('map', $map);
 const {theme} = useAzuraCast();
 
 onMounted(() => {
-    // Fix issue with Leaflet icons being built in Webpack
-    // https://github.com/Leaflet/Leaflet/issues/4968
-    delete L.Icon.Default.prototype._getIconUrl;
-    L.Icon.Default.mergeOptions({
-        iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-        iconUrl: require('leaflet/dist/images/marker-icon.png'),
-        shadowUrl: require('leaflet/dist/images/marker-shadow.png')
-    });
-
     // Init map
     const map = L.map($container.value);
     map.setView([40, 0], 1);
diff --git a/frontend/vue/components/Stations/Reports/Listeners/Map.vue b/frontend/vue/components/Stations/Reports/Listeners/Map.vue
index 7fbd845db..3bcb3ae49 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/Map.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/Map.vue
@@ -28,15 +28,21 @@
 import InnerMap from "./InnerMap.vue";
 import MapPoint from "./MapPoint.vue";
 import {computed} from "vue";
-import _ from "lodash";
+import {filter} from "lodash";
 
 const props = defineProps({
-    attribution: String,
-    listeners: Array,
+    attribution: {
+        type: String,
+        required: true
+    },
+    listeners: {
+        type: Array,
+        default: []
+    },
 });
 
 const visibleListeners = computed(() => {
-    return _.filter(props.listeners, function (l) {
+    return filter(props.listeners, function (l) {
         return null !== l.location.lat && null !== l.location.lon;
     });
 });
diff --git a/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue b/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
index 8d70b33e2..c14520470 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
@@ -6,9 +6,13 @@
 
 <script setup>
 import {inject, onUnmounted, ref, watch} from 'vue';
+import L from "~/vendor/leaflet";
 
 const props = defineProps({
-    position: Array
+    position: {
+        type: Array,
+        required: true
+    }
 });
 
 const $map = inject('map');
diff --git a/frontend/vue/components/Stations/Reports/Overview.vue b/frontend/vue/components/Stations/Reports/Overview.vue
index 2016c8d0d..777866d09 100644
--- a/frontend/vue/components/Stations/Reports/Overview.vue
+++ b/frontend/vue/components/Stations/Reports/Overview.vue
@@ -127,15 +127,42 @@ export default {
         DateRangeDropdown
     },
     props: {
-        stationTimeZone: String,
-        showFullAnalytics: Boolean,
-        listenersByTimePeriodUrl: String,
-        bestAndWorstUrl: String,
-        byStreamUrl: String,
-        byClientUrl: String,
-        byBrowserUrl: String,
-        byCountryUrl: String,
-        listeningTimeUrl: String
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        showFullAnalytics: {
+            type: Boolean,
+            required: true
+        },
+        listenersByTimePeriodUrl: {
+            type: String,
+            required: true
+        },
+        bestAndWorstUrl: {
+            type: String,
+            required: true
+        },
+        byStreamUrl: {
+            type: String,
+            required: true
+        },
+        byClientUrl: {
+            type: String,
+            required: true
+        },
+        byBrowserUrl: {
+            type: String,
+            required: true
+        },
+        byCountryUrl: {
+            type: String,
+            required: true
+        },
+        listeningTimeUrl: {
+            type: String,
+            required: true
+        }
     },
     data() {
         let nowTz = DateTime.now().setZone(this.stationTimeZone);
diff --git a/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue b/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue
index 23c27fe99..4eb31f8e7 100644
--- a/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue
@@ -39,8 +39,11 @@
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr v-for="row in bestAndWorst.best">
-                                    <td class="text-center text-success">
+                                <tr
+                                    v-for="row in bestAndWorst.best"
+                                    :key="row.song.id"
+                                >
+                                    <td class=" text-center text-success">
                                         <icon icon="keyboard_arrow_up" />
                                         {{ row.stat_delta }}
                                         <br>
@@ -79,7 +82,10 @@
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr v-for="row in bestAndWorst.worst">
+                                <tr
+                                    v-for="row in bestAndWorst.worst"
+                                    :key="row.song.id"
+                                >
                                     <td class="text-center text-danger">
                                         <icon icon="keyboard_arrow_down" />
                                         {{ row.stat_delta }}
@@ -120,7 +126,10 @@
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr v-for="row in mostPlayed">
+                                <tr
+                                    v-for="row in mostPlayed"
+                                    :key="row.song.id"
+                                >
                                     <td class="text-center">
                                         {{ row.num_plays }}
                                     </td>
@@ -145,8 +154,14 @@ import {DateTime} from "luxon";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String,
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const loading = ref(true);
diff --git a/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue b/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue
index c74d60a79..5617ae78e 100644
--- a/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue
@@ -18,7 +18,13 @@
 import CommonMetricsView from "./CommonMetricsView";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String,
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
 });
 </script>
diff --git a/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue b/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue
index f2f623580..f25602f3c 100644
--- a/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue
@@ -18,7 +18,13 @@
 import CommonMetricsView from "./CommonMetricsView";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String,
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
 });
 </script>
diff --git a/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue b/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue
index 7c15c3d49..13c7d5c54 100644
--- a/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue
@@ -79,10 +79,22 @@ import {useMounted} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String,
-    fieldKey: String,
-    fieldLabel: String,
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
+    fieldKey: {
+        type: String,
+        required: true
+    },
+    fieldLabel: {
+        type: String,
+        required: true
+    },
 });
 
 const loading = ref(true);
diff --git a/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue b/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue
index 2f333d427..b1a447b42 100644
--- a/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue
@@ -18,7 +18,13 @@
 import CommonMetricsView from "./CommonMetricsView";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String,
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
 });
 </script>
diff --git a/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue b/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue
index 67de326d0..12ec7c9b5 100644
--- a/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue
@@ -82,8 +82,14 @@ import {useMounted} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String,
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const loading = ref(true);
diff --git a/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue b/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue
index 91bd912dd..d09393a93 100644
--- a/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue
@@ -50,8 +50,14 @@ import {useMounted} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const loading = ref(true);
diff --git a/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue b/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue
index 0c8f88e96..2bcd9bc34 100644
--- a/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue
@@ -18,7 +18,13 @@
 import CommonMetricsView from "./CommonMetricsView";
 
 const props = defineProps({
-    dateRange: Object,
-    apiUrl: String,
+    dateRange: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
 });
 </script>
diff --git a/frontend/vue/components/Stations/Reports/Requests.vue b/frontend/vue/components/Stations/Reports/Requests.vue
index 6e31e3973..54710f846 100644
--- a/frontend/vue/components/Stations/Reports/Requests.vue
+++ b/frontend/vue/components/Stations/Reports/Requests.vue
@@ -87,9 +87,18 @@ export default {
     name: 'StationRequests',
     components: {DataTable, Icon},
     props: {
-        listUrl: String,
-        clearUrl: String,
-        stationTimeZone: String
+        listUrl: {
+            type: String,
+            required: true
+        },
+        clearUrl: {
+            type: String,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Stations/Reports/SoundExchange.vue b/frontend/vue/components/Stations/Reports/SoundExchange.vue
index 8dcaf1bf3..c670c4cbc 100644
--- a/frontend/vue/components/Stations/Reports/SoundExchange.vue
+++ b/frontend/vue/components/Stations/Reports/SoundExchange.vue
@@ -115,18 +115,26 @@
 <script>
 import useVuelidate from "@vuelidate/core";
 import {required} from '@vuelidate/validators';
-import Icon from "~/components/Common/Icon";
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import BFormFieldset from "~/components/Form/BFormFieldset";
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 
 export default {
     name: 'StationsReportsSoundExchange',
-    components: {Icon, BWrappedFormGroup, BFormFieldset, BWrappedFormCheckbox},
+    components: {BWrappedFormGroup, BFormFieldset, BWrappedFormCheckbox},
     props: {
-        apiUrl: String,
-        startDate: String,
-        endDate: String
+        apiUrl: {
+            type: String,
+            required: true
+        },
+        startDate: {
+            type: String,
+            required: true
+        },
+        endDate: {
+            type: String,
+            required: true
+        }
     },
     setup() {
         return {v$: useVuelidate()}
diff --git a/frontend/vue/components/Stations/Reports/Timeline.vue b/frontend/vue/components/Stations/Reports/Timeline.vue
index 19922383f..d32f65a11 100644
--- a/frontend/vue/components/Stations/Reports/Timeline.vue
+++ b/frontend/vue/components/Stations/Reports/Timeline.vue
@@ -103,8 +103,14 @@ export default {
     name: 'StationsReportsTimeline',
     components: {DateRangeDropdown, DataTable, Icon},
     props: {
-        baseApiUrl: String,
-        stationTimeZone: String
+        baseApiUrl: {
+            type: String,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        }
     },
     data() {
         let nowTz = DateTime.now().setZone(this.stationTimeZone);
diff --git a/frontend/vue/components/Stations/SftpUsers.vue b/frontend/vue/components/Stations/SftpUsers.vue
index 246b2e863..17f874f7e 100644
--- a/frontend/vue/components/Stations/SftpUsers.vue
+++ b/frontend/vue/components/Stations/SftpUsers.vue
@@ -91,8 +91,14 @@ export default {
     name: 'SftpUsers',
     components: {Icon, SftpUsersEditModal, DataTable},
     props: {
-        listUrl: String,
-        connectionInfo: Object
+        listUrl: {
+            type: String,
+            required: true
+        },
+        connectionInfo: {
+            type: Object,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Stations/SftpUsers/Form.vue b/frontend/vue/components/Stations/SftpUsers/Form.vue
index 624846217..6fb40ac0f 100644
--- a/frontend/vue/components/Stations/SftpUsers/Form.vue
+++ b/frontend/vue/components/Stations/SftpUsers/Form.vue
@@ -61,7 +61,13 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object,
-    isEditMode: Boolean
+    form: {
+        type: Object,
+        required: true
+    },
+    isEditMode: {
+        type: Boolean,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/StereoToolConfig.vue b/frontend/vue/components/Stations/StereoToolConfig.vue
index ca8c93dcb..1157d0bb0 100644
--- a/frontend/vue/components/Stations/StereoToolConfig.vue
+++ b/frontend/vue/components/Stations/StereoToolConfig.vue
@@ -87,8 +87,14 @@ import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
     ...mayNeedRestartProps,
-    recordHasStereoToolConfiguration: Boolean,
-    apiUrl: String
+    recordHasStereoToolConfiguration: {
+        type: Boolean,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const hasStereoToolConfiguration = ref(props.recordHasStereoToolConfiguration);
diff --git a/frontend/vue/components/Stations/Streamers.vue b/frontend/vue/components/Stations/Streamers.vue
index 39762b67a..ef53f2079 100644
--- a/frontend/vue/components/Stations/Streamers.vue
+++ b/frontend/vue/components/Stations/Streamers.vue
@@ -131,11 +131,26 @@ export default {
     name: 'StationStreamers',
     components: {AlbumArt, ConnectionInfo, Icon, EditModal, BroadcastsModal, DataTable, Schedule},
     props: {
-        listUrl: String,
-        newArtUrl: String,
-        scheduleUrl: String,
-        stationTimeZone: String,
-        connectionInfo: Object
+        listUrl: {
+            type: String,
+            required: true
+        },
+        newArtUrl: {
+            type: String,
+            required: true
+        },
+        scheduleUrl: {
+            type: String,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        connectionInfo: {
+            type: Object,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue b/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue
index 0f6953123..317231aaa 100644
--- a/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue
+++ b/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue
@@ -84,6 +84,9 @@
 
 <script setup>
 const props = defineProps({
-    connectionInfo: Object
+    connectionInfo: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Streamers/EditModal.vue b/frontend/vue/components/Stations/Streamers/EditModal.vue
index 8654bae5a..a349deeb0 100644
--- a/frontend/vue/components/Stations/Streamers/EditModal.vue
+++ b/frontend/vue/components/Stations/Streamers/EditModal.vue
@@ -41,8 +41,14 @@ export default {
     components: {FormBasicInfo, FormSchedule, FormArtwork},
     mixins: [BaseEditModal],
     props: {
-        stationTimeZone: String,
-        newArtUrl: String,
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        newArtUrl: {
+            type: String,
+            required: true
+        },
     },
     setup() {
         return {v$: useVuelidate()}
diff --git a/frontend/vue/components/Stations/Streamers/Form/Artwork.vue b/frontend/vue/components/Stations/Streamers/Form/Artwork.vue
index aaa7e913b..912ef7cde 100644
--- a/frontend/vue/components/Stations/Streamers/Form/Artwork.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/Artwork.vue
@@ -50,10 +50,22 @@ import {computed, ref, toRef, watch} from "vue";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
-    modelValue: Object,
-    artworkSrc: String,
-    editArtUrl: String,
-    newArtUrl: String,
+    modelValue: {
+        type: Object,
+        required: true
+    },
+    artworkSrc: {
+        type: String,
+        required: true
+    },
+    editArtUrl: {
+        type: String,
+        required: true
+    },
+    newArtUrl: {
+        type: String,
+        required: true
+    },
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue b/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue
index 302c66f1f..3cfd7ebce 100644
--- a/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue
@@ -100,6 +100,9 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Streamers/Form/Schedule.vue b/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
index 9cfc38dcb..032eb58f9 100644
--- a/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
@@ -41,9 +41,18 @@ export default {
     name: 'StreamerFormSchedule',
     components: {StreamersFormScheduleRow, BWrappedFormGroup, Icon, PlaylistTime},
     props: {
-        form: Object,
-        stationTimeZone: String,
-        scheduleItems: Array
+        form: {
+            type: Object,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
+        scheduleItems: {
+            type: Array,
+            default: []
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue b/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue
index e13ba62e5..567b88158 100644
--- a/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue
@@ -32,11 +32,11 @@
                         <template #label>
                             {{ $gettext('Start Time') }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <playlist-time
-                                :id="props.id"
-                                v-model="props.field.$model"
-                                :state="props.state"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
+                                :state="slotProps.state"
                             />
                         </template>
                     </b-wrapped-form-group>
@@ -54,11 +54,11 @@
                                 $gettext('If the end time is before the start time, the schedule entry will continue overnight.')
                             }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <playlist-time
-                                :id="props.id"
-                                v-model="props.field.$model"
-                                :state="props.state"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
+                                :state="slotProps.state"
                             />
                         </template>
                     </b-wrapped-form-group>
@@ -113,10 +113,10 @@
                         <template #description>
                             {{ $gettext('Leave blank to play on every day of the week.') }}
                         </template>
-                        <template #default="props">
+                        <template #default="slotProps">
                             <b-checkbox-group
-                                :id="props.id"
-                                v-model="props.field.$model"
+                                :id="slotProps.id"
+                                v-model="slotProps.field.$model"
                                 stacked
                                 :options="dayOptions"
                             />
@@ -134,15 +134,23 @@ import Icon from "~/components/Common/Icon.vue";
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
 import {required} from "@vuelidate/validators";
 import useVuelidate from "@vuelidate/core";
-import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
 
 export default {
     name: 'StreamersFormScheduleRow',
-    components: {BWrappedFormCheckbox, BWrappedFormGroup, Icon, PlaylistTime},
+    components: {BWrappedFormGroup, Icon, PlaylistTime},
     props: {
-        index: Number,
-        row: Object,
-        stationTimeZone: String,
+        index: {
+            type: Number,
+            required: true
+        },
+        row: {
+            type: Object,
+            required: true
+        },
+        stationTimeZone: {
+            type: String,
+            required: true
+        },
     },
     emits: ['remove'],
     setup() {
diff --git a/frontend/vue/components/Stations/Webhooks.vue b/frontend/vue/components/Stations/Webhooks.vue
index f8e384d10..b70eedbcd 100644
--- a/frontend/vue/components/Stations/Webhooks.vue
+++ b/frontend/vue/components/Stations/Webhooks.vue
@@ -108,9 +108,18 @@ export default {
     name: 'StationWebhooks',
     components: {StreamingLogModal, InfoCard, Icon, EditModal, DataTable},
     props: {
-        listUrl: String,
-        nowPlayingUrl: String,
-        webhookTypes: Object
+        listUrl: {
+            type: String,
+            required: true
+        },
+        nowPlayingUrl: {
+            type: String,
+            required: true
+        },
+        webhookTypes: {
+            type: Object,
+            required: true
+        }
     },
     data() {
         return {
diff --git a/frontend/vue/components/Stations/Webhooks/EditModal.vue b/frontend/vue/components/Stations/Webhooks/EditModal.vue
index 0d78bae77..a9bf62f91 100644
--- a/frontend/vue/components/Stations/Webhooks/EditModal.vue
+++ b/frontend/vue/components/Stations/Webhooks/EditModal.vue
@@ -61,10 +61,22 @@ export default {
     components: {BasicInfo, TypeSelect},
     mixins: [BaseEditModal],
     props: {
-        nowPlayingUrl: String,
-        webhookTypes: Object,
-        triggerTitles: Object,
-        triggerDescriptions: Object
+        nowPlayingUrl: {
+            type: String,
+            required: true
+        },
+        webhookTypes: {
+            type: Object,
+            required: true
+        },
+        triggerTitles: {
+            type: Object,
+            required: true
+        },
+        triggerDescriptions: {
+            type: Object,
+            required: true
+        }
     },
     setup() {
         return {v$: useVuelidate()}
diff --git a/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue b/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue
index 528764802..8c4c56ee7 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue
@@ -30,10 +30,10 @@
                         $gettext('This web hook will only run when the selected event(s) occur on this specific station.')
                     }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-checkbox-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         :options="triggerOptions"
                         stacked
                     />
@@ -47,7 +47,13 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object,
-    triggerOptions: Array
+    form: {
+        type: Object,
+        required: true
+    },
+    triggerOptions: {
+        type: Array,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue
index d396aa5dc..d810aea21 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue
@@ -24,6 +24,9 @@
 
 <script setup>
 const props = defineProps({
-    nowPlayingUrl: String
+    nowPlayingUrl: {
+        type: String,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
index 806cd4a6c..0208b18fc 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
@@ -7,10 +7,10 @@
         <template #label>
             {{ $gettext('Only Post Once Every...') }}
         </template>
-        <template #default="props">
+        <template #default="slotProps">
             <b-form-select
-                :id="props.id"
-                v-model="props.field.$model"
+                :id="slotProps.id"
+                v-model="slotProps.field.$model"
                 :options="rateLimitOptions"
             />
         </template>
@@ -24,7 +24,10 @@ export default {
     name: 'CommonRateLimitFields',
     components: {BWrappedFormGroup},
     props: {
-        form: Object
+        form: {
+            type: Object,
+            required: true
+        }
     },
     computed: {
         langSeconds() {
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
index 648b58fb4..4583c8768 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
@@ -90,8 +90,14 @@ export default {
     name: 'CommonSocialPostFields',
     components: {CommonFormattingInfo, BWrappedFormGroup},
     props: {
-        form: Object,
-        nowPlayingUrl: String
+        form: {
+            type: Object,
+            required: true
+        },
+        nowPlayingUrl: {
+            type: String,
+            required: true
+        }
     },
     methods: {
         hasTrigger(trigger) {
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Discord.vue b/frontend/vue/components/Stations/Webhooks/Form/Discord.vue
index a24e85936..41301da23 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Discord.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Discord.vue
@@ -101,7 +101,13 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import CommonFormattingInfo from "./Common/FormattingInfo";
 
 const props = defineProps({
-    form: Object,
-    nowPlayingUrl: String
+    form: {
+        type: Object,
+        required: true
+    },
+    nowPlayingUrl: {
+        type: String,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Email.vue b/frontend/vue/components/Stations/Webhooks/Form/Email.vue
index 174358f54..ac53f20b2 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Email.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Email.vue
@@ -48,7 +48,13 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import CommonFormattingInfo from "./Common/FormattingInfo";
 
 const props = defineProps({
-    form: Object,
-    nowPlayingUrl: String
+    form: {
+        type: Object,
+        required: true
+    },
+    nowPlayingUrl: {
+        type: String,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Generic.vue b/frontend/vue/components/Stations/Webhooks/Form/Generic.vue
index 80e21417c..5fda5e324 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Generic.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Generic.vue
@@ -97,6 +97,9 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue b/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue
index 164f77f4d..027f7ac6e 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue
@@ -21,6 +21,9 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue b/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue
index 9ce6b55e0..fe93d85d7 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue
@@ -69,10 +69,10 @@
                 <template #label>
                     {{ $gettext('Message Visibility') }}
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="visibilityOptions"
                     />
@@ -95,8 +95,14 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    form: Object,
-    nowPlayingUrl: String
+    form: {
+        type: Object,
+        required: true
+    },
+    nowPlayingUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue b/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue
index 42c287486..b0070f7d1 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue
@@ -48,6 +48,9 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue b/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue
index e969d2f0a..03b74d50c 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue
@@ -80,10 +80,10 @@
                         {{ $gettext('See the Telegram documentation for more details.') }}
                     </a>
                 </template>
-                <template #default="props">
+                <template #default="slotProps">
                     <b-form-radio-group
-                        :id="props.id"
-                        v-model="props.field.$model"
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
                         stacked
                         :options="parseModeOptions"
                     />
@@ -100,8 +100,14 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
-    form: Object,
-    nowPlayingUrl: String
+    form: {
+        type: Object,
+        required: true
+    },
+    nowPlayingUrl: {
+        type: String,
+        required: true
+    }
 });
 
 const {$gettext} = useTranslate();
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue b/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue
index 790f88de5..0a4ff3ca6 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue
@@ -41,6 +41,9 @@
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
 const props = defineProps({
-    form: Object
+    form: {
+        type: Object,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue b/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue
index 9263bee4f..588e72e1d 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue
@@ -92,7 +92,13 @@ import CommonRateLimitFields from "./Common/RateLimitFields";
 import CommonSocialPostFields from "./Common/SocialPostFields";
 
 const props = defineProps({
-    form: Object,
-    nowPlayingUrl: String
+    form: {
+        type: Object,
+        required: true
+    },
+    nowPlayingUrl: {
+        type: String,
+        required: true
+    }
 });
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue b/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue
index 8bb34e398..3f6eb4f53 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue
@@ -25,7 +25,10 @@
 
 <script setup>
 const props = defineProps({
-    webhookTypes: Object,
+    webhookTypes: {
+        type: Object,
+        required: true
+    },
 });
 
 const emit = defineEmits(['select']);
diff --git a/frontend/vue/vendor/leaflet.js b/frontend/vue/vendor/leaflet.js
new file mode 100644
index 000000000..665f1a900
--- /dev/null
+++ b/frontend/vue/vendor/leaflet.js
@@ -0,0 +1,6 @@
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
+import L from 'leaflet';
+import 'leaflet-defaulticon-compatibility';
+
+export default L;