Use common format for gettext.

frontend/vue/base.js

@@ -1,11 +1,10 @@
-import installPinia from './vendor/pinia';
-import gettext from './vendor/gettext';
 import {createApp, h} from "vue";
 import installBootstrapVue from "./vendor/bootstrapVue";
 import installSweetAlert from "./vendor/sweetalert";
 import installAxios from "~/vendor/axios";
-import useAzuraCast from "~/vendor/azuracast";
+import {installPinia} from '~/vendor/pinia';
 import {useNotifyBus} from "~/vendor/events";
+import {installTranslate} from "~/vendor/gettext";
 
 export default function (component) {
     const vueApp = createApp({
@@ -27,13 +26,7 @@ export default function (component) {
     });
 
     /* Gettext */
-    const {locale} = useAzuraCast();
-
-    if (typeof locale !== 'undefined') {
-        vueApp.config.language = locale;
-    }
-
-    vueApp.use(gettext);
+    installTranslate(vueApp);
 
     /* Axios */
     installAxios(vueApp);

frontend/vue/components/Admin/ApiKeys.vue

@@ -19,51 +19,58 @@
     </section>
 </template>
 
-<script>
+<script setup>
 import DataTable from "~/components/Common/DataTable";
+import {ref} from "vue";
+import {useSweetAlert} from "~/vendor/sweetalert";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useAxios} from "~/vendor/axios";
+import {useTranslate} from "~/vendor/gettext";
 
-export default {
-    name: 'AdminApiKeys',
-    components: {DataTable},
-    props: {
-        apiUrl: String
+const props = defineProps({
+    apiUrl: String
+});
+
+const fields = ref([
+    {
+        key: 'comment',
+        isRowHeader: true,
+        label: this.$gettext('API Key Description/Comments'),
+        sortable: false
     },
-    data() {
-        return {
-            fields: [
-                {
-                    key: 'comment',
-                    isRowHeader: true,
-                    label: this.$gettext('API Key Description/Comments'),
-                    sortable: false
-                },
-                {
-                    key: 'owner',
-                    label: this.$gettext('Owner'),
-                    sortable: false
-                },
-                {key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
-            ]
-        };
+    {
+        key: 'owner',
+        label: this.$gettext('Owner'),
+        sortable: false
     },
-    methods: {
-        relist() {
-            this.$refs.datatable.relist();
-        },
-        doDelete(url) {
-            this.$confirmDelete({
-                title: this.$gettext('Delete API Key?'),
-            }).then((result) => {
-                if (result.value) {
-                    this.$wrapWithLoading(
-                        this.axios.delete(url)
-                    ).then((resp) => {
-                        this.$notifySuccess(resp.data.message);
-                        this.relist();
-                    });
-                }
+    {key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
+]);
+
+const datatable = ref(); // Datatable
+
+const relist = () => {
+    datatable.value.relist();
+};
+
+const {confirmDelete} = useSweetAlert();
+const {wrapWithLoading, notifySuccess} = useNotify();
+const {axios} = useAxios();
+const {$gettext} = useTranslate();
+
+const doDelete = (url) => {
+    confirmDelete({
+        title: this.$gettext('Delete API Key?'),
+    }).then((result) => {
+        if (result.value) {
+            this.$wrapWithLoading(
+                this.axios.delete(url)
+            ).then((resp) => {
+                this.$notifySuccess(resp.data.message);
+                this.relist();
             });
         }
-    }
+    });
 }
+
+
 </script>

frontend/vue/components/Admin/Branding/BrandingForm.vue

@@ -145,10 +145,10 @@ import CodemirrorTextarea from "~/components/Common/CodemirrorTextarea";
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 import {computed, onMounted, ref} from "vue";
-import gettext from "~/vendor/gettext";
 import {useAxios} from "~/vendor/axios";
 import mergeExisting from "~/functions/mergeExisting";
 import {useNotify} from "~/vendor/bootstrapVue";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     apiUrl: String,
@@ -183,7 +183,7 @@ const validations = {
 
 const v$ = useVuelidate(validations, form);
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const publicThemeOptions = computed(() => {
     return [

frontend/vue/components/Admin/Settings.vue

@@ -67,7 +67,7 @@ import useVuelidate from "@vuelidate/core";
 import {useAxios} from "~/vendor/axios";
 import mergeExisting from "~/functions/mergeExisting";
 import {useNotify} from "~/vendor/bootstrapVue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     apiUrl: String,
@@ -194,7 +194,7 @@ const relist = () => {
 onMounted(relist);
 
 const {wrapWithLoading, notifySuccess} = useNotify();
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const submit = () => {
     v$.value.$touch();

frontend/vue/components/Admin/Settings/GeneralTab.vue

@@ -96,13 +96,13 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import BFormFieldset from "~/components/Form/BFormFieldset";
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 import {computed} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     form: Object
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const historyKeepDaysOptions = computed(() => {
     return [

frontend/vue/components/Admin/Settings/ServicesTab.vue

@@ -234,7 +234,7 @@ import AdminSettingsTestMessageModal from "~/components/Admin/Settings/TestMessa
 import Icon from "~/components/Common/Icon";
 import StreamingLogModal from "~/components/Common/StreamingLogModal";
 import {computed, ref} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
@@ -245,7 +245,7 @@ const props = defineProps({
     acmeUrl: String,
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const langReleaseChannel = computed(() => {
     return (props.releaseChannel === 'stable')

frontend/vue/components/Admin/Settings/TestMessageModal.vue

@@ -24,7 +24,7 @@ import {email, required} from '@vuelidate/validators';
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import {ref} from "vue";
 import {useNotify} from "~/vendor/bootstrapVue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {useAxios} from "~/vendor/axios";
 
 const props = defineProps({
@@ -56,7 +56,7 @@ const close = () => {
 
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const doSendTest = () => {
     v$.value.$touch();

frontend/vue/components/Admin/Stations/CloneModal.vue

@@ -14,7 +14,7 @@ import {required} from '@vuelidate/validators';
 import ModalForm from "~/components/Common/ModalForm";
 import AdminStationsCloneModalForm from "~/components/Admin/Stations/CloneModalForm";
 import {ref} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 
@@ -45,7 +45,7 @@ const resetForm = () => {
 };
 
 const modal = ref(); // BVModal
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const create = (stationName, stationCloneUrl) => {
     resetForm();

frontend/vue/components/Admin/Stations/CloneModalForm.vue

@@ -32,13 +32,13 @@
 <script setup>
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import {computed} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     form: Object
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const cloneOptions = computed(() => {
     return [

frontend/vue/components/Admin/Stations/EditModal.vue

@@ -24,7 +24,7 @@
 import AdminStationsForm, {StationFormProps} from "~/components/Admin/Stations/StationForm";
 import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
 import {computed, ref} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     ...StationFormProps.props,
@@ -41,7 +41,7 @@ const isEditMode = computed(() => {
     return editUrl.value !== null;
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const langTitle = computed(() => {
     return isEditMode.value

frontend/vue/components/Admin/Stations/Form/BackendForm.vue

@@ -235,7 +235,7 @@ import {
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 import BFormMarkup from "~/components/Form/BFormMarkup";
 import {computed} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     form: Object,
@@ -258,7 +258,7 @@ const isStereoToolEnabled = computed(() => {
     return props.form.backend_config.audio_processing_method.$model === AUDIO_PROCESSING_STEREO_TOOL;
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const backendTypeOptions = computed(() => {
     return [

frontend/vue/components/Admin/Stations/Form/FrontendForm.vue

@@ -177,7 +177,7 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import {FRONTEND_ICECAST, FRONTEND_REMOTE, FRONTEND_SHOUTCAST} from "~/components/Entity/RadioAdapters";
 import objectToFormOptions from "~/functions/objectToFormOptions";
 import {computed} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     form: Object,
@@ -192,7 +192,7 @@ const props = defineProps({
     },
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const frontendTypeOptions = computed(() => {
     let frontendOptions = [

frontend/vue/components/Admin/Stations/Form/ProfileForm.vue

@@ -146,7 +146,7 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import objectToFormOptions from "~/functions/objectToFormOptions";
 import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 import {computed} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     form: Object,
@@ -161,7 +161,7 @@ const timezoneOptions = computed(() => {
     return objectToFormOptions(props.timezones);
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const historyItemsOptions = computed(() => {
     return [

frontend/vue/components/Admin/StorageLocations/EditModal.vue

@@ -12,27 +12,43 @@ import {required} from '@vuelidate/validators';
 import BaseEditModal from '~/components/Common/BaseEditModal';
 import StorageLocationForm from './Form';
 import useVuelidate from "@vuelidate/core";
+import {computed} from "vue";
 
 export default {
     name: 'AdminStorageLocationsEditModal',
     components: {StorageLocationForm},
-    setup() {
-        return {v$: useVuelidate()}
-    },
     mixins: [BaseEditModal],
     props: {
         type: String
     },
-    computed: {
-        langTitle() {
-            return this.isEditMode
-                ? this.$gettext('Edit Storage Location')
-                : this.$gettext('Add Storage Location');
+    setup() {
+        const blankForm = {
+            'adapter': 'local',
+            'path': '',
+            's3CredentialKey': null,
+            's3CredentialSecret': null,
+            's3Region': null,
+            's3Version': 'latest',
+            's3Bucket': null,
+            's3Endpoint': null,
+            'dropboxAuthToken': null,
+            'sftpHost': null,
+            'sftpPort': '22',
+            'sftpUsername': null,
+            'sftpPassword': null,
+            'sftpPrivateKey': null,
+            'sftpPrivateKeyPassPhrase': null,
+            'storageQuota': ''
         }
-    },
-    validations() {
-        let validations = {
-            form: {
+
+        const form = {...blankForm};
+
+        const resetForm = () => {
+            form.value = {...blankForm};
+        };
+
+        const validations = computed(() => {
+            let validationRules = {
                 'adapter': {required},
                 'storageQuota': {},
                 'path': {},
@@ -49,57 +65,52 @@ export default {
                 'sftpPassword': {},
                 'sftpPrivateKey': {},
                 'sftpPrivateKeyPassPhrase': {}
+            };
+
+            switch (form.value.adapter) {
+                case 'local':
+                    validationRules.path = {required};
+                    break;
+
+                case 'dropbox':
+                    validationRules.dropboxAuthToken = {required};
+                    break;
+
+                case 's3':
+                    validationRules.s3CredentialKey = {required};
+                    validationRules.s3CredentialSecret = {required};
+                    validationRules.s3Region = {required};
+                    validationRules.s3Version = {required};
+                    validationRules.s3Bucket = {required};
+                    validationRules.s3Endpoint = {required};
+                    break;
+
+                case 'sftp':
+                    validationRules.sftpHost = {required};
+                    validationRules.sftpPort = {required};
+                    validationRules.sftpUsername = {required};
+                    break;
             }
+
+            return validationRules;
+        });
+
+        const v$ = useVuelidate(validations, form);
+
+        return {
+            form,
+            resetForm,
+            v$
         };
-
-        switch (this.form.adapter) {
-            case 'local':
-                validations.form.path = {required};
-                break;
-
-            case 'dropbox':
-                validations.form.dropboxAuthToken = {required};
-                break;
-
-            case 's3':
-                validations.form.s3CredentialKey = { required };
-                validations.form.s3CredentialSecret = { required };
-                validations.form.s3Region = { required };
-                validations.form.s3Version = { required };
-                validations.form.s3Bucket = { required };
-                validations.form.s3Endpoint = { required };
-                break;
-                
-            case 'sftp':
-                validations.form.sftpHost = { required };
-                validations.form.sftpPort = { required };
-                validations.form.sftpUsername = { required };
-                break;
+    },
+    computed: {
+        langTitle() {
+            return this.isEditMode
+                ? this.$gettext('Edit Storage Location')
+                : this.$gettext('Add Storage Location');
         }
-
-        return validations;
     },
     methods: {
-        resetForm() {
-            this.form = {
-                'adapter': 'local',
-                'path': '',
-                's3CredentialKey': null,
-                's3CredentialSecret': null,
-                's3Region': null,
-                's3Version': 'latest',
-                's3Bucket': null,
-                's3Endpoint': null,
-                'dropboxAuthToken': null,
-                'sftpHost': null,
-                'sftpPort': '22',
-                'sftpUsername': null,
-                'sftpPassword': null,
-                'sftpPrivateKey': null,
-                'sftpPrivateKeyPassPhrase': null,
-                'storageQuota': ''
-            };
-        },
         getSubmittableFormData() {
             if (this.isEditMode) {
                 return this.form;

frontend/vue/components/Admin/StorageLocations/Form.vue

@@ -180,14 +180,10 @@
     </b-card>
 </template>
 
-<script>
+<script setup>
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 
-export default {
-    name: 'StorageLocationForm',
-    components: {BWrappedFormGroup},
-    props: {
-        form: Object
-    }
-};
+const props = defineProps({
+    form: Object
+});
 </script>

frontend/vue/components/Admin/Users/Form.vue

@@ -38,22 +38,18 @@
     </b-form-group>
 </template>
 
-<script>
+<script setup>
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import objectToFormOptions from "~/functions/objectToFormOptions";
+import {computed} from "vue";
 
-export default {
-    name: 'AdminUserForm',
-    components: {BWrappedFormGroup},
-    props: {
-        form: Object,
-        roles: Object,
-        isEditMode: Boolean
-    },
-    computed: {
-        roleOptions() {
-            return objectToFormOptions(this.roles);
-        }
-    }
-};
+const props = defineProps({
+    form: Object,
+    roles: Object,
+    isEditMode: Boolean
+});
+
+const roleOptions = computed(() => {
+    return objectToFormOptions(props.roles);
+});
 </script>

frontend/vue/components/Common/Avatar.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {computed} from "vue";
 
 const props = defineProps({
@@ -19,7 +19,7 @@ const props = defineProps({
     }
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const langAvatar = computed(() => {
     return $gettext(

frontend/vue/components/Common/Charts/HourChart.vue

@@ -7,7 +7,7 @@
 <script setup>
 import {Tableau20} from "~/vendor/chartjs-colorschemes/colorschemes.tableau";
 import {Chart} from "chart.js";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {onMounted, onUnmounted, ref} from "vue";
 
 const props = defineProps({
@@ -18,7 +18,7 @@ const props = defineProps({
 
 let $chart = null;
 const canvas = ref(); // Template Ref
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 onMounted(() => {
     const defaultOptions = {

frontend/vue/components/Common/Charts/TimeSeriesChart.vue

@@ -11,7 +11,7 @@ import {DateTime} from "luxon";
 import _ from "lodash";
 import {Chart} from "chart.js";
 import {onMounted, onUnmounted, ref} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     options: Object,
@@ -21,7 +21,7 @@ const props = defineProps({
 const canvas = ref(); // Template ref
 let $chart = null;
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 onMounted(() => {
     const defaultOptions = {

frontend/vue/components/Common/PlayButton.vue

@@ -9,7 +9,7 @@ import Icon from "./Icon";
 import {usePlayerStore} from "~/store";
 import {computed, toRef} from "vue";
 import {get} from "@vueuse/core";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import getUrlWithoutQuery from "~/functions/getUrlWithoutQuery";
 
 const props = defineProps({
@@ -40,7 +40,7 @@ const isThisPlaying = computed(() => {
     return playingUrl === thisUrl;
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const langTitle = computed(() => {
     return get(isThisPlaying)

frontend/vue/components/Public/Player.vue

@@ -238,7 +238,7 @@ import PlayButton from "~/components/Common/PlayButton";
 import {computed, onMounted, ref, shallowRef, watch} from "vue";
 import {useIntervalFn, useMounted, useStorage} from "@vueuse/core";
 import formatTime from "~/functions/formatTime";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import useNowPlaying from "~/components/Common/NowPlaying.js";
 
 const props = defineProps({
@@ -260,7 +260,7 @@ const enable_hls = computed(() => {
     return props.showHls && $np.station.hls_enabled;
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const streams = computed(() => {
     let all_streams = [];

frontend/vue/components/Stations/Profile/BackendPanel.vue

@@ -61,7 +61,7 @@ export default {
 import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
 import Icon from '~/components/Common/Icon';
 import RunningBadge from "~/components/Common/Badges/RunningBadge.vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {computed} from "vue";
 
 const props = defineProps({
@@ -69,7 +69,7 @@ const props = defineProps({
     np: Object
 });
 
-const {$gettext, $ngettext} = gettext;
+const {$gettext, $ngettext} = useTranslate();
 
 const langTotalTracks = computed(() => {
     let numSongs = $ngettext(

frontend/vue/components/Stations/Profile/EmbedModal.vue

@@ -83,7 +83,7 @@ export default {
 <script setup>
 import CopyToClipboardButton from '~/components/Common/CopyToClipboardButton';
 import {computed, ref} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
 const props = defineProps({
     ...profileEmbedModalProps
@@ -92,7 +92,7 @@ const props = defineProps({
 const selectedType = ref('player');
 const selectedTheme = ref('light');
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const types = computed(() => {
     let types = [

frontend/vue/components/Stations/Profile/NowPlayingPanel.vue

@@ -141,7 +141,7 @@ import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
 import Icon from '~/components/Common/Icon';
 import {computed, onMounted, ref} from "vue";
 import {useIntervalFn} from "@vueuse/core";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import formatTime from "~/functions/formatTime";
 
 const props = defineProps({
@@ -168,7 +168,7 @@ onMounted(() => {
     );
 });
 
-const {$ngettext} = gettext;
+const {$ngettext} = useTranslate();
 
 const langListeners = computed(() => {
     return $ngettext(

frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue

@@ -48,7 +48,7 @@ import PieChart from "~/components/Common/Charts/PieChart.vue";
 import DataTable from "~/components/Common/DataTable";
 import formatTime from "~/functions/formatTime";
 import {onMounted, ref, shallowRef, toRef, watch} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {DateTime} from "luxon";
 import {useMounted} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";
@@ -75,7 +75,7 @@ const stats = shallowRef({
     },
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const fields = shallowRef([
     {key: props.fieldKey, label: props.fieldLabel, sortable: true},

frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue

@@ -28,7 +28,7 @@
 import PieChart from "~/components/Common/Charts/PieChart.vue";
 import DataTable from "~/components/Common/DataTable";
 import {onMounted, ref, shallowRef, toRef, watch} from "vue";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {DateTime} from "luxon";
 import {useMounted} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";
@@ -48,7 +48,8 @@ const stats = shallowRef({
     }
 });
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
+
 const fields = shallowRef([
     {key: 'label', label: $gettext('Listening Time'), sortable: false},
     {key: 'value', label: $gettext('Listeners'), sortable: false}

frontend/vue/pages/InlinePlayer.js

@@ -1,20 +1,13 @@
 import {createApp} from 'vue';
 import InlinePlayer from '~/components/InlinePlayer.vue';
-import installPinia from '../vendor/pinia';
-import gettext from "../vendor/gettext";
-import useAzuraCast from "~/vendor/azuracast";
+import {installPinia} from '~/vendor/pinia';
+import {installTranslate} from "~/vendor/gettext";
 
 document.addEventListener('DOMContentLoaded', function () {
     const inlineApp = createApp(InlinePlayer);
 
     /* Gettext */
-    const {locale} = useAzuraCast();
-
-    if (typeof locale !== 'undefined') {
-        inlineApp.config.language = locale;
-    }
-
-    inlineApp.use(gettext);
+    installTranslate(inlineApp);
 
     /* Pinia */
     installPinia(inlineApp);

frontend/vue/vendor/axios.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import VueAxios from "vue-axios";
 import {inject} from "vue";
 import useAzuraCast from "~/vendor/azuracast";
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 
 /* Composition API Axios utilities */
@@ -22,7 +22,7 @@ export default function installAxios(vueApp) {
 
     // Configure some Axios settings that depend on the BootstrapVue $bvToast superglobal.
     const handleAxiosError = (error) => {
-        const {$gettext} = gettext;
+        const {$gettext} = useTranslate();
 
         let notifyMessage = $gettext('An error occurred and your request could not be completed.');
         if (error.response) {

frontend/vue/vendor/bootstrapVue.js

@@ -1,12 +1,12 @@
 import {BootstrapVue} from 'bootstrap-vue';
 
 import 'bootstrap-vue/dist/bootstrap-vue.css';
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 import {useNotifyBus} from "~/vendor/events";
 
 /* Composition API BootstrapVue utilities */
 export function useNotify() {
-    const {$gettext} = gettext;
+    const {$gettext} = useTranslate();
     const notifyBus = useNotifyBus();
 
     const notify = (message = null, options = {}) => {

frontend/vue/vendor/gettext.js

@@ -4,8 +4,20 @@ import useAzuraCast from "~/vendor/azuracast";
 
 const {locale} = useAzuraCast();
 
-export default createGettext({
+const gettext = createGettext({
     defaultLanguage: locale,
     translations: translations,
     silent: true
 });
+
+export function useTranslate() {
+    return gettext;
+}
+
+export function installTranslate(vueApp) {
+    if (typeof locale !== 'undefined') {
+        vueApp.config.language = locale;
+    }
+
+    vueApp.use(gettext);
+}

frontend/vue/vendor/pinia.js

@@ -2,6 +2,6 @@ import {createPinia} from 'pinia';
 
 const pinia = createPinia();
 
-export default function installPinia(vueApp) {
+export function installPinia(vueApp) {
     vueApp.use(pinia);
 }

frontend/vue/vendor/sweetalert.js

@@ -1,7 +1,7 @@
 import Swal from 'sweetalert2';
-import gettext from "~/vendor/gettext";
+import {useTranslate} from "~/vendor/gettext";
 
-const {$gettext} = gettext;
+const {$gettext} = useTranslate();
 
 const swalCustom = Swal.mixin({
     confirmButtonText: $gettext('Confirm'),