From 104e57800d5835ea9d737209a30bd2925ff130a9 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Fri, 16 Dec 2022 03:17:52 -0600
Subject: [PATCH] Remove v-translate directive use.

---
 .../vue/components/Admin/CustomFields.vue     | 12 ++--
 frontend/vue/components/Admin/Permissions.vue | 14 +++--
 frontend/vue/components/Admin/Stations.vue    | 12 ++--
 .../vue/components/Admin/StorageLocations.vue |  8 +--
 frontend/vue/components/Admin/Users.vue       | 12 ++--
 frontend/vue/components/Common/Waveform.vue   |  6 +-
 frontend/vue/components/InlinePlayer.vue      | 12 ++--
 .../Public/WebDJ/MicrophonePanel.vue          |  9 +--
 .../components/Public/WebDJ/SettingsPanel.vue | 37 +++++++----
 .../vue/components/Stations/HlsStreams.vue    | 12 ++--
 .../components/Stations/Media/Breadcrumb.vue  | 63 +++++++++----------
 .../Stations/Media/NewDirectoryModal.vue      | 13 ++--
 frontend/vue/components/Stations/Mounts.vue   | 20 +++---
 .../vue/components/Stations/Playlists.vue     | 46 ++++++++------
 .../Stations/Playlists/QueueModal.vue         | 12 ++--
 .../Stations/Playlists/ReorderModal.vue       |  8 +--
 .../Stations/Podcasts/EpisodesView.vue        | 20 +++---
 .../components/Stations/Podcasts/ListView.vue | 22 +++----
 .../Stations/Profile/BackendNonePanel.vue     |  8 ++-
 .../Stations/Profile/BackendPanel.vue         | 13 ++--
 .../Stations/Profile/EmbedModal.vue           |  6 +-
 .../Stations/Profile/NowPlayingPanel.vue      | 20 +++---
 .../Stations/Profile/PublicPagesPanel.vue     | 18 +++---
 .../Stations/Profile/SchedulePanel.vue        |  8 +--
 .../Stations/Profile/StreamsPanel.vue         | 22 +++----
 frontend/vue/components/Stations/Queue.vue    | 13 ++--
 frontend/vue/components/Stations/Remotes.vue  | 20 +++---
 .../components/Stations/Reports/Requests.vue  |  8 +--
 .../vue/components/Stations/SftpUsers.vue     | 16 ++---
 .../vue/components/Stations/Streamers.vue     | 19 +++---
 frontend/vue/components/Stations/Webhooks.vue | 14 ++---
 31 files changed, 276 insertions(+), 247 deletions(-)

diff --git a/frontend/vue/components/Admin/CustomFields.vue b/frontend/vue/components/Admin/CustomFields.vue
index 46284b5e5..71ea8b0e5 100644
--- a/frontend/vue/components/Admin/CustomFields.vue
+++ b/frontend/vue/components/Admin/CustomFields.vue
@@ -2,19 +2,21 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>Custom Fields</h2>
+                <h2 class="card-title">{{ $gettext('Custom Fields') }}</h2>
             </b-card-header>
 
             <info-card>
                 <p class="card-text">
-                    <translate key="lang_card_info">Create custom fields to store extra metadata about each media file uploaded to your station libraries.</translate>
+                    {{
+                        $gettext('Create custom fields to store extra metadata about each media file uploaded to your station libraries.')
+                    }}
                 </p>
             </info-card>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_btn">Add Custom Field</translate>
+                    {{ $gettext('Add Custom Field') }}
                 </b-button>
             </b-card-body>
 
@@ -28,10 +30,10 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Admin/Permissions.vue b/frontend/vue/components/Admin/Permissions.vue
index d00a10941..6bd907bb2 100644
--- a/frontend/vue/components/Admin/Permissions.vue
+++ b/frontend/vue/components/Admin/Permissions.vue
@@ -2,26 +2,28 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>Roles & Permissions</h2>
+                <h2 class="card-title">{{ $gettext('Roles & Permissions') }}</h2>
             </b-card-header>
 
             <info-card>
                 <p class="card-text">
-                    <translate key="lang_card_info">AzuraCast uses a role-based access control system. Roles are given permissions to certain sections of the site, then users are assigned into those roles.</translate>
+                    {{
+                        $gettext('AzuraCast uses a role-based access control system. Roles are given permissions to certain sections of the site, then users are assigned into those roles.')
+                    }}
                 </p>
             </info-card>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_btn">Add Role</translate>
+                    {{ $gettext('Add Role') }}
                 </b-button>
             </b-card-body>
 
             <data-table ref="datatable" id="permissions" paginated :fields="fields" :api-url="listUrl">
                 <template #cell(permissions)="row">
                     <div v-if="row.item.permissions.global.length > 0">
-                        <translate key="lang_permissions_global">Global</translate>
+                        {{ $gettext('Global') }}
                         :
                         {{ getGlobalPermissionNames(row.item.permissions.global).join(', ') }}
                     </div>
@@ -33,11 +35,11 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm" v-if="!row.item.is_super_admin">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button v-if="row.item.id !== 1" size="sm" variant="danger"
                                   @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Admin/Stations.vue b/frontend/vue/components/Admin/Stations.vue
index 7713d3794..5fe3f4082 100644
--- a/frontend/vue/components/Admin/Stations.vue
+++ b/frontend/vue/components/Admin/Stations.vue
@@ -2,13 +2,13 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>Stations</h2>
+                <h2 class="card-title">{{ $gettext('Stations') }}</h2>
             </b-card-header>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_btn">Add Station</translate>
+                    {{ $gettext('Add Station') }}
                 </b-button>
             </b-card-body>
 
@@ -26,17 +26,17 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="secondary" :href="row.item.links.manage" target="_blank">
-                            <translate key="lang_btn_manage">Manage</translate>
+                            {{ $gettext('Manage') }}
                         </b-button>
                         <b-button size="sm" variant="secondary"
                                   @click.prevent="doClone(row.item.name, row.item.links.clone)">
-                            <translate key="lang_btn_clone">Clone</translate>
+                            {{ $gettext('Clone') }}
                         </b-button>
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Admin/StorageLocations.vue b/frontend/vue/components/Admin/StorageLocations.vue
index 23dc62846..7395f62a4 100644
--- a/frontend/vue/components/Admin/StorageLocations.vue
+++ b/frontend/vue/components/Admin/StorageLocations.vue
@@ -2,7 +2,7 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_storage_locations" v-translate>Storage Locations</h2>
+                <h2 class="card-title">{{ $gettext('Storage Locations') }}</h2>
             </b-card-header>
             <b-tabs pills card lazy>
                 <b-tab v-for="tab in tabs" :key="tab.type" :active="activeType === tab.type" @click="setType(tab.type)"
@@ -12,7 +12,7 @@
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_playlist">Add Storage Location</translate>
+                    {{ $gettext('Add Storage Location') }}
                 </b-button>
             </b-card-body>
 
@@ -21,10 +21,10 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Admin/Users.vue b/frontend/vue/components/Admin/Users.vue
index 537588ed5..39f35e545 100644
--- a/frontend/vue/components/Admin/Users.vue
+++ b/frontend/vue/components/Admin/Users.vue
@@ -2,13 +2,13 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>Users</h2>
+                <h2 class="card-title">{{ $gettext('Users') }}</h2>
             </b-card-header>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_btn">Add User</translate>
+                    {{ $gettext('Add User') }}
                 </b-button>
             </b-card-body>
 
@@ -17,7 +17,7 @@
                     <h5 class="mb-0" v-if="row.item.name !== ''">{{ row.item.name }}</h5>
                     <a :href="'mailto:'+row.item.email">{{ row.item.email }}</a>
                     <span v-if="row.item.is_me" class="badge badge-primary">
-                        <translate key="lang_is_me">You</translate>
+                        {{ $gettext('You') }}
                     </span>
                 </template>
                 <template #cell(roles)="row">
@@ -28,13 +28,13 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm" v-if="!row.item.is_me">
                         <b-button size="sm" variant="secondary" :href="row.item.links.masquerade" target="_blank">
-                            <translate key="lang_btn_masquerade">Log In</translate>
+                            {{ $gettext('Log In') }}
                         </b-button>
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Common/Waveform.vue b/frontend/vue/components/Common/Waveform.vue
index 76b273787..53d8a9910 100644
--- a/frontend/vue/components/Common/Waveform.vue
+++ b/frontend/vue/components/Common/Waveform.vue
@@ -13,7 +13,7 @@
                 <div class="d-flex">
                     <div class="flex-shrink-0">
                         <label for="waveform-zoom">
-                            <translate key="lang_waveform_title">Waveform Zoom</translate>
+                            {{ $gettext('Waveform Zoom') }}
                         </label>
                     </div>
                     <div class="flex-fill mx-3">
@@ -26,7 +26,7 @@
                     <div class="flex-shrink-0">
                         <a class="btn btn-sm btn-outline-inverse py-0 px-3" href="#" @click.prevent="volume = 0">
                             <icon icon="volume_mute"></icon>
-                            <span class="sr-only" key="lang_mute" v-translate>Mute</span>
+                            {{ $gettext('Mute') }}
                         </a>
                     </div>
                     <div class="flex-fill mx-1">
@@ -36,7 +36,7 @@
                     <div class="flex-shrink-0">
                         <a class="btn btn-sm btn-outline-inverse py-0 px-3" href="#" @click.prevent="volume = 100">
                             <icon icon="volume_up"></icon>
-                            <span class="sr-only" key="lang_vol_full" v-translate>Full Volume</span>
+                            {{ $gettext('Full Volume') }}
                         </a>
                     </div>
                 </div>
diff --git a/frontend/vue/components/InlinePlayer.vue b/frontend/vue/components/InlinePlayer.vue
index 1ffecd9ca..0ffc73b4b 100644
--- a/frontend/vue/components/InlinePlayer.vue
+++ b/frontend/vue/components/InlinePlayer.vue
@@ -16,15 +16,15 @@
                 </div>
             </div>
 
-            <a class="btn btn-sm btn-outline-light px-2 ml-1" href="#" @click.prevent="stop()">
+            <a class="btn btn-sm btn-outline-light px-2 ml-1" href="#" @click.prevent="stop()"
+               :aria-label="$gettext('Stop')">
                 <icon icon="stop"></icon>
-                <span class="sr-only" key="lang_pause" v-translate>Stop</span>
             </a>
             <div class="inline-volume-controls d-inline-flex align-items-center ml-1">
                 <div class="flex-shrink-0">
-                    <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 0">
+                    <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 0"
+                       :aria-label="$gettext('Mute')">
                         <icon icon="volume_mute"></icon>
-                        <span class="sr-only" key="lang_mute" v-translate>Mute</span>
                     </a>
                 </div>
                 <div class="flex-fill mx-1">
@@ -32,9 +32,9 @@
                            step="1" v-model="volume">
                 </div>
                 <div class="flex-shrink-0">
-                    <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 100">
+                    <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 100"
+                       :aria-label="$gettext('Full Volume')">
                         <icon icon="volume_up"></icon>
-                        <span class="sr-only" key="lang_full_volume" v-translate>Full Volume</span>
                     </a>
                 </div>
             </div>
diff --git a/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue b/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue
index fb48895c9..88e5350e2 100644
--- a/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue
+++ b/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue
@@ -4,7 +4,7 @@
             <div class="d-flex align-items-center">
                 <div class="flex-fill">
                     <h5 class="card-title">
-                        <translate key="lang_mic_title">Microphone</translate>
+                        {{ $gettext('Microphone') }}
                     </h5>
                 </div>
                 <div class="flex-shrink-0 pl-3">
@@ -23,15 +23,16 @@
                                 <icon icon="mic"></icon>
                             </button>
                             <button class="btn" v-on:click="cue" v-bind:class="{ 'btn-primary': passThrough }">
-                                <translate key="lang_btn_cue">Cue</translate>
+                                {{ $gettext('Cue') }}
                             </button>
                         </div>
                     </div>
                 </div>
                 <div class="flex-fill pl-3">
                     <div class="form-group microphone-entry mb-0">
-                        <label for="select_microphone_source" class="mb-2" key="lang_mic_source" v-translate>Microphone
-                            Source</label>
+                        <label for="select_microphone_source" class="mb-2">
+                            {{ $gettext('Microphone Source') }}
+                        </label>
                         <div class="controls">
                             <select id="select_microphone_source" v-model="device" class="form-control">
                                 <option v-for="device_row in devices" v-bind:value="device_row.deviceId">
diff --git a/frontend/vue/components/Public/WebDJ/SettingsPanel.vue b/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
index 965aab424..21a2eae17 100644
--- a/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
+++ b/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
@@ -29,23 +29,30 @@
                     <div class="tab-content mt-1">
                         <div class="tab-pane active" id="settings">
                             <div class="form-group">
-                                <label class="mb-2" key="lang_encoder" v-translate>Encoder</label>
+                                <label class="mb-2">
+                                    {{ $gettext('Encoder') }}
+                                </label>
                                 <div class="controls">
                                     <div class="custom-control custom-radio custom-control-inline">
                                         <input id="encoder_mp3" type="radio" v-model="encoder" value="mp3"
                                                class="custom-control-input">
-                                        <label for="encoder_mp3" class="custom-control-label" key="lang_encoder_mp3"
-                                               v-translate>MP3</label>
+                                        <label for="encoder_mp3" class="custom-control-label">
+                                            {{ $gettext('MP3') }}
+                                        </label>
                                     </div>
                                     <div class="custom-control custom-radio custom-control-inline">
                                         <input id="encoder_raw" type="radio" v-model="encoder" value="raw"
                                                class="custom-control-input">
-                                        <label for="encoder_raw" class="custom-control-label" key="lang_encoder_raw" v-translate>Raw</label>
+                                        <label for="encoder_raw" class="custom-control-label">
+                                            {{ $gettext('Raw') }}
+                                        </label>
                                     </div>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="select_samplerate" class="mb-2" key="lang_sample_rate" v-translate>Sample Rate</label>
+                                <label for="select_samplerate" class="mb-2">
+                                    {{ $gettext('Sample Rate') }}
+                                </label>
                                 <div class="controls">
                                     <select id="select_samplerate" class="form-control" v-model.number="samplerate">
                                         <option value="8000">8 kHz</option>
@@ -61,7 +68,9 @@
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="select_bitrate" class="mb-2" key="lang_bit_rate" v-translate>Bit Rate</label>
+                                <label for="select_bitrate" class="mb-2">
+                                    {{ $gettext('Bit Rate') }}
+                                </label>
                                 <div class="controls">
                                     <select id="select_bitrate" class="form-control" v-model.number="bitrate">
                                         <option value="8">8 kbps</option>
@@ -86,7 +95,9 @@
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label class="mb-2" key="lang_dj_creds" v-translate>DJ Credentials</label>
+                                <label class="mb-2">
+                                    {{ $gettext('DJ Credentials') }}
+                                </label>
 
                                 <div class="form-row">
                                     <div class="col-6">
@@ -104,21 +115,25 @@
                                     <input id="use_async_worker" type="checkbox" v-model="asynchronous"
                                            class="custom-control-input">
                                     <label for="use_async_worker" class="custom-control-label">
-                                        <translate key="lang_asynchronous">Use Asynchronous Worker</translate>
+                                        {{ $gettext('Use Asynchronous Worker') }}
                                     </label>
                                 </div>
                             </div>
                         </div>
                         <div class="tab-pane" id="metadata">
                             <div class="form-group">
-                                <label for="metadata_title" class="mb-2" key="lang_metadata_title" v-translate>Title</label>
+                                <label for="metadata_title" class="mb-2">
+                                    {{ $gettext('Title') }}
+                                </label>
                                 <div class="controls">
                                     <input id="metadata_title" class="form-control" type="text" v-model="metadata.title"
                                            v-bind:disabled="!isStreaming">
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="metadata_artist" class="mb-2" key="lang_metadata_artist" v-translate>Artist</label>
+                                <label for="metadata_artist" class="mb-2">
+                                    {{ $gettext('Artist') }}
+                                </label>
                                 <div class="controls">
                                     <input id="metadata_artist" class="form-control" type="text"
                                            v-model="metadata.artist" v-bind:disabled="!isStreaming">
@@ -127,7 +142,7 @@
                             <div class="form-group">
                                 <button class="btn btn-primary" v-on:click="updateMetadata"
                                         v-bind:disabled="!isStreaming">
-                                    <translate key="lang_btn_update_metadata">Update Metadata</translate>
+                                    {{ $gettext('Update Metadata') }}
                                 </button>
                             </div>
                         </div>
diff --git a/frontend/vue/components/Stations/HlsStreams.vue b/frontend/vue/components/Stations/HlsStreams.vue
index c2f461626..a0e1aba60 100644
--- a/frontend/vue/components/Stations/HlsStreams.vue
+++ b/frontend/vue/components/Stations/HlsStreams.vue
@@ -2,19 +2,21 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>HLS Streams</h2>
+                <h2 class="card-title">{{ $gettext('HLS Streams') }}</h2>
             </b-card-header>
 
             <info-card>
                 <p class="card-text">
-                    <translate key="lang_card_info">HTTP Live Streaming (HLS) is a new adaptive-bitrate streaming technology. From this page, you can configure the individual bitrates and formats that are included in the combined HLS stream.</translate>
+                    {{
+                        $gettext('HTTP Live Streaming (HLS) is a new adaptive-bitrate streaming technology. From this page, you can configure the individual bitrates and formats that are included in the combined HLS stream.')
+                    }}
                 </p>
             </info-card>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_btn">Add HLS Stream</translate>
+                    {{ $gettext('Add HLS Stream') }}
                 </b-button>
             </b-card-body>
 
@@ -32,10 +34,10 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Stations/Media/Breadcrumb.vue b/frontend/vue/components/Stations/Media/Breadcrumb.vue
index ac9dc6dad..cdea432b7 100644
--- a/frontend/vue/components/Stations/Media/Breadcrumb.vue
+++ b/frontend/vue/components/Stations/Media/Breadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
     <h3 class="card-subtitle mt-0 mb-2" id="breadcrumb">
-        <a href="#" key="lang_home" @click.prevent="changeDirectory('')" v-translate>Home</a>
+        <a href="#" @click.prevent="changeDirectory('')">{{ $gettext('Home') }}</a>
         <template v-for="part in directoryParts">
             &blacktriangleright;
             <a href="#" @click.prevent="changeDirectory(part.dir)">{{ part.display }}</a>
@@ -8,40 +8,39 @@
     </h3>
 </template>
 
-<script>
-export default {
-    name: 'Breadcrumb',
-    props: {
-        currentDirectory: String
-    },
-    computed: {
-        directoryParts () {
-            let dirParts = [];
+<script setup>
+import {computed} from "vue";
 
-            if (this.currentDirectory === '') {
-                return dirParts;
-            }
+const props = defineProps({
+    currentDirectory: String
+});
 
-            let builtDir = '';
-            let dirSegments = this.currentDirectory.split('/');
+const emit = defineEmits(['change-directory']);
 
-            dirSegments.forEach((part) => {
-                if (builtDir === '') {
-                    builtDir += part;
-                } else {
-                    builtDir += '/' + part;
-                }
+const directoryParts = computed(() => {
+    let dirParts = [];
 
-                dirParts.push({ dir: builtDir, display: part });
-            });
-
-            return dirParts;
-        }
-    },
-    methods: {
-        changeDirectory (newDir) {
-            this.$emit('change-directory', newDir);
-        }
+    if (props.currentDirectory === '') {
+        return dirParts;
     }
-};
+
+    let builtDir = '';
+    let dirSegments = props.currentDirectory.split('/');
+
+    dirSegments.forEach((part) => {
+        if (builtDir === '') {
+            builtDir += part;
+        } else {
+            builtDir += '/' + part;
+        }
+
+        dirParts.push({dir: builtDir, display: part});
+    });
+
+    return dirParts;
+});
+
+const changeDirectory = (newDir) => {
+    emit('change-directory', newDir);
+}
 </script>
diff --git a/frontend/vue/components/Stations/Media/NewDirectoryModal.vue b/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
index 1d9a968ca..9dd357b76 100644
--- a/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
+++ b/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
@@ -2,18 +2,17 @@
     <b-modal id="create_directory" centered ref="modal" :title="langNewDirectory">
         <b-form @submit.prevent="doMkdir">
             <b-wrapped-form-group id="new_directory_name" :field="v$.newDirectory" autofocus>
-                <template #label="{lang}">
-                    <translate :key="lang">Directory Name</translate>
+                <template #label>
+                    {{ $gettext('Directory Name') }}
                 </template>
             </b-wrapped-form-group>
         </b-form>
         <template #modal-footer>
-            <b-button variant="default" @click="close" key="lang_btn_close" v-translate>
-                Close
+            <b-button variant="default" @click="close">
+                {{ $gettext('Close') }}
             </b-button>
-            <b-button :variant="(v$.$invalid) ? 'danger' : 'primary'" @click="doMkdir" key="lang_btn_create"
-                      v-translate>
-                Create Directory
+            <b-button :variant="(v$.$invalid) ? 'danger' : 'primary'" @click="doMkdir">
+                {{ $gettext('Create Directory') }}
             </b-button>
         </template>
     </b-modal>
diff --git a/frontend/vue/components/Stations/Mounts.vue b/frontend/vue/components/Stations/Mounts.vue
index 7de4ea626..0b285f671 100644
--- a/frontend/vue/components/Stations/Mounts.vue
+++ b/frontend/vue/components/Stations/Mounts.vue
@@ -2,19 +2,21 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>Mount Points</h2>
+                <h2 class="card-title">{{ $gettext('Mount Points') }}</h2>
             </b-card-header>
 
             <info-card>
                 <p class="card-text">
-                    <translate key="lang_card_info">Mount points are how listeners connect and listen to your station. Each mount point can be a different audio format or quality. Using mount points, you can set up a high-quality stream for broadband listeners and a mobile stream for phone users.</translate>
+                    {{
+                        $gettext('Mount points are how listeners connect and listen to your station. Each mount point can be a different audio format or quality. Using mount points, you can set up a high-quality stream for broadband listeners and a mobile stream for phone users.')
+                    }}
                 </p>
             </info-card>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_btn">Add Mount Point</translate>
+                    {{ $gettext('Add Mount Point') }}
                 </b-button>
             </b-card-body>
 
@@ -25,26 +27,28 @@
                         <a :href="row.item.links.listen">{{ row.item.display_name }}</a>
                     </h5>
                     <div v-if="row.item.is_default">
-                        <span class="badge badge-success" key="lang_default_mount" v-translate>Default Mount</span>
+                        <span class="badge badge-success">
+                            {{ $gettext('Default Mount') }}
+                        </span>
                     </div>
                 </template>
                 <template #cell(enable_autodj)="row">
                     <template v-if="row.item.enable_autodj">
-                        <translate key="lang_autodj_enabled">Enabled</translate>
+                        {{ $gettext('Enabled') }}
                         -
                         {{ row.item.autodj_bitrate }}kbps {{ upper(row.item.autodj_format) }}
                     </template>
                     <template v-else>
-                        <translate key="lang_autodj_disabled">Disabled</translate>
+                        {{ $gettext('Disabled') }}
                     </template>
                 </template>
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Stations/Playlists.vue b/frontend/vue/components/Stations/Playlists.vue
index 65e737e5e..dbc7e51fe 100644
--- a/frontend/vue/components/Stations/Playlists.vue
+++ b/frontend/vue/components/Stations/Playlists.vue
@@ -4,10 +4,15 @@
             <b-card-header header-bg-variant="primary-dark">
                 <b-row class="align-items-center">
                     <b-col md="6">
-                        <h2 class="card-title" key="lang_playlists" v-translate>Playlists</h2>
+                        <h2 class="card-title">{{ $gettext('Playlists') }}</h2>
                     </b-col>
                     <b-col md="6" class="text-right text-muted">
-                        <translate key="lang_station_tz" :translate-params="{ tz: stationTimeZone }">This station's time zone is currently %{tz}.</translate>
+                        {{
+                            $gettext(
+                                'This station\'s time zone is currently %{tz}.',
+                                {tz: stationTimeZone}
+                            )
+                        }}
                     </b-col>
                 </b-row>
             </b-card-header>
@@ -16,7 +21,7 @@
                     <b-card-body body-class="card-padding-sm">
                         <b-button variant="outline-primary" @click.prevent="doCreate">
                             <icon icon="add"></icon>
-                            <translate key="lang_add_playlist">Add Playlist</translate>
+                            {{ $gettext('Add Playlist') }}
                         </b-button>
                     </b-card-body>
 
@@ -25,10 +30,10 @@
                         <template #cell(actions)="row">
                             <b-button-group size="sm">
                                 <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                                    <translate key="lang_btn_edit">Edit</translate>
+                                    {{ $gettext('Edit') }}
                                 </b-button>
                                 <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                                    <translate key="lang_btn_delete">Delete</translate>
+                                    {{ $gettext('Delete') }}
                                 </b-button>
 
                                 <b-dropdown size="sm" variant="dark" boundary="window" :text="langMore">
@@ -56,9 +61,12 @@
                                     </b-dropdown-item>
                                     <template v-for="format in ['pls', 'm3u']">
                                         <b-dropdown-item :href="row.item.links.export[format]" target="_blank">
-                                            <translate :key="'lang_format_'+format" :translate-params="{ format: format.toUpperCase() }">
-                                            Export %{format}
-                                            </translate>
+                                            {{
+                                                $gettext(
+                                                    'Export %{format}',
+                                                    {format: format.toUpperCase()}
+                                                )
+                                            }}
                                         </b-dropdown-item>
                                     </template>
                                 </b-dropdown>
@@ -68,28 +76,28 @@
                             <h5 class="m-0">{{ row.item.name }}</h5>
                             <div>
                                 <span class="badge badge-dark">
-                                    <translate key="lang_song_based_playlist" v-if="row.item.source === 'songs'">
-                                        Song-based
-                                    </translate>
-                                    <translate key="lang_remote_url_playlist" v-else>
-                                        Remote URL
-                                    </translate>
+                                    <template v-if="row.item.source === 'songs'">
+                                        {{ $gettext('Song-based') }}
+                                    </template>
+                                    <template v-else>
+                                        {{ $gettext('Remote URL') }}
+                                    </template>
                                 </span>
                                 <span class="badge badge-primary" v-if="row.item.is_jingle">
-                                    <translate key="lang_jingle_mode">Jingle Mode</translate>
+                                    {{ $gettext('Jingle Mode') }}
                                 </span>
                                 <span class="badge badge-info"
                                       v-if="row.item.source === 'songs' && row.item.order === 'sequential'">
-                                    <translate key="lang_sequential">Sequential</translate>
+                                    {{ $gettext('Sequential') }}
                                 </span>
                                 <span class="badge badge-info" v-if="row.item.include_in_on_demand">
-                                    <translate key="lang_on_demand">On-Demand</translate>
+                                    {{ $gettext('On-Demand') }}
                                 </span>
                                 <span class="badge badge-success" v-if="row.item.include_in_automation">
-                                    <translate key="lang_auto_assigned">Auto-Assigned</translate>
+                                    {{ $gettext('Auto-Assigned') }}
                                 </span>
                                 <span class="badge badge-danger" v-if="!row.item.is_enabled">
-                                    <translate key="lang_disabled">Disabled</translate>
+                                    {{ $gettext('Disabled') }}
                                 </span>
                             </div>
                         </template>
diff --git a/frontend/vue/components/Stations/Playlists/QueueModal.vue b/frontend/vue/components/Stations/Playlists/QueueModal.vue
index 337268a67..09036e471 100644
--- a/frontend/vue/components/Stations/Playlists/QueueModal.vue
+++ b/frontend/vue/components/Stations/Playlists/QueueModal.vue
@@ -1,14 +1,16 @@
 <template>
     <b-modal size="lg" id="queue_modal" ref="modal" :title="langTitle" :busy="loading">
         <p>
-            <translate key="queue_info">This queue contains the remaining tracks in the order they will be queued by the AzuraCast AutoDJ (if the tracks are eligible to be played).</translate>
+            {{
+                $gettext('This queue contains the remaining tracks in the order they will be queued by the AzuraCast AutoDJ (if the tracks are eligible to be played).')
+            }}
         </p>
         <b-overlay variant="card" :show="loading">
             <b-table-simple striped class="sortable mb-0">
                 <b-thead>
                     <tr>
-                        <th style="width: 50%;" key="lang_col_title" v-translate>Title</th>
-                        <th style="width: 50%;" key="lang_col_artist" v-translate>Artist</th>
+                        <th style="width: 50%;">{{ $gettext('Title') }}</th>
+                        <th style="width: 50%;">{{ $gettext('Artist') }}</th>
                     </tr>
                 </b-thead>
                 <b-tbody>
@@ -21,10 +23,10 @@
         </b-overlay>
         <template #modal-footer>
             <b-button variant="default" type="button" @click="close">
-                <translate key="lang_btn_close">Close</translate>
+                {{ $gettext('Close') }}
             </b-button>
             <b-button variant="danger" type="submit" @click="doClear">
-                <translate key="lang_btn_clear_queue">Clear Queue</translate>
+                {{ $gettext('Clear Queue') }}
             </b-button>
         </template>
     </b-modal>
diff --git a/frontend/vue/components/Stations/Playlists/ReorderModal.vue b/frontend/vue/components/Stations/Playlists/ReorderModal.vue
index a0b3e2076..bd4ed820d 100644
--- a/frontend/vue/components/Stations/Playlists/ReorderModal.vue
+++ b/frontend/vue/components/Stations/Playlists/ReorderModal.vue
@@ -8,10 +8,10 @@
                 <b-thead>
                     <tr>
                         <th style="width: 5%">&nbsp;</th>
-                        <th style="width: 25%;" key="lang_col_title" v-translate>Title</th>
-                        <th style="width: 25%;" key="lang_col_artist" v-translate>Artist</th>
-                        <th style="width: 25%;" key="lang_col_album" v-translate>Album</th>
-                        <th style="width: 20%;" key="lang_col_actions" v-translate>Actions</th>
+                        <th style="width: 25%;">{{ $gettext('Title') }}</th>
+                        <th style="width: 25%;">{{ $gettext('Artist') }}</th>
+                        <th style="width: 25%;">{{ $gettext('Album') }}</th>
+                        <th style="width: 20%;">{{ $gettext('Actions') }}</th>
                     </tr>
                 </b-thead>
                 <draggable v-model="media" tag="tbody" @change="save">
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodesView.vue b/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
index 26248d099..18daf66ff 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
@@ -10,7 +10,7 @@
                             </div>
                             <div class="flex-fill">
                                 <h2 class="card-title">{{ podcast.title }}</h2>
-                                <h4 class="card-subtitle text-muted" key="lang_episodes" v-translate>Episodes</h4>
+                                <h4 class="card-subtitle text-muted">{{ $gettext('Episodes') }}</h4>
                             </div>
                         </div>
                     </b-col>
@@ -23,12 +23,12 @@
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="bg" @click="doClearPodcast()">
                     <icon icon="arrow_back"></icon>
-                    <translate key="lang_podcast_back">All Podcasts</translate>
+                    {{ $gettext('All Podcasts') }}
                 </b-button>
 
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <i class="material-icons" aria-hidden="true">add</i>
-                    <translate key="lang_add_episode">Add Episode</translate>
+                    {{ $gettext('Add Episode') }}
                 </b-button>
             </b-card-body>
 
@@ -39,11 +39,7 @@
                 </template>
                 <template #cell(title)="row">
                     <h5 class="m-0">{{ row.item.title }}</h5>
-                    <a :href="row.item.links.public" target="_blank">
-                        <translate key="lang_link_public">
-                        Public Page
-                        </translate>
-                    </a>
+                    <a :href="row.item.links.public" target="_blank">{{ $gettext('Public Page') }}</a>
                 </template>
                 <template #cell(podcast_media)="row">
                     <template v-if="row.item.media">
@@ -53,17 +49,15 @@
                     </template>
                 </template>
                 <template #cell(explicit)="row">
-                        <span class="badge badge-danger" v-if="row.item.explicit">
-                            <translate key="explicit">Explicit</translate>
-                        </span>
+                    <span class="badge badge-danger" v-if="row.item.explicit">{{ $gettext('Explicit') }}</span>
                 </template>
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Stations/Podcasts/ListView.vue b/frontend/vue/components/Stations/Podcasts/ListView.vue
index db5693468..6c969fa5c 100644
--- a/frontend/vue/components/Stations/Podcasts/ListView.vue
+++ b/frontend/vue/components/Stations/Podcasts/ListView.vue
@@ -4,7 +4,7 @@
             <b-card-header header-bg-variant="primary-dark">
                 <b-row class="align-items-center">
                     <b-col md="7">
-                        <h2 class="card-title" key="lang_podcasts" v-translate>Podcasts</h2>
+                        <h2 class="card-title">{{ $gettext('Podcasts') }}</h2>
                     </b-col>
                     <b-col md="5" class="text-right text-white-50">
                         <stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota>
@@ -15,7 +15,7 @@
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <i class="material-icons" aria-hidden="true">add</i>
-                    <translate key="lang_add_podcasts">Add Podcast</translate>
+                    {{ $gettext('Add Podcast') }}
                 </b-button>
             </b-card-body>
 
@@ -26,16 +26,8 @@
                 </template>
                 <template #cell(title)="row">
                     <h5 class="m-0">{{ row.item.title }}</h5>
-                    <a :href="row.item.links.public_episodes" target="_blank">
-                        <translate key="lang_link_public_page">
-                        Public Page
-                        </translate>
-                    </a> &bull;
-                    <a :href="row.item.links.public_feed" target="_blank">
-                        <translate key="lang_link_rss_feed">
-                        RSS Feed
-                        </translate>
-                    </a>
+                    <a :href="row.item.links.public_episodes" target="_blank">{{ $gettext('Public Page') }}</a> &bull;
+                    <a :href="row.item.links.public_feed" target="_blank">{{ $gettext('RSS Feed') }}</a>
                 </template>
                 <template #cell(num_episodes)="row">
                     {{ countEpisodes(row.item.episodes) }}
@@ -43,13 +35,13 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                         <b-button size="sm" variant="dark" @click.prevent="doSelectPodcast(row.item)">
-                            <translate key="lang_btn_episodes">Episodes</translate>
+                            {{ $gettext('Episodes') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Stations/Profile/BackendNonePanel.vue b/frontend/vue/components/Stations/Profile/BackendNonePanel.vue
index 8a84d17d3..5c9f7ecec 100644
--- a/frontend/vue/components/Stations/Profile/BackendNonePanel.vue
+++ b/frontend/vue/components/Stations/Profile/BackendNonePanel.vue
@@ -1,10 +1,14 @@
 <template>
     <section class="card" role="region" id="profile-backend">
         <div class="card-header bg-primary-dark">
-            <h3 class="card-title" key="lang_backend_none_title" v-translate>AutoDJ Disabled</h3>
+            <h3 class="card-title">{{ $gettext('AutoDJ Disabled') }}</h3>
         </div>
         <div class="card-body">
-            <p key="lang_backend_none_desc" v-translate>AutoDJ has been disabled for this station. No music will automatically be played when a source is not live.</p>
+            <p class="card-text">
+                {{
+                    $gettext('AutoDJ has been disabled for this station. No music will automatically be played when a source is not live.')
+                }}
+            </p>
         </div>
     </section>
 </template>
diff --git a/frontend/vue/components/Stations/Profile/BackendPanel.vue b/frontend/vue/components/Stations/Profile/BackendPanel.vue
index bfc637990..636fe2c30 100644
--- a/frontend/vue/components/Stations/Profile/BackendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/BackendPanel.vue
@@ -2,8 +2,7 @@
     <section class="card" role="region" id="profile-backend">
         <div class="card-header bg-primary-dark">
             <h3 class="card-title">
-                <translate key="lang_profile_backend_title">AutoDJ Service</translate>
-
+                {{ $gettext('AutoDJ Service') }}
                 <running-badge :running="np.services.backend_running"></running-badge>
                 <br>
                 <small>{{ backendName }}</small>
@@ -15,24 +14,24 @@
             </p>
 
             <div class="buttons" v-if="userCanManageMedia">
-                <a class="btn btn-primary" :href="manageMediaUri" key="lang_profile_manage_media">Music Files</a>
-                <a class="btn btn-primary" :href="managePlaylistsUri" key="lang_profile_manage_playlists" v-translate>Playlists</a>
+                <a class="btn btn-primary" :href="manageMediaUri">{{ $gettext('Music Files') }}</a>
+                <a class="btn btn-primary" :href="managePlaylistsUri">{{ $gettext('Playlists') }}</a>
             </div>
         </div>
         <div class="card-actions" v-if="userCanManageBroadcasting && hasStarted">
             <a class="api-call no-reload btn btn-outline-secondary" :href="backendRestartUri">
                 <icon icon="update"></icon>
-                <translate key="lang_profile_backend_restart">Restart</translate>
+                {{ $gettext('Restart') }}
             </a>
             <a class="api-call no-reload btn btn-outline-success" v-show="!np.services.backend_running"
                :href="backendStartUri">
                 <icon icon="play_arrow"></icon>
-                <translate key="lang_profile_backend_start">Start</translate>
+                {{ $gettext('Start') }}
             </a>
             <a class="api-call no-reload btn btn-outline-danger" v-show="np.services.backend_running"
                :href="backendStopUri">
                 <icon icon="stop"></icon>
-                <translate key="lang_profile_backend_stop">Stop</translate>
+                {{ $gettext('Stop') }}
             </a>
         </div>
     </section>
diff --git a/frontend/vue/components/Stations/Profile/EmbedModal.vue b/frontend/vue/components/Stations/Profile/EmbedModal.vue
index 7a176454e..038389602 100644
--- a/frontend/vue/components/Stations/Profile/EmbedModal.vue
+++ b/frontend/vue/components/Stations/Profile/EmbedModal.vue
@@ -4,7 +4,7 @@
             <b-col md="7">
                 <b-card class="mb-3" no-body>
                     <div class="card-header bg-primary-dark">
-                        <h2 class="card-title" v-translate key="lang_embed_options">Customize</h2>
+                        <h2 class="card-title">{{ $gettext('Customize') }}</h2>
                     </div>
                     <b-card-body>
                         <b-row>
@@ -37,7 +37,7 @@
             <b-col md="5">
                 <b-card class="mb-3" no-body>
                     <div class="card-header bg-primary-dark">
-                        <h2 class="card-title" v-translate key="lang_embed_code">Embed Code</h2>
+                        <h2 class="card-title">{{ $gettext('Embed Code') }}</h2>
                     </div>
                     <b-card-body>
                         <textarea class="full-width form-control text-preformatted" spellcheck="false"
@@ -50,7 +50,7 @@
 
         <b-card class="mb-3" no-body>
             <div class="card-header bg-primary-dark">
-                <h2 class="card-title" v-translate key="lang_embed_preview">Preview</h2>
+                <h2 class="card-title">{{ $gettext('Preview') }}</h2>
             </div>
             <b-card-body :body-bg-variant="selectedTheme">
                 <iframe width="100%" :src="embedUrl" frameborder="0" style="width: 100%; border: 0;"
diff --git a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
index 35848d37f..ea8bdb90c 100644
--- a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
+++ b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
@@ -2,7 +2,7 @@
     <section class="card mb-4 nowplaying" role="region" id="profile-nowplaying">
         <div class="card-header bg-primary-dark">
             <div class="d-flex align-items-center">
-                <h3 class="flex-shrink card-title my-0" key="lang_profile_nowplaying_onair" v-translate>On the Air</h3>
+                <h3 class="flex-shrink card-title my-0">{{ $gettext('On the Air') }}</h3>
                 <h6 class="card-subtitle text-right flex-fill my-0" style="line-height: 1;">
                     <icon class="sm align-middle" icon="headset"></icon>
                     <span class="pl-1">
@@ -12,7 +12,7 @@
                     <br>
                     <small>
                         <span class="pr-1">{{ np.listeners.unique }}</span>
-                        <translate key="lang_profile_nowplaying_unique">Unique</translate>
+                        {{ $gettext('Unique') }}
                     </small>
                 </h6>
             </div>
@@ -24,7 +24,7 @@
                         <div class="clearfix">
                             <h6 style="margin-left: 32px;">
                                 <icon icon="music_note"></icon>
-                                <translate key="lang_profile_nowplaying_title">Now Playing</translate>
+                                {{ $gettext('Now Playing') }}
                             </h6>
                             <div class="media">
                                 <a class="mr-2" v-if="np.now_playing.song.art" :href="np.now_playing.song.art"
@@ -35,7 +35,7 @@
                                 <div class="media-body">
                                     <div v-if="!np.is_online">
                                         <h5 class="media-heading m-0 text-muted">
-                                            <translate key="station_offline">Station Offline</translate>
+                                            {{ $gettext('Station Offline') }}
                                         </h5>
                                     </div>
                                     <div v-else-if="np.now_playing.song.title !== ''">
@@ -50,7 +50,7 @@
                                     </div>
                                     <div v-if="np.now_playing.playlist">
                                         <small class="text-muted">
-                                            <translate key="lang_profile_nowplaying_playlist">Playlist</translate>
+                                            {{ $gettext('Playlist') }}
                                             : {{ np.now_playing.playlist }}</small>
                                     </div>
                                     <div class="nowplaying-progress" v-if="timeDisplay">
@@ -64,7 +64,7 @@
                         <div class="clearfix" v-if="!np.live.is_live && np.playing_next">
                             <h6 style="margin-left: 22px;">
                                 <icon icon="skip_next"></icon>
-                                <translate key="profile_nowplaying_playing_next">Playing Next</translate>
+                                {{ $gettext('Playing Next') }}
                             </h6>
 
                             <div class="media">
@@ -87,7 +87,7 @@
 
                                     <div v-if="np.playing_next.playlist">
                                         <small class="text-muted">
-                                            <translate key="lang_profile_nowplaying_playlist">Playlist</translate>
+                                            {{ $gettext('Playlist') }}
                                             : {{ np.playing_next.playlist }}</small>
                                     </div>
                                 </div>
@@ -96,7 +96,7 @@
                         <div class="clearfix" v-else-if="np.live.is_live">
                             <h6 style="margin-left: 22px;">
                                 <icon icon="mic"></icon>
-                                <translate key="lang_profile_nowplaying_live">Live</translate>
+                                {{ $gettext('Live') }}
                             </h6>
 
                             <h4 class="media-heading" style="margin-left: 22px;">
@@ -112,12 +112,12 @@
             <a id="btn_skip_song" class="btn btn-outline-primary api-call no-reload" role="button"
                v-if="!np.live.is_live" :href="backendSkipSongUri">
                 <icon icon="skip_next"></icon>
-                <translate key="lang_backend_skip">Skip Song</translate>
+                {{ $gettext('Skip Song') }}
             </a>
             <a id="btn_disconnect_streamer" class="btn btn-outline-primary api-call no-reload" role="button"
                v-if="np.live.is_live" :href="backendDisconnectStreamerUri">
                 <icon icon="volume_off"></icon>
-                <translate key="lang_backend_disconnect">Disconnect Streamer</translate>
+                {{ $gettext('Disconnect Streamer') }}
             </a>
         </div>
     </section>
diff --git a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
index 0a2ef1e59..609ed7889 100644
--- a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
+++ b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
@@ -14,31 +14,31 @@
                 </colgroup>
                 <tbody>
                 <tr>
-                    <td key="lang_profile_public_page" v-translate>Public Page</td>
+                    <td>{{ $gettext('Public Page') }}</td>
                     <td>
                         <a :href="publicPageUri">{{ publicPageUri }}</a>
                     </td>
                 </tr>
                 <tr v-if="stationSupportsStreamers && enableStreamers">
-                    <td key="lang_profile_web_dj" v-translate>Web DJ</td>
+                    <td>{{ $gettext('Web DJ') }}</td>
                     <td>
                         <a :href="publicWebDjUri">{{ publicWebDjUri }}</a>
                     </td>
                 </tr>
                 <tr v-if="enableOnDemand">
-                    <td key="lang_profile_on_demand_media" v-translate>On-Demand Media</td>
+                    <td>{{ $gettext('On-Demand Media') }}</td>
                     <td>
                         <a :href="publicOnDemandUri">{{ publicOnDemandUri }}</a>
                     </td>
                 </tr>
                 <tr>
-                    <td key="lang_profile_podcasts" v-translate>Podcasts</td>
+                    <td>{{ $gettext('Podcasts') }}</td>
                     <td>
                         <a :href="publicPodcastsUri">{{ publicPodcastsUri }}</a>
                     </td>
                 </tr>
                 <tr>
-                    <td key="lang_profile_schedule" v-translate>Schedule</td>
+                    <td>{{ $gettext('Schedule') }}</td>
                     <td>
                         <a :href="publicScheduleUri">{{ publicScheduleUri }}</a>
                     </td>
@@ -48,11 +48,11 @@
             <div class="card-actions" v-if="userCanManageProfile">
                 <a class="btn btn-outline-danger" @click.prevent="doOpenEmbed">
                     <icon icon="code"></icon>
-                    <translate key="lang_public_pages_disable">Embed Widgets</translate>
+                    {{ $gettext('Embed Widgets') }}
                 </a>
                 <a class="btn btn-outline-danger" :data-confirm-title="langDisablePublicPages" :href="togglePublicPageUri">
                     <icon icon="close"></icon>
-                    <translate key="lang_public_pages_disable">Disable</translate>
+                    {{ $gettext('Disable') }}
                 </a>
             </div>
             <embed-modal v-bind="$props" ref="embed_modal"></embed-modal>
@@ -60,14 +60,14 @@
         <template v-else>
             <div class="card-header bg-primary-dark">
                 <h3 class="card-title">
-                    <translate key="lang_profile_public_title">Public Pages</translate>
+                    {{ $gettext('Public Pages') }}
                     <enabled-badge :enabled="false"></enabled-badge>
                 </h3>
             </div>
             <div class="card-actions" v-if="userCanManageProfile">
                 <a class="btn btn-outline-success" :data-confirm-title="langEnablePublicPages" :href="togglePublicPageUri">
                     <icon icon="check"></icon>
-                    <translate key="lang_public_pages_enable">Enable</translate>
+                    {{ $gettext('Enable') }}
                 </a>
             </div>
         </template>
diff --git a/frontend/vue/components/Stations/Profile/SchedulePanel.vue b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
index 37cac6918..04eafca68 100644
--- a/frontend/vue/components/Stations/Profile/SchedulePanel.vue
+++ b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
@@ -2,7 +2,7 @@
     <div id="profile-scheduled">
         <section class="card mb-4 scheduled" role="region" v-if="processedScheduleItems.length > 0">
             <div class="card-header bg-primary-dark">
-                <h3 class="card-title" key="lang_schedule_title" v-translate>Scheduled</h3>
+                <h3 class="card-title">{{ $gettext('Scheduled') }}</h3>
             </div>
             <table class="table table-striped mb-0">
                 <tbody>
@@ -12,10 +12,10 @@
                             <h5 class="m-0">
                                 <small>
                                     <template v-if="row.type === 'playlist'">
-                                        <translate key="lang_schedule_playlist_name">Playlist</translate>
+                                        {{ $gettext('Playlist') }}
                                     </template>
                                     <template v-else>
-                                        <translate key="lang_schedule_streamer_name">Streamer/DJ</translate>
+                                        {{ $gettext('Streamer/DJ') }}
                                     </template>
                                 </small><br>
                                 {{ row.name }}
@@ -25,7 +25,7 @@
                                 <br>
                                 <strong>
                                     <template v-if="row.is_now">
-                                        <translate key="lang_schedule_now">Now</translate>
+                                        {{ $gettext('Now') }}
                                     </template>
                                     <template v-else>{{ row.time_until }}</template>
                                 </strong>
diff --git a/frontend/vue/components/Stations/Profile/StreamsPanel.vue b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
index 7e40a5e26..bc0bb0366 100644
--- a/frontend/vue/components/Stations/Profile/StreamsPanel.vue
+++ b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="card mb-4" role="region">
         <div class="card-header bg-primary-dark">
-            <h3 class="card-title" key="lang_profile_streams" v-translate>Streams</h3>
+            <h3 class="card-title">{{ $gettext('Streams') }}</h3>
         </div>
         <table class="table table-sm table-striped table-responsive mb-0">
             <colgroup>
@@ -12,8 +12,8 @@
             <template v-if="np.station.mounts.length > 0">
                 <thead>
                 <tr>
-                    <th colspan="2" key="lang_streams_local" v-translate>Local Streams</th>
-                    <th class="text-right" key="lang_streams_listeners" v-translate>Listeners</th>
+                    <th colspan="2">{{ $gettext('Local Streams') }}</th>
+                    <th class="text-right">{{ $gettext('Listeners') }}</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -30,7 +30,7 @@
                         <span class="listeners-total pl-1">{{ mount.listeners.total }}</span><br>
                         <small>
                             <span class="listeners-unique pr-1">{{ mount.listeners.unique }}</span>
-                            <translate key="lang_streams_unique">Unique</translate>
+                            {{ $gettext('Unique') }}
                         </small>
                     </td>
                 </tr>
@@ -40,8 +40,8 @@
             <template v-if="np.station.remotes.length > 0">
                 <thead>
                 <tr>
-                    <th colspan="2" key="lang_streams_remote" v-translate>Remote Relays</th>
-                    <th class="text-right" key="lang_streams_listeners" v-translate>Listeners</th>
+                    <th colspan="2">{{ $gettext('Remote Relays') }}</th>
+                    <th class="text-right">{{ $gettext('Listeners') }}</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -58,7 +58,7 @@
                         <span class="listeners-total pl-1">{{ remote.listeners.total }}</span><br>
                         <small>
                             <span class="listeners-unique pr-1">{{ remote.listeners.unique }}</span>
-                            <translate key="lang_streams_unique">Unique</translate>
+                            {{ $gettext('Unique') }}
                         </small>
                     </td>
                 </tr>
@@ -68,8 +68,8 @@
             <template v-if="np.station.hls_enabled">
                 <thead>
                 <tr>
-                    <th colspan="2" key="lang_streams_hls" v-translate>HTTP Live Streaming (HLS)</th>
-                    <th class="text-right" key="lang_streams_listeners" v-translate>Listeners</th>
+                    <th colspan="2">{{ $gettext('HTTP Live Streaming (HLS)') }}</th>
+                    <th class="text-right">{{ $gettext('Listeners') }}</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -91,11 +91,11 @@
         <div class="card-actions">
             <a class="btn btn-outline-primary" :href="np.station.playlist_pls_url">
                 <icon icon="file_download"></icon>
-                <translate key="lang_streams_download_pls">Download PLS</translate>
+                {{ $gettext('Download PLS') }}
             </a>
             <a class="btn btn-outline-primary" :href="np.station.playlist_m3u_url">
                 <icon icon="file_download"></icon>
-                <translate key="lang_streams_download_m3u">Download M3U</translate>
+                {{ $gettext('Download M3U') }}
             </a>
         </div>
     </section>
diff --git a/frontend/vue/components/Stations/Queue.vue b/frontend/vue/components/Stations/Queue.vue
index c49ebe6c5..d2a63cde2 100644
--- a/frontend/vue/components/Stations/Queue.vue
+++ b/frontend/vue/components/Stations/Queue.vue
@@ -2,12 +2,12 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_queue" v-translate>Upcoming Song Queue</h2>
+                <h2 class="card-title">{{ $gettext('Upcoming Song Queue') }}</h2>
             </b-card-header>
             <div class="card-actions">
                 <b-button variant="outline-danger" @click="doClear()">
                     <icon icon="remove"></icon>
-                    <translate key="lang_btn_clear_requests">Clear Upcoming Song Queue</translate>
+                    {{ $gettext('Clear Upcoming Song Queue') }}
                 </b-button>
             </div>
             <data-table ref="datatable" id="station_queue" :fields="fields" :api-url="listUrl">
@@ -15,11 +15,11 @@
                     <b-button-group>
                         <b-button v-if="row.item.log" size="sm" variant="primary"
                                   @click.prevent="doShowLogs(row.item.log)">
-                            <translate key="lang_btn_logs">Logs</translate>
+                            {{ $gettext('Logs') }}
                         </b-button>
                         <b-button v-if="!row.item.sent_to_autodj" size="sm" variant="danger"
                                   @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
@@ -41,11 +41,10 @@
                 </template>
                 <template #cell(source)="row">
                     <div v-if="row.item.is_request">
-                        <translate key="lang_source_request">Listener Request</translate>
+                        {{ $gettext('Listener Request') }}
                     </div>
                     <div v-else-if="row.item.playlist">
-                        <translate key="lang_source_playlist">Playlist: </translate>
-                        {{ row.item.playlist }}
+                        {{ $gettext('Playlist') }}: {{ row.item.playlist }}
                     </div>
                 </template>
             </data-table>
diff --git a/frontend/vue/components/Stations/Remotes.vue b/frontend/vue/components/Stations/Remotes.vue
index c19f4c826..d1563d624 100644
--- a/frontend/vue/components/Stations/Remotes.vue
+++ b/frontend/vue/components/Stations/Remotes.vue
@@ -2,19 +2,21 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>Remote Relays</h2>
+                <h2 class="card-title">{{ $gettext('Remote Relays') }}</h2>
             </b-card-header>
 
             <info-card>
                 <p class="card-text">
-                    <translate key="lang_card_info">Remote relays let you work with broadcasting software outside this server. Any relay you include here will be included in your station's statistics. You can also broadcast from this server to remote relays.</translate>
+                    {{
+                        $gettext('Remote relays let you work with broadcasting software outside this server. Any relay you include here will be included in your station\'s statistics. You can also broadcast from this server to remote relays.')
+                    }}
                 </p>
             </info-card>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_btn">Add Remote Relay</translate>
+                    {{ $gettext('Add Remote Relay') }}
                 </b-button>
             </b-card-body>
 
@@ -26,21 +28,21 @@
                 </template>
                 <template #cell(enable_autodj)="row">
                     <template v-if="row.item.enable_autodj">
-                        <translate key="lang_autodj_enabled">Enabled</translate>
-                        -
-                        {{ row.item.autodj_bitrate }}kbps {{ upper(row.item.autodj_format) }}
+                        {{ $gettext('Enabled') }} - {{ row.item.autodj_bitrate }}kbps {{
+                            upper(row.item.autodj_format)
+                        }}
                     </template>
                     <template v-else>
-                        <translate key="lang_autodj_disabled">Disabled</translate>
+                        {{ $gettext('Disabled') }}
                     </template>
                 </template>
                 <template #cell(actions)="row">
                     <b-button-group size="sm" v-if="row.item.is_editable">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Stations/Reports/Requests.vue b/frontend/vue/components/Stations/Reports/Requests.vue
index 12c01c800..e90c6a6fd 100644
--- a/frontend/vue/components/Stations/Reports/Requests.vue
+++ b/frontend/vue/components/Stations/Reports/Requests.vue
@@ -2,7 +2,7 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_queue" v-translate>Song Requests</h2>
+                <h2 class="card-title">{{ $gettext('Song Requests') }}</h2>
             </b-card-header>
             <b-tabs pills card>
                 <b-tab v-for="tab in tabs" :key="tab.type" :active="activeType === tab.type" @click="setType(tab.type)"
@@ -12,7 +12,7 @@
             <div class="card-actions" v-if="activeType === 'pending'">
                 <b-button variant="outline-danger" @click="doClear()">
                     <icon icon="remove"></icon>
-                    <translate key="lang_btn_clear_requests">Clear Pending Requests</translate>
+                    {{ $gettext('Clear Pending Requests') }}
                 </b-button>
             </div>
 
@@ -22,7 +22,7 @@
                 </template>
                 <template #cell(played_at)="row">
                     <span v-if="row.item.played_at === 0">
-                        <translate key="lang_item_not_played">Not Played</translate>
+                        {{ $gettext('Not Played') }}
                     </span>
                     <span v-else>
                         {{ formatTime(row.item.played_at) }}
@@ -44,7 +44,7 @@
                     <b-button-group>
                         <b-button v-if="row.item.played_at === 0" size="sm" variant="danger"
                                   @click.prevent="doDelete(row.item.links.delete)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>
diff --git a/frontend/vue/components/Stations/SftpUsers.vue b/frontend/vue/components/Stations/SftpUsers.vue
index 3c9c92515..e80f4b792 100644
--- a/frontend/vue/components/Stations/SftpUsers.vue
+++ b/frontend/vue/components/Stations/SftpUsers.vue
@@ -3,13 +3,13 @@
         <div class="col-md-8">
             <b-card no-body>
                 <b-card-header header-bg-variant="primary-dark">
-                    <h2 class="card-title" key="lang_title" v-translate>SFTP Users</h2>
+                    <h2 class="card-title">{{ $gettext('SFTP Users') }}</h2>
                 </b-card-header>
 
                 <b-card-body body-class="card-padding-sm">
                     <b-button variant="outline-primary" @click.prevent="doCreate">
                         <icon icon="add"></icon>
-                        <translate key="lang_add_btn">Add SFTP User</translate>
+                        {{ $gettext('Add SFTP User') }}
                     </b-button>
                 </b-card-body>
 
@@ -18,10 +18,10 @@
                     <template #cell(actions)="row">
                         <b-button-group size="sm">
                             <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                                <translate key="lang_btn_edit">Edit</translate>
+                                {{ $gettext('Edit') }}
                             </b-button>
                             <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                                <translate key="lang_btn_delete">Delete</translate>
+                                {{ $gettext('Delete') }}
                             </b-button>
                         </b-button-group>
                     </template>
@@ -32,23 +32,23 @@
             <div class="card">
                 <div class="card-header bg-primary-dark">
                     <h2 class="card-title">
-                        <translate key="lang_connection_info">Connection Information</translate>
+                        {{ $gettext('Connection Information') }}
                     </h2>
                 </div>
                 <div class="card-body">
                     <dl>
                         <dt class="mb-1">
-                            <translate key="lang_connection_server">Server:</translate>
+                            {{ $gettext('Server:') }}
                         </dt>
                         <dd><code>{{ connectionInfo.url }}</code></dd>
 
                         <dd v-if="connectionInfo.ip">
-                            <translate key="lang_connection_ip">You may need to connect directly to your IP address:</translate>
+                            {{ $gettext('You may need to connect directly to your IP address:') }}
                             <code>{{ connectionInfo.ip }}</code>
                         </dd>
 
                         <dt class="mb-1">
-                            <translate key="lang_connection_port">Port:</translate>
+                            {{ $gettext('Port:') }}
                         </dt>
                         <dd><code>{{ connectionInfo.port }}</code></dd>
                     </dl>
diff --git a/frontend/vue/components/Stations/Streamers.vue b/frontend/vue/components/Stations/Streamers.vue
index 03a5531a2..9a32622c7 100644
--- a/frontend/vue/components/Stations/Streamers.vue
+++ b/frontend/vue/components/Stations/Streamers.vue
@@ -5,10 +5,15 @@
                 <b-card-header header-bg-variant="primary-dark">
                     <b-row class="align-items-center">
                         <b-col md="6">
-                            <h2 class="card-title" key="lang_title" v-translate>Streamer/DJ Accounts</h2>
+                            <h2 class="card-title">{{ $gettext('Streamer/DJ Accounts') }}</h2>
                         </b-col>
                         <b-col md="6" class="text-right text-muted">
-                            <translate key="lang_station_tz" :translate-params="{ tz: stationTimeZone }">This station's time zone is currently %{tz}.</translate>
+                            {{
+                                $gettext(
+                                    'This station\'s time zone is currently %{tz}.',
+                                    {tz: stationTimeZone}
+                                )
+                            }}
                         </b-col>
                     </b-row>
                 </b-card-header>
@@ -18,7 +23,7 @@
                         <b-card-body body-class="card-padding-sm">
                             <b-button variant="outline-primary" @click.prevent="doCreate">
                                 <icon icon="add"></icon>
-                                <translate key="lang_add_streamer">Add Streamer</translate>
+                                {{ $gettext('Add Streamer') }}
                             </b-button>
                         </b-card-body>
 
@@ -31,21 +36,21 @@
                                 <code>{{ row.item.streamer_username }}</code>
                                 <div>
                                 <span class="badge badge-danger" v-if="!row.item.is_active">
-                                    <translate key="lang_disabled">Disabled</translate>
+                                    {{ $gettext('Disabled') }}
                                 </span>
                                 </div>
                             </template>
                             <template #cell(actions)="row">
                                 <b-button-group size="sm">
                                     <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                                        <translate key="lang_btn_edit">Edit</translate>
+                                        {{ $gettext('Edit') }}
                                     </b-button>
                                     <b-button size="sm" variant="default"
                                               @click.prevent="doShowBroadcasts(row.item.links.broadcasts)">
-                                        <translate key="lang_btn_broadcasts">Broadcasts</translate>
+                                        {{ $gettext('Broadcasts') }}
                                     </b-button>
                                     <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                                        <translate key="lang_btn_delete">Delete</translate>
+                                        {{ $gettext('Delete') }}
                                     </b-button>
                                 </b-button-group>
                             </template>
diff --git a/frontend/vue/components/Stations/Webhooks.vue b/frontend/vue/components/Stations/Webhooks.vue
index ef147c376..791ee3086 100644
--- a/frontend/vue/components/Stations/Webhooks.vue
+++ b/frontend/vue/components/Stations/Webhooks.vue
@@ -2,17 +2,17 @@
     <div>
         <b-card no-body>
             <b-card-header header-bg-variant="primary-dark">
-                <h2 class="card-title" key="lang_title" v-translate>Web Hooks</h2>
+                <h2 class="card-title">{{ $gettext('Web Hooks') }}</h2>
             </b-card-header>
 
             <info-card>
-                <translate key="lang_info_card">Web hooks let you connect to external web services and broadcast changes to your station to them.</translate>
+                {{ $gettext('Web hooks let you connect to external web services and broadcast changes to your station to them.') }}
             </info-card>
 
             <b-card-body body-class="card-padding-sm">
                 <b-button variant="outline-primary" @click.prevent="doCreate">
                     <icon icon="add"></icon>
-                    <translate key="lang_add_webhook">Add Web Hook</translate>
+                    {{ $gettext('Add Web Hook') }}
                 </b-button>
             </b-card-body>
 
@@ -22,7 +22,7 @@
                     <big>{{ row.item.name }}</big><br>
                     {{ getWebhookName(row.item.type) }}
                     <b-badge v-if="!row.item.is_enabled" variant="danger">
-                        <translate key="lang_webhook_disabled">Disabled</translate>
+                        {{ $gettext('Disabled') }}
                     </b-badge>
                 </template>
                 <template #cell(triggers)="row">
@@ -34,17 +34,17 @@
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
                         <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
-                            <translate key="lang_btn_edit">Edit</translate>
+                            {{ $gettext('Edit') }}
                         </b-button>
                         <b-button size="sm" :variant="getToggleVariant(row.item)"
                                   @click.prevent="doToggle(row.item.links.toggle)">
                             {{ langToggleButton(row.item) }}
                         </b-button>
                         <b-button size="sm" variant="default" @click.prevent="doTest(row.item.links.test)">
-                            <translate key="lang_btn_test">Test</translate>
+                            {{ $gettext('Test') }}
                         </b-button>
                         <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
-                            <translate key="lang_btn_delete">Delete</translate>
+                            {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
                 </template>