diff --git a/frontend/vue/components/Admin/AuditLog.vue b/frontend/vue/components/Admin/AuditLog.vue
index fd4c8bf9c..4f5cf8374 100644
--- a/frontend/vue/components/Admin/AuditLog.vue
+++ b/frontend/vue/components/Admin/AuditLog.vue
@@ -16,13 +16,15 @@
                 {{ formatTimestamp(row.item.timestamp) }}
             </template>
             <template #cell(operation)="row">
-                <span class="text-success" v-if="row.item.operation_text === 'insert'" :title="langInsert">
+                <span class="text-success" v-if="row.item.operation_text === 'insert'"
+                      :title="$gettext('Insert')">
                     <icon class="lg inline" icon="add_circle"></icon>
                 </span>
-                <span class="text-danger" v-else-if="row.item.operation_text === 'delete'" :title="langDelete">
+                <span class="text-danger" v-else-if="row.item.operation_text === 'delete'"
+                      :title="$gettext('Delete')">
                     <icon class="lg inline" icon="remove_circle"></icon>
                 </span>
-                <span class="text-primary" v-else :title="langUpdate">
+                <span class="text-primary" v-else :title="$gettext('Update')">
                     <icon class="lg inline" icon="swap_horizontal_circle"></icon>
                 </span>
             </template>
@@ -82,66 +84,56 @@ pre.changes {
 }
 </style>
 
-<script>
-import Icon from "~/components/Common/Icon";
-import DataTable from "~/components/Common/DataTable";
-import DateRangeDropdown from "~/components/Common/DateRangeDropdown";
-import {DateTime} from 'luxon';
-import useAzuraCast from "~/vendor/azuracast";
+<script setup>
+import {DateTime} from "luxon";
+import {computed, ref} from "vue";
+import {useTranslate} from "~/vendor/gettext";
+import {useAzuraCast} from "~/vendor/azuracast";
+import DataTable from "~/components/Common/DataTable.vue";
+import DateRangeDropdown from "~/components/Common/DateRangeDropdown.vue";
+import Icon from "~/components/Common/Icon.vue";
 
-export default {
-    name: 'AdminAuditLog',
-    components: {DateRangeDropdown, Icon, DataTable},
-    props: {
-        baseApiUrl: String,
-    },
-    data() {
-        return {
-            dateRange: {
-                startDate: DateTime.now().minus({days: 13}).toJSDate(),
-                endDate: DateTime.now().toJSDate(),
-            },
-            fields: [
-                {key: 'date_time', label: this.$gettext('Date/Time'), sortable: false},
-                {key: 'user', label: this.$gettext('User'), sortable: false},
-                {key: 'operation', isRowHeader: true, label: this.$gettext('Operation'), sortable: false},
-                {key: 'identifier', label: this.$gettext('Identifier'), sortable: false},
-                {key: 'target', label: this.$gettext('Target'), sortable: false},
-                {key: 'actions', label: this.$gettext('Actions'), sortable: false}
-            ],
-        };
-    },
-    computed: {
-        langInsert() {
-            return this.$gettext('Insert');
-        },
-        langUpdate() {
-            return this.$gettext('Update');
-        },
-        langDelete() {
-            return this.$gettext('Delete');
-        },
-        apiUrl() {
-            let apiUrl = new URL(this.baseApiUrl, document.location);
+const props = defineProps({
+    baseApiUrl: String,
+});
 
-            let apiUrlParams = apiUrl.searchParams;
-            apiUrlParams.set('start', DateTime.fromJSDate(this.dateRange.startDate).toISO());
-            apiUrlParams.set('end', DateTime.fromJSDate(this.dateRange.endDate).toISO());
+const dateRange = ref({
+    startDate: DateTime.now().minus({days: 13}).toJSDate(),
+    endDate: DateTime.now().toJSDate(),
+});
 
-            return apiUrl.toString();
-        },
-    },
-    methods: {
-        relist() {
-            this.$refs.datatable.relist();
-        },
-        formatTimestamp(unix_timestamp) {
-            const {timeConfig} = useAzuraCast();
+const {$gettext} = useTranslate();
 
-            return DateTime.fromSeconds(unix_timestamp).toLocaleString(
-                {...DateTime.DATETIME_SHORT, timeConfig}
-            );
-        }
-    }
+const fields = [
+    {key: 'date_time', label: $gettext('Date/Time'), sortable: false},
+    {key: 'user', label: $gettext('User'), sortable: false},
+    {key: 'operation', isRowHeader: true, label: $gettext('Operation'), sortable: false},
+    {key: 'identifier', label: $gettext('Identifier'), sortable: false},
+    {key: 'target', label: $gettext('Target'), sortable: false},
+    {key: 'actions', label: $gettext('Actions'), sortable: false}
+];
+
+const apiUrl = computed(() => {
+    let apiUrl = new URL(props.baseApiUrl, document.location);
+
+    let apiUrlParams = apiUrl.searchParams;
+    apiUrlParams.set('start', DateTime.fromJSDate(dateRange.value.startDate).toISO());
+    apiUrlParams.set('end', DateTime.fromJSDate(dateRange.value.endDate).toISO());
+
+    return apiUrl.toString();
+});
+
+const datatable = ref(); // DataTable Template Ref
+
+const relist = () => {
+    datatable.value.relist();
+};
+
+const formatTimestamp = (unix_timestamp) => {
+    const {timeConfig} = useAzuraCast();
+
+    return DateTime.fromSeconds(unix_timestamp).toLocaleString(
+        {...DateTime.DATETIME_SHORT, timeConfig}
+    );
 }
 </script>
diff --git a/frontend/vue/components/Admin/Backups.vue b/frontend/vue/components/Admin/Backups.vue
index 37fac5e87..d089b356f 100644
--- a/frontend/vue/components/Admin/Backups.vue
+++ b/frontend/vue/components/Admin/Backups.vue
@@ -116,7 +116,7 @@ import formatFileSize from "~/functions/formatFileSize";
 import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal";
 import AdminBackupsRunBackupModal from "~/components/Admin/Backups/RunBackupModal";
 import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
     name: 'AdminBackups',
diff --git a/frontend/vue/components/Common/CodemirrorTextarea.vue b/frontend/vue/components/Common/CodemirrorTextarea.vue
index 5e1744577..bcc245edd 100644
--- a/frontend/vue/components/Common/CodemirrorTextarea.vue
+++ b/frontend/vue/components/Common/CodemirrorTextarea.vue
@@ -8,7 +8,7 @@ import {useVModel} from "@vueuse/core";
 import {computed} from "vue";
 import {css} from "@codemirror/lang-css";
 import {javascript} from "@codemirror/lang-javascript";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
     modelValue: String,
diff --git a/frontend/vue/components/Common/FlowUpload.vue b/frontend/vue/components/Common/FlowUpload.vue
index 0a039efd7..3dcfd6bd1 100644
--- a/frontend/vue/components/Common/FlowUpload.vue
+++ b/frontend/vue/components/Common/FlowUpload.vue
@@ -73,7 +73,7 @@ import Icon from './Icon';
 import _ from 'lodash';
 import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
 import Flow from "@flowjs/flow.js";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
     targetUrl: String,
diff --git a/frontend/vue/components/Common/ScheduleView.vue b/frontend/vue/components/Common/ScheduleView.vue
index 99a46f3ff..19b7ce7af 100644
--- a/frontend/vue/components/Common/ScheduleView.vue
+++ b/frontend/vue/components/Common/ScheduleView.vue
@@ -9,7 +9,7 @@ import allLocales from '@fullcalendar/core/locales-all';
 import luxon2Plugin from '@fullcalendar/luxon2';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import {shallowRef} from "vue";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
     scheduleUrl: String,
diff --git a/frontend/vue/components/Stations/Media.vue b/frontend/vue/components/Stations/Media.vue
index dcda24d4a..a162d850f 100644
--- a/frontend/vue/components/Stations/Media.vue
+++ b/frontend/vue/components/Stations/Media.vue
@@ -164,7 +164,7 @@ import PlayButton from "~/components/Common/PlayButton";</script>
 import formatFileSize from '~/functions/formatFileSize.js';
 import _ from 'lodash';
 import {DateTime} from 'luxon';
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
     props: {
diff --git a/frontend/vue/components/Stations/Playlists.vue b/frontend/vue/components/Stations/Playlists.vue
index 24112ec52..a76b4d941 100644
--- a/frontend/vue/components/Stations/Playlists.vue
+++ b/frontend/vue/components/Stations/Playlists.vue
@@ -142,7 +142,7 @@ import Icon from '~/components/Common/Icon';
 import CloneModal from './Playlists/CloneModal';
 import {DateTime} from 'luxon';
 import humanizeDuration from 'humanize-duration';
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
     name: 'StationPlaylists',
diff --git a/frontend/vue/components/Stations/Profile/SchedulePanel.vue b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
index aaccbd170..03aef6775 100644
--- a/frontend/vue/components/Stations/Profile/SchedulePanel.vue
+++ b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
@@ -49,7 +49,7 @@ export default {
 import {DateTime} from "luxon";
 import _ from "lodash";
 import {computed} from "vue";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
     scheduleItems: Array,
diff --git a/frontend/vue/components/Stations/Queue.vue b/frontend/vue/components/Stations/Queue.vue
index 52419bad2..6dd6c2619 100644
--- a/frontend/vue/components/Stations/Queue.vue
+++ b/frontend/vue/components/Stations/Queue.vue
@@ -57,7 +57,7 @@ import DataTable from '../Common/DataTable';
 import QueueLogsModal from './Queue/LogsModal';
 import Icon from "~/components/Common/Icon";
 import {DateTime} from 'luxon';
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
     name: 'StationQueue',
diff --git a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
index f18629cb6..a3a4629be 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
@@ -16,7 +16,7 @@
 <script setup>
 import {onMounted, provide, ref, shallowRef} from "vue";
 import L from "leaflet";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 const props = defineProps({
     attribution: String
diff --git a/frontend/vue/components/Stations/Reports/Requests.vue b/frontend/vue/components/Stations/Reports/Requests.vue
index f7a7b9fc6..8b673e466 100644
--- a/frontend/vue/components/Stations/Reports/Requests.vue
+++ b/frontend/vue/components/Stations/Reports/Requests.vue
@@ -55,7 +55,7 @@
 import DataTable from '~/components/Common/DataTable';
 import Icon from "~/components/Common/Icon";
 import {DateTime} from 'luxon';
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
     name: 'StationRequests',
diff --git a/frontend/vue/components/Stations/Reports/Timeline.vue b/frontend/vue/components/Stations/Reports/Timeline.vue
index e9f45cb8b..f73daf415 100644
--- a/frontend/vue/components/Stations/Reports/Timeline.vue
+++ b/frontend/vue/components/Stations/Reports/Timeline.vue
@@ -82,7 +82,7 @@ import Icon from "~/components/Common/Icon";
 import DataTable from "~/components/Common/DataTable";
 import DateRangeDropdown from "~/components/Common/DateRangeDropdown";
 import {DateTime} from 'luxon';
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
     name: 'StationsReportsTimeline',
diff --git a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
index bd314641f..9c1c71465 100644
--- a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
+++ b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
@@ -43,7 +43,7 @@ import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 import {DateTime} from 'luxon';
 import '~/vendor/sweetalert.js';
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {
     name: 'StreamerBroadcastsModal',
diff --git a/frontend/vue/vendor/axios.js b/frontend/vue/vendor/axios.js
index 901e7c83a..43db81854 100644
--- a/frontend/vue/vendor/axios.js
+++ b/frontend/vue/vendor/axios.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import VueAxios from "vue-axios";
 import {inject} from "vue";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 
diff --git a/frontend/vue/vendor/azuracast.js b/frontend/vue/vendor/azuracast.js
index a6b8629a5..1da335fad 100644
--- a/frontend/vue/vendor/azuracast.js
+++ b/frontend/vue/vendor/azuracast.js
@@ -1,4 +1,4 @@
-export default function useAzuraCast() {
+export function useAzuraCast() {
     return {
         lang: {
             confirm: App.lang.confirm ?? 'Are you sure?',
diff --git a/frontend/vue/vendor/gettext.js b/frontend/vue/vendor/gettext.js
index a2f08a4d3..5e1d9682e 100644
--- a/frontend/vue/vendor/gettext.js
+++ b/frontend/vue/vendor/gettext.js
@@ -1,6 +1,6 @@
 import translations from "../../../translations/translations.json";
 import {createGettext} from "vue3-gettext";
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 const {locale} = useAzuraCast();
 
diff --git a/frontend/vue/vendor/luxon.js b/frontend/vue/vendor/luxon.js
index c39791dac..771afc415 100644
--- a/frontend/vue/vendor/luxon.js
+++ b/frontend/vue/vendor/luxon.js
@@ -1,5 +1,5 @@
 import {Settings} from 'luxon';
-import useAzuraCast from "~/vendor/azuracast";
+import {useAzuraCast} from "~/vendor/azuracast";
 
 const {localeWithDashes} = useAzuraCast();