From e3b877cc9cd6feeee75d7e71980a941445c368b3 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Thu, 29 Dec 2022 15:15:05 -0600
Subject: [PATCH] Auto-fix ESlint rules.

---
 frontend/vue/components/Account.vue           | 177 +++++++--
 .../vue/components/Account/ApiKeyModal.vue    |  54 ++-
 .../vue/components/Account/ApiKeyNewKey.vue   |   6 +-
 .../Account/ChangePasswordModal.vue           |  31 +-
 frontend/vue/components/Account/EditForm.vue  |  57 ++-
 frontend/vue/components/Account/EditModal.vue |  19 +-
 .../vue/components/Account/TwoFactorModal.vue |  43 +-
 frontend/vue/components/Admin/ApiKeys.vue     |  22 +-
 frontend/vue/components/Admin/AuditLog.vue    | 104 +++--
 frontend/vue/components/Admin/Backups.vue     | 108 ++++--
 .../Admin/Backups/ConfigureModal.vue          |  79 +++-
 .../Admin/Backups/LastOutputModal.vue         |  14 +-
 .../Admin/Backups/RunBackupModal.vue          |  77 +++-
 frontend/vue/components/Admin/Branding.vue    |  30 +-
 .../Admin/Branding/BrandingForm.vue           | 114 ++++--
 .../Admin/Branding/CustomAssetForm.vue        |  39 +-
 .../vue/components/Admin/CustomFields.vue     |  39 +-
 .../Admin/CustomFields/EditModal.vue          |  27 +-
 .../components/Admin/CustomFields/Form.vue    |  25 +-
 frontend/vue/components/Admin/GeoLite.vue     |  36 +-
 frontend/vue/components/Admin/Index.vue       | 350 ++++++++++++-----
 .../Admin/Index/CpuStatsHelpModal.vue         |  35 +-
 .../Admin/Index/MemoryStatsHelpModal.vue      |  28 +-
 frontend/vue/components/Admin/Logs.vue        |  30 +-
 frontend/vue/components/Admin/Permissions.vue |  53 ++-
 .../Admin/Permissions/EditModal.vue           |  32 +-
 .../Admin/Permissions/Form/GlobalForm.vue     |  27 +-
 .../Admin/Permissions/Form/StationForm.vue    |  24 +-
 .../Admin/Permissions/Form/StationRow.vue     |  31 +-
 frontend/vue/components/Admin/Settings.vue    |  47 ++-
 .../components/Admin/Settings/GeneralTab.vue  |  57 ++-
 .../Admin/Settings/SecurityPrivacyTab.vue     |  32 +-
 .../components/Admin/Settings/ServicesTab.vue | 165 ++++++--
 .../Admin/Settings/TestMessageModal.vue       |  23 +-
 frontend/vue/components/Admin/Shoutcast.vue   |  27 +-
 frontend/vue/components/Admin/Stations.vue    |  62 ++-
 .../components/Admin/Stations/CloneModal.vue  |  16 +-
 .../Admin/Stations/CloneModalForm.vue         |  22 +-
 .../components/Admin/Stations/EditModal.vue   |  40 +-
 .../Admin/Stations/Form/AdminForm.vue         |  62 ++-
 .../Admin/Stations/Form/BackendForm.vue       | 161 +++++---
 .../Admin/Stations/Form/FrontendForm.vue      | 132 +++++--
 .../Admin/Stations/Form/HlsForm.vue           |  59 ++-
 .../Admin/Stations/Form/ProfileForm.vue       |  95 +++--
 .../Admin/Stations/Form/RequestsForm.vue      |  29 +-
 .../Admin/Stations/Form/StreamersForm.vue     |  91 +++--
 .../components/Admin/Stations/StationForm.vue |  97 +++--
 frontend/vue/components/Admin/StereoTool.vue  |  27 +-
 .../vue/components/Admin/StorageLocations.vue |  75 +++-
 .../Admin/StorageLocations/EditModal.vue      |  15 +-
 .../Admin/StorageLocations/Form.vue           | 134 +++++--
 frontend/vue/components/Admin/Users.vue       |  67 +++-
 .../vue/components/Admin/Users/EditModal.vue  |  26 +-
 frontend/vue/components/Admin/Users/Form.vue  |  40 +-
 frontend/vue/components/Common/AlbumArt.vue   |  31 +-
 .../vue/components/Common/AudioPlayer.vue     |   6 +-
 frontend/vue/components/Common/Avatar.vue     |  16 +-
 .../components/Common/Badges/EnabledBadge.vue |   5 +-
 .../components/Common/Badges/RunningBadge.vue |   5 +-
 .../vue/components/Common/BaseEditModal.vue   |  10 +-
 .../components/Common/Charts/HourChart.vue    |   2 +-
 .../vue/components/Common/Charts/PieChart.vue |   2 +-
 .../Common/Charts/TimeSeriesChart.vue         |   2 +-
 .../components/Common/CodemirrorTextarea.vue  |   7 +-
 .../Common/CopyToClipboardButton.vue          |  13 +-
 frontend/vue/components/Common/DataTable.vue  | 270 ++++++++-----
 .../components/Common/DateRangeDropdown.vue   |  43 +-
 frontend/vue/components/Common/FlowUpload.vue | 138 ++++---
 frontend/vue/components/Common/Icon.vue       |   5 +-
 frontend/vue/components/Common/InfoCard.vue   |   9 +-
 .../Common/InvisibleSubmitButton.vue          |   7 +-
 frontend/vue/components/Common/LogList.vue    |  11 +-
 frontend/vue/components/Common/ModalForm.vue  |  67 +++-
 frontend/vue/components/Common/PlayButton.vue |  11 +-
 .../vue/components/Common/ScheduleView.vue    |   5 +-
 .../components/Common/StreamingLogModal.vue   |  28 +-
 .../components/Common/StreamingLogView.vue    |  21 +-
 frontend/vue/components/Common/TimeCode.vue   |   8 +-
 frontend/vue/components/Common/Waveform.vue   |  45 ++-
 frontend/vue/components/Dashboard.vue         | 328 +++++++++++-----
 frontend/vue/components/Form/BFormMarkup.vue  |  30 +-
 .../components/Form/BWrappedFormCheckbox.vue  |  47 ++-
 .../vue/components/Form/BWrappedFormGroup.vue |  76 +++-
 frontend/vue/components/InlinePlayer.vue      | 114 ++++--
 frontend/vue/components/Public/FullPlayer.vue |  43 +-
 .../Public/FullPlayer/RequestModal.vue        |  16 +-
 .../Public/FullPlayer/SongHistory.vue         |  71 ++--
 .../Public/FullPlayer/SongHistoryModal.vue    |  14 +-
 frontend/vue/components/Public/History.vue    |   5 +-
 frontend/vue/components/Public/OnDemand.vue   | 138 ++++---
 frontend/vue/components/Public/Player.vue     | 366 +++++++++++-------
 frontend/vue/components/Public/Requests.vue   |  45 ++-
 frontend/vue/components/Public/Schedule.vue   |  44 ++-
 frontend/vue/components/Public/WebDJ.vue      |  32 +-
 .../Public/WebDJ/MicrophonePanel.vue          |  48 ++-
 .../components/Public/WebDJ/MixerPanel.vue    |  13 +-
 .../components/Public/WebDJ/PlaylistPanel.vue | 156 ++++++--
 .../components/Public/WebDJ/SettingsPanel.vue | 272 ++++++++++---
 .../components/Public/WebDJ/VolumeSlider.vue  |  15 +-
 frontend/vue/components/Recover.vue           |  44 ++-
 frontend/vue/components/Setup/Register.vue    |  58 ++-
 frontend/vue/components/Setup/Settings.vue    |   8 +-
 frontend/vue/components/Setup/SetupStep.vue   |  10 +-
 frontend/vue/components/Setup/Station.vue     |  11 +-
 .../vue/components/Stations/BulkMedia.vue     |  73 +++-
 .../vue/components/Stations/Common/Quota.vue  |  22 +-
 frontend/vue/components/Stations/Fallback.vue |  31 +-
 frontend/vue/components/Stations/Help.vue     |  22 +-
 .../vue/components/Stations/HlsStreams.vue    |  43 +-
 .../Stations/HlsStreams/EditModal.vue         |  22 +-
 .../Stations/HlsStreams/Form/BasicInfo.vue    |  35 +-
 .../components/Stations/LiquidsoapConfig.vue  |  43 +-
 frontend/vue/components/Stations/Media.vue    | 192 ++++++---
 .../components/Stations/Media/Breadcrumb.vue  |  15 +-
 .../components/Stations/Media/EditModal.vue   |  44 ++-
 .../components/Stations/Media/FileUpload.vue  |  12 +-
 .../Stations/Media/Form/AdvancedSettings.vue  |  65 +++-
 .../Stations/Media/Form/AlbumArt.vue          |  19 +-
 .../Stations/Media/Form/BasicInfo.vue         |  43 +-
 .../Stations/Media/Form/CustomFields.vue      |  14 +-
 .../Stations/Media/Form/Playlists.vue         |   8 +-
 .../Stations/Media/Form/WaveformEditor.vue    |  56 ++-
 .../Stations/Media/MediaToolbar.vue           | 172 +++++---
 .../Stations/Media/MoveFilesModal.vue         |  55 ++-
 .../Stations/Media/NewDirectoryModal.vue      |  29 +-
 .../components/Stations/Media/RenameModal.vue |  29 +-
 frontend/vue/components/Stations/Mounts.vue   |  44 ++-
 .../components/Stations/Mounts/EditModal.vue  |  56 ++-
 .../Stations/Mounts/Form/Advanced.vue         |  24 +-
 .../Stations/Mounts/Form/AutoDj.vue           |  37 +-
 .../Stations/Mounts/Form/BasicInfo.vue        |  68 +++-
 .../components/Stations/Mounts/Form/Intro.vue |  26 +-
 .../vue/components/Stations/Playlists.vue     | 162 ++++++--
 .../Stations/Playlists/CloneModal.vue         |  33 +-
 .../Stations/Playlists/EditModal.vue          |  40 +-
 .../Stations/Playlists/Form/Advanced.vue      |  12 +-
 .../Stations/Playlists/Form/BasicInfo.vue     | 198 +++++++---
 .../Stations/Playlists/Form/Schedule.vue      |  20 +-
 .../Stations/Playlists/Form/ScheduleRow.vue   |  99 +++--
 .../Stations/Playlists/ImportModal.vue        |  63 ++-
 .../Stations/Playlists/QueueModal.vue         |  44 ++-
 .../Stations/Playlists/ReorderModal.vue       |  99 +++--
 frontend/vue/components/Stations/Podcasts.vue |  14 +-
 .../Stations/Podcasts/Common/Artwork.vue      |  25 +-
 .../Stations/Podcasts/EpisodeEditModal.vue    |  44 ++-
 .../Podcasts/EpisodeForm/BasicInfo.vue        |  60 ++-
 .../Stations/Podcasts/EpisodeForm/Media.vue   |  26 +-
 .../Stations/Podcasts/EpisodesView.vue        |  90 ++++-
 .../components/Stations/Podcasts/ListView.vue |  80 +++-
 .../Stations/Podcasts/PodcastEditModal.vue    |  40 +-
 .../Podcasts/PodcastForm/BasicInfo.vue        |  69 +++-
 frontend/vue/components/Stations/Profile.vue  |  49 ++-
 .../Stations/Profile/BackendNonePanel.vue     |  10 +-
 .../Stations/Profile/BackendPanel.vue         |  53 ++-
 .../Stations/Profile/EmbedModal.vue           |  58 ++-
 .../Stations/Profile/FrontendPanel.vue        | 167 ++++----
 .../Stations/Profile/HeaderPanel.vue          |  35 +-
 .../Stations/Profile/NowPlayingPanel.vue      | 138 +++++--
 .../Stations/Profile/PublicPagesPanel.vue     | 109 +++---
 .../Stations/Profile/RequestsPanel.vue        |  46 ++-
 .../Stations/Profile/SchedulePanel.vue        |  64 +--
 .../Stations/Profile/StreamersPanel.vue       |  46 ++-
 .../Stations/Profile/StreamsPanel.vue         | 192 ++++++---
 .../vue/components/Stations/ProfileEdit.vue   |  14 +-
 frontend/vue/components/Stations/Queue.vue    |  36 +-
 .../components/Stations/Queue/LogsModal.vue   |  25 +-
 frontend/vue/components/Stations/Remotes.vue  |  49 ++-
 .../components/Stations/Remotes/EditModal.vue |  32 +-
 .../Stations/Remotes/Form/AutoDj.vue          |  71 +++-
 .../Stations/Remotes/Form/BasicInfo.vue       |  49 ++-
 .../components/Stations/Reports/Listeners.vue |  61 ++-
 .../Stations/Reports/Listeners/InnerMap.vue   |  28 +-
 .../Stations/Reports/Listeners/Map.vue        |  13 +-
 .../Stations/Reports/Listeners/MapPoint.vue   |   2 +-
 .../components/Stations/Reports/Overview.vue  |  61 ++-
 .../Reports/Overview/BestAndWorstTab.vue      | 138 ++++---
 .../Stations/Reports/Overview/BrowsersTab.vue |   8 +-
 .../Stations/Reports/Overview/ClientsTab.vue  |   8 +-
 .../Reports/Overview/CommonMetricsView.vue    |  53 ++-
 .../Reports/Overview/CountriesTab.vue         |   8 +-
 .../Overview/ListenersByTimePeriodTab.vue     |  55 ++-
 .../Reports/Overview/ListeningTimeTab.vue     |  32 +-
 .../Stations/Reports/Overview/StreamsTab.vue  |   8 +-
 .../components/Stations/Reports/Requests.vue  |  70 ++--
 .../Stations/Reports/SoundExchange.vue        |  70 +++-
 .../components/Stations/Reports/Timeline.vue  |  57 ++-
 .../vue/components/Stations/SftpUsers.vue     |  38 +-
 .../Stations/SftpUsers/EditModal.vue          |  22 +-
 .../components/Stations/SftpUsers/Form.vue    |  38 +-
 .../components/Stations/StereoToolConfig.vue  |  35 +-
 .../vue/components/Stations/Streamers.vue     |  91 +++--
 .../Stations/Streamers/BroadcastsModal.vue    |  56 ++-
 .../Stations/Streamers/ConnectionInfo.vue     |   5 +-
 .../Stations/Streamers/EditModal.vue          |  43 +-
 .../Stations/Streamers/Form/Artwork.vue       |  25 +-
 .../Stations/Streamers/Form/BasicInfo.vue     |  51 ++-
 .../Stations/Streamers/Form/Schedule.vue      |  20 +-
 .../Stations/Streamers/Form/ScheduleRow.vue   |  79 +++-
 frontend/vue/components/Stations/Webhooks.vue |  74 +++-
 .../Stations/Webhooks/EditModal.vue           |  43 +-
 .../Stations/Webhooks/Form/BasicInfo.vue      |  24 +-
 .../Webhooks/Form/Common/FormattingInfo.vue   |   5 +-
 .../Webhooks/Form/Common/RateLimitFields.vue  |  13 +-
 .../Webhooks/Form/Common/SocialPostFields.vue |  51 ++-
 .../Stations/Webhooks/Form/Discord.vue        |  55 ++-
 .../Stations/Webhooks/Form/Email.vue          |  20 +-
 .../Stations/Webhooks/Form/Generic.vue        |  37 +-
 .../Webhooks/Form/GoogleAnalytics.vue         |   6 +-
 .../Stations/Webhooks/Form/Mastodon.vue       |  35 +-
 .../Webhooks/Form/MatomoAnalytics.vue         |  20 +-
 .../Stations/Webhooks/Form/Telegram.vue       |  53 ++-
 .../Stations/Webhooks/Form/Tunein.vue         |  18 +-
 .../Stations/Webhooks/Form/Twitter.vue        |  37 +-
 .../Stations/Webhooks/Form/TypeSelect.vue     |  17 +-
 214 files changed, 8394 insertions(+), 3132 deletions(-)

diff --git a/frontend/vue/components/Account.vue b/frontend/vue/components/Account.vue
index 7bf4da736..4bf2ce9d8 100644
--- a/frontend/vue/components/Account.vue
+++ b/frontend/vue/components/Account.vue
@@ -5,52 +5,100 @@
         </h2>
 
         <b-row>
-            <b-col sm="12" md="6" lg="5">
-                <section class="card mb-3" role="region">
+            <b-col
+                sm="12"
+                md="6"
+                lg="5"
+            >
+                <section
+                    class="card mb-3"
+                    role="region"
+                >
                     <b-card-header header-bg-variant="primary-dark">
-                        <h2 class="card-title">{{ $gettext('Profile') }}</h2>
+                        <h2 class="card-title">
+                            {{ $gettext('Profile') }}
+                        </h2>
                     </b-card-header>
 
-                    <b-overlay variant="card" :show="userLoading">
+                    <b-overlay
+                        variant="card"
+                        :show="userLoading"
+                    >
                         <b-card-body body-class="card-padding-sm">
-                            <b-media right-align vertical-align="center">
-                                <template v-if="user.avatar.url" #aside>
-                                    <avatar :url="user.avatar.url" :service="user.avatar.service"
-                                            :service-url="user.avatar.serviceUrl"></avatar>
+                            <b-media
+                                right-align
+                                vertical-align="center"
+                            >
+                                <template
+                                    v-if="user.avatar.url"
+                                    #aside
+                                >
+                                    <avatar
+                                        :url="user.avatar.url"
+                                        :service="user.avatar.service"
+                                        :service-url="user.avatar.serviceUrl"
+                                    />
                                 </template>
 
-                                <h2 v-if="user.name" class="card-title">{{ user.name }}</h2>
-                                <h2 v-else class="card-title">
+                                <h2
+                                    v-if="user.name"
+                                    class="card-title"
+                                >
+                                    {{ user.name }}
+                                </h2>
+                                <h2
+                                    v-else
+                                    class="card-title"
+                                >
                                     {{ $gettext('AzuraCast User') }}
                                 </h2>
-                                <h3 class="card-subtitle">{{ user.email }}</h3>
+                                <h3 class="card-subtitle">
+                                    {{ user.email }}
+                                </h3>
 
-                                <div v-if="user.roles.length > 0" class="mt-2">
-                                <span v-for="role in user.roles" :key="role.id"
-                                      class="badge badge-secondary mr-2">{{ role.name }}</span>
+                                <div
+                                    v-if="user.roles.length > 0"
+                                    class="mt-2"
+                                >
+                                    <span
+                                        v-for="role in user.roles"
+                                        :key="role.id"
+                                        class="badge badge-secondary mr-2"
+                                    >{{ role.name }}</span>
                                 </div>
                             </b-media>
                         </b-card-body>
                     </b-overlay>
 
                     <div class="card-actions">
-                        <b-button variant="outline-primary" @click.prevent="doEditProfile">
-                            <icon icon="edit"></icon>
+                        <b-button
+                            variant="outline-primary"
+                            @click.prevent="doEditProfile"
+                        >
+                            <icon icon="edit" />
                             {{ $gettext('Edit Profile') }}
                         </b-button>
                     </div>
                 </section>
 
-                <section class="card" role="region">
+                <section
+                    class="card"
+                    role="region"
+                >
                     <b-card-header header-bg-variant="primary-dark">
-                        <h2 class="card-title">{{ $gettext('Security') }}</h2>
+                        <h2 class="card-title">
+                            {{ $gettext('Security') }}
+                        </h2>
                     </b-card-header>
 
-                    <b-overlay variant="card" :show="securityLoading">
+                    <b-overlay
+                        variant="card"
+                        :show="securityLoading"
+                    >
                         <b-card-body>
                             <h5>
                                 {{ $gettext('Two-Factor Authentication') }}
-                                <enabled-badge :enabled="security.twoFactorEnabled"></enabled-badge>
+                                <enabled-badge :enabled="security.twoFactorEnabled" />
                             </h5>
 
                             <p class="card-text mt-2">
@@ -62,49 +110,80 @@
                     </b-overlay>
 
                     <div class="card-actions">
-                        <b-button variant="outline-primary" @click.prevent="doChangePassword">
-                            <icon icon="vpn_key"></icon>
+                        <b-button
+                            variant="outline-primary"
+                            @click.prevent="doChangePassword"
+                        >
+                            <icon icon="vpn_key" />
                             {{ $gettext('Change Password') }}
                         </b-button>
-                        <b-button v-if="security.twoFactorEnabled" variant="outline-danger"
-                                  @click.prevent="disableTwoFactor">
-                            <icon icon="lock_open"></icon>
+                        <b-button
+                            v-if="security.twoFactorEnabled"
+                            variant="outline-danger"
+                            @click.prevent="disableTwoFactor"
+                        >
+                            <icon icon="lock_open" />
                             {{ $gettext('Disable Two-Factor') }}
                         </b-button>
-                        <b-button v-else variant="outline-success" @click.prevent="enableTwoFactor">
-                            <icon icon="lock"></icon>
+                        <b-button
+                            v-else
+                            variant="outline-success"
+                            @click.prevent="enableTwoFactor"
+                        >
+                            <icon icon="lock" />
                             {{ $gettext('Enable Two-Factor') }}
                         </b-button>
                     </div>
                 </section>
             </b-col>
-            <b-col sm="12" md="6" lg="7">
+            <b-col
+                sm="12"
+                md="6"
+                lg="7"
+            >
                 <b-card no-body>
                     <b-card-header header-bg-variant="primary-dark">
-                        <h2 class="card-title">{{ $gettext('API Keys') }}</h2>
+                        <h2 class="card-title">
+                            {{ $gettext('API Keys') }}
+                        </h2>
                     </b-card-header>
 
                     <info-card>
                         {{
                             $gettext('Use API keys to authenticate with the AzuraCast API using the same permissions as your user account.')
                         }}
-                        <a href="/api" target="_blank">
+                        <a
+                            href="/api"
+                            target="_blank"
+                        >
                             {{ $gettext('API Documentation') }}
                         </a>
                     </info-card>
 
                     <b-card-body body-class="card-padding-sm">
-                        <b-button variant="outline-primary" @click.prevent="createApiKey">
-                            <icon icon="add"></icon>
+                        <b-button
+                            variant="outline-primary"
+                            @click.prevent="createApiKey"
+                        >
+                            <icon icon="add" />
                             {{ $gettext('Add API Key') }}
                         </b-button>
                     </b-card-body>
 
-                    <data-table ref="$dataTable" id="account_api_keys" :show-toolbar="false" :fields="apiKeyFields"
-                                :api-url="apiKeysApiUrl">
+                    <data-table
+                        id="account_api_keys"
+                        ref="$dataTable"
+                        :show-toolbar="false"
+                        :fields="apiKeyFields"
+                        :api-url="apiKeysApiUrl"
+                    >
                         <template #cell(actions)="row">
                             <b-button-group size="sm">
-                                <b-button size="sm" variant="danger" @click.prevent="deleteApiKey(row.item.links.self)">
+                                <b-button
+                                    size="sm"
+                                    variant="danger"
+                                    @click.prevent="deleteApiKey(row.item.links.self)"
+                                >
                                     {{ $gettext('Delete') }}
                                 </b-button>
                             </b-button-group>
@@ -114,16 +193,30 @@
             </b-col>
         </b-row>
 
-        <account-edit-modal ref="$editModal" :user-url="userUrl" :supported-locales="supportedLocales"
-                            @reload="reload"></account-edit-modal>
+        <account-edit-modal
+            ref="$editModal"
+            :user-url="userUrl"
+            :supported-locales="supportedLocales"
+            @reload="reload"
+        />
 
-        <account-change-password-modal ref="$changePasswordModal" :change-password-url="changePasswordUrl"
-                                       @relist="relist"></account-change-password-modal>
+        <account-change-password-modal
+            ref="$changePasswordModal"
+            :change-password-url="changePasswordUrl"
+            @relist="relist"
+        />
 
-        <account-two-factor-modal ref="$twoFactorModal" :two-factor-url="twoFactorUrl"
-                                  @relist="relist"></account-two-factor-modal>
+        <account-two-factor-modal
+            ref="$twoFactorModal"
+            :two-factor-url="twoFactorUrl"
+            @relist="relist"
+        />
 
-        <account-api-key-modal ref="$apiKeyModal" :create-url="apiKeysApiUrl" @relist="relist"></account-api-key-modal>
+        <account-api-key-modal
+            ref="$apiKeyModal"
+            :create-url="apiKeysApiUrl"
+            @relist="relist"
+        />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Account/ApiKeyModal.vue b/frontend/vue/components/Account/ApiKeyModal.vue
index 2d83ae18b..ed27335dd 100644
--- a/frontend/vue/components/Account/ApiKeyModal.vue
+++ b/frontend/vue/components/Account/ApiKeyModal.vue
@@ -1,34 +1,64 @@
 <template>
-    <b-modal size="md" centered id="api_keys_modal" ref="$modal" :title="$gettext('Add API Key')"
-             @hidden="clearContents"
-             no-enforce-focus>
+    <b-modal
+        id="api_keys_modal"
+        ref="$modal"
+        size="md"
+        centered
+        :title="$gettext('Add API Key')"
+        no-enforce-focus
+        @hidden="clearContents"
+    >
         <template #default="slotProps">
-            <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+            <b-alert
+                variant="danger"
+                :show="error != null"
+            >
+                {{ error }}
+            </b-alert>
 
-            <b-form v-if="newKey === null" class="form vue-form" @submit.prevent="doSubmit">
+            <b-form
+                v-if="newKey === null"
+                class="form vue-form"
+                @submit.prevent="doSubmit"
+            >
                 <b-form-fieldset>
-                    <b-wrapped-form-group id="form_comments" :field="v$.comment" autofocus>
+                    <b-wrapped-form-group
+                        id="form_comments"
+                        :field="v$.comment"
+                        autofocus
+                    >
                         <template #label>
                             {{ $gettext('API Key Description/Comments') }}
                         </template>
                     </b-wrapped-form-group>
                 </b-form-fieldset>
 
-                <invisible-submit-button/>
+                <invisible-submit-button />
             </b-form>
 
             <div v-else>
-                <account-api-key-new-key :new-key="newKey"></account-api-key-new-key>
+                <account-api-key-new-key :new-key="newKey" />
             </div>
         </template>
 
         <template #modal-footer="slotProps">
-            <slot name="modal-footer" v-bind="slotProps">
-                <b-button variant="default" type="button" @click="close">
+            <slot
+                name="modal-footer"
+                v-bind="slotProps"
+            >
+                <b-button
+                    variant="default"
+                    type="button"
+                    @click="close"
+                >
                     {{ $gettext('Close') }}
                 </b-button>
-                <b-button v-if="newKey === null" :variant="(v$.$invalid) ? 'danger' : 'primary'" type="submit"
-                          @click="doSubmit">
+                <b-button
+                    v-if="newKey === null"
+                    :variant="(v$.$invalid) ? 'danger' : 'primary'"
+                    type="submit"
+                    @click="doSubmit"
+                >
                     {{ $gettext('Create New Key') }}
                 </b-button>
             </slot>
diff --git a/frontend/vue/components/Account/ApiKeyNewKey.vue b/frontend/vue/components/Account/ApiKeyNewKey.vue
index fe1da0eff..d485f9893 100644
--- a/frontend/vue/components/Account/ApiKeyNewKey.vue
+++ b/frontend/vue/components/Account/ApiKeyNewKey.vue
@@ -1,5 +1,7 @@
 <template>
-    <h3 class="card-subtitle">{{ $gettext('New Key Generated') }}</h3>
+    <h3 class="card-subtitle">
+        {{ $gettext('New Key Generated') }}
+    </h3>
 
     <p class="card-text">
         <b>{{ $gettext('Important: copy the key below before continuing!') }}</b>
@@ -13,7 +15,7 @@
     <div class="px-2">
         <code id="api_key">{{ newKey }}</code>
         <div class="buttons pt-2">
-            <copy-to-clipboard-button :text="newKey"></copy-to-clipboard-button>
+            <copy-to-clipboard-button :text="newKey" />
         </div>
     </div>
 
diff --git a/frontend/vue/components/Account/ChangePasswordModal.vue b/frontend/vue/components/Account/ChangePasswordModal.vue
index 153525088..f4b8a6c15 100644
--- a/frontend/vue/components/Account/ChangePasswordModal.vue
+++ b/frontend/vue/components/Account/ChangePasswordModal.vue
@@ -1,21 +1,40 @@
 <template>
-    <modal-form ref="$modal" size="md" centered :title="$gettext('Change Password')" :disable-save-button="v$.$invalid"
-                @submit="onSubmit" @hidden="clearContents">
+    <modal-form
+        ref="$modal"
+        size="md"
+        centered
+        :title="$gettext('Change Password')"
+        :disable-save-button="v$.$invalid"
+        @submit="onSubmit"
+        @hidden="clearContents"
+    >
         <b-form-fieldset>
-            <b-wrapped-form-group id="form_current_password" :field="v$.current_password"
-                                  input-type="password" autofocus>
+            <b-wrapped-form-group
+                id="form_current_password"
+                :field="v$.current_password"
+                input-type="password"
+                autofocus
+            >
                 <template #label>
                     {{ $gettext('Current Password') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group id="form_new_password" :field="v$.new_password" input-type="password">
+            <b-wrapped-form-group
+                id="form_new_password"
+                :field="v$.new_password"
+                input-type="password"
+            >
                 <template #label>
                     {{ $gettext('New Password') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group id="form_current_password" :field="v$.new_password2" input-type="password">
+            <b-wrapped-form-group
+                id="form_current_password"
+                :field="v$.new_password2"
+                input-type="password"
+            >
                 <template #label>
                     {{ $gettext('Confirm New Password') }}
                 </template>
diff --git a/frontend/vue/components/Account/EditForm.vue b/frontend/vue/components/Account/EditForm.vue
index 0d10e4730..f783a2ce0 100644
--- a/frontend/vue/components/Account/EditForm.vue
+++ b/frontend/vue/components/Account/EditForm.vue
@@ -1,13 +1,21 @@
 <template>
     <b-form-fieldset>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="form_name" :field="form.name">
+            <b-wrapped-form-group
+                id="form_name"
+                class="col-md-6"
+                :field="form.name"
+            >
                 <template #label>
                     {{ $gettext('Name') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_email" :field="form.email">
+            <b-wrapped-form-group
+                id="form_email"
+                class="col-md-6"
+                :field="form.email"
+            >
                 <template #label>
                     {{ $gettext('E-mail Address') }}
                 </template>
@@ -22,40 +30,55 @@
 
         <div class="form-row">
             <b-col md="6">
-                <b-wrapped-form-group id="edit_form_locale"
-                                      :field="form.locale">
+                <b-wrapped-form-group
+                    id="edit_form_locale"
+                    :field="form.locale"
+                >
                     <template #label>
                         {{ $gettext('Language') }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" :options="localeOptions"
-                                            v-model="props.field.$model">
-                        </b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="localeOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
             </b-col>
             <b-col md="6">
-                <b-wrapped-form-group id="edit_form_theme"
-                                      :field="form.theme">
+                <b-wrapped-form-group
+                    id="edit_form_theme"
+                    :field="form.theme"
+                >
                     <template #label>
                         {{ $gettext('Site Theme') }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" :options="themeOptions"
-                                            v-model="props.field.$model">
-                        </b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="themeOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group id="edit_form_show_24_hour_time"
-                                      :field="form.show_24_hour_time">
+                <b-wrapped-form-group
+                    id="edit_form_show_24_hour_time"
+                    :field="form.show_24_hour_time"
+                >
                     <template #label>
                         {{ $gettext('Time Display') }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" :options="show24hourOptions"
-                                            v-model="props.field.$model">
-                        </b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="show24hourOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
             </b-col>
diff --git a/frontend/vue/components/Account/EditModal.vue b/frontend/vue/components/Account/EditModal.vue
index ef0120204..92bf50d3c 100644
--- a/frontend/vue/components/Account/EditModal.vue
+++ b/frontend/vue/components/Account/EditModal.vue
@@ -1,10 +1,17 @@
 <template>
-    <modal-form ref="$modal" :loading="loading" :title="$gettext('Edit Profile')" :error="error"
-                :disable-save-button="v$.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <account-edit-form :form="v$" :supported-locales="supportedLocales"></account-edit-form>
-
+    <modal-form
+        ref="$modal"
+        :loading="loading"
+        :title="$gettext('Edit Profile')"
+        :error="error"
+        :disable-save-button="v$.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <account-edit-form
+            :form="v$"
+            :supported-locales="supportedLocales"
+        />
     </modal-form>
 </template>
 
diff --git a/frontend/vue/components/Account/TwoFactorModal.vue b/frontend/vue/components/Account/TwoFactorModal.vue
index dfae834fc..ed41f6507 100644
--- a/frontend/vue/components/Account/TwoFactorModal.vue
+++ b/frontend/vue/components/Account/TwoFactorModal.vue
@@ -1,11 +1,19 @@
 <template>
-    <modal-form ref="$modal" :loading="loading" :title="$gettext('Enable Two-Factor Authentication')"
-                :error="error" :disable-save-button="v$.$invalid"
-                @submit="doSubmit" @hidden="clearContents" no-enforce-focus>
-
+    <modal-form
+        ref="$modal"
+        :loading="loading"
+        :title="$gettext('Enable Two-Factor Authentication')"
+        :error="error"
+        :disable-save-button="v$.$invalid"
+        no-enforce-focus
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
         <b-row>
             <b-col md="7">
-                <h5 class="mt-2">{{ $gettext('Step 1: Scan QR Code') }}</h5>
+                <h5 class="mt-2">
+                    {{ $gettext('Step 1: Scan QR Code') }}
+                </h5>
 
                 <p class="card-text">
                     {{
@@ -24,7 +32,11 @@
                 </p>
 
                 <b-form-fieldset>
-                    <b-wrapped-form-group id="form_otp" :field="v$.otp" autofocus>
+                    <b-wrapped-form-group
+                        id="form_otp"
+                        :field="v$.otp"
+                        autofocus
+                    >
                         <template #label>
                             {{ $gettext('Code from Authenticator App') }}
                         </template>
@@ -37,18 +49,27 @@
                 </b-form-fieldset>
             </b-col>
             <b-col md="5">
-                <b-img :src="totp.qr_code"></b-img>
+                <b-img :src="totp.qr_code" />
 
-                <div v-if="totp.totp_uri" class="mt-2">
-                    <code id="totp_uri" class="d-inline-block text-truncate" style="width: 100%;">
+                <div
+                    v-if="totp.totp_uri"
+                    class="mt-2"
+                >
+                    <code
+                        id="totp_uri"
+                        class="d-inline-block text-truncate"
+                        style="width: 100%;"
+                    >
                         {{ totp.totp_uri }}
                     </code>
-                    <copy-to-clipboard-button :text="totp.totp_uri"></copy-to-clipboard-button>
+                    <copy-to-clipboard-button :text="totp.totp_uri" />
                 </div>
             </b-col>
         </b-row>
 
-        <template #save-button-name>{{ $gettext('Submit Code') }}</template>
+        <template #save-button-name>
+            {{ $gettext('Submit Code') }}
+        </template>
     </modal-form>
 </template>
 
diff --git a/frontend/vue/components/Admin/ApiKeys.vue b/frontend/vue/components/Admin/ApiKeys.vue
index eb50ef22c..1496f63bb 100644
--- a/frontend/vue/components/Admin/ApiKeys.vue
+++ b/frontend/vue/components/Admin/ApiKeys.vue
@@ -1,16 +1,30 @@
 <template>
-    <section class="card" role="region">
+    <section
+        class="card"
+        role="region"
+    >
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('API Keys') }}</h2>
+            <h2 class="card-title">
+                {{ $gettext('API Keys') }}
+            </h2>
         </b-card-header>
 
-        <data-table ref="$dataTable" id="api_keys" :fields="fields" :api-url="apiUrl">
+        <data-table
+            id="api_keys"
+            ref="$dataTable"
+            :fields="fields"
+            :api-url="apiUrl"
+        >
             <template #cell(owner)="row">
                 {{ row.item.user.email }}
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
diff --git a/frontend/vue/components/Admin/AuditLog.vue b/frontend/vue/components/Admin/AuditLog.vue
index fcfda14c4..d7a704009 100644
--- a/frontend/vue/components/Admin/AuditLog.vue
+++ b/frontend/vue/components/Admin/AuditLog.vue
@@ -6,26 +6,53 @@
                     {{ $gettext('Audit Log') }}
                 </h2>
                 <div class="flex-shrink">
-                    <date-range-dropdown v-model="dateRange" @update="relist"></date-range-dropdown>
+                    <date-range-dropdown
+                        v-model="dateRange"
+                        @update="relist"
+                    />
                 </div>
             </div>
         </div>
-        <data-table ref="$dataTable" responsive paginated
-                    :fields="fields" :apiUrl="apiUrl">
+        <data-table
+            ref="$dataTable"
+            responsive
+            paginated
+            :fields="fields"
+            :api-url="apiUrl"
+        >
             <template #cell(date_time)="row">
                 {{ formatTimestamp(row.item.timestamp) }}
             </template>
             <template #cell(operation)="row">
-                <span class="text-success" v-if="row.item.operation_text === 'insert'"
-                      :title="$gettext('Insert')">
-                    <icon class="lg inline" icon="add_circle"></icon>
+                <span
+                    v-if="row.item.operation_text === 'insert'"
+                    class="text-success"
+                    :title="$gettext('Insert')"
+                >
+                    <icon
+                        class="lg inline"
+                        icon="add_circle"
+                    />
                 </span>
-                <span class="text-danger" v-else-if="row.item.operation_text === 'delete'"
-                      :title="$gettext('Delete')">
-                    <icon class="lg inline" icon="remove_circle"></icon>
+                <span
+                    v-else-if="row.item.operation_text === 'delete'"
+                    class="text-danger"
+                    :title="$gettext('Delete')"
+                >
+                    <icon
+                        class="lg inline"
+                        icon="remove_circle"
+                    />
                 </span>
-                <span class="text-primary" v-else :title="$gettext('Update')">
-                    <icon class="lg inline" icon="swap_horizontal_circle"></icon>
+                <span
+                    v-else
+                    class="text-primary"
+                    :title="$gettext('Update')"
+                >
+                    <icon
+                        class="lg inline"
+                        icon="swap_horizontal_circle"
+                    />
                 </span>
             </template>
             <template #cell(identifier)="row">
@@ -37,11 +64,17 @@
                     <small>{{ row.item.target_class }}</small><br>
                     {{ row.item.target }}
                 </template>
-                <template v-else>{{ $gettext('N/A') }}</template>
+                <template v-else>
+                    {{ $gettext('N/A') }}
+                </template>
             </template>
             <template #cell(actions)="row">
                 <template v-if="row.item.changes.length > 0">
-                    <b-button size="sm" variant="primary" @click="row.toggleDetails">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click="row.toggleDetails"
+                    >
                         {{ $gettext('Changes') }}
                     </b-button>
                 </template>
@@ -54,22 +87,25 @@
                         <col width="35%">
                     </colgroup>
                     <thead>
-                    <tr>
-                        <th>{{ $gettext('Field Name') }}</th>
-                        <th>{{ $gettext('Previous') }}</th>
-                        <th>{{ $gettext('Updated') }}</th>
-                    </tr>
+                        <tr>
+                            <th>{{ $gettext('Field Name') }}</th>
+                            <th>{{ $gettext('Previous') }}</th>
+                            <th>{{ $gettext('Updated') }}</th>
+                        </tr>
                     </thead>
                     <tbody>
-                    <tr v-for="change in row.item.changes" :key="change.field">
-                        <td>{{ change.field }}</td>
-                        <td>
-                            <pre class="changes">{{ change.from }}</pre>
-                        </td>
-                        <td>
-                            <pre class="changes">{{ change.to }}</pre>
-                        </td>
-                    </tr>
+                        <tr
+                            v-for="change in row.item.changes"
+                            :key="change.field"
+                        >
+                            <td>{{ change.field }}</td>
+                            <td>
+                                <pre class="changes">{{ change.from }}</pre>
+                            </td>
+                            <td>
+                                <pre class="changes">{{ change.to }}</pre>
+                            </td>
+                        </tr>
                     </tbody>
                 </table>
             </template>
@@ -77,13 +113,6 @@
     </div>
 </template>
 
-<style lang="scss">
-pre.changes {
-    max-width: 250px;
-    margin-bottom: 0;
-}
-</style>
-
 <script setup>
 import {DateTime} from "luxon";
 import {computed, ref} from "vue";
@@ -137,3 +166,10 @@ const formatTimestamp = (unix_timestamp) => {
     );
 }
 </script>
+
+<style lang="scss">
+pre.changes {
+    max-width: 250px;
+    margin-bottom: 0;
+}
+</style>
diff --git a/frontend/vue/components/Admin/Backups.vue b/frontend/vue/components/Admin/Backups.vue
index c9181ccf5..ce26c7055 100644
--- a/frontend/vue/components/Admin/Backups.vue
+++ b/frontend/vue/components/Admin/Backups.vue
@@ -1,42 +1,68 @@
 <template>
     <div>
-        <h2 class="outside-card-header mb-1">{{ $gettext('Backups') }}</h2>
+        <h2 class="outside-card-header mb-1">
+            {{ $gettext('Backups') }}
+        </h2>
 
         <div class="card-deck">
-            <section class="card mb-3" role="region">
+            <section
+                class="card mb-3"
+                role="region"
+            >
                 <b-card-header header-bg-variant="primary-dark">
                     <h2 class="card-title">
                         {{ $gettext('Automatic Backups') }}
-                        <enabled-badge :enabled="settings.backupEnabled"></enabled-badge>
+                        <enabled-badge :enabled="settings.backupEnabled" />
                     </h2>
                 </b-card-header>
 
-                <b-overlay variant="card" :show="settingsLoading">
-                    <div v-if="settings.backupEnabled" class="card-body">
-                        <p v-if="settings.backupLastRun > 0" class="card-text">
+                <b-overlay
+                    variant="card"
+                    :show="settingsLoading"
+                >
+                    <div
+                        v-if="settings.backupEnabled"
+                        class="card-body"
+                    >
+                        <p
+                            v-if="settings.backupLastRun > 0"
+                            class="card-text"
+                        >
                             {{ $gettext('Last run:') }}
                             {{ toRelativeTime(settings.backupLastRun) }}
                         </p>
-                        <p v-else class="card-text">
+                        <p
+                            v-else
+                            class="card-text"
+                        >
                             {{ $gettext('Never run') }}
                         </p>
                     </div>
                 </b-overlay>
 
                 <div class="card-actions">
-                    <b-button variant="outline-primary" @click.prevent="doConfigure">
-                        <icon icon="settings"></icon>
+                    <b-button
+                        variant="outline-primary"
+                        @click.prevent="doConfigure"
+                    >
+                        <icon icon="settings" />
                         {{ $gettext('Configure') }}
                     </b-button>
-                    <b-button v-if="settings.backupEnabled && settings.backupLastOutput !== ''"
-                              variant="outline-secondary" @click.prevent="showLastOutput">
-                        <icon icon="assignment"></icon>
+                    <b-button
+                        v-if="settings.backupEnabled && settings.backupLastOutput !== ''"
+                        variant="outline-secondary"
+                        @click.prevent="showLastOutput"
+                    >
+                        <icon icon="assignment" />
                         {{ $gettext('Most Recent Backup Log') }}
                     </b-button>
                 </div>
             </section>
 
-            <section class="card mb-3" role="region">
+            <section
+                class="card mb-3"
+                role="region"
+            >
                 <b-card-header header-bg-variant="primary-dark">
                     <h2 class="card-title">
                         {{ $gettext('Restoring Backups') }}
@@ -60,7 +86,10 @@
             </section>
         </div>
 
-        <section class="card mb-3" role="region">
+        <section
+            class="card mb-3"
+            role="region"
+        >
             <b-card-header header-bg-variant="primary-dark">
                 <h2 class="card-title">
                     {{ $gettext('Backups') }}
@@ -68,13 +97,21 @@
             </b-card-header>
 
             <b-card-body body-class="card-padding-sm">
-                <b-button variant="outline-primary" @click.prevent="doRunBackup">
-                    <icon icon="send"></icon>
+                <b-button
+                    variant="outline-primary"
+                    @click.prevent="doRunBackup"
+                >
+                    <icon icon="send" />
                     {{ $gettext('Run Manual Backup') }}
                 </b-button>
             </b-card-body>
 
-            <data-table ref="$dataTable" id="api_keys" :fields="fields" :api-url="listUrl">
+            <data-table
+                id="api_keys"
+                ref="$dataTable"
+                :fields="fields"
+                :api-url="listUrl"
+            >
                 <template #cell(timestamp)="row">
                     {{ toLocaleTime(row.item.timestamp) }}
                 </template>
@@ -83,10 +120,19 @@
                 </template>
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
-                        <b-button size="sm" variant="primary" :href="row.item.links.download" target="_blank">
+                        <b-button
+                            size="sm"
+                            variant="primary"
+                            :href="row.item.links.download"
+                            target="_blank"
+                        >
                             {{ $gettext('Download') }}
                         </b-button>
-                        <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.delete)">
+                        <b-button
+                            size="sm"
+                            variant="danger"
+                            @click.prevent="doDelete(row.item.links.delete)"
+                        >
                             {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
@@ -94,16 +140,24 @@
             </data-table>
         </section>
 
-        <admin-backups-configure-modal ref="$configureModal" :settings-url="settingsUrl"
-                                       :storage-locations="storageLocations"
-                                       @relist="relist"></admin-backups-configure-modal>
+        <admin-backups-configure-modal
+            ref="$configureModal"
+            :settings-url="settingsUrl"
+            :storage-locations="storageLocations"
+            @relist="relist"
+        />
 
-        <admin-backups-run-backup-modal ref="$runBackupModal" :run-backup-url="runBackupUrl"
-                                        :storage-locations="storageLocations"
-                                        @relist="relist"></admin-backups-run-backup-modal>
+        <admin-backups-run-backup-modal
+            ref="$runBackupModal"
+            :run-backup-url="runBackupUrl"
+            :storage-locations="storageLocations"
+            @relist="relist"
+        />
 
-        <admin-backups-last-output-modal ref="$lastOutputModal"
-                                         :last-output="settings.backupLastOutput"></admin-backups-last-output-modal>
+        <admin-backups-last-output-modal
+            ref="$lastOutputModal"
+            :last-output="settings.backupLastOutput"
+        />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Admin/Backups/ConfigureModal.vue b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
index 8bb15e984..e3d5e8aaa 100644
--- a/frontend/vue/components/Admin/Backups/ConfigureModal.vue
+++ b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
@@ -1,10 +1,20 @@
 <template>
-    <modal-form ref="$modal" size="lg" :title="$gettext('Configure Backups')" :loading="loading"
-                :disable-save-button="v$.$invalid" @submit="submit" @hidden="resetForm">
+    <modal-form
+        ref="$modal"
+        size="lg"
+        :title="$gettext('Configure Backups')"
+        :loading="loading"
+        :disable-save-button="v$.$invalid"
+        @submit="submit"
+        @hidden="resetForm"
+    >
         <b-form-fieldset>
             <div class="form-row mb-3">
-                <b-wrapped-form-checkbox class="col-md-12" id="form_edit_backup_enabled"
-                                         :field="v$.backup_enabled">
+                <b-wrapped-form-checkbox
+                    id="form_edit_backup_enabled"
+                    class="col-md-12"
+                    :field="v$.backup_enabled"
+                >
                     <template #label>
                         {{ $gettext('Run Automatic Nightly Backups') }}
                     </template>
@@ -16,8 +26,15 @@
                 </b-wrapped-form-checkbox>
             </div>
 
-            <div class="form-row" v-if="v$.backup_enabled.$model">
-                <b-wrapped-form-group class="col-md-6" id="form_backup_time_code" :field="v$.backup_time_code">
+            <div
+                v-if="v$.backup_enabled.$model"
+                class="form-row"
+            >
+                <b-wrapped-form-group
+                    id="form_backup_time_code"
+                    class="col-md-6"
+                    :field="v$.backup_time_code"
+                >
                     <template #label>
                         {{ $gettext('Scheduled Backup Time') }}
                     </template>
@@ -25,12 +42,19 @@
                         {{ $gettext('If the end time is before the start time, the playlist will play overnight.') }}
                     </template>
                     <template #default="props">
-                        <time-code :id="props.id" v-model="props.field.$model" :state="props.state"></time-code>
+                        <time-code
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :state="props.state"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-checkbox class="col-md-6" id="form_edit_exclude_media"
-                                         :field="v$.backup_exclude_media">
+                <b-wrapped-form-checkbox
+                    id="form_edit_exclude_media"
+                    class="col-md-6"
+                    :field="v$.backup_exclude_media"
+                >
                     <template #label>
                         {{ $gettext('Exclude Media from Backup') }}
                     </template>
@@ -41,8 +65,13 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-group class="col-md-6" id="form_backup_keep_copies" :field="v$.backup_keep_copies"
-                                      input-type="number" :input-attrs="{min: '0', max: '365'}">
+                <b-wrapped-form-group
+                    id="form_backup_keep_copies"
+                    class="col-md-6"
+                    :field="v$.backup_keep_copies"
+                    input-type="number"
+                    :input-attrs="{min: '0', max: '365'}"
+                >
                     <template #label>
                         {{ $gettext('Number of Backup Copies to Keep') }}
                     </template>
@@ -53,24 +82,38 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backup_storage_location"
-                                      :field="v$.backup_storage_location">
+                <b-wrapped-form-group
+                    id="edit_form_backup_storage_location"
+                    class="col-md-6"
+                    :field="v$.backup_storage_location"
+                >
                     <template #label>
                         {{ $gettext('Storage Location') }}
                     </template>
                     <template #default="props">
-                        <b-form-select :id="props.id" v-model="props.field.$model"
-                                       :options="storageLocationOptions"></b-form-select>
+                        <b-form-select
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :options="storageLocationOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backup_format" :field="v$.backup_format">
+                <b-wrapped-form-group
+                    id="edit_form_backup_format"
+                    class="col-md-6"
+                    :field="v$.backup_format"
+                >
                     <template #label>
                         {{ $gettext('Backup Format') }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" v-model="props.field.$model"
-                                            :options="formatOptions"></b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="formatOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
             </div>
diff --git a/frontend/vue/components/Admin/Backups/LastOutputModal.vue b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
index 891c8b338..d5d5a0331 100644
--- a/frontend/vue/components/Admin/Backups/LastOutputModal.vue
+++ b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
@@ -1,7 +1,15 @@
 <template>
-    <b-modal size="md" id="log_view_modal" ref="$modal" :title="$gettext('Log Viewer')">
-        <pre id="modal-log-view-contents" class="form-control log-viewer"
-             style="height: 300px; overflow-y: auto;">{{ lastOutput }}</pre>
+    <b-modal
+        id="log_view_modal"
+        ref="$modal"
+        size="md"
+        :title="$gettext('Log Viewer')"
+    >
+        <pre
+            id="modal-log-view-contents"
+            class="form-control log-viewer"
+            style="height: 300px; overflow-y: auto;"
+        >{{ lastOutput }}</pre>
     </b-modal>
 </template>
 
diff --git a/frontend/vue/components/Admin/Backups/RunBackupModal.vue b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
index e0060c295..8e5c29d8d 100644
--- a/frontend/vue/components/Admin/Backups/RunBackupModal.vue
+++ b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
@@ -1,25 +1,49 @@
 <template>
-    <b-modal size="md" centered id="run_backup_modal" ref="$modal" :title="$gettext('Run Manual Backup')"
-             @hidden="clearContents">
+    <b-modal
+        id="run_backup_modal"
+        ref="$modal"
+        size="md"
+        centered
+        :title="$gettext('Run Manual Backup')"
+        @hidden="clearContents"
+    >
         <template #default="slotProps">
-            <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+            <b-alert
+                variant="danger"
+                :show="error != null"
+            >
+                {{ error }}
+            </b-alert>
 
-            <b-form v-if="logUrl === null" class="form vue-form" @submit.prevent="submit">
+            <b-form
+                v-if="logUrl === null"
+                class="form vue-form"
+                @submit.prevent="submit"
+            >
                 <b-form-fieldset>
                     <div class="form-row">
-                        <b-wrapped-form-group class="col-md-12" id="edit_form_storage_location"
-                                              :field="v$.storage_location">
+                        <b-wrapped-form-group
+                            id="edit_form_storage_location"
+                            class="col-md-12"
+                            :field="v$.storage_location"
+                        >
                             <template #label>
                                 {{ $gettext('Storage Location') }}
                             </template>
                             <template #default="props">
-                                <b-form-select :id="props.id" v-model="props.field.$model"
-                                               :options="storageLocationOptions"></b-form-select>
+                                <b-form-select
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                    :options="storageLocationOptions"
+                                />
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-12" id="edit_form_path"
-                                              :field="v$.path">
+                        <b-wrapped-form-group
+                            id="edit_form_path"
+                            class="col-md-12"
+                            :field="v$.path"
+                        >
                             <template #label>
                                 {{ $gettext('File Name') }}
                             </template>
@@ -35,7 +59,8 @@
                                 <ul class="m-0">
                                     <li>.zip</li>
                                     <li>.tar.gz</li>
-                                    <li>.tzst (
+                                    <li>
+                                        .tzst (
                                         {{ $gettext('ZStandard compression') }}
                                         )
                                     </li>
@@ -43,8 +68,11 @@
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-checkbox class="col-md-12" id="edit_form_exclude_media"
-                                                 :field="v$.exclude_media">
+                        <b-wrapped-form-checkbox
+                            id="edit_form_exclude_media"
+                            class="col-md-12"
+                            :field="v$.exclude_media"
+                        >
                             <template #label>
                                 {{ $gettext('Exclude Media from Backup') }}
                             </template>
@@ -57,21 +85,32 @@
                     </div>
                 </b-form-fieldset>
 
-                <invisible-submit-button/>
+                <invisible-submit-button />
             </b-form>
 
             <div v-else>
-                <streaming-log-view :log-url="logUrl"></streaming-log-view>
+                <streaming-log-view :log-url="logUrl" />
             </div>
         </template>
 
         <template #modal-footer="slotProps">
-            <slot name="modal-footer" v-bind="slotProps">
-                <b-button variant="default" type="button" @click="close">
+            <slot
+                name="modal-footer"
+                v-bind="slotProps"
+            >
+                <b-button
+                    variant="default"
+                    type="button"
+                    @click="close"
+                >
                     {{ $gettext('Close') }}
                 </b-button>
-                <b-button v-if="logUrl === null" :variant="(v$.$invalid) ? 'danger' : 'primary'" type="submit"
-                          @click="submit">
+                <b-button
+                    v-if="logUrl === null"
+                    :variant="(v$.$invalid) ? 'danger' : 'primary'"
+                    type="submit"
+                    @click="submit"
+                >
                     {{ $gettext('Run Manual Backup') }}
                 </b-button>
             </slot>
diff --git a/frontend/vue/components/Admin/Branding.vue b/frontend/vue/components/Admin/Branding.vue
index ec1db3b9e..575b9465a 100644
--- a/frontend/vue/components/Admin/Branding.vue
+++ b/frontend/vue/components/Admin/Branding.vue
@@ -4,7 +4,10 @@
             {{ $gettext('Custom Branding') }}
         </h2>
 
-        <section class="card mb-3" role="region">
+        <section
+            class="card mb-3"
+            role="region"
+        >
             <div class="card-header bg-primary-dark">
                 <h2 class="card-title">
                     {{ $gettext('Upload Custom Assets') }}
@@ -12,17 +15,28 @@
             </div>
             <div class="card-body">
                 <ul class="list-unstyled">
-                    <custom-asset-form id="asset_background" class="mb-3" :api-url="backgroundApiUrl"
-                                       :caption="$gettext('Public Page Background')"></custom-asset-form>
-                    <custom-asset-form id="asset_album_art" class="mb-3" :api-url="albumArtApiUrl"
-                                       :caption="$gettext('Default Album Art')"></custom-asset-form>
-                    <custom-asset-form id="asset_browser_icon" :api-url="browserIconApiUrl"
-                                       :caption="$gettext('Browser Icon')"></custom-asset-form>
+                    <custom-asset-form
+                        id="asset_background"
+                        class="mb-3"
+                        :api-url="backgroundApiUrl"
+                        :caption="$gettext('Public Page Background')"
+                    />
+                    <custom-asset-form
+                        id="asset_album_art"
+                        class="mb-3"
+                        :api-url="albumArtApiUrl"
+                        :caption="$gettext('Default Album Art')"
+                    />
+                    <custom-asset-form
+                        id="asset_browser_icon"
+                        :api-url="browserIconApiUrl"
+                        :caption="$gettext('Browser Icon')"
+                    />
                 </ul>
             </div>
         </section>
 
-        <branding-form :api-url="settingsApiUrl"></branding-form>
+        <branding-form :api-url="settingsApiUrl" />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Admin/Branding/BrandingForm.vue b/frontend/vue/components/Admin/Branding/BrandingForm.vue
index 5c1761e58..8355411d9 100644
--- a/frontend/vue/components/Admin/Branding/BrandingForm.vue
+++ b/frontend/vue/components/Admin/Branding/BrandingForm.vue
@@ -1,20 +1,37 @@
 <template>
-    <form class="form vue-form" @submit.prevent="submit">
-        <section class="card mb-3" role="region">
+    <form
+        class="form vue-form"
+        @submit.prevent="submit"
+    >
+        <section
+            class="card mb-3"
+            role="region"
+        >
             <div class="card-header bg-primary-dark">
                 <h2 class="card-title">
                     {{ $gettext('Branding Settings') }}
                 </h2>
             </div>
 
-            <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+            <b-alert
+                variant="danger"
+                :show="error != null"
+            >
+                {{ error }}
+            </b-alert>
 
-            <b-overlay variant="card" :show="loading">
+            <b-overlay
+                variant="card"
+                :show="loading"
+            >
                 <div class="card-body">
                     <b-form-group>
                         <div class="form-row">
-                            <b-wrapped-form-group class="col-md-6" id="edit_form_public_theme"
-                                                  :field="v$.public_theme">
+                            <b-wrapped-form-group
+                                id="edit_form_public_theme"
+                                class="col-md-6"
+                                :field="v$.public_theme"
+                            >
                                 <template #label>
                                     {{ $gettext('Base Theme for Public Pages') }}
                                 </template>
@@ -24,15 +41,21 @@
                                     }}
                                 </template>
                                 <template #default="props">
-                                    <b-form-radio-group stacked :id="props.id" :options="publicThemeOptions"
-                                                        v-model="props.field.$model">
-                                    </b-form-radio-group>
+                                    <b-form-radio-group
+                                        :id="props.id"
+                                        v-model="props.field.$model"
+                                        stacked
+                                        :options="publicThemeOptions"
+                                    />
                                 </template>
                             </b-wrapped-form-group>
 
                             <b-col md="6">
-                                <b-wrapped-form-checkbox class="mb-2" id="form_edit_hide_album_art"
-                                                         :field="v$.hide_album_art">
+                                <b-wrapped-form-checkbox
+                                    id="form_edit_hide_album_art"
+                                    class="mb-2"
+                                    :field="v$.hide_album_art"
+                                >
                                     <template #label>
                                         {{ $gettext('Hide Album Art on Public Pages') }}
                                     </template>
@@ -43,8 +66,10 @@
                                     </template>
                                 </b-wrapped-form-checkbox>
 
-                                <b-wrapped-form-checkbox id="form_edit_hide_product_name"
-                                                         :field="v$.hide_product_name">
+                                <b-wrapped-form-checkbox
+                                    id="form_edit_hide_product_name"
+                                    :field="v$.hide_product_name"
+                                >
                                     <template #label>
                                         {{ $gettext('Hide AzuraCast Branding on Public Pages') }}
                                     </template>
@@ -56,8 +81,11 @@
                                 </b-wrapped-form-checkbox>
                             </b-col>
 
-                            <b-wrapped-form-group class="col-md-6" id="form_edit_homepage_redirect_url"
-                                                  :field="v$.homepage_redirect_url">
+                            <b-wrapped-form-group
+                                id="form_edit_homepage_redirect_url"
+                                class="col-md-6"
+                                :field="v$.homepage_redirect_url"
+                            >
                                 <template #label>
                                     {{ $gettext('Homepage Redirect URL') }}
                                 </template>
@@ -68,8 +96,11 @@
                                 </template>
                             </b-wrapped-form-group>
 
-                            <b-wrapped-form-group class="col-md-6" id="form_edit_default_album_art_url"
-                                                  :field="v$.default_album_art_url">
+                            <b-wrapped-form-group
+                                id="form_edit_default_album_art_url"
+                                class="col-md-6"
+                                :field="v$.default_album_art_url"
+                            >
                                 <template #label>
                                     {{ $gettext('Default Album Art URL') }}
                                 </template>
@@ -80,8 +111,11 @@
                                 </template>
                             </b-wrapped-form-group>
 
-                            <b-wrapped-form-group class="col-md-12" id="edit_form_public_custom_css"
-                                                  :field="v$.public_custom_css">
+                            <b-wrapped-form-group
+                                id="edit_form_public_custom_css"
+                                class="col-md-12"
+                                :field="v$.public_custom_css"
+                            >
                                 <template #label>
                                     {{ $gettext('Custom CSS for Public Pages') }}
                                 </template>
@@ -91,13 +125,19 @@
                                     }}
                                 </template>
                                 <template #default="props">
-                                    <codemirror-textarea :id="props.id" mode="css"
-                                                         v-model="props.field.$model"></codemirror-textarea>
+                                    <codemirror-textarea
+                                        :id="props.id"
+                                        v-model="props.field.$model"
+                                        mode="css"
+                                    />
                                 </template>
                             </b-wrapped-form-group>
 
-                            <b-wrapped-form-group class="col-md-12" id="edit_form_public_custom_js"
-                                                  :field="v$.public_custom_js">
+                            <b-wrapped-form-group
+                                id="edit_form_public_custom_js"
+                                class="col-md-12"
+                                :field="v$.public_custom_js"
+                            >
                                 <template #label>
                                     {{ $gettext('Custom JS for Public Pages') }}
                                 </template>
@@ -107,13 +147,19 @@
                                     }}
                                 </template>
                                 <template #default="props">
-                                    <codemirror-textarea :id="props.id" mode="javascript"
-                                                         v-model="props.field.$model"></codemirror-textarea>
+                                    <codemirror-textarea
+                                        :id="props.id"
+                                        v-model="props.field.$model"
+                                        mode="javascript"
+                                    />
                                 </template>
                             </b-wrapped-form-group>
 
-                            <b-wrapped-form-group class="col-md-12" id="edit_form_internal_custom_css"
-                                                  :field="v$.internal_custom_css">
+                            <b-wrapped-form-group
+                                id="edit_form_internal_custom_css"
+                                class="col-md-12"
+                                :field="v$.internal_custom_css"
+                            >
                                 <template #label>
                                     {{ $gettext('Custom CSS for Internal Pages') }}
                                 </template>
@@ -123,13 +169,21 @@
                                     }}
                                 </template>
                                 <template #default="props">
-                                    <codemirror-textarea :id="props.id" mode="css"
-                                                         v-model="props.field.$model"></codemirror-textarea>
+                                    <codemirror-textarea
+                                        :id="props.id"
+                                        v-model="props.field.$model"
+                                        mode="css"
+                                    />
                                 </template>
                             </b-wrapped-form-group>
                         </div>
 
-                        <b-button size="lg" type="submit" class="mt-3" variant="primary">
+                        <b-button
+                            size="lg"
+                            type="submit"
+                            class="mt-3"
+                            variant="primary"
+                        >
                             {{ $gettext('Save Changes') }}
                         </b-button>
                     </b-form-group>
diff --git a/frontend/vue/components/Admin/Branding/CustomAssetForm.vue b/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
index 0be7df2c2..4ee54b0a5 100644
--- a/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
+++ b/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
@@ -1,16 +1,37 @@
 <template>
     <b-media tag="li">
         <template #aside>
-            <a :href="url" data-fancybox target="_blank">
-                <b-img :src="url" width="125" :alt="caption"></b-img>
+            <a
+                :href="url"
+                data-fancybox
+                target="_blank"
+            >
+                <b-img
+                    :src="url"
+                    width="125"
+                    :alt="caption"
+                />
             </a>
         </template>
-        <b-overlay variant="card" :show="loading">
+        <b-overlay
+            variant="card"
+            :show="loading"
+        >
             <b-form-group :label-for="id">
-                <template #label>{{ caption }}</template>
-                <b-form-file :id="id" v-model="file" accept="image/*"></b-form-file>
+                <template #label>
+                    {{ caption }}
+                </template>
+                <b-form-file
+                    :id="id"
+                    v-model="file"
+                    accept="image/*"
+                />
             </b-form-group>
-            <b-button v-if="isUploaded" variant="outline-danger" @click.prevent="clear()">
+            <b-button
+                v-if="isUploaded"
+                variant="outline-danger"
+                @click.prevent="clear()"
+            >
                 {{ $gettext('Clear Image') }}
             </b-button>
         </b-overlay>
@@ -34,9 +55,6 @@ export default {
             file: null,
         };
     },
-    mounted() {
-        this.relist();
-    },
     watch: {
         file(newFile) {
             if (null === newFile) {
@@ -53,6 +71,9 @@ export default {
             });
         }
     },
+    mounted() {
+        this.relist();
+    },
     methods: {
         relist() {
             this.file = null;
diff --git a/frontend/vue/components/Admin/CustomFields.vue b/frontend/vue/components/Admin/CustomFields.vue
index 43d64644f..d3557d3a7 100644
--- a/frontend/vue/components/Admin/CustomFields.vue
+++ b/frontend/vue/components/Admin/CustomFields.vue
@@ -1,7 +1,9 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('Custom Fields') }}</h2>
+            <h2 class="card-title">
+                {{ $gettext('Custom Fields') }}
+            </h2>
         </b-card-header>
 
         <info-card>
@@ -13,13 +15,22 @@
         </info-card>
 
         <b-card-body body-class="card-padding-sm">
-            <b-button variant="outline-primary" @click.prevent="doCreate">
-                <icon icon="add"></icon>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Custom Field') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="$dataTable" id="custom_fields" :fields="fields" :show-toolbar="false" :api-url="listUrl">
+        <data-table
+            id="custom_fields"
+            ref="$dataTable"
+            :fields="fields"
+            :show-toolbar="false"
+            :api-url="listUrl"
+        >
             <template #cell(name)="row">
                 {{ row.item.name }} <code>{{ row.item.short_name }}</code>
             </template>
@@ -28,10 +39,18 @@
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -39,8 +58,12 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="$editModal" :create-url="listUrl" :auto-assign-types="autoAssignTypes"
-                @relist="relist"></edit-modal>
+    <edit-modal
+        ref="$editModal"
+        :create-url="listUrl"
+        :auto-assign-types="autoAssignTypes"
+        @relist="relist"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Admin/CustomFields/EditModal.vue b/frontend/vue/components/Admin/CustomFields/EditModal.vue
index 2afc14dc9..db2b53a39 100644
--- a/frontend/vue/components/Admin/CustomFields/EditModal.vue
+++ b/frontend/vue/components/Admin/CustomFields/EditModal.vue
@@ -1,10 +1,17 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <admin-custom-fields-form :form="v$" :auto-assign-types="autoAssignTypes">
-        </admin-custom-fields-form>
-
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <admin-custom-fields-form
+            :form="v$"
+            :auto-assign-types="autoAssignTypes"
+        />
     </modal-form>
 </template>
 
@@ -17,8 +24,11 @@ import {defineComponent} from "vue";
 
 export default defineComponent({
     name: 'AdminCustomFieldsEditModal',
-    mixins: [BaseEditModal],
     components: {AdminCustomFieldsForm},
+    mixins: [BaseEditModal],
+    props: {
+        autoAssignTypes: Object
+    },
     setup() {
         const {form, resetForm, v$} = useVuelidateOnForm(
             {
@@ -39,9 +49,6 @@ export default defineComponent({
             v$
         };
     },
-    props: {
-        autoAssignTypes: Object
-    },
     computed: {
         langTitle() {
             return this.isEditMode
diff --git a/frontend/vue/components/Admin/CustomFields/Form.vue b/frontend/vue/components/Admin/CustomFields/Form.vue
index 97894b9ab..2731b1932 100644
--- a/frontend/vue/components/Admin/CustomFields/Form.vue
+++ b/frontend/vue/components/Admin/CustomFields/Form.vue
@@ -1,7 +1,11 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_name" :field="form.name">
+            <b-wrapped-form-group
+                id="edit_form_name"
+                class="col-md-6"
+                :field="form.name"
+            >
                 <template #label>
                     {{ $gettext('Field Name') }}
                 </template>
@@ -12,7 +16,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_short_name" :field="form.short_name">
+            <b-wrapped-form-group
+                id="edit_form_short_name"
+                class="col-md-6"
+                :field="form.short_name"
+            >
                 <template #label>
                     {{ $gettext('Programmatic Name') }}
                 </template>
@@ -23,7 +31,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_auto_assign" :field="form.auto_assign">
+            <b-wrapped-form-group
+                id="edit_form_auto_assign"
+                class="col-md-6"
+                :field="form.auto_assign"
+            >
                 <template #label>
                     {{ $gettext('Automatically Set from ID3v2 Value') }}
                 </template>
@@ -33,8 +45,11 @@
                     }}
                 </template>
                 <template #default="props">
-                    <b-form-select :id="props.id" v-model="props.field.$model"
-                                   :options="autoAssignOptions"></b-form-select>
+                    <b-form-select
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        :options="autoAssignOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
diff --git a/frontend/vue/components/Admin/GeoLite.vue b/frontend/vue/components/Admin/GeoLite.vue
index 54ebd4a23..31835ff4d 100644
--- a/frontend/vue/components/Admin/GeoLite.vue
+++ b/frontend/vue/components/Admin/GeoLite.vue
@@ -13,7 +13,10 @@
         </info-card>
 
         <div class="card-body">
-            <b-overlay variant="card" :show="loading">
+            <b-overlay
+                variant="card"
+                :show="loading"
+            >
                 <div class="form-row">
                     <div class="col-md-7">
                         <fieldset>
@@ -31,7 +34,10 @@
                                 <li>
                                     {{ $gettext('Create an account on the MaxMind developer site.') }}
                                     <br>
-                                    <a href="https://www.maxmind.com/en/geolite2/signup" target="_blank">
+                                    <a
+                                        href="https://www.maxmind.com/en/geolite2/signup"
+                                        target="_blank"
+                                    >
                                         {{ $gettext('MaxMind Developer Site') }}
                                     </a>
                                 </li>
@@ -53,17 +59,26 @@
                                 {{ $gettext('Current Installed Version') }}
                             </legend>
 
-                            <p v-if="version" class="text-success card-text">
+                            <p
+                                v-if="version"
+                                class="text-success card-text"
+                            >
                                 {{ langInstalledVersion }}
                             </p>
-                            <p v-else class="text-danger card-text">
+                            <p
+                                v-else
+                                class="text-danger card-text"
+                            >
                                 {{ $gettext('GeoLite is not currently installed on this installation.') }}
                             </p>
                         </fieldset>
 
                         <form @submit.prevent="doUpdate">
                             <fieldset>
-                                <b-wrapped-form-group id="edit_form_key" :field="v$.key">
+                                <b-wrapped-form-group
+                                    id="edit_form_key"
+                                    :field="v$.key"
+                                >
                                     <template #label>
                                         {{ $gettext('MaxMind License Key') }}
                                     </template>
@@ -71,10 +86,17 @@
                             </fieldset>
 
                             <div class="buttons">
-                                <b-button variant="primary" type="submit">
+                                <b-button
+                                    variant="primary"
+                                    type="submit"
+                                >
                                     {{ $gettext('Save Changes') }}
                                 </b-button>
-                                <b-button variant="danger" type="button" @click.prevent="doDelete">
+                                <b-button
+                                    variant="danger"
+                                    type="button"
+                                    @click.prevent="doDelete"
+                                >
                                     {{ $gettext('Remove Key') }}
                                 </b-button>
                             </div>
diff --git a/frontend/vue/components/Admin/Index.vue b/frontend/vue/components/Admin/Index.vue
index df79af3c9..5ba119ca9 100644
--- a/frontend/vue/components/Admin/Index.vue
+++ b/frontend/vue/components/Admin/Index.vue
@@ -5,19 +5,38 @@
         </h2>
 
         <b-row>
-            <b-col v-for="(panel, key) in adminPanels" :key="key" sm="12" lg="4" class="mb-4">
+            <b-col
+                v-for="(panel, key) in adminPanels"
+                :key="key"
+                sm="12"
+                lg="4"
+                class="mb-4"
+            >
                 <b-card no-body>
-                    <b-card-header header-bg-variant="primary-dark" class="d-flex align-items-center">
+                    <b-card-header
+                        header-bg-variant="primary-dark"
+                        class="d-flex align-items-center"
+                    >
                         <div class="flex-fill">
-                            <h2 class="card-title">{{ panel.label }}</h2>
+                            <h2 class="card-title">
+                                {{ panel.label }}
+                            </h2>
                         </div>
                         <div class="flex-shrink-0 pt-1">
-                            <icon class="lg" :icon="panel.icon"></icon>
+                            <icon
+                                class="lg"
+                                :icon="panel.icon"
+                            />
                         </div>
                     </b-card-header>
 
                     <b-list-group>
-                        <b-list-group-item v-for="(item, key) in panel.items" :key="key" :href="item.url">{{
+                        <b-list-group-item
+                            v-for="(item, key) in panel.items"
+                            :key="key"
+                            :href="item.url"
+                        >
+                            {{
                                 item.label
                             }}
                         </b-list-group-item>
@@ -31,9 +50,17 @@
         </h2>
 
         <b-row>
-            <b-col sm="12" lg="6" xl="6" class="mb-4">
+            <b-col
+                sm="12"
+                lg="6"
+                xl="6"
+                class="mb-4"
+            >
                 <b-card no-body>
-                    <b-card-header header-bg-variant="primary-dark" class="d-flex align-items-center">
+                    <b-card-header
+                        header-bg-variant="primary-dark"
+                        class="d-flex align-items-center"
+                    >
                         <div class="flex-fill">
                             <h2 class="card-title">
                                 {{ $gettext('Memory') }}
@@ -41,9 +68,13 @@
                         </div>
 
                         <div class="flex-shrink-0">
-                            <b-button variant="outline-light" size="sm" class="py-2"
-                                      @click.prevent="showMemoryStatsHelpModal">
-                                <icon icon="help_outline"></icon>
+                            <b-button
+                                variant="outline-light"
+                                size="sm"
+                                class="py-2"
+                                @click.prevent="showMemoryStatsHelpModal"
+                            >
+                                <icon icon="help_outline" />
                             </b-button>
                         </div>
                     </b-card-header>
@@ -55,21 +86,39 @@
                             {{ stats.memory.readable.total }}
                         </h6>
 
-                        <b-progress :max="stats.memory.bytes.total" :label="stats.memory.readable.used"
-                                    class="h-20 mb-3 mt-2">
-                            <b-progress-bar variant="primary" :value="stats.memory.bytes.used"></b-progress-bar>
-                            <b-progress-bar variant="warning"
-                                            :value="stats.memory.bytes.cached"></b-progress-bar>
+                        <b-progress
+                            :max="stats.memory.bytes.total"
+                            :label="stats.memory.readable.used"
+                            class="h-20 mb-3 mt-2"
+                        >
+                            <b-progress-bar
+                                variant="primary"
+                                :value="stats.memory.bytes.used"
+                            />
+                            <b-progress-bar
+                                variant="warning"
+                                :value="stats.memory.bytes.cached"
+                            />
                         </b-progress>
 
                         <b-row>
                             <b-col>
-                                <b-badge pill variant="primary">&nbsp;&nbsp;</b-badge>&nbsp;
+                                <b-badge
+                                    pill
+                                    variant="primary"
+                                >
+&nbsp;&nbsp;
+                                </b-badge>&nbsp;
                                 {{ $gettext('Used') }}
                                 : {{ stats.memory.readable.used }}
                             </b-col>
                             <b-col>
-                                <b-badge pill variant="warning">&nbsp;&nbsp;</b-badge>&nbsp;
+                                <b-badge
+                                    pill
+                                    variant="warning"
+                                >
+&nbsp;&nbsp;
+                                </b-badge>&nbsp;
                                 {{ $gettext('Cached') }}
                                 : {{ stats.memory.readable.cached }}
                             </b-col>
@@ -78,7 +127,12 @@
                 </b-card>
             </b-col>
 
-            <b-col sm="12" lg="6" xl="6" class="mb-4">
+            <b-col
+                sm="12"
+                lg="6"
+                xl="6"
+                class="mb-4"
+            >
                 <b-card no-body>
                     <b-card-header header-bg-variant="primary-dark">
                         <h2 class="card-title">
@@ -93,14 +147,25 @@
                             {{ stats.disk.readable.total }}
                         </h6>
 
-                        <b-progress :max="stats.disk.bytes.total" :label="stats.disk.readable.used"
-                                    class="h-20 mb-3 mt-2">
-                            <b-progress-bar variant="primary" :value="stats.disk.bytes.used"></b-progress-bar>
+                        <b-progress
+                            :max="stats.disk.bytes.total"
+                            :label="stats.disk.readable.used"
+                            class="h-20 mb-3 mt-2"
+                        >
+                            <b-progress-bar
+                                variant="primary"
+                                :value="stats.disk.bytes.used"
+                            />
                         </b-progress>
 
                         <b-row>
                             <b-col>
-                                <b-badge pill variant="primary">&nbsp;&nbsp;</b-badge>&nbsp;
+                                <b-badge
+                                    pill
+                                    variant="primary"
+                                >
+&nbsp;&nbsp;
+                                </b-badge>&nbsp;
                                 {{ $gettext('Used') }}
                                 :
                                 {{ stats.disk.readable.used }}
@@ -112,9 +177,17 @@
         </b-row>
 
         <b-row>
-            <b-col sm="12" lg="8" xl="6" class="mb-4">
+            <b-col
+                sm="12"
+                lg="8"
+                xl="6"
+                class="mb-4"
+            >
                 <b-card no-body>
-                    <b-card-header header-bg-variant="primary-dark" class="d-flex align-items-center">
+                    <b-card-header
+                        header-bg-variant="primary-dark"
+                        class="d-flex align-items-center"
+                    >
                         <div class="flex-fill">
                             <h2 class="card-title">
                                 {{ $gettext('CPU Load') }}
@@ -122,36 +195,69 @@
                         </div>
 
                         <div class="flex-shrink-0">
-                            <b-button variant="outline-light" size="sm" class="py-2"
-                                      @click.prevent="showCpuStatsHelpModal">
-                                <icon icon="help_outline"></icon>
+                            <b-button
+                                variant="outline-light"
+                                size="sm"
+                                class="py-2"
+                                @click.prevent="showCpuStatsHelpModal"
+                            >
+                                <icon icon="help_outline" />
                             </b-button>
                         </div>
                     </b-card-header>
 
                     <b-card-body>
-                        <h5 class="mb-1 text-center">{{ formatCpuName(stats.cpu.total.name) }}</h5>
+                        <h5 class="mb-1 text-center">
+                            {{ formatCpuName(stats.cpu.total.name) }}
+                        </h5>
 
-                        <b-progress max="100" :label="formatPercentageString(stats.cpu.total.usage)"
-                                    class="h-20 mb-3 mt-2">
-                            <b-progress-bar variant="danger" :value="stats.cpu.total.steal"></b-progress-bar>
-                            <b-progress-bar variant="warning" :value="stats.cpu.total.io_wait"></b-progress-bar>
-                            <b-progress-bar variant="primary" :value="stats.cpu.total.usage"></b-progress-bar>
+                        <b-progress
+                            max="100"
+                            :label="formatPercentageString(stats.cpu.total.usage)"
+                            class="h-20 mb-3 mt-2"
+                        >
+                            <b-progress-bar
+                                variant="danger"
+                                :value="stats.cpu.total.steal"
+                            />
+                            <b-progress-bar
+                                variant="warning"
+                                :value="stats.cpu.total.io_wait"
+                            />
+                            <b-progress-bar
+                                variant="primary"
+                                :value="stats.cpu.total.usage"
+                            />
                         </b-progress>
 
                         <b-row>
                             <b-col>
-                                <b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
+                                <b-badge
+                                    pill
+                                    variant="danger"
+                                >
+&nbsp;&nbsp;
+                                </b-badge>&nbsp;
                                 {{ $gettext('Steal') }}
                                 : {{ stats.cpu.total.steal }}%
                             </b-col>
                             <b-col>
-                                <b-badge pill variant="warning">&nbsp;&nbsp;</b-badge>&nbsp;
+                                <b-badge
+                                    pill
+                                    variant="warning"
+                                >
+&nbsp;&nbsp;
+                                </b-badge>&nbsp;
                                 {{ $gettext('Wait') }}
                                 : {{ stats.cpu.total.io_wait }}%
                             </b-col>
                             <b-col>
-                                <b-badge pill variant="primary">&nbsp;&nbsp;</b-badge>&nbsp;
+                                <b-badge
+                                    pill
+                                    variant="primary"
+                                >
+&nbsp;&nbsp;
+                                </b-badge>&nbsp;
                                 {{ $gettext('Use') }}
                                 : {{ stats.cpu.total.usage }}%
                             </b-col>
@@ -160,16 +266,38 @@
                         <hr>
 
                         <b-row>
-                            <b-col v-for="core in stats.cpu.cores" :key="core.name" lg="6">
-                                <h6 class="mb-1 text-center">{{ formatCpuName(core.name) }}</h6>
+                            <b-col
+                                v-for="core in stats.cpu.cores"
+                                :key="core.name"
+                                lg="6"
+                            >
+                                <h6 class="mb-1 text-center">
+                                    {{ formatCpuName(core.name) }}
+                                </h6>
 
-                                <b-progress max="100" :label="formatPercentageString(core.usage)" class="h-20">
-                                    <b-progress-bar variant="danger" :value="core.steal"></b-progress-bar>
-                                    <b-progress-bar variant="warning" :value="core.io_wait"></b-progress-bar>
-                                    <b-progress-bar variant="primary" :value="core.usage"></b-progress-bar>
+                                <b-progress
+                                    max="100"
+                                    :label="formatPercentageString(core.usage)"
+                                    class="h-20"
+                                >
+                                    <b-progress-bar
+                                        variant="danger"
+                                        :value="core.steal"
+                                    />
+                                    <b-progress-bar
+                                        variant="warning"
+                                        :value="core.io_wait"
+                                    />
+                                    <b-progress-bar
+                                        variant="primary"
+                                        :value="core.usage"
+                                    />
                                 </b-progress>
 
-                                <b-row no-gutters class="mb-2 mt-1">
+                                <b-row
+                                    no-gutters
+                                    class="mb-2 mt-1"
+                                >
                                     <b-col>
                                         St: {{ core.steal }}%
                                     </b-col>
@@ -188,7 +316,10 @@
                         <h6 class="mb-1 text-center">
                             {{ $gettext('Load Average') }}
                         </h6>
-                        <b-row class="text-center" no-gutters>
+                        <b-row
+                            class="text-center"
+                            no-gutters
+                        >
                             <b-col>
                                 <h6>1-Min</h6>
                                 {{ stats.cpu.load[0].toFixed(2) }}
@@ -206,9 +337,17 @@
                 </b-card>
             </b-col>
 
-            <b-col sm="12" lg="4" xl="6" class="mb-4">
+            <b-col
+                sm="12"
+                lg="4"
+                xl="6"
+                class="mb-4"
+            >
                 <b-card no-body>
-                    <b-card-header header-bg-variant="primary-dark" class="d-flex align-items-center">
+                    <b-card-header
+                        header-bg-variant="primary-dark"
+                        class="d-flex align-items-center"
+                    >
                         <div class="flex-fill">
                             <h2 class="card-title">
                                 {{ $gettext('Services') }}
@@ -223,36 +362,54 @@
                             <col style="width: 20%;">
                         </colgroup>
                         <tbody>
-                        <tr class="align-middle" v-for="service in services" :key="service.name">
-                            <td class="text-center pr-2">
-                                <template v-if="service.running">
-                                    <b-badge pill variant="success" :title="langServiceRunning">
+                            <tr
+                                v-for="service in services"
+                                :key="service.name"
+                                class="align-middle"
+                            >
+                                <td class="text-center pr-2">
+                                    <template v-if="service.running">
+                                        <b-badge
+                                            pill
+                                            variant="success"
+                                            :title="langServiceRunning"
+                                        >
                                         &nbsp;&nbsp;
-                                        <span class="sr-only">{{ langServiceRunning }}</span>
-                                    </b-badge>
-                                </template>
-                                <template v-else>
-                                    <b-badge pill variant="danger" :title="langServiceStopped">
+                                            <span class="sr-only">{{ langServiceRunning }}</span>
+                                        </b-badge>
+                                    </template>
+                                    <template v-else>
+                                        <b-badge
+                                            pill
+                                            variant="danger"
+                                            :title="langServiceStopped"
+                                        >
                                         &nbsp;&nbsp;
-                                        <span class="sr-only">{{ langServiceStopped }}</span>
-                                    </b-badge>
-                                </template>
-                            </td>
-                            <td class="pl-2">
-                                <h6 class="mb-0">
-                                    {{ service.name }}<br>
-                                    <small>{{ service.description }}</small>
-                                </h6>
-                            </td>
-                            <td>
-                                <b-button-group size="sm" v-if="service.links.restart">
-                                    <b-button size="sm" :variant="service.running ? 'bg' : 'danger'"
-                                              @click.prevent="doRestart(service.links.restart)">
-                                        {{ $gettext('Restart') }}
-                                    </b-button>
-                                </b-button-group>
-                            </td>
-                        </tr>
+                                            <span class="sr-only">{{ langServiceStopped }}</span>
+                                        </b-badge>
+                                    </template>
+                                </td>
+                                <td class="pl-2">
+                                    <h6 class="mb-0">
+                                        {{ service.name }}<br>
+                                        <small>{{ service.description }}</small>
+                                    </h6>
+                                </td>
+                                <td>
+                                    <b-button-group
+                                        v-if="service.links.restart"
+                                        size="sm"
+                                    >
+                                        <b-button
+                                            size="sm"
+                                            :variant="service.running ? 'bg' : 'danger'"
+                                            @click.prevent="doRestart(service.links.restart)"
+                                        >
+                                            {{ $gettext('Restart') }}
+                                        </b-button>
+                                    </b-button-group>
+                                </td>
+                            </tr>
                         </tbody>
                     </table>
                 </b-card>
@@ -268,27 +425,38 @@
                         </h2>
                     </b-card-header>
 
-                    <b-tabs content-class="mt-3" pills card>
-                        <b-tab v-for="netInterface in stats.network" :key="netInterface.interface_name"
-                               :title="netInterface.interface_name">
+                    <b-tabs
+                        content-class="mt-3"
+                        pills
+                        card
+                    >
+                        <b-tab
+                            v-for="netInterface in stats.network"
+                            :key="netInterface.interface_name"
+                            :title="netInterface.interface_name"
+                        >
                             <b-row class="mb-3">
                                 <b-col class="mb-3">
                                     <h5 class="mb-1 text-center">
                                         {{ $gettext('Received') }}
                                     </h5>
-                                    <b-table striped responsive
-                                             :items="getNetworkInterfaceTableItems(netInterface.received)"
-                                             :fields="getNetworkInterfaceTableFields(netInterface.received)">
-                                    </b-table>
+                                    <b-table
+                                        striped
+                                        responsive
+                                        :items="getNetworkInterfaceTableItems(netInterface.received)"
+                                        :fields="getNetworkInterfaceTableFields(netInterface.received)"
+                                    />
                                 </b-col>
                                 <b-col>
                                     <h5 class="mb-1 text-center">
                                         {{ $gettext('Transmitted') }}
                                     </h5>
-                                    <b-table striped responsive
-                                             :items="getNetworkInterfaceTableItems(netInterface.transmitted)"
-                                             :fields="getNetworkInterfaceTableFields(netInterface.transmitted)">
-                                    </b-table>
+                                    <b-table
+                                        striped
+                                        responsive
+                                        :items="getNetworkInterfaceTableItems(netInterface.transmitted)"
+                                        :fields="getNetworkInterfaceTableFields(netInterface.transmitted)"
+                                    />
                                 </b-col>
                             </b-row>
                         </b-tab>
@@ -297,8 +465,8 @@
             </b-col>
         </b-row>
 
-        <cpu-stats-help-modal ref="cpuStatsHelpModal"></cpu-stats-help-modal>
-        <memory-stats-help-modal ref="memoryStatsHelpModal"></memory-stats-help-modal>
+        <cpu-stats-help-modal ref="cpuStatsHelpModal" />
+        <memory-stats-help-modal ref="memoryStatsHelpModal" />
     </div>
 </template>
 
@@ -361,10 +529,6 @@ export default {
             services: []
         };
     },
-    created() {
-        this.updateStats();
-        this.updateServices();
-    },
     computed: {
         langServiceRunning() {
             return this.$gettext('Service Running');
@@ -373,6 +537,10 @@ export default {
             return this.$gettext('Service Stopped');
         }
     },
+    created() {
+        this.updateStats();
+        this.updateServices();
+    },
     methods: {
         formatCpuName(cpuName) {
             return _.upperFirst(cpuName);
diff --git a/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue b/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
index 0b08b5f18..0bf4881d5 100644
--- a/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
+++ b/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
@@ -1,8 +1,19 @@
 <template>
-    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="$modal" :title="$gettext('CPU Stats Help')">
+    <b-modal
+        id="cpu_stats_help_modal"
+        ref="$modal"
+        size="lg"
+        centered
+        :title="$gettext('CPU Stats Help')"
+    >
         <div class="mb-2">
             <h6>
-                <b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
+                <b-badge
+                    pill
+                    variant="danger"
+                >
+&nbsp;&nbsp;
+                </b-badge>&nbsp;
                 {{ $gettext('Steal (St)') }}:
                 {{ $gettext('Time stolen by other virtual machines on the same physical server.') }}
             </h6>
@@ -26,7 +37,12 @@
         </div>
         <div class="mb-2">
             <h6>
-                <b-badge pill variant="warning">&nbsp;&nbsp;</b-badge>&nbsp;
+                <b-badge
+                    pill
+                    variant="warning"
+                >
+&nbsp;&nbsp;
+                </b-badge>&nbsp;
                 {{ $gettext('Wait (Wa)') }}:
                 {{ $gettext('Time spent waiting for disk I/O to be completed.') }}
             </h6>
@@ -50,7 +66,12 @@
         </div>
         <div class="mb-1">
             <h6>
-                <b-badge pill variant="primary">&nbsp;&nbsp;</b-badge>&nbsp;
+                <b-badge
+                    pill
+                    variant="primary"
+                >
+&nbsp;&nbsp;
+                </b-badge>&nbsp;
                 {{ $gettext('Use (Us)') }}:
                 {{ $gettext('The current CPU usage including I/O Wait and Steal.') }}
             </h6>
@@ -58,7 +79,11 @@
 
         <template #modal-footer>
             <slot name="modal-footer">
-                <b-button variant="default" type="button" @click="close">
+                <b-button
+                    variant="default"
+                    type="button"
+                    @click="close"
+                >
                     {{ $gettext('Close') }}
                 </b-button>
             </slot>
diff --git a/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue b/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
index af8925714..37aca9165 100644
--- a/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
+++ b/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
@@ -1,8 +1,19 @@
 <template>
-    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="$modal" :title="$gettext('Memory Stats Help')">
+    <b-modal
+        id="cpu_stats_help_modal"
+        ref="$modal"
+        size="lg"
+        centered
+        :title="$gettext('Memory Stats Help')"
+    >
         <div class="mb-2">
             <h6>
-                <b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
+                <b-badge
+                    pill
+                    variant="danger"
+                >
+&nbsp;&nbsp;
+                </b-badge>&nbsp;
                 {{ $gettext('Cached') }}:
                 {{ $gettext('The amount of memory Linux is using for disk caching.') }}
             </h6>
@@ -22,7 +33,12 @@
 
         <div class="mb-2">
             <h6>
-                <b-badge pill variant="primary">&nbsp;&nbsp;</b-badge>&nbsp;
+                <b-badge
+                    pill
+                    variant="primary"
+                >
+&nbsp;&nbsp;
+                </b-badge>&nbsp;
                 {{ $gettext('Used') }}:
                 {{ $gettext('The current Memory usage excluding cached memory.') }}
             </h6>
@@ -30,7 +46,11 @@
 
         <template #modal-footer>
             <slot name="modal-footer">
-                <b-button variant="default" type="button" @click="close">
+                <b-button
+                    variant="default"
+                    type="button"
+                    @click="close"
+                >
                     {{ $gettext('Close') }}
                 </b-button>
             </slot>
diff --git a/frontend/vue/components/Admin/Logs.vue b/frontend/vue/components/Admin/Logs.vue
index 7a6fa4c24..1dea893bc 100644
--- a/frontend/vue/components/Admin/Logs.vue
+++ b/frontend/vue/components/Admin/Logs.vue
@@ -6,24 +6,42 @@
             </h2>
         </div>
 
-        <log-list :url="systemLogsUrl" @view="viewLog"></log-list>
+        <log-list
+            :url="systemLogsUrl"
+            @view="viewLog"
+        />
     </div>
 
-    <div class="card" v-if="stationLogs.length > 0">
+    <div
+        v-if="stationLogs.length > 0"
+        class="card"
+    >
         <div class="card-header bg-primary-dark">
             <h2 class="card-title">
                 {{ $gettext('Logs by Station') }}
             </h2>
         </div>
 
-        <b-tabs pills lazy nav-class="card-header-pills" nav-wrapper-class="card-header">
-            <b-tab v-for="row in stationLogs" :key="row.id" :title="row.name">
-                <log-list :url="row.url" @view="viewLog"></log-list>
+        <b-tabs
+            pills
+            lazy
+            nav-class="card-header-pills"
+            nav-wrapper-class="card-header"
+        >
+            <b-tab
+                v-for="row in stationLogs"
+                :key="row.id"
+                :title="row.name"
+            >
+                <log-list
+                    :url="row.url"
+                    @view="viewLog"
+                />
             </b-tab>
         </b-tabs>
     </div>
 
-    <streaming-log-modal ref="$modal"></streaming-log-modal>
+    <streaming-log-modal ref="$modal" />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Admin/Permissions.vue b/frontend/vue/components/Admin/Permissions.vue
index 9a222acea..b1e945dc3 100644
--- a/frontend/vue/components/Admin/Permissions.vue
+++ b/frontend/vue/components/Admin/Permissions.vue
@@ -1,7 +1,9 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('Roles & Permissions') }}</h2>
+            <h2 class="card-title">
+                {{ $gettext('Roles & Permissions') }}
+            </h2>
         </b-card-header>
 
         <info-card>
@@ -13,31 +15,54 @@
         </info-card>
 
         <b-card-body body-class="card-padding-sm">
-            <b-button variant="outline-primary" @click.prevent="doCreate">
-                <icon icon="add"></icon>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Role') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="permissions" paginated :fields="fields" :api-url="listUrl">
+        <data-table
+            id="permissions"
+            ref="datatable"
+            paginated
+            :fields="fields"
+            :api-url="listUrl"
+        >
             <template #cell(permissions)="row">
                 <div v-if="row.item.permissions.global.length > 0">
                     {{ $gettext('Global') }}
                     :
                     {{ getGlobalPermissionNames(row.item.permissions.global).join(', ') }}
                 </div>
-                <div v-for="(permissions, stationId) in row.item.permissions.station" :key="stationId">
+                <div
+                    v-for="(permissions, stationId) in row.item.permissions.station"
+                    :key="stationId"
+                >
                     <b>{{ getStationName(stationId) }}</b>:
                     {{ getStationPermissionNames(permissions).join(', ') }}
                 </div>
             </template>
             <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)">
+                <b-button-group
+                    v-if="!row.item.is_super_admin"
+                    size="sm"
+                >
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button v-if="row.item.id !== 1" size="sm" variant="danger"
-                              @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        v-if="row.item.id !== 1"
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -45,8 +70,14 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editModal" :create-url="listUrl" :station-permissions="stationPermissions" :stations="stations"
-                :global-permissions="globalPermissions" @relist="relist"></edit-modal>
+    <edit-modal
+        ref="editModal"
+        :create-url="listUrl"
+        :station-permissions="stationPermissions"
+        :stations="stations"
+        :global-permissions="globalPermissions"
+        @relist="relist"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Admin/Permissions/EditModal.vue b/frontend/vue/components/Admin/Permissions/EditModal.vue
index 36f965dac..64eb9d0df 100644
--- a/frontend/vue/components/Admin/Permissions/EditModal.vue
+++ b/frontend/vue/components/Admin/Permissions/EditModal.vue
@@ -1,16 +1,28 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <admin-permissions-global-form
+                :form="v$"
+                :global-permissions="globalPermissions"
+            />
 
-        <b-tabs content-class="mt-3" pills>
-            <admin-permissions-global-form :form="v$" :global-permissions="globalPermissions">
-            </admin-permissions-global-form>
-
-            <admin-permissions-station-form :form="v$" :stations="stations"
-                                            :station-permissions="stationPermissions">
-            </admin-permissions-station-form>
+            <admin-permissions-station-form
+                :form="v$"
+                :stations="stations"
+                :station-permissions="stationPermissions"
+            />
         </b-tabs>
-
     </modal-form>
 </template>
 
diff --git a/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue b/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue
index d86138369..13b6504f9 100644
--- a/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue
+++ b/frontend/vue/components/Admin/Permissions/Form/GlobalForm.vue
@@ -1,15 +1,25 @@
 <template>
-    <b-tab :title="$gettext('Global Permissions')" active>
+    <b-tab
+        :title="$gettext('Global Permissions')"
+        active
+    >
         <b-form-group>
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
+                <b-wrapped-form-group
+                    id="edit_form_name"
+                    class="col-md-12"
+                    :field="form.name"
+                >
                     <template #label>
                         {{ $gettext('Role Name') }}
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-12" id="edit_form_global_permissions"
-                                      :field="form.permissions.global">
+                <b-wrapped-form-group
+                    id="edit_form_global_permissions"
+                    class="col-md-12"
+                    :field="form.permissions.global"
+                >
                     <template #label>
                         {{ $gettext('Global Permissions') }}
                     </template>
@@ -19,9 +29,12 @@
                         }}
                     </template>
                     <template #default="props">
-                        <b-form-checkbox-group :id="props.id" :options="globalPermissionOptions"
-                                               v-model="props.field.$model" stacked>
-                        </b-form-checkbox-group>
+                        <b-form-checkbox-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :options="globalPermissionOptions"
+                            stacked
+                        />
                     </template>
                 </b-wrapped-form-group>
             </div>
diff --git a/frontend/vue/components/Admin/Permissions/Form/StationForm.vue b/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
index 7ad0cbc66..22ed23604 100644
--- a/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
+++ b/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
@@ -1,19 +1,29 @@
 <template>
     <b-tab :title="$gettext('Station Permissions')">
         <permissions-form-station-row
-            v-for="(row, index) in form.permissions.$model.station" :key="index"
-            :stations="stations" :station-permissions="stationPermissions"
-            v-model:row="form.permissions.$model.station[index]" @remove="remove(index)"
-        ></permissions-form-station-row>
+            v-for="(row, index) in form.permissions.$model.station"
+            :key="index"
+            v-model:row="form.permissions.$model.station[index]"
+            :stations="stations"
+            :station-permissions="stationPermissions"
+            @remove="remove(index)"
+        />
 
         <b-button-group v-if="hasRemainingStations">
-            <b-dropdown size="sm" variant="outline-primary">
+            <b-dropdown
+                size="sm"
+                variant="outline-primary"
+            >
                 <template #button-content>
                     {{ $gettext('Add Station') }}
                 </template>
                 <div style="max-height: 300px; overflow-y: auto;">
-                    <b-dropdown-item-button v-for="(stationName, stationId) in remainingStations" :key="stationId"
-                                            @click="add(stationId)">{{ stationName }}
+                    <b-dropdown-item-button
+                        v-for="(stationName, stationId) in remainingStations"
+                        :key="stationId"
+                        @click="add(stationId)"
+                    >
+                        {{ stationName }}
                     </b-dropdown-item-button>
                 </div>
             </b-dropdown>
diff --git a/frontend/vue/components/Admin/Permissions/Form/StationRow.vue b/frontend/vue/components/Admin/Permissions/Form/StationRow.vue
index d70fdf32e..7fc1748db 100644
--- a/frontend/vue/components/Admin/Permissions/Form/StationRow.vue
+++ b/frontend/vue/components/Admin/Permissions/Form/StationRow.vue
@@ -1,5 +1,8 @@
 <template>
-    <b-card class="mb-3" no-body>
+    <b-card
+        class="mb-3"
+        no-body
+    >
         <div class="card-header bg-primary-dark d-flex align-items-center">
             <div class="flex-fill">
                 <h2 class="card-title">
@@ -7,8 +10,13 @@
                 </h2>
             </div>
             <div class="flex-shrink-0">
-                <b-button size="sm" variant="outline-light" class="py-2 pr-0" @click.prevent="$emit('remove')">
-                    <icon icon="remove"></icon>
+                <b-button
+                    size="sm"
+                    variant="outline-light"
+                    class="py-2 pr-0"
+                    @click.prevent="$emit('remove')"
+                >
+                    <icon icon="remove" />
                     {{ $gettext('Remove') }}
                 </b-button>
             </div>
@@ -16,9 +24,11 @@
         <b-card-body>
             <b-form-group>
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-12"
-                                          :id="'edit_form_station_permissions_'+row.station_id"
-                                          :field="v$.permissions">
+                    <b-wrapped-form-group
+                        :id="'edit_form_station_permissions_'+row.station_id"
+                        class="col-md-12"
+                        :field="v$.permissions"
+                    >
                         <template #label>
                             {{ $gettext('Station Permissions') }}
                         </template>
@@ -26,9 +36,12 @@
                             {{ $gettext('Users with this role will have these permissions for this single station.') }}
                         </template>
                         <template #default="props">
-                            <b-form-checkbox-group :id="props.id" :options="stationPermissionOptions"
-                                                   v-model="props.field.$model" stacked>
-                            </b-form-checkbox-group>
+                            <b-form-checkbox-group
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :options="stationPermissionOptions"
+                                stacked
+                            />
                         </template>
                     </b-wrapped-form-group>
                 </div>
diff --git a/frontend/vue/components/Admin/Settings.vue b/frontend/vue/components/Admin/Settings.vue
index 7ae58efc8..998734788 100644
--- a/frontend/vue/components/Admin/Settings.vue
+++ b/frontend/vue/components/Admin/Settings.vue
@@ -1,6 +1,9 @@
 <template>
-    <form class="form vue-form" @submit.prevent="submit">
-        <slot name="preCard"></slot>
+    <form
+        class="form vue-form"
+        @submit.prevent="submit"
+    >
+        <slot name="preCard" />
 
         <b-card no-body>
             <div class="card-header bg-primary-dark">
@@ -11,18 +14,30 @@
                 </h2>
             </div>
 
-            <slot name="cardUpper"></slot>
+            <slot name="cardUpper" />
 
-            <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+            <b-alert
+                variant="danger"
+                :show="error != null"
+            >
+                {{ error }}
+            </b-alert>
 
-            <b-overlay variant="card" :show="loading">
-                <b-tabs pills card lazy>
+            <b-overlay
+                variant="card"
+                :show="loading"
+            >
+                <b-tabs
+                    pills
+                    card
+                    lazy
+                >
                     <b-tab :title-link-class="getTabClass(v$.$validationGroups.generalTab)">
                         <template #title>
                             {{ $gettext('Settings') }}
                         </template>
 
-                        <settings-general-tab :form="v$"></settings-general-tab>
+                        <settings-general-tab :form="v$" />
                     </b-tab>
 
                     <b-tab :title-link-class="getTabClass(v$.$validationGroups.securityPrivacyTab)">
@@ -30,7 +45,7 @@
                             {{ $gettext('Security & Privacy') }}
                         </template>
 
-                        <settings-security-privacy-tab :form="v$"></settings-security-privacy-tab>
+                        <settings-security-privacy-tab :form="v$" />
                     </b-tab>
 
                     <b-tab :title-link-class="getTabClass(v$.$validationGroups.servicesTab)">
@@ -38,16 +53,22 @@
                             {{ $gettext('Services') }}
                         </template>
 
-                        <settings-services-tab :form="v$"
-                                               :release-channel="releaseChannel"
-                                               :test-message-url="testMessageUrl"
-                                               :acme-url="acmeUrl"></settings-services-tab>
+                        <settings-services-tab
+                            :form="v$"
+                            :release-channel="releaseChannel"
+                            :test-message-url="testMessageUrl"
+                            :acme-url="acmeUrl"
+                        />
                     </b-tab>
                 </b-tabs>
             </b-overlay>
 
             <b-card-body body-class="card-padding-sm">
-                <b-button size="lg" type="submit" :variant="(v$.$invalid) ? 'danger' : 'primary'">
+                <b-button
+                    size="lg"
+                    type="submit"
+                    :variant="(v$.$invalid) ? 'danger' : 'primary'"
+                >
                     <slot name="submitButtonName">
                         {{ $gettext('Save Changes') }}
                     </slot>
diff --git a/frontend/vue/components/Admin/Settings/GeneralTab.vue b/frontend/vue/components/Admin/Settings/GeneralTab.vue
index 4d7f1f940..812c4facb 100644
--- a/frontend/vue/components/Admin/Settings/GeneralTab.vue
+++ b/frontend/vue/components/Admin/Settings/GeneralTab.vue
@@ -1,8 +1,12 @@
 <template>
     <b-form-fieldset>
         <div class="form-row">
-
-            <b-wrapped-form-group class="col-md-6" id="edit_form_base_url" :field="form.base_url" input-type="url">
+            <b-wrapped-form-group
+                id="edit_form_base_url"
+                class="col-md-6"
+                :field="form.base_url"
+                input-type="url"
+            >
                 <template #label>
                     {{ $gettext('Site Base URL') }}
                 </template>
@@ -13,7 +17,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_instance_name" :field="form.instance_name">
+            <b-wrapped-form-group
+                id="edit_form_instance_name"
+                class="col-md-6"
+                :field="form.instance_name"
+            >
                 <template #label>
                     {{ $gettext('AzuraCast Instance Name') }}
                 </template>
@@ -24,8 +32,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-checkbox class="col-md-6" id="edit_form_prefer_browser_url"
-                                     :field="form.prefer_browser_url">
+            <b-wrapped-form-checkbox
+                id="edit_form_prefer_browser_url"
+                class="col-md-6"
+                :field="form.prefer_browser_url"
+            >
                 <template #label>
                     {{ $gettext('Prefer Browser URL (If Available)') }}
                 </template>
@@ -36,8 +47,11 @@
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-checkbox class="col-md-6" id="edit_form_use_radio_proxy"
-                                     :field="form.use_radio_proxy">
+            <b-wrapped-form-checkbox
+                id="edit_form_use_radio_proxy"
+                class="col-md-6"
+                :field="form.use_radio_proxy"
+            >
                 <template #label>
                     {{ $gettext('Use Web Proxy for Radio') }}
                 </template>
@@ -48,7 +62,11 @@
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_history_keep_days" :field="form.history_keep_days">
+            <b-wrapped-form-group
+                id="edit_form_history_keep_days"
+                class="col-md-6"
+                :field="form.history_keep_days"
+            >
                 <template #label>
                     {{ $gettext('Days of Playback History to Keep') }}
                 </template>
@@ -58,13 +76,20 @@
                     }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" v-model="props.field.$model"
-                                        :options="historyKeepDaysOptions"></b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="historyKeepDaysOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-checkbox class="col-md-6" id="edit_form_enable_static_nowplaying"
-                                     :field="form.enable_static_nowplaying">
+            <b-wrapped-form-checkbox
+                id="edit_form_enable_static_nowplaying"
+                class="col-md-6"
+                :field="form.enable_static_nowplaying"
+            >
                 <template #label>
                     {{ $gettext('Use High-Performance Now Playing Updates') }}
                 </template>
@@ -75,8 +100,11 @@
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-checkbox class="col-md-6" id="edit_form_enable_advanced_features"
-                                     :field="form.enable_advanced_features">
+            <b-wrapped-form-checkbox
+                id="edit_form_enable_advanced_features"
+                class="col-md-6"
+                :field="form.enable_advanced_features"
+            >
                 <template #label>
                     {{ $gettext('Enable Advanced Features') }}
                 </template>
@@ -86,7 +114,6 @@
                     }}
                 </template>
             </b-wrapped-form-checkbox>
-
         </div>
     </b-form-fieldset>
 </template>
diff --git a/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue b/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue
index a0c1e17ef..6b893201b 100644
--- a/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue
+++ b/frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue
@@ -5,7 +5,11 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="edit_form_analytics" :field="form.analytics">
+            <b-wrapped-form-group
+                id="edit_form_analytics"
+                class="col-md-12"
+                :field="form.analytics"
+            >
                 <template #label>
                     {{ $gettext('Listener Analytics Collection') }}
                 </template>
@@ -15,7 +19,11 @@
                     }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                    >
                         <b-form-radio value="all">
                             <b>
                                 {{ $gettext('Full:') }}
@@ -46,8 +54,11 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-checkbox class="col-md-12" id="edit_form_always_use_ssl"
-                                     :field="form.always_use_ssl">
+            <b-wrapped-form-checkbox
+                id="edit_form_always_use_ssl"
+                class="col-md-12"
+                :field="form.always_use_ssl"
+            >
                 <template #label>
                     {{ $gettext('Always Use HTTPS') }}
                 </template>
@@ -58,8 +69,11 @@
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-group class="col-md-12" id="edit_form_api_access_control"
-                                  :field="form.api_access_control">
+            <b-wrapped-form-group
+                id="edit_form_api_access_control"
+                class="col-md-12"
+                :field="form.api_access_control"
+            >
                 <template #label>
                     {{ $gettext('API "Access-Control-Allow-Origin" Header') }}
                 </template>
@@ -68,8 +82,10 @@
                         $gettext('Set to * to allow all sources, or specify a list of origins separated by a comma (,).')
                     }}
                     <br>
-                    <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"
-                       target="_blank">
+                    <a
+                        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"
+                        target="_blank"
+                    >
                         {{ $gettext('Learn more about this header.') }}
                     </a>
                 </template>
diff --git a/frontend/vue/components/Admin/Settings/ServicesTab.vue b/frontend/vue/components/Admin/Settings/ServicesTab.vue
index 02ae3476c..b572748bb 100644
--- a/frontend/vue/components/Admin/Settings/ServicesTab.vue
+++ b/frontend/vue/components/Admin/Settings/ServicesTab.vue
@@ -5,13 +5,18 @@
         </template>
 
         <div class="form-row">
-            <b-form-markup class="col-md-6" id="form_release_channel">
+            <b-form-markup
+                id="form_release_channel"
+                class="col-md-6"
+            >
                 <template #label>
                     {{ $gettext('Release Channel') }}
                 </template>
                 <template #description>
-                    <a href="https://docs.azuracast.com/en/getting-started/updates/release-channels"
-                       target="_blank">
+                    <a
+                        href="https://docs.azuracast.com/en/getting-started/updates/release-channels"
+                        target="_blank"
+                    >
                         {{ $gettext('Learn more about release channels in the AzuraCast docs.') }}
                     </a>
                 </template>
@@ -21,8 +26,11 @@
                 </p>
             </b-form-markup>
 
-            <b-wrapped-form-checkbox class="col-md-6" id="edit_form_check_for_updates"
-                                     :field="form.check_for_updates">
+            <b-wrapped-form-checkbox
+                id="edit_form_check_for_updates"
+                class="col-md-6"
+                :field="form.check_for_updates"
+            >
                 <template #label>
                     {{ $gettext('Show Update Announcements') }}
                 </template>
@@ -44,8 +52,11 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_acme_domains"
-                                  :field="form.acme_domains">
+            <b-wrapped-form-group
+                id="edit_form_acme_domains"
+                class="col-md-6"
+                :field="form.acme_domains"
+            >
                 <template #label>
                     {{ $gettext('Domain Name(s)') }}
                 </template>
@@ -56,8 +67,12 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_acme_email"
-                                  :field="form.acme_email" input-type="email">
+            <b-wrapped-form-group
+                id="edit_form_acme_email"
+                class="col-md-6"
+                :field="form.acme_email"
+                input-type="email"
+            >
                 <template #label>
                     {{ $gettext('E-mail Address (Optional)') }}
                 </template>
@@ -67,8 +82,13 @@
             </b-wrapped-form-group>
 
             <div class="form-group col">
-                <b-button size="sm" variant="primary" :disabled="form.$anyDirty" @click="generateAcmeCert">
-                    <icon icon="badge"></icon>
+                <b-button
+                    size="sm"
+                    variant="primary"
+                    :disabled="form.$anyDirty"
+                    @click="generateAcmeCert"
+                >
+                    <icon icon="badge" />
                     {{ $gettext('Generate/Renew Certificate') }}
                     <span v-if="form.$anyDirty">
                         ({{ $gettext('Save Changes first') }})
@@ -87,45 +107,68 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-checkbox class="col-md-12" id="edit_form_mail_enabled"
-                                     :field="form.mail_enabled">
+            <b-wrapped-form-checkbox
+                id="edit_form_mail_enabled"
+                class="col-md-12"
+                :field="form.mail_enabled"
+            >
                 <template #label>
                     {{ $gettext('Enable Mail Delivery') }}
                 </template>
             </b-wrapped-form-checkbox>
         </div>
 
-        <div class="form-row mt-2" v-if="form.mail_enabled.$model">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_mail_sender_name"
-                                  :field="form.mail_sender_name">
+        <div
+            v-if="form.mail_enabled.$model"
+            class="form-row mt-2"
+        >
+            <b-wrapped-form-group
+                id="edit_form_mail_sender_name"
+                class="col-md-6"
+                :field="form.mail_sender_name"
+            >
                 <template #label>
                     {{ $gettext('Sender Name') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_mail_sender_email"
-                                  :field="form.mail_sender_email" input-type="email">
+            <b-wrapped-form-group
+                id="edit_form_mail_sender_email"
+                class="col-md-6"
+                :field="form.mail_sender_email"
+                input-type="email"
+            >
                 <template #label>
                     {{ $gettext('Sender E-mail Address') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-4" id="edit_form_mail_smtp_host"
-                                  :field="form.mail_smtp_host">
+            <b-wrapped-form-group
+                id="edit_form_mail_smtp_host"
+                class="col-md-4"
+                :field="form.mail_smtp_host"
+            >
                 <template #label>
                     {{ $gettext('SMTP Host') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-3" id="edit_form_mail_smtp_port"
-                                  :field="form.mail_smtp_port" input-type="number">
+            <b-wrapped-form-group
+                id="edit_form_mail_smtp_port"
+                class="col-md-3"
+                :field="form.mail_smtp_port"
+                input-type="number"
+            >
                 <template #label>
                     {{ $gettext('SMTP Port') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-checkbox class="col-md-5" id="edit_form_mail_smtp_secure"
-                                     :field="form.mail_smtp_secure">
+            <b-wrapped-form-checkbox
+                id="edit_form_mail_smtp_secure"
+                class="col-md-5"
+                :field="form.mail_smtp_secure"
+            >
                 <template #label>
                     {{ $gettext('Use Secure (TLS) SMTP Connection') }}
                 </template>
@@ -134,23 +177,35 @@
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_mail_smtp_username"
-                                  :field="form.mail_smtp_username">
+            <b-wrapped-form-group
+                id="edit_form_mail_smtp_username"
+                class="col-md-6"
+                :field="form.mail_smtp_username"
+            >
                 <template #label>
                     {{ $gettext('SMTP Username') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_mail_smtp_password"
-                                  :field="form.mail_smtp_password" input-type="password">
+            <b-wrapped-form-group
+                id="edit_form_mail_smtp_password"
+                class="col-md-6"
+                :field="form.mail_smtp_password"
+                input-type="password"
+            >
                 <template #label>
                     {{ $gettext('SMTP Password') }}
                 </template>
             </b-wrapped-form-group>
 
             <div class="form-group col">
-                <b-button size="sm" variant="primary" :disabled="form.$anyDirty" v-b-modal.send_test_message>
-                    <icon icon="send"></icon>
+                <b-button
+                    v-b-modal.send_test_message
+                    size="sm"
+                    variant="primary"
+                    :disabled="form.$anyDirty"
+                >
+                    <icon icon="send" />
                     {{ $gettext('Send Test Message') }}
                     <span v-if="form.$anyDirty">
                         ({{ $gettext('Save Changes first') }})
@@ -166,18 +221,29 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_avatar_service" :field="form.avatar_service">
+            <b-wrapped-form-group
+                id="edit_form_avatar_service"
+                class="col-md-6"
+                :field="form.avatar_service"
+            >
                 <template #label>
                     {{ $gettext('Avatar Service') }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" v-model="props.field.$model"
-                                        :options="avatarServiceOptions"></b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="avatarServiceOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_avatar_default_url"
-                                  :field="form.avatar_default_url">
+            <b-wrapped-form-group
+                id="edit_form_avatar_default_url"
+                class="col-md-6"
+                :field="form.avatar_default_url"
+            >
                 <template #label>
                     {{ $gettext('Default Avatar URL') }}
                 </template>
@@ -191,28 +257,41 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-checkbox class="col-md-6" id="use_external_album_art_in_apis"
-                                     :field="form.use_external_album_art_in_apis">
+            <b-wrapped-form-checkbox
+                id="use_external_album_art_in_apis"
+                class="col-md-6"
+                :field="form.use_external_album_art_in_apis"
+            >
                 <template #label>
                     {{ $gettext('Check Web Services for Album Art for "Now Playing" Tracks') }}
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-checkbox class="col-md-6" id="use_external_album_art_when_processing_media"
-                                     :field="form.use_external_album_art_when_processing_media">
+            <b-wrapped-form-checkbox
+                id="use_external_album_art_when_processing_media"
+                class="col-md-6"
+                :field="form.use_external_album_art_when_processing_media"
+            >
                 <template #label>
                     {{ $gettext('Check Web Services for Album Art When Uploading Media') }}
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-group class="col-md-12" id="edit_form_last_fm_api_key" :field="form.last_fm_api_key">
+            <b-wrapped-form-group
+                id="edit_form_last_fm_api_key"
+                class="col-md-12"
+                :field="form.last_fm_api_key"
+            >
                 <template #label>
                     {{ $gettext('Last.fm API Key') }}
                 </template>
                 <template #description>
                     {{ $gettext('This service can provide album art for tracks where none is available locally.') }}
                     <br>
-                    <a href="https://www.last.fm/api/account/create" target="_blank">
+                    <a
+                        href="https://www.last.fm/api/account/create"
+                        target="_blank"
+                    >
                         {{ $gettext('Apply for an API key at Last.fm') }}
                     </a>
                 </template>
@@ -220,9 +299,9 @@
         </div>
     </b-form-fieldset>
 
-    <streaming-log-modal ref="$acmeModal"></streaming-log-modal>
+    <streaming-log-modal ref="$acmeModal" />
 
-    <admin-settings-test-message-modal :test-message-url="testMessageUrl"></admin-settings-test-message-modal>
+    <admin-settings-test-message-modal :test-message-url="testMessageUrl" />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Admin/Settings/TestMessageModal.vue b/frontend/vue/components/Admin/Settings/TestMessageModal.vue
index cd7ab90f7..55375605f 100644
--- a/frontend/vue/components/Admin/Settings/TestMessageModal.vue
+++ b/frontend/vue/components/Admin/Settings/TestMessageModal.vue
@@ -1,17 +1,32 @@
 <template>
-    <b-modal id="send_test_message" centered ref="$modal" :title="$gettext('Send Test Message')">
+    <b-modal
+        id="send_test_message"
+        ref="$modal"
+        centered
+        :title="$gettext('Send Test Message')"
+    >
         <b-form @submit.prevent="doSendTest">
-            <b-wrapped-form-group id="email_address" :field="v$.emailAddress" autofocus>
+            <b-wrapped-form-group
+                id="email_address"
+                :field="v$.emailAddress"
+                autofocus
+            >
                 <template #label>
                     {{ $gettext('E-mail Address') }}
                 </template>
             </b-wrapped-form-group>
         </b-form>
         <template #modal-footer>
-            <b-button variant="default" @click="close">
+            <b-button
+                variant="default"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button :variant="(v$.$invalid) ? 'danger' : 'primary'" @click="doSendTest">
+            <b-button
+                :variant="(v$.$invalid) ? 'danger' : 'primary'"
+                @click="doSendTest"
+            >
                 {{ $gettext('Send Test Message') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Admin/Shoutcast.vue b/frontend/vue/components/Admin/Shoutcast.vue
index 1f410415d..b41a4ca34 100644
--- a/frontend/vue/components/Admin/Shoutcast.vue
+++ b/frontend/vue/components/Admin/Shoutcast.vue
@@ -7,8 +7,10 @@
         </div>
 
         <div class="card-body">
-            <b-overlay variant="card" :show="loading">
-
+            <b-overlay
+                variant="card"
+                :show="loading"
+            >
                 <div class="form-row">
                     <div class="col-md-7">
                         <fieldset>
@@ -30,8 +32,10 @@
                                 <li>
                                     {{ $gettext('Download the Linux x64 binary from the Shoutcast Radio Manager:') }}
                                     <br>
-                                    <a href="https://radiomanager.shoutcast.com/register/serverSoftwareFreemium"
-                                       target="_blank">
+                                    <a
+                                        href="https://radiomanager.shoutcast.com/register/serverSoftwareFreemium"
+                                        target="_blank"
+                                    >
                                         {{ $gettext('Shoutcast Radio Manager') }}
                                     </a>
                                 </li>
@@ -54,15 +58,24 @@
                                 {{ $gettext('Current Installed Version') }}
                             </legend>
 
-                            <p v-if="version" class="text-success card-text">
+                            <p
+                                v-if="version"
+                                class="text-success card-text"
+                            >
                                 {{ langInstalledVersion }}
                             </p>
-                            <p v-else class="text-danger card-text">
+                            <p
+                                v-else
+                                class="text-danger card-text"
+                            >
                                 {{ $gettext('Shoutcast 2 DNAS is not currently installed on this installation.') }}
                             </p>
                         </fieldset>
 
-                        <flow-upload :target-url="apiUrl" @complete="relist"></flow-upload>
+                        <flow-upload
+                            :target-url="apiUrl"
+                            @complete="relist"
+                        />
                     </div>
                 </div>
             </b-overlay>
diff --git a/frontend/vue/components/Admin/Stations.vue b/frontend/vue/components/Admin/Stations.vue
index 3e2d2cd10..8aaf31a87 100644
--- a/frontend/vue/components/Admin/Stations.vue
+++ b/frontend/vue/components/Admin/Stations.vue
@@ -1,19 +1,32 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('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>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Station') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="stations" paginated :fields="fields" :api-url="listUrl">
+        <data-table
+            id="stations"
+            ref="datatable"
+            paginated
+            :fields="fields"
+            :api-url="listUrl"
+        >
             <template #cell(name)="row">
-                <div class="typography-subheading">{{ row.item.name }}</div>
+                <div class="typography-subheading">
+                    {{ row.item.name }}
+                </div>
                 <code>{{ row.item.short_name }}</code>
             </template>
             <template #cell(frontend_type)="row">
@@ -24,17 +37,33 @@
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="secondary" :href="row.item.links.manage" target="_blank">
+                    <b-button
+                        size="sm"
+                        variant="secondary"
+                        :href="row.item.links.manage"
+                        target="_blank"
+                    >
                         {{ $gettext('Manage') }}
                     </b-button>
-                    <b-button size="sm" variant="secondary"
-                              @click.prevent="doClone(row.item.name, row.item.links.clone)">
+                    <b-button
+                        size="sm"
+                        variant="secondary"
+                        @click.prevent="doClone(row.item.name, row.item.links.clone)"
+                    >
                         {{ $gettext('Clone') }}
                     </b-button>
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -42,10 +71,17 @@
         </data-table>
     </b-card>
 
-    <admin-stations-edit-modal v-bind="$props" ref="editModal" :create-url="listUrl"
-                               @relist="relist"></admin-stations-edit-modal>
+    <admin-stations-edit-modal
+        v-bind="$props"
+        ref="editModal"
+        :create-url="listUrl"
+        @relist="relist"
+    />
 
-    <admin-stations-clone-modal ref="cloneModal" @relist="relist"></admin-stations-clone-modal>
+    <admin-stations-clone-modal
+        ref="cloneModal"
+        @relist="relist"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Admin/Stations/CloneModal.vue b/frontend/vue/components/Admin/Stations/CloneModal.vue
index 2c892acf8..fcd12f8c2 100644
--- a/frontend/vue/components/Admin/Stations/CloneModal.vue
+++ b/frontend/vue/components/Admin/Stations/CloneModal.vue
@@ -1,10 +1,14 @@
 <template>
-    <modal-form ref="$modal" :loading="loading" :title="$gettext('Clone Station')" :error="error"
-                :disable-save-button="v$.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <admin-stations-clone-modal-form :form="v$"></admin-stations-clone-modal-form>
-
+    <modal-form
+        ref="$modal"
+        :loading="loading"
+        :title="$gettext('Clone Station')"
+        :error="error"
+        :disable-save-button="v$.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <admin-stations-clone-modal-form :form="v$" />
     </modal-form>
 </template>
 
diff --git a/frontend/vue/components/Admin/Stations/CloneModalForm.vue b/frontend/vue/components/Admin/Stations/CloneModalForm.vue
index 965797128..625761554 100644
--- a/frontend/vue/components/Admin/Stations/CloneModalForm.vue
+++ b/frontend/vue/components/Admin/Stations/CloneModalForm.vue
@@ -1,19 +1,31 @@
 <template>
     <div class="form-row">
-        <b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
+        <b-wrapped-form-group
+            id="edit_form_name"
+            class="col-md-12"
+            :field="form.name"
+        >
             <template #label>
                 {{ $gettext('New Station Name') }}
             </template>
         </b-wrapped-form-group>
 
-        <b-wrapped-form-group class="col-md-12" id="edit_form_description" :field="form.description"
-                              input-type="textarea">
+        <b-wrapped-form-group
+            id="edit_form_description"
+            class="col-md-12"
+            :field="form.description"
+            input-type="textarea"
+        >
             <template #label>
                 {{ $gettext('New Station Description') }}
             </template>
         </b-wrapped-form-group>
 
-        <b-wrapped-form-group class="col-md-12" id="edit_form_clone" :field="form.clone">
+        <b-wrapped-form-group
+            id="edit_form_clone"
+            class="col-md-12"
+            :field="form.clone"
+        >
             <template #label>
                 {{ $gettext('Copy to New Station') }}
             </template>
@@ -23,7 +35,7 @@
                     v-model="props.field.$model"
                     :options="cloneOptions"
                     stacked
-                ></b-form-checkbox-group>
+                />
             </template>
         </b-wrapped-form-group>
     </div>
diff --git a/frontend/vue/components/Admin/Stations/EditModal.vue b/frontend/vue/components/Admin/Stations/EditModal.vue
index 2dcda767d..3d8b1c4c8 100644
--- a/frontend/vue/components/Admin/Stations/EditModal.vue
+++ b/frontend/vue/components/Admin/Stations/EditModal.vue
@@ -1,19 +1,43 @@
 <template>
-    <b-modal size="lg" id="station_edit_modal" ref="$modal" :title="langTitle" :busy="loading"
-             @shown="resetForm" @hidden="clearContents">
-        <admin-stations-form v-bind="$props" ref="$form" is-modal :create-url="createUrl" :edit-url="editUrl"
-                             :is-edit-mode="isEditMode" @error="close" @submitted="onSubmit"
-                             @validUpdate="onValidUpdate" @loadingUpdate="onLoadingUpdate">
+    <b-modal
+        id="station_edit_modal"
+        ref="$modal"
+        size="lg"
+        :title="langTitle"
+        :busy="loading"
+        @shown="resetForm"
+        @hidden="clearContents"
+    >
+        <admin-stations-form
+            v-bind="$props"
+            ref="$form"
+            is-modal
+            :create-url="createUrl"
+            :edit-url="editUrl"
+            :is-edit-mode="isEditMode"
+            @error="close"
+            @submitted="onSubmit"
+            @validUpdate="onValidUpdate"
+            @loadingUpdate="onLoadingUpdate"
+        >
             <template #submitButton>
-                <invisible-submit-button></invisible-submit-button>
+                <invisible-submit-button />
             </template>
         </admin-stations-form>
 
         <template #modal-footer>
-            <b-button variant="default" type="button" @click="close">
+            <b-button
+                variant="default"
+                type="button"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button :variant="(disableSaveButton) ? 'danger' : 'primary'" type="submit" @click="doSubmit">
+            <b-button
+                :variant="(disableSaveButton) ? 'danger' : 'primary'"
+                type="submit"
+                @click="doSubmit"
+            >
                 {{ $gettext('Save Changes') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Admin/Stations/Form/AdminForm.vue b/frontend/vue/components/Admin/Stations/Form/AdminForm.vue
index 8477ed23a..96e111a7a 100644
--- a/frontend/vue/components/Admin/Stations/Form/AdminForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/AdminForm.vue
@@ -2,7 +2,11 @@
     <b-form-group>
         <b-form-fieldset>
             <div class="form-row">
-                <b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_enabled" :field="form.is_enabled">
+                <b-wrapped-form-checkbox
+                    id="edit_form_is_enabled"
+                    class="col-md-6"
+                    :field="form.is_enabled"
+                >
                     <template #label>
                         {{ $gettext('Enable Broadcasting') }}
                     </template>
@@ -11,8 +15,13 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_radio_base_dir"
-                                      :field="form.radio_base_dir" advanced>
+                <b-wrapped-form-group
+                    v-if="showAdvanced"
+                    id="edit_form_radio_base_dir"
+                    class="col-md-6"
+                    :field="form.radio_base_dir"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Base Station Directory') }}
                     </template>
@@ -26,38 +35,59 @@
         </b-form-fieldset>
 
         <b-form-fieldset>
-            <b-overlay variant="card" :show="storageLocationsLoading">
+            <b-overlay
+                variant="card"
+                :show="storageLocationsLoading"
+            >
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-12" id="edit_form_media_storage_location"
-                                          :field="form.media_storage_location">
+                    <b-wrapped-form-group
+                        id="edit_form_media_storage_location"
+                        class="col-md-12"
+                        :field="form.media_storage_location"
+                    >
                         <template #label>
                             {{ $gettext('Media Storage Location') }}
                         </template>
                         <template #default="props">
-                            <b-form-select :id="props.id" v-model="props.field.$model"
-                                           :options="storageLocationOptions.media_storage_location"></b-form-select>
+                            <b-form-select
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :options="storageLocationOptions.media_storage_location"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-12" id="edit_form_recordings_storage_location"
-                                          :field="form.recordings_storage_location">
+                    <b-wrapped-form-group
+                        id="edit_form_recordings_storage_location"
+                        class="col-md-12"
+                        :field="form.recordings_storage_location"
+                    >
                         <template #label>
                             {{ $gettext('Live Recordings Storage Location') }}
                         </template>
                         <template #default="props">
-                            <b-form-select :id="props.id" v-model="props.field.$model"
-                                           :options="storageLocationOptions.recordings_storage_location"></b-form-select>
+                            <b-form-select
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :options="storageLocationOptions.recordings_storage_location"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-12" id="edit_form_podcasts_storage_location"
-                                          :field="form.podcasts_storage_location">
+                    <b-wrapped-form-group
+                        id="edit_form_podcasts_storage_location"
+                        class="col-md-12"
+                        :field="form.podcasts_storage_location"
+                    >
                         <template #label>
                             {{ $gettext('Podcasts Storage Location') }}
                         </template>
                         <template #default="props">
-                            <b-form-select :id="props.id" v-model="props.field.$model"
-                                           :options="storageLocationOptions.podcasts_storage_location"></b-form-select>
+                            <b-form-select
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :options="storageLocationOptions.podcasts_storage_location"
+                            />
                         </template>
                     </b-wrapped-form-group>
                 </div>
diff --git a/frontend/vue/components/Admin/Stations/Form/BackendForm.vue b/frontend/vue/components/Admin/Stations/Form/BackendForm.vue
index e779577a3..6c7572fb5 100644
--- a/frontend/vue/components/Admin/Stations/Form/BackendForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/BackendForm.vue
@@ -1,8 +1,11 @@
 <template>
     <b-form-fieldset>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="edit_form_backend_type"
-                                  :field="form.backend_type">
+            <b-wrapped-form-group
+                id="edit_form_backend_type"
+                class="col-md-12"
+                :field="form.backend_type"
+            >
                 <template #label>
                     {{ $gettext('AutoDJ Service') }}
                 </template>
@@ -12,9 +15,12 @@
                     }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" :options="backendTypeOptions"
-                                        v-model="props.field.$model">
-                    </b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="backendTypeOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
@@ -23,8 +29,11 @@
     <b-form-fieldset v-if="isBackendEnabled">
         <b-form-fieldset>
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-7" id="edit_form_backend_crossfade_type"
-                                      :field="form.backend_config.crossfade_type">
+                <b-wrapped-form-group
+                    id="edit_form_backend_crossfade_type"
+                    class="col-md-7"
+                    :field="form.backend_config.crossfade_type"
+                >
                     <template #label>
                         {{ $gettext('Crossfade Method') }}
                     </template>
@@ -34,15 +43,22 @@
                         }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" :options="crossfadeOptions"
-                                            v-model="props.field.$model">
-                        </b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="crossfadeOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-5" id="edit_form_backend_crossfade"
-                                      :field="form.backend_config.crossfade" input-type="number"
-                                      :input-attrs="{ min: '0.0', max: '30.0', step: '0.1' }">
+                <b-wrapped-form-group
+                    id="edit_form_backend_crossfade"
+                    class="col-md-5"
+                    :field="form.backend_config.crossfade"
+                    input-type="number"
+                    :input-attrs="{ min: '0.0', max: '30.0', step: '0.1' }"
+                >
                     <template #label>
                         {{ $gettext('Crossfade Duration (Seconds)') }}
                     </template>
@@ -52,8 +68,11 @@
                 </b-wrapped-form-group>
             </div>
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-12" id="edit_form_backend_config_audio_processing_method"
-                                      :field="form.backend_config.audio_processing_method">
+                <b-wrapped-form-group
+                    id="edit_form_backend_config_audio_processing_method"
+                    class="col-md-12"
+                    :field="form.backend_config.audio_processing_method"
+                >
                     <template #label>
                         {{ $gettext('Audio Processing Method') }}
                     </template>
@@ -63,9 +82,12 @@
                         }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" :options="audioProcessingOptions"
-                                            v-model="props.field.$model">
-                        </b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="audioProcessingOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
             </div>
@@ -79,15 +101,22 @@
                 {{
                     $gettext('Stereo Tool is an industry standard for software audio processing. For more information on how to configure it, please refer to the')
                 }}
-                <a href="https://www.thimeo.com/stereo-tool/" target="_blank">
+                <a
+                    href="https://www.thimeo.com/stereo-tool/"
+                    target="_blank"
+                >
                     {{ $gettext('Stereo Tool documentation.') }}
                 </a>
             </template>
 
             <b-form-fieldset>
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-7" id="edit_form_backend_stereo_tool_license_key"
-                                          :field="form.backend_config.stereo_tool_license_key" input-type="text">
+                    <b-wrapped-form-group
+                        id="edit_form_backend_stereo_tool_license_key"
+                        class="col-md-7"
+                        :field="form.backend_config.stereo_tool_license_key"
+                        input-type="text"
+                    >
                         <template #label>
                             {{ $gettext('Stereo Tool License Key') }}
                         </template>
@@ -98,7 +127,10 @@
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-form-markup class="col-md-5" id="edit_form_backend_stereo_tool_config">
+                    <b-form-markup
+                        id="edit_form_backend_stereo_tool_config"
+                        class="col-md-5"
+                    >
                         <template #label>
                             {{ $gettext('Upload Stereo Tool Configuration') }}
                         </template>
@@ -119,9 +151,12 @@
             </template>
 
             <div class="form-row">
-                <b-wrapped-form-checkbox class="col-md-6"
-                                         id="edit_form_backend_use_manual_autodj"
-                                         :field="form.backend_config.use_manual_autodj" advanced>
+                <b-wrapped-form-checkbox
+                    id="edit_form_backend_use_manual_autodj"
+                    class="col-md-6"
+                    :field="form.backend_config.use_manual_autodj"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Manual AutoDJ Mode') }}
                     </template>
@@ -132,9 +167,12 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-checkbox class="col-md-6"
-                                         id="edit_form_backend_enable_replaygain_metadata"
-                                         :field="form.backend_config.enable_replaygain_metadata" advanced>
+                <b-wrapped-form-checkbox
+                    id="edit_form_backend_enable_replaygain_metadata"
+                    class="col-md-6"
+                    :field="form.backend_config.enable_replaygain_metadata"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Use Replaygain Metadata') }}
                     </template>
@@ -145,9 +183,14 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backend_telnet_port"
-                                      :field="form.backend_config.telnet_port" input-type="number"
-                                      :input-attrs="{ min: '0' }" advanced>
+                <b-wrapped-form-group
+                    id="edit_form_backend_telnet_port"
+                    class="col-md-6"
+                    :field="form.backend_config.telnet_port"
+                    input-type="number"
+                    :input-attrs="{ min: '0' }"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Customize Internal Request Processing Port') }}
                     </template>
@@ -158,9 +201,14 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backend_autodj_queue_length"
-                                      :field="form.backend_config.autodj_queue_length" input-type="number"
-                                      :input-attrs="{ min: '2', max: '25' }" advanced>
+                <b-wrapped-form-group
+                    id="edit_form_backend_autodj_queue_length"
+                    class="col-md-6"
+                    :field="form.backend_config.autodj_queue_length"
+                    input-type="number"
+                    :input-attrs="{ min: '2', max: '25' }"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('AutoDJ Queue Length') }}
                     </template>
@@ -171,8 +219,12 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backend_charset"
-                                      :field="form.backend_config.charset" advanced>
+                <b-wrapped-form-group
+                    id="edit_form_backend_charset"
+                    class="col-md-6"
+                    :field="form.backend_config.charset"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Character Set Encoding') }}
                     </template>
@@ -182,14 +234,21 @@
                         }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" :options="charsetOptions"
-                                            v-model="props.field.$model">
-                        </b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="charsetOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backend_performance_mode"
-                                      :field="form.backend_config.performance_mode" advanced>
+                <b-wrapped-form-group
+                    id="edit_form_backend_performance_mode"
+                    class="col-md-6"
+                    :field="form.backend_config.performance_mode"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Liquidsoap Performance Tuning') }}
                     </template>
@@ -199,15 +258,23 @@
                         }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" :options="performanceModeOptions"
-                                            v-model="props.field.$model">
-                        </b-form-radio-group>
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                            :options="performanceModeOptions"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backend_duplicate_prevention_time_range"
-                                      :field="form.backend_config.duplicate_prevention_time_range"
-                                      input-type="number" :input-attrs="{ min: '0', max: '1440' }" advanced>
+                <b-wrapped-form-group
+                    id="edit_form_backend_duplicate_prevention_time_range"
+                    class="col-md-6"
+                    :field="form.backend_config.duplicate_prevention_time_range"
+                    input-type="number"
+                    :input-attrs="{ min: '0', max: '1440' }"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Duplicate Prevention Time Range (Minutes)') }}
                     </template>
diff --git a/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue b/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue
index e955d1170..f902e11a6 100644
--- a/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/FrontendForm.vue
@@ -1,8 +1,11 @@
 <template>
     <b-form-fieldset>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="edit_form_frontend_type"
-                                  :field="form.frontend_type">
+            <b-wrapped-form-group
+                id="edit_form_frontend_type"
+                class="col-md-12"
+                :field="form.frontend_type"
+            >
                 <template #label>
                     {{ $gettext('Broadcasting Service') }}
                 </template>
@@ -10,9 +13,12 @@
                     {{ $gettext('This software delivers your broadcast to the listening audience.') }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" :options="frontendTypeOptions"
-                                        v-model="props.field.$model">
-                    </b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="frontendTypeOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
@@ -21,15 +27,21 @@
     <b-form-fieldset v-if="isLocalFrontend">
         <b-form-fieldset v-if="isShoutcastFrontend">
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_sc_license_id"
-                                      :field="form.frontend_config.sc_license_id">
+                <b-wrapped-form-group
+                    id="edit_form_frontend_sc_license_id"
+                    class="col-md-6"
+                    :field="form.frontend_config.sc_license_id"
+                >
                     <template #label>
                         {{ $gettext('Shoutcast License ID') }}
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_sc_user_id"
-                                      :field="form.frontend_config.sc_user_id">
+                <b-wrapped-form-group
+                    id="edit_form_frontend_sc_user_id"
+                    class="col-md-6"
+                    :field="form.frontend_config.sc_user_id"
+                >
                     <template #label>
                         {{ $gettext('Shoutcast User ID') }}
                     </template>
@@ -39,8 +51,11 @@
 
         <b-form-fieldset>
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_source_pw"
-                                      :field="form.frontend_config.source_pw">
+                <b-wrapped-form-group
+                    id="edit_form_frontend_source_pw"
+                    class="col-md-6"
+                    :field="form.frontend_config.source_pw"
+                >
                     <template #label>
                         {{ $gettext('Customize Source Password') }}
                     </template>
@@ -49,8 +64,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_admin_pw"
-                                      :field="form.frontend_config.admin_pw">
+                <b-wrapped-form-group
+                    id="edit_form_frontend_admin_pw"
+                    class="col-md-6"
+                    :field="form.frontend_config.admin_pw"
+                >
                     <template #label>
                         {{ $gettext('Customize Administrator Password') }}
                     </template>
@@ -59,9 +77,15 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_frontend_port"
-                                      :field="form.frontend_config.port" input-type="number"
-                                      :input-attrs="{min: '0'}" advanced>
+                <b-wrapped-form-group
+                    v-if="showAdvanced"
+                    id="edit_form_frontend_port"
+                    class="col-md-6"
+                    :field="form.frontend_config.port"
+                    input-type="number"
+                    :input-attrs="{min: '0'}"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Customize Broadcasting Port') }}
                     </template>
@@ -72,8 +96,13 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_max_listeners"
-                                      :field="form.frontend_config.max_listeners" advanced>
+                <b-wrapped-form-group
+                    v-if="showAdvanced"
+                    id="edit_form_max_listeners"
+                    class="col-md-6"
+                    :field="form.frontend_config.max_listeners"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Maximum Listeners') }}
                     </template>
@@ -89,9 +118,13 @@
         <b-form-fieldset v-if="showAdvanced">
             <div class="form-row">
                 <b-col md="5">
-                    <b-wrapped-form-group id="edit_form_frontend_banned_ips"
-                                          :field="form.frontend_config.banned_ips" input-type="textarea"
-                                          :input-attrs="{class: 'text-preformatted'}" advanced>
+                    <b-wrapped-form-group
+                        id="edit_form_frontend_banned_ips"
+                        :field="form.frontend_config.banned_ips"
+                        input-type="textarea"
+                        :input-attrs="{class: 'text-preformatted'}"
+                        advanced
+                    >
                         <template #label>
                             {{ $gettext('Banned IP Addresses') }}
                         </template>
@@ -100,9 +133,13 @@
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group id="edit_form_frontend_allowed_ips"
-                                          :field="form.frontend_config.allowed_ips" input-type="textarea"
-                                          :input-attrs="{class: 'text-preformatted'}" advanced>
+                    <b-wrapped-form-group
+                        id="edit_form_frontend_allowed_ips"
+                        :field="form.frontend_config.allowed_ips"
+                        input-type="textarea"
+                        :input-attrs="{class: 'text-preformatted'}"
+                        advanced
+                    >
                         <template #label>
                             {{ $gettext('Allowed IP Addresses') }}
                         </template>
@@ -111,9 +148,13 @@
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group id="edit_form_frontend_banned_user_agents"
-                                          :field="form.frontend_config.banned_user_agents" input-type="textarea"
-                                          :input-attrs="{class: 'text-preformatted'}" advanced>
+                    <b-wrapped-form-group
+                        id="edit_form_frontend_banned_user_agents"
+                        :field="form.frontend_config.banned_user_agents"
+                        input-type="textarea"
+                        :input-attrs="{class: 'text-preformatted'}"
+                        advanced
+                    >
                         <template #label>
                             {{ $gettext('Banned User Agents') }}
                         </template>
@@ -123,9 +164,12 @@
                     </b-wrapped-form-group>
                 </b-col>
 
-                <b-wrapped-form-group class="col-md-7" id="edit_form_frontend_banned_countries"
-                                      :field="form.frontend_config.banned_countries"
-                                      advanced>
+                <b-wrapped-form-group
+                    id="edit_form_frontend_banned_countries"
+                    class="col-md-7"
+                    :field="form.frontend_config.banned_countries"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Banned Countries') }}
                     </template>
@@ -133,11 +177,19 @@
                         {{ $gettext('Select the countries that are not allowed to connect to the streams.') }}
                     </template>
                     <template #default="props">
-                        <b-form-select :id="props.id" v-model="props.field.$model"
-                                       :options="countryOptions" style="min-height: 300px;"
-                                       multiple></b-form-select>
+                        <b-form-select
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :options="countryOptions"
+                            style="min-height: 300px;"
+                            multiple
+                        />
 
-                        <b-button block variant="outline-primary" @click.prevent="clearCountries">
+                        <b-button
+                            block
+                            variant="outline-primary"
+                            @click.prevent="clearCountries"
+                        >
                             {{ $gettext('Clear List') }}
                         </b-button>
                     </template>
@@ -158,10 +210,14 @@
             </template>
 
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-12" id="edit_form_frontend_custom_config"
-                                      :field="form.frontend_config.custom_config" input-type="textarea"
-                                      :input-attrs="{class: 'text-preformatted', spellcheck: 'false', 'max-rows': 25, rows: 5}"
-                                      advanced>
+                <b-wrapped-form-group
+                    id="edit_form_frontend_custom_config"
+                    class="col-md-12"
+                    :field="form.frontend_config.custom_config"
+                    input-type="textarea"
+                    :input-attrs="{class: 'text-preformatted', spellcheck: 'false', 'max-rows': 25, rows: 5}"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Custom Configuration') }}
                     </template>
diff --git a/frontend/vue/components/Admin/Stations/Form/HlsForm.vue b/frontend/vue/components/Admin/Stations/Form/HlsForm.vue
index 423acf1c9..dda0b1a6f 100644
--- a/frontend/vue/components/Admin/Stations/Form/HlsForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/HlsForm.vue
@@ -12,8 +12,11 @@
 
             <b-form-fieldset>
                 <div class="form-row">
-                    <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_hls"
-                                             :field="form.enable_hls">
+                    <b-wrapped-form-checkbox
+                        id="edit_form_enable_hls"
+                        class="col-md-12"
+                        :field="form.enable_hls"
+                    >
                         <template #label>
                             {{ $gettext('Enable HTTP Live Streaming (HLS)') }}
                         </template>
@@ -23,15 +26,21 @@
 
             <b-form-fieldset v-if="form.enable_hls.$model">
                 <div class="form-row">
-                    <b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_hls_enable_on_public_player"
-                                             :field="form.backend_config.hls_enable_on_public_player">
+                    <b-wrapped-form-checkbox
+                        id="edit_form_backend_hls_enable_on_public_player"
+                        class="col-md-12"
+                        :field="form.backend_config.hls_enable_on_public_player"
+                    >
                         <template #label>
                             {{ $gettext('Show HLS Stream on Public Player') }}
                         </template>
                     </b-wrapped-form-checkbox>
 
-                    <b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_hls_is_default"
-                                             :field="form.backend_config.hls_is_default">
+                    <b-wrapped-form-checkbox
+                        id="edit_form_backend_hls_is_default"
+                        class="col-md-12"
+                        :field="form.backend_config.hls_is_default"
+                    >
                         <template #label>
                             {{ $gettext('Make HLS Stream Default in Public Player') }}
                         </template>
@@ -41,28 +50,40 @@
 
             <b-form-fieldset v-if="showAdvanced && form.enable_hls.$model">
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-4"
-                                          id="edit_form_backend_hls_segment_length"
-                                          :field="form.backend_config.hls_segment_length" input-type="number"
-                                          :input-attrs="{ min: '0', max: '60' }" advanced>
+                    <b-wrapped-form-group
+                        id="edit_form_backend_hls_segment_length"
+                        class="col-md-4"
+                        :field="form.backend_config.hls_segment_length"
+                        input-type="number"
+                        :input-attrs="{ min: '0', max: '60' }"
+                        advanced
+                    >
                         <template #label>
                             {{ $gettext('Segment Length (Seconds)') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-4"
-                                          id="edit_form_backend_hls_segments_in_playlist"
-                                          :field="form.backend_config.hls_segments_in_playlist" input-type="number"
-                                          :input-attrs="{ min: '0', max: '60' }" advanced>
+                    <b-wrapped-form-group
+                        id="edit_form_backend_hls_segments_in_playlist"
+                        class="col-md-4"
+                        :field="form.backend_config.hls_segments_in_playlist"
+                        input-type="number"
+                        :input-attrs="{ min: '0', max: '60' }"
+                        advanced
+                    >
                         <template #label>
                             {{ $gettext('Segments in Playlist') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-4"
-                                          id="edit_form_backend_hls_segments_overhead"
-                                          :field="form.backend_config.hls_segments_overhead" input-type="number"
-                                          :input-attrs="{ min: '0', max: '60' }" advanced>
+                    <b-wrapped-form-group
+                        id="edit_form_backend_hls_segments_overhead"
+                        class="col-md-4"
+                        :field="form.backend_config.hls_segments_overhead"
+                        input-type="number"
+                        :input-attrs="{ min: '0', max: '60' }"
+                        advanced
+                    >
                         <template #label>
                             {{ $gettext('Segments Overhead') }}
                         </template>
@@ -71,7 +92,7 @@
             </b-form-fieldset>
         </b-form-fieldset>
     </b-form-fieldset>
-    <backend-disabled v-else></backend-disabled>
+    <backend-disabled v-else />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue b/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue
index 7649869b6..ee1e44555 100644
--- a/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/ProfileForm.vue
@@ -1,26 +1,43 @@
 <template>
     <b-form-fieldset>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
+            <b-wrapped-form-group
+                id="edit_form_name"
+                class="col-md-12"
+                :field="form.name"
+            >
                 <template #label>
                     {{ $gettext('Name') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="edit_form_description" :field="form.description"
-                                  input-type="textarea">
+            <b-wrapped-form-group
+                id="edit_form_description"
+                class="col-md-12"
+                :field="form.description"
+                input-type="textarea"
+            >
                 <template #label>
                     {{ $gettext('Description') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_genre" :field="form.genre">
+            <b-wrapped-form-group
+                id="edit_form_genre"
+                class="col-md-6"
+                :field="form.genre"
+            >
                 <template #label>
                     {{ $gettext('Genre') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_url" :field="form.url" input-type="url">
+            <b-wrapped-form-group
+                id="edit_form_url"
+                class="col-md-6"
+                :field="form.url"
+                input-type="url"
+            >
                 <template #label>
                     {{ $gettext('Web Site URL') }}
                 </template>
@@ -31,7 +48,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="edit_form_timezone" :field="form.timezone">
+            <b-wrapped-form-group
+                id="edit_form_timezone"
+                class="col-md-12"
+                :field="form.timezone"
+            >
                 <template #label>
                     {{ $gettext('Time Zone') }}
                 </template>
@@ -41,13 +62,19 @@
                     }}
                 </template>
                 <template #default="props">
-                    <b-form-select :id="props.id" v-model="props.field.$model"
-                                   :options="timezoneOptions"></b-form-select>
+                    <b-form-select
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        :options="timezoneOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_default_album_art_url"
-                                  :field="form.default_album_art_url">
+            <b-wrapped-form-group
+                id="edit_form_default_album_art_url"
+                class="col-md-6"
+                :field="form.default_album_art_url"
+            >
                 <template #label>
                     {{ $gettext('Default Album Art URL') }}
                 </template>
@@ -58,8 +85,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_short_name"
-                                  :field="form.short_name" advanced>
+            <b-wrapped-form-group
+                v-if="showAdvanced"
+                id="edit_form_short_name"
+                class="col-md-6"
+                :field="form.short_name"
+                advanced
+            >
                 <template #label>
                     {{ $gettext('URL Stub') }}
                 </template>
@@ -70,8 +102,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_api_history_items"
-                                  :field="form.api_history_items" advanced>
+            <b-wrapped-form-group
+                v-if="showAdvanced"
+                id="edit_form_api_history_items"
+                class="col-md-6"
+                :field="form.api_history_items"
+                advanced
+            >
                 <template #label>
                     {{ $gettext('Number of Visible Recent Songs') }}
                 </template>
@@ -81,8 +118,11 @@
                     }}
                 </template>
                 <template #default="props">
-                    <b-form-select :id="props.id" v-model="props.field.$model"
-                                   :options="historyItemsOptions"></b-form-select>
+                    <b-form-select
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        :options="historyItemsOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
@@ -94,8 +134,11 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_public_page"
-                                     :field="form.enable_public_page">
+            <b-wrapped-form-checkbox
+                id="edit_form_enable_public_page"
+                class="col-md-12"
+                :field="form.enable_public_page"
+            >
                 <template #label>
                     {{ $gettext('Enable Public Pages') }}
                 </template>
@@ -112,8 +155,11 @@
         </template>
 
         <div class="form-row">
-            <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_on_demand"
-                                     :field="form.enable_on_demand">
+            <b-wrapped-form-checkbox
+                id="edit_form_enable_on_demand"
+                class="col-md-12"
+                :field="form.enable_on_demand"
+            >
                 <template #label>
                     {{ $gettext('Enable On-Demand Streaming') }}
                 </template>
@@ -124,9 +170,12 @@
                 </template>
             </b-wrapped-form-checkbox>
 
-            <b-wrapped-form-checkbox v-if="form.enable_on_demand.$model" class="col-md-12"
-                                     id="edit_form_enable_on_demand_download"
-                                     :field="form.enable_on_demand_download">
+            <b-wrapped-form-checkbox
+                v-if="form.enable_on_demand.$model"
+                id="edit_form_enable_on_demand_download"
+                class="col-md-12"
+                :field="form.enable_on_demand_download"
+            >
                 <template #label>
                     {{ $gettext('Enable Downloads on On-Demand Page') }}
                 </template>
diff --git a/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue b/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue
index ea5b5d04c..b5d5ec6fa 100644
--- a/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/RequestsForm.vue
@@ -12,8 +12,11 @@
 
             <b-form-fieldset>
                 <div class="form-row">
-                    <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_requests"
-                                             :field="form.enable_requests">
+                    <b-wrapped-form-checkbox
+                        id="edit_form_enable_requests"
+                        class="col-md-12"
+                        :field="form.enable_requests"
+                    >
                         <template #label>
                             {{ $gettext('Allow Song Requests') }}
                         </template>
@@ -28,9 +31,13 @@
 
             <b-form-fieldset v-if="form.enable_requests.$model">
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-6" id="edit_form_request_delay"
-                                          :field="form.request_delay" input-type="number"
-                                          :input-attrs="{ min: '0', max: '1440' }">
+                    <b-wrapped-form-group
+                        id="edit_form_request_delay"
+                        class="col-md-6"
+                        :field="form.request_delay"
+                        input-type="number"
+                        :input-attrs="{ min: '0', max: '1440' }"
+                    >
                         <template #label>
                             {{ $gettext('Request Minimum Delay (Minutes)') }}
                         </template>
@@ -41,9 +48,13 @@
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-6" id="edit_form_request_threshold"
-                                          :field="form.request_threshold" input-type="number"
-                                          :input-attrs="{ min: '0', max: '1440' }">
+                    <b-wrapped-form-group
+                        id="edit_form_request_threshold"
+                        class="col-md-6"
+                        :field="form.request_threshold"
+                        input-type="number"
+                        :input-attrs="{ min: '0', max: '1440' }"
+                    >
                         <template #label>
                             {{ $gettext('Request Last Played Threshold (Minutes)') }}
                         </template>
@@ -57,7 +68,7 @@
             </b-form-fieldset>
         </b-form-fieldset>
     </b-form-fieldset>
-    <backend-disabled v-else></backend-disabled>
+    <backend-disabled v-else />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue b/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue
index 2fb2c987a..b6c11016a 100644
--- a/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue
+++ b/frontend/vue/components/Admin/Stations/Form/StreamersForm.vue
@@ -7,8 +7,11 @@
 
             <b-form-fieldset>
                 <div class="form-row">
-                    <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_streamers"
-                                             :field="form.enable_streamers">
+                    <b-wrapped-form-checkbox
+                        id="edit_form_enable_streamers"
+                        class="col-md-12"
+                        :field="form.enable_streamers"
+                    >
                         <template #label>
                             {{ $gettext('Allow Streamers / DJs') }}
                         </template>
@@ -24,8 +27,11 @@
             <b-form-fieldset v-if="form.enable_streamers.$model">
                 <b-form-fieldset>
                     <div class="form-row">
-                        <b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_record_streams"
-                                                 :field="form.backend_config.record_streams">
+                        <b-wrapped-form-checkbox
+                            id="edit_form_backend_record_streams"
+                            class="col-md-12"
+                            :field="form.backend_config.record_streams"
+                        >
                             <template #label>
                                 {{ $gettext('Record Live Broadcasts') }}
                             </template>
@@ -40,29 +46,41 @@
 
                 <b-form-fieldset v-if="form.backend_config.record_streams.$model">
                     <div class="form-row">
-                        <b-wrapped-form-group class="col-md-6" id="edit_form_backend_record_streams_format"
-                                              :field="form.backend_config.record_streams_format">
+                        <b-wrapped-form-group
+                            id="edit_form_backend_record_streams_format"
+                            class="col-md-6"
+                            :field="form.backend_config.record_streams_format"
+                        >
                             <template #label>
                                 {{ $gettext('Live Broadcast Recording Format') }}
                             </template>
 
                             <template #default="props">
-                                <b-form-radio-group stacked :id="props.id" :options="recordStreamsOptions"
-                                                    v-model="props.field.$model">
-                                </b-form-radio-group>
+                                <b-form-radio-group
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                    stacked
+                                    :options="recordStreamsOptions"
+                                />
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-6" id="edit_form_backend_record_streams_bitrate"
-                                              :field="form.backend_config.record_streams_bitrate">
+                        <b-wrapped-form-group
+                            id="edit_form_backend_record_streams_bitrate"
+                            class="col-md-6"
+                            :field="form.backend_config.record_streams_bitrate"
+                        >
                             <template #label>
                                 {{ $gettext('Live Broadcast Recording Bitrate (kbps)') }}
                             </template>
 
                             <template #default="props">
-                                <b-form-radio-group stacked :id="props.id" :options="recordBitrateOptions"
-                                                    v-model="props.field.$model">
-                                </b-form-radio-group>
+                                <b-form-radio-group
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                    stacked
+                                    :options="recordBitrateOptions"
+                                />
                             </template>
                         </b-wrapped-form-group>
                     </div>
@@ -70,9 +88,13 @@
 
                 <b-form-fieldset>
                     <div class="form-row">
-                        <b-wrapped-form-group class="col-md-6" id="edit_form_disconnect_deactivate_streamer"
-                                              :field="form.disconnect_deactivate_streamer" input-type="number"
-                                              :input-attrs="{ min: '0' }">
+                        <b-wrapped-form-group
+                            id="edit_form_disconnect_deactivate_streamer"
+                            class="col-md-6"
+                            :field="form.disconnect_deactivate_streamer"
+                            input-type="number"
+                            :input-attrs="{ min: '0' }"
+                        >
                             <template #label>
                                 {{ $gettext('Deactivate Streamer on Disconnect (Seconds)') }}
                             </template>
@@ -83,10 +105,15 @@
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group v-if="showAdvanced" class="col-md-6"
-                                              id="edit_form_backend_dj_port"
-                                              :field="form.backend_config.dj_port" input-type="number"
-                                              :input-attrs="{ min: '0' }" advanced>
+                        <b-wrapped-form-group
+                            v-if="showAdvanced"
+                            id="edit_form_backend_dj_port"
+                            class="col-md-6"
+                            :field="form.backend_config.dj_port"
+                            input-type="number"
+                            :input-attrs="{ min: '0' }"
+                            advanced
+                        >
                             <template #label>
                                 {{ $gettext('Customize DJ/Streamer Port') }}
                             </template>
@@ -101,9 +128,13 @@
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-6" id="edit_form_backend_dj_buffer"
-                                              :field="form.backend_config.dj_buffer" input-type="number"
-                                              :input-attrs="{ min: '0', max: '60' }">
+                        <b-wrapped-form-group
+                            id="edit_form_backend_dj_buffer"
+                            class="col-md-6"
+                            :field="form.backend_config.dj_buffer"
+                            input-type="number"
+                            :input-attrs="{ min: '0', max: '60' }"
+                        >
                             <template #label>
                                 {{ $gettext('DJ/Streamer Buffer Time (Seconds)') }}
                             </template>
@@ -114,9 +145,13 @@
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group v-if="showAdvanced" class="col-md-6"
-                                              id="edit_form_backend_dj_mount_point"
-                                              :field="form.backend_config.dj_mount_point" advanced>
+                        <b-wrapped-form-group
+                            v-if="showAdvanced"
+                            id="edit_form_backend_dj_mount_point"
+                            class="col-md-6"
+                            :field="form.backend_config.dj_mount_point"
+                            advanced
+                        >
                             <template #label>
                                 {{ $gettext('Customize DJ/Streamer Mount Point') }}
                             </template>
@@ -131,7 +166,7 @@
             </b-form-fieldset>
         </b-form-fieldset>
     </b-form-fieldset>
-    <backend-disabled v-else></backend-disabled>
+    <backend-disabled v-else />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Admin/Stations/StationForm.vue b/frontend/vue/components/Admin/Stations/StationForm.vue
index 233cd74c6..fde3dea04 100644
--- a/frontend/vue/components/Admin/Stations/StationForm.vue
+++ b/frontend/vue/components/Admin/Stations/StationForm.vue
@@ -1,16 +1,37 @@
 <template>
-    <b-overlay variant="card" :show="loading">
-        <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+    <b-overlay
+        variant="card"
+        :show="loading"
+    >
+        <b-alert
+            variant="danger"
+            :show="error != null"
+        >
+            {{ error }}
+        </b-alert>
 
-        <b-form class="form vue-form" @submit.prevent="submit">
-            <b-tabs :card="!isModal" pills :content-class="tabContentClass">
-                <b-tab :title-link-class="getTabClass(v$.$validationGroups.profileTab)" active>
+        <b-form
+            class="form vue-form"
+            @submit.prevent="submit"
+        >
+            <b-tabs
+                :card="!isModal"
+                pills
+                :content-class="tabContentClass"
+            >
+                <b-tab
+                    :title-link-class="getTabClass(v$.$validationGroups.profileTab)"
+                    active
+                >
                     <template #title>
                         {{ $gettext('Profile') }}
                     </template>
 
-                    <admin-stations-profile-form :form="v$" :timezones="timezones"
-                                                 :show-advanced="showAdvanced"></admin-stations-profile-form>
+                    <admin-stations-profile-form
+                        :form="v$"
+                        :timezones="timezones"
+                        :show-advanced="showAdvanced"
+                    />
                 </b-tab>
 
                 <b-tab :title-link-class="getTabClass(v$.$validationGroups.frontendTab)">
@@ -18,10 +39,12 @@
                         {{ $gettext('Broadcasting') }}
                     </template>
 
-                    <admin-stations-frontend-form :form="v$"
-                                                  :is-shoutcast-installed="isShoutcastInstalled"
-                                                  :countries="countries"
-                                                  :show-advanced="showAdvanced"></admin-stations-frontend-form>
+                    <admin-stations-frontend-form
+                        :form="v$"
+                        :is-shoutcast-installed="isShoutcastInstalled"
+                        :countries="countries"
+                        :show-advanced="showAdvanced"
+                    />
                 </b-tab>
 
                 <b-tab :title-link-class="getTabClass(v$.$validationGroups.backendTab)">
@@ -29,9 +52,12 @@
                         {{ $gettext('AutoDJ') }}
                     </template>
 
-                    <admin-stations-backend-form :form="v$" :station="station"
-                                                 :is-stereo-tool-installed="isStereoToolInstalled"
-                                                 :show-advanced="showAdvanced"></admin-stations-backend-form>
+                    <admin-stations-backend-form
+                        :form="v$"
+                        :station="station"
+                        :is-stereo-tool-installed="isStereoToolInstalled"
+                        :show-advanced="showAdvanced"
+                    />
                 </b-tab>
 
                 <b-tab :title-link-class="getTabClass(v$.$validationGroups.hlsTab)">
@@ -39,8 +65,11 @@
                         {{ $gettext('HLS') }}
                     </template>
 
-                    <admin-stations-hls-form :form="v$" :station="station" :show-advanced="showAdvanced">
-                    </admin-stations-hls-form>
+                    <admin-stations-hls-form
+                        :form="v$"
+                        :station="station"
+                        :show-advanced="showAdvanced"
+                    />
                 </b-tab>
 
                 <b-tab :title-link-class="getTabClass(v$.$validationGroups.requestsTab)">
@@ -48,8 +77,11 @@
                         {{ $gettext('Song Requests') }}
                     </template>
 
-                    <admin-stations-requests-form :form="v$" :station="station" :show-advanced="showAdvanced">
-                    </admin-stations-requests-form>
+                    <admin-stations-requests-form
+                        :form="v$"
+                        :station="station"
+                        :show-advanced="showAdvanced"
+                    />
                 </b-tab>
 
                 <b-tab :title-link-class="getTabClass(v$.$validationGroups.streamersTab)">
@@ -57,26 +89,37 @@
                         {{ $gettext('Streamers/DJs') }}
                     </template>
 
-                    <admin-stations-streamers-form :form="v$" :station="station" :show-advanced="showAdvanced">
-                    </admin-stations-streamers-form>
+                    <admin-stations-streamers-form
+                        :form="v$"
+                        :station="station"
+                        :show-advanced="showAdvanced"
+                    />
                 </b-tab>
 
-                <b-tab v-if="showAdminTab" :title-link-class="getTabClass(v$.$validationGroups.adminTab)">
+                <b-tab
+                    v-if="showAdminTab"
+                    :title-link-class="getTabClass(v$.$validationGroups.adminTab)"
+                >
                     <template #title>
                         {{ $gettext('Administration') }}
                     </template>
 
-                    <admin-stations-admin-form :form="v$"
-                                               :is-edit-mode="isEditMode"
-                                               :storage-location-api-url="storageLocationApiUrl"
-                                               :show-advanced="showAdvanced">
-                    </admin-stations-admin-form>
+                    <admin-stations-admin-form
+                        :form="v$"
+                        :is-edit-mode="isEditMode"
+                        :storage-location-api-url="storageLocationApiUrl"
+                        :show-advanced="showAdvanced"
+                    />
                 </b-tab>
             </b-tabs>
 
             <slot name="submitButton">
                 <b-card-body body-class="card-padding-sm">
-                    <b-button size="lg" type="submit" :variant="(!isValid) ? 'danger' : 'primary'">
+                    <b-button
+                        size="lg"
+                        type="submit"
+                        :variant="(!isValid) ? 'danger' : 'primary'"
+                    >
                         <slot name="submitButtonText">
                             {{ $gettext('Save Changes') }}
                         </slot>
diff --git a/frontend/vue/components/Admin/StereoTool.vue b/frontend/vue/components/Admin/StereoTool.vue
index 5f2fec2f0..282da8f47 100644
--- a/frontend/vue/components/Admin/StereoTool.vue
+++ b/frontend/vue/components/Admin/StereoTool.vue
@@ -7,7 +7,10 @@
         </div>
 
         <div class="card-body">
-            <b-overlay variant="card" :show="loading">
+            <b-overlay
+                variant="card"
+                :show="loading"
+            >
                 <div class="form-row">
                     <div class="col-md-7">
                         <fieldset>
@@ -37,8 +40,10 @@
                                         $gettext('Download the appropriate binary from the Stereo Tool downloads page:')
                                     }}
                                     <br>
-                                    <a href="https://www.thimeo.com/stereo-tool/download/"
-                                       target="_blank">
+                                    <a
+                                        href="https://www.thimeo.com/stereo-tool/download/"
+                                        target="_blank"
+                                    >
                                         {{ $gettext('Stereo Tool Downloads') }}
                                     </a>
                                 </li>
@@ -61,15 +66,25 @@
                                 {{ $gettext('Current Installed Version') }}
                             </legend>
 
-                            <p v-if="version" class="text-success card-text">
+                            <p
+                                v-if="version"
+                                class="text-success card-text"
+                            >
                                 {{ langInstalledVersion }}
                             </p>
-                            <p v-else class="text-danger card-text">
+                            <p
+                                v-else
+                                class="text-danger card-text"
+                            >
                                 {{ $gettext('Stereo Tool is not currently installed on this installation.') }}
                             </p>
                         </fieldset>
 
-                        <flow-upload :target-url="apiUrl" @complete="relist" @error="onError"></flow-upload>
+                        <flow-upload
+                            :target-url="apiUrl"
+                            @complete="relist"
+                            @error="onError"
+                        />
                     </div>
                 </div>
             </b-overlay>
diff --git a/frontend/vue/components/Admin/StorageLocations.vue b/frontend/vue/components/Admin/StorageLocations.vue
index b988f0a6d..15f72bd2c 100644
--- a/frontend/vue/components/Admin/StorageLocations.vue
+++ b/frontend/vue/components/Admin/StorageLocations.vue
@@ -1,42 +1,78 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('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)"
-                   :title="tab.title" no-body></b-tab>
+        <b-tabs
+            pills
+            card
+            lazy
+        >
+            <b-tab
+                v-for="tab in tabs"
+                :key="tab.type"
+                :active="activeType === tab.type"
+                :title="tab.title"
+                no-body
+                @click="setType(tab.type)"
+            />
         </b-tabs>
 
         <b-card-body body-class="card-padding-sm">
-            <b-button variant="outline-primary" @click.prevent="doCreate">
-                <icon icon="add"></icon>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Storage Location') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="admin_storage_locations" :show-toolbar="false" :fields="fields"
-                    :responsive="false"
-                    :api-url="listUrlForType">
+        <data-table
+            id="admin_storage_locations"
+            ref="datatable"
+            :show-toolbar="false"
+            :fields="fields"
+            :responsive="false"
+            :api-url="listUrlForType"
+        >
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
             </template>
             <template #cell(adapter)="row">
-                <h5 class="m-0">{{ getAdapterName(row.item.adapter) }}</h5>
-                <p class="card-text">{{ row.item.uri }}</p>
+                <h5 class="m-0">
+                    {{ getAdapterName(row.item.adapter) }}
+                </h5>
+                <p class="card-text">
+                    {{ row.item.uri }}
+                </p>
             </template>
             <template #cell(space)="row">
                 <template v-if="row.item.storageAvailable">
-                    <b-progress :value="row.item.storageUsedPercent" show-progress height="15px" class="mb-1"
-                                :variant="getProgressVariant(row.item.storageUsedPercent)">
-                    </b-progress>
+                    <b-progress
+                        :value="row.item.storageUsedPercent"
+                        show-progress
+                        height="15px"
+                        class="mb-1"
+                        :variant="getProgressVariant(row.item.storageUsedPercent)"
+                    />
 
                     {{ getSpaceUsed(row.item) }}
                 </template>
@@ -50,7 +86,12 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editModal" :create-url="listUrl" :type="activeType" @relist="relist"></edit-modal>
+    <edit-modal
+        ref="editModal"
+        :create-url="listUrl"
+        :type="activeType"
+        @relist="relist"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Admin/StorageLocations/EditModal.vue b/frontend/vue/components/Admin/StorageLocations/EditModal.vue
index 3a513fd11..f0ae653ae 100644
--- a/frontend/vue/components/Admin/StorageLocations/EditModal.vue
+++ b/frontend/vue/components/Admin/StorageLocations/EditModal.vue
@@ -1,9 +1,14 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <storage-location-form :form="v$.form"></storage-location-form>
-
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <storage-location-form :form="v$.form" />
     </modal-form>
 </template>
 
diff --git a/frontend/vue/components/Admin/StorageLocations/Form.vue b/frontend/vue/components/Admin/StorageLocations/Form.vue
index c2c77fc2a..bdbec6f4d 100644
--- a/frontend/vue/components/Admin/StorageLocations/Form.vue
+++ b/frontend/vue/components/Admin/StorageLocations/Form.vue
@@ -1,12 +1,20 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_edit_adapter" :field="form.adapter">
+            <b-wrapped-form-group
+                id="form_edit_adapter"
+                class="col-md-12"
+                :field="form.adapter"
+            >
                 <template #label>
                     {{ $gettext('Storage Adapter') }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                    >
                         <b-form-radio value="local">
                             {{ $gettext('Local Filesystem') }}
                         </b-form-radio>
@@ -23,7 +31,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="form_edit_path" :field="form.path">
+            <b-wrapped-form-group
+                id="form_edit_path"
+                class="col-md-12"
+                :field="form.path"
+            >
                 <template #label>
                     {{ $gettext('Path/Suffix') }}
                 </template>
@@ -34,7 +46,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="form_edit_storageQuota" :field="form.storageQuota">
+            <b-wrapped-form-group
+                id="form_edit_storageQuota"
+                class="col-md-12"
+                :field="form.storageQuota"
+            >
                 <template #label>
                     {{ $gettext('Storage Quota') }}
                 </template>
@@ -47,7 +63,11 @@
         </div>
     </b-form-group>
 
-    <b-card v-show="form.adapter.$model === 's3'" class="mb-3" no-body>
+    <b-card
+        v-show="form.adapter.$model === 's3'"
+        class="mb-3"
+        no-body
+    >
         <div class="card-header bg-primary-dark">
             <h2 class="card-title">
                 {{ $gettext('Remote: S3 Compatible') }}
@@ -56,39 +76,61 @@
         <b-card-body>
             <b-form-group>
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-6" id="form_edit_s3CredentialKey"
-                                          :field="form.s3CredentialKey">
+                    <b-wrapped-form-group
+                        id="form_edit_s3CredentialKey"
+                        class="col-md-6"
+                        :field="form.s3CredentialKey"
+                    >
                         <template #label>
                             {{ $gettext('Access Key ID') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-6" id="form_edit_s3CredentialSecret"
-                                          :field="form.s3CredentialSecret">
+                    <b-wrapped-form-group
+                        id="form_edit_s3CredentialSecret"
+                        class="col-md-6"
+                        :field="form.s3CredentialSecret"
+                    >
                         <template #label>
                             {{ $gettext('Secret Key') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-6" id="form_edit_s3Endpoint" :field="form.s3Endpoint">
+                    <b-wrapped-form-group
+                        id="form_edit_s3Endpoint"
+                        class="col-md-6"
+                        :field="form.s3Endpoint"
+                    >
                         <template #label>
                             {{ $gettext('Endpoint') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-6" id="form_edit_s3Bucket" :field="form.s3Bucket">
+                    <b-wrapped-form-group
+                        id="form_edit_s3Bucket"
+                        class="col-md-6"
+                        :field="form.s3Bucket"
+                    >
                         <template #label>
                             {{ $gettext('Bucket Name') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-6" id="form_edit_s3Region" :field="form.s3Region">
+                    <b-wrapped-form-group
+                        id="form_edit_s3Region"
+                        class="col-md-6"
+                        :field="form.s3Region"
+                    >
                         <template #label>
                             {{ $gettext('Region') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-6" id="form_edit_s3Version" :field="form.s3Version">
+                    <b-wrapped-form-group
+                        id="form_edit_s3Version"
+                        class="col-md-6"
+                        :field="form.s3Version"
+                    >
                         <template #label>
                             {{ $gettext('API Version') }}
                         </template>
@@ -98,7 +140,11 @@
         </b-card-body>
     </b-card>
 
-    <b-card v-show="form.adapter.$model === 'dropbox'" class="mb-3" no-body>
+    <b-card
+        v-show="form.adapter.$model === 'dropbox'"
+        class="mb-3"
+        no-body
+    >
         <div class="card-header bg-primary-dark">
             <h2 class="card-title">
                 {{ $gettext('Remote: Dropbox') }}
@@ -107,8 +153,11 @@
         <b-card-body>
             <b-form-group>
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-12" id="form_edit_dropboxAuthToken"
-                                          :field="form.dropboxAuthToken">
+                    <b-wrapped-form-group
+                        id="form_edit_dropboxAuthToken"
+                        class="col-md-12"
+                        :field="form.dropboxAuthToken"
+                    >
                         <template #label>
                             {{ $gettext('Dropbox Generated Access Token') }}
                         </template>
@@ -123,7 +172,11 @@
         </b-card-body>
     </b-card>
 
-    <b-card v-show="form.adapter.$model === 'sftp'" class="mb-3" no-body>
+    <b-card
+        v-show="form.adapter.$model === 'sftp'"
+        class="mb-3"
+        no-body
+    >
         <div class="card-header bg-primary-dark">
             <h2 class="card-title">
                 {{ $gettext('Remote: SFTP') }}
@@ -132,44 +185,65 @@
         <b-card-body>
             <b-form-group>
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpHost"
-                                          :field="form.sftpHost">
+                    <b-wrapped-form-group
+                        id="form_edit_sftpHost"
+                        class="col-md-12 col-lg-6"
+                        :field="form.sftpHost"
+                    >
                         <template #label>
                             {{ $gettext('SFTP Host') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpPort" input-type="number" min="1"
-                                          step="1"
-                                          :field="form.sftpPort">
+                    <b-wrapped-form-group
+                        id="form_edit_sftpPort"
+                        class="col-md-12 col-lg-6"
+                        input-type="number"
+                        min="1"
+                        step="1"
+                        :field="form.sftpPort"
+                    >
                         <template #label>
                             {{ $gettext('SFTP Port') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpUsername"
-                                          :field="form.sftpUsername">
+                    <b-wrapped-form-group
+                        id="form_edit_sftpUsername"
+                        class="col-md-12 col-lg-6"
+                        :field="form.sftpUsername"
+                    >
                         <template #label>
                             {{ $gettext('SFTP Username') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpPassword"
-                                          :field="form.sftpPassword">
+                    <b-wrapped-form-group
+                        id="form_edit_sftpPassword"
+                        class="col-md-12 col-lg-6"
+                        :field="form.sftpPassword"
+                    >
                         <template #label>
                             {{ $gettext('SFTP Password') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-12" id="form_edit_sftpPrivateKeyPassPhrase"
-                                          :field="form.sftpPrivateKeyPassPhrase">
+                    <b-wrapped-form-group
+                        id="form_edit_sftpPrivateKeyPassPhrase"
+                        class="col-md-12"
+                        :field="form.sftpPrivateKeyPassPhrase"
+                    >
                         <template #label>
                             {{ $gettext('SFTP Private Key Pass Phrase') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-12" id="form_edit_sftpPrivateKey" input-type="textarea"
-                                          :field="form.sftpPrivateKey">
+                    <b-wrapped-form-group
+                        id="form_edit_sftpPrivateKey"
+                        class="col-md-12"
+                        input-type="textarea"
+                        :field="form.sftpPrivateKey"
+                    >
                         <template #label>
                             {{ $gettext('SFTP Private Key') }}
                         </template>
diff --git a/frontend/vue/components/Admin/Users.vue b/frontend/vue/components/Admin/Users.vue
index 20f5123df..d868bc80a 100644
--- a/frontend/vue/components/Admin/Users.vue
+++ b/frontend/vue/components/Admin/Users.vue
@@ -1,38 +1,76 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('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>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add User') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="users" paginated :fields="fields" :api-url="listUrl">
+        <data-table
+            id="users"
+            ref="datatable"
+            paginated
+            :fields="fields"
+            :api-url="listUrl"
+        >
             <template #cell(name)="row">
-                <h5 class="mb-0" v-if="row.item.name !== ''">{{ row.item.name }}</h5>
+                <h5
+                    v-if="row.item.name !== ''"
+                    class="mb-0"
+                >
+                    {{ 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">
+                <span
+                    v-if="row.item.is_me"
+                    class="badge badge-primary"
+                >
                     {{ $gettext('You') }}
                 </span>
             </template>
             <template #cell(roles)="row">
-                <div v-for="role in row.item.roles" :key="role.id">
+                <div
+                    v-for="role in row.item.roles"
+                    :key="role.id"
+                >
                     {{ role.name }}
                 </div>
             </template>
             <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">
+                <b-button-group
+                    v-if="!row.item.is_me"
+                    size="sm"
+                >
+                    <b-button
+                        size="sm"
+                        variant="secondary"
+                        :href="row.item.links.masquerade"
+                        target="_blank"
+                    >
                         {{ $gettext('Log In') }}
                     </b-button>
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -40,7 +78,12 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editModal" :create-url="listUrl" :roles="roles" @relist="relist"></edit-modal>
+    <edit-modal
+        ref="editModal"
+        :create-url="listUrl"
+        :roles="roles"
+        @relist="relist"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Admin/Users/EditModal.vue b/frontend/vue/components/Admin/Users/EditModal.vue
index e2aee0004..78389448e 100644
--- a/frontend/vue/components/Admin/Users/EditModal.vue
+++ b/frontend/vue/components/Admin/Users/EditModal.vue
@@ -1,10 +1,18 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error"
-                :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <admin-users-form :form="v$.form" :roles="roles" :is-edit-mode="isEditMode"></admin-users-form>
-
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <admin-users-form
+            :form="v$.form"
+            :roles="roles"
+            :is-edit-mode="isEditMode"
+        />
     </modal-form>
 </template>
 
@@ -19,13 +27,13 @@ import validatePassword from "~/functions/validatePassword";
 export default {
     name: 'AdminUsersEditModal',
     components: {AdminUsersForm},
-    setup() {
-        return {v$: useVuelidate()}
-    },
     mixins: [BaseEditModal],
     props: {
         roles: Object
     },
+    setup() {
+        return {v$: useVuelidate()}
+    },
     computed: {
         langTitle() {
             return this.isEditMode
diff --git a/frontend/vue/components/Admin/Users/Form.vue b/frontend/vue/components/Admin/Users/Form.vue
index 21bde3311..d8ef0ae5b 100644
--- a/frontend/vue/components/Admin/Users/Form.vue
+++ b/frontend/vue/components/Admin/Users/Form.vue
@@ -1,37 +1,59 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_email" :field="form.email" input-type="email">
+            <b-wrapped-form-group
+                id="edit_form_email"
+                class="col-md-6"
+                :field="form.email"
+                input-type="email"
+            >
                 <template #label>
                     {{ $gettext('E-mail Address') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_new_password" :field="form.new_password"
-                                  input-type="password">
+            <b-wrapped-form-group
+                id="edit_form_new_password"
+                class="col-md-6"
+                :field="form.new_password"
+                input-type="password"
+            >
                 <template #label>
                     {{ $gettext('Reset Password') }}
                     {{ $gettext('Password') }}
                 </template>
-                <template v-if="isEditMode" #description="{lang}">
+                <template
+                    v-if="isEditMode"
+                    #description="{lang}"
+                >
                     {{ $gettext('Leave blank to use the current password.') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
+            <b-wrapped-form-group
+                id="edit_form_name"
+                class="col-md-12"
+                :field="form.name"
+            >
                 <template #label>
                     {{ $gettext('Display Name') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="edit_form_roles"
-                                  :field="form.roles">
+            <b-wrapped-form-group
+                id="edit_form_roles"
+                class="col-md-12"
+                :field="form.roles"
+            >
                 <template #label>
                     {{ $gettext('Roles') }}
                 </template>
                 <template #default="props">
-                    <b-form-checkbox-group :id="props.id" :options="roleOptions" v-model="props.field.$model">
-                    </b-form-checkbox-group>
+                    <b-form-checkbox-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        :options="roleOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
diff --git a/frontend/vue/components/Common/AlbumArt.vue b/frontend/vue/components/Common/AlbumArt.vue
index c2026f187..d578bb6ee 100644
--- a/frontend/vue/components/Common/AlbumArt.vue
+++ b/frontend/vue/components/Common/AlbumArt.vue
@@ -1,17 +1,20 @@
 <template>
-    <a v-if="src" :href="src" class="album-art" target="_blank" data-fancybox="gallery">
-        <img class="album_art" :src="src" loading="lazy" alt="">
+    <a
+        v-if="src"
+        :href="src"
+        class="album-art"
+        target="_blank"
+        data-fancybox="gallery"
+    >
+        <img
+            class="album_art"
+            :src="src"
+            loading="lazy"
+            alt=""
+        >
     </a>
 </template>
 
-<style scoped>
-img.album_art {
-    width: v-bind(widthPx);
-    height: auto;
-    border-radius: 5px;
-}
-</style>
-
 <script setup>
 import {computed} from "vue";
 
@@ -27,3 +30,11 @@ const widthPx = computed(() => {
     return props.width + 'px';
 });
 </script>
+
+<style scoped>
+img.album_art {
+    width: v-bind(widthPx);
+    height: auto;
+    border-radius: 5px;
+}
+</style>
diff --git a/frontend/vue/components/Common/AudioPlayer.vue b/frontend/vue/components/Common/AudioPlayer.vue
index 918a2ff5a..3521b97a2 100644
--- a/frontend/vue/components/Common/AudioPlayer.vue
+++ b/frontend/vue/components/Common/AudioPlayer.vue
@@ -1,5 +1,9 @@
 <template>
-    <audio ref="audio" v-if="isPlaying" v-bind:title="title"/>
+    <audio
+        v-if="isPlaying"
+        ref="audio"
+        :title="title"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Common/Avatar.vue b/frontend/vue/components/Common/Avatar.vue
index 5450a5238..bf82e00ba 100644
--- a/frontend/vue/components/Common/Avatar.vue
+++ b/frontend/vue/components/Common/Avatar.vue
@@ -1,7 +1,17 @@
 <template>
-    <a :href="serviceUrl" class="avatar" target="_blank" v-b-tooltip.hover.right :title="langAvatar"
-       v-if="'' !== serviceUrl">
-        <img :src="url" :style="{ width: this.width+'px', height: 'auto' }" alt="">
+    <a
+        v-if="'' !== serviceUrl"
+        v-b-tooltip.hover.right
+        :href="serviceUrl"
+        class="avatar"
+        target="_blank"
+        :title="langAvatar"
+    >
+        <img
+            :src="url"
+            :style="{ width: width+'px', height: 'auto' }"
+            alt=""
+        >
     </a>
 </template>
 
diff --git a/frontend/vue/components/Common/Badges/EnabledBadge.vue b/frontend/vue/components/Common/Badges/EnabledBadge.vue
index 388f89177..243dbb453 100644
--- a/frontend/vue/components/Common/Badges/EnabledBadge.vue
+++ b/frontend/vue/components/Common/Badges/EnabledBadge.vue
@@ -1,5 +1,8 @@
 <template>
-    <small class="badge badge-pill ml-2" :class="badgeClass">{{ badgeText }}</small>
+    <small
+        class="badge badge-pill ml-2"
+        :class="badgeClass"
+    >{{ badgeText }}</small>
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Common/Badges/RunningBadge.vue b/frontend/vue/components/Common/Badges/RunningBadge.vue
index 122d9c51e..e876f4591 100644
--- a/frontend/vue/components/Common/Badges/RunningBadge.vue
+++ b/frontend/vue/components/Common/Badges/RunningBadge.vue
@@ -1,5 +1,8 @@
 <template>
-    <small class="badge badge-pill ml-2" :class="badgeClass">{{ badgeText }}</small>
+    <small
+        class="badge badge-pill ml-2"
+        :class="badgeClass"
+    >{{ badgeText }}</small>
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Common/BaseEditModal.vue b/frontend/vue/components/Common/BaseEditModal.vue
index eca89ff2f..781ddcbd7 100644
--- a/frontend/vue/components/Common/BaseEditModal.vue
+++ b/frontend/vue/components/Common/BaseEditModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal ref="modal"></b-modal>
+    <b-modal ref="modal" />
 </template>
 
 <script>
@@ -10,13 +10,13 @@ import mergeExisting from "~/functions/mergeExisting";
 export default {
     name: 'BaseEditModal',
     components: {ModalForm},
-    setup() {
-        return {v$: useVuelidate()}
-    },
-    emits: ['relist'],
     props: {
         createUrl: String
     },
+    emits: ['relist'],
+    setup() {
+        return {v$: useVuelidate()}
+    },
     data() {
         return {
             loading: true,
diff --git a/frontend/vue/components/Common/Charts/HourChart.vue b/frontend/vue/components/Common/Charts/HourChart.vue
index 861d5f127..84a755116 100644
--- a/frontend/vue/components/Common/Charts/HourChart.vue
+++ b/frontend/vue/components/Common/Charts/HourChart.vue
@@ -1,6 +1,6 @@
 <template>
     <canvas ref="$canvas">
-        <slot></slot>
+        <slot />
     </canvas>
 </template>
 
diff --git a/frontend/vue/components/Common/Charts/PieChart.vue b/frontend/vue/components/Common/Charts/PieChart.vue
index f2bf64228..d5dad356b 100644
--- a/frontend/vue/components/Common/Charts/PieChart.vue
+++ b/frontend/vue/components/Common/Charts/PieChart.vue
@@ -1,6 +1,6 @@
 <template>
     <canvas ref="$canvas">
-        <slot></slot>
+        <slot />
     </canvas>
 </template>
 
diff --git a/frontend/vue/components/Common/Charts/TimeSeriesChart.vue b/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
index d25e359c4..fff8eda3c 100644
--- a/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
+++ b/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
@@ -1,6 +1,6 @@
 <template>
     <canvas ref="$canvas">
-        <slot></slot>
+        <slot />
     </canvas>
 </template>
 
diff --git a/frontend/vue/components/Common/CodemirrorTextarea.vue b/frontend/vue/components/Common/CodemirrorTextarea.vue
index ed0127890..238dfc833 100644
--- a/frontend/vue/components/Common/CodemirrorTextarea.vue
+++ b/frontend/vue/components/Common/CodemirrorTextarea.vue
@@ -1,5 +1,10 @@
 <template>
-    <code-mirror basic v-model="textValue" :lang="lang" :dark="dark"></code-mirror>
+    <code-mirror
+        v-model="textValue"
+        basic
+        :lang="lang"
+        :dark="dark"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Common/CopyToClipboardButton.vue b/frontend/vue/components/Common/CopyToClipboardButton.vue
index 3d1ccc435..0694b1ab5 100644
--- a/frontend/vue/components/Common/CopyToClipboardButton.vue
+++ b/frontend/vue/components/Common/CopyToClipboardButton.vue
@@ -1,7 +1,14 @@
 <template>
-    <button ref="btn" class="btn btn-copy btn-link btn-xs" @click.prevent="doCopy"
-            :aria-label="$gettext('Copy to Clipboard')">
-        <icon class="sm" icon="file_copy"></icon>
+    <button
+        ref="btn"
+        class="btn btn-copy btn-link btn-xs"
+        :aria-label="$gettext('Copy to Clipboard')"
+        @click.prevent="doCopy"
+    >
+        <icon
+            class="sm"
+            icon="file_copy"
+        />
         <span v-if="!hideText">{{ $gettext('Copy to Clipboard') }}</span>
     </button>
 </template>
diff --git a/frontend/vue/components/Common/DataTable.vue b/frontend/vue/components/Common/DataTable.vue
index 455577131..891f85aa3 100644
--- a/frontend/vue/components/Common/DataTable.vue
+++ b/frontend/vue/components/Common/DataTable.vue
@@ -1,52 +1,113 @@
 <template>
-    <div :id="id" style="display: contents">
-        <div class="datatable-toolbar-top card-body" v-if="showToolbar">
+    <div
+        :id="id"
+        style="display: contents"
+    >
+        <div
+            v-if="showToolbar"
+            class="datatable-toolbar-top card-body"
+        >
             <b-row class="align-items-center mb-2">
-                <b-col xl="6" lg="5" md="12" sm="12" v-if="showPagination">
-                    <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"
-                                  class="mb-0" v-if="showPagination">
-                    </b-pagination>
+                <b-col
+                    v-if="showPagination"
+                    xl="6"
+                    lg="5"
+                    md="12"
+                    sm="12"
+                >
+                    <b-pagination
+                        v-if="showPagination"
+                        v-model="currentPage"
+                        :total-rows="totalRows"
+                        :per-page="perPage"
+                        class="mb-0"
+                    />
                 </b-col>
-                <b-col xl="6" lg="5" md="12" sm="12" v-else>
+                <b-col
+                    v-else
+                    xl="6"
+                    lg="5"
+                    md="12"
+                    sm="12"
+                >
                     &nbsp;
                 </b-col>
-                <b-col xl="6" lg="7" md="12" sm="12" class="d-flex my-2">
+                <b-col
+                    xl="6"
+                    lg="7"
+                    md="12"
+                    sm="12"
+                    class="d-flex my-2"
+                >
                     <div class="flex-fill">
                         <div class="input-group">
                             <div class="input-group-prepend text-muted">
-                                <icon icon="search"></icon>
+                                <icon icon="search" />
                             </div>
-                            <b-form-input debounce="200" v-model="filter" type="search"
-                                          class="search-field form-control"
-                                          :placeholder="langSearch"></b-form-input>
+                            <b-form-input
+                                v-model="filter"
+                                debounce="200"
+                                type="search"
+                                class="search-field form-control"
+                                :placeholder="langSearch"
+                            />
                         </div>
                     </div>
                     <div class="flex-shrink-1 pl-3 pr-3">
                         <b-btn-group class="actions">
-                            <b-button variant="default" title="Refresh" @click="onClickRefresh" v-b-tooltip.hover
-                                      :title="langRefreshTooltip">
-                                <icon icon="refresh"></icon>
+                            <b-button
+                                v-b-tooltip.hover
+                                variant="default"
+                                title="Refresh"
+                                :title="langRefreshTooltip"
+                                @click="onClickRefresh"
+                            >
+                                <icon icon="refresh" />
                             </b-button>
-                            <b-dropdown variant="default" :text="perPageLabel" v-b-tooltip.hover v-if="paginated"
-                                        :title="langPerPageTooltip">
-                                <b-dropdown-item v-for="pageOption in pageOptions" :key="pageOption"
-                                                 :active="(pageOption === perPage)" @click="setPerPage(pageOption)">
+                            <b-dropdown
+                                v-if="paginated"
+                                v-b-tooltip.hover
+                                variant="default"
+                                :text="perPageLabel"
+                                :title="langPerPageTooltip"
+                            >
+                                <b-dropdown-item
+                                    v-for="pageOption in pageOptions"
+                                    :key="pageOption"
+                                    :active="(pageOption === perPage)"
+                                    @click="setPerPage(pageOption)"
+                                >
                                     {{ getPerPageLabel(pageOption) }}
                                 </b-dropdown-item>
                             </b-dropdown>
-                            <b-dropdown variant="default" v-if="selectFields" v-b-tooltip.hover
-                                        :title="langSelectFieldsTooltip">
+                            <b-dropdown
+                                v-if="selectFields"
+                                v-b-tooltip.hover
+                                variant="default"
+                                :title="langSelectFieldsTooltip"
+                            >
                                 <template #button-content>
-                                    <icon icon="filter_list"></icon>
-                                    <span class="caret"></span>
+                                    <icon icon="filter_list" />
+                                    <span class="caret" />
                                 </template>
                                 <b-dropdown-form class="pt-3">
-                                    <div v-for="field in selectableFields" class="form-group">
+                                    <div
+                                        v-for="field in selectableFields"
+                                        class="form-group"
+                                    >
                                         <div class="custom-control custom-checkbox">
-                                            <input type="checkbox" class="custom-control-input"
-                                                   v-bind:id="'chk_field_' + field.key" name="is_field_visible"
-                                                   v-model="field.visible" @change="storeSettings">
-                                            <label class="custom-control-label" v-bind:for="'chk_field_'+field.key">
+                                            <input
+                                                :id="'chk_field_' + field.key"
+                                                v-model="field.visible"
+                                                type="checkbox"
+                                                class="custom-control-input"
+                                                name="is_field_visible"
+                                                @change="storeSettings"
+                                            >
+                                            <label
+                                                class="custom-control-label"
+                                                :for="'chk_field_'+field.key"
+                                            >
                                                 {{ field.label }}
                                             </label>
                                         </div>
@@ -59,43 +120,68 @@
             </b-row>
         </div>
         <div class="datatable-main">
-            <b-table ref="table" show-empty striped hover :selectable="selectable" :api-url="apiUrl" :per-page="perPage"
-                     v-model:current-page="currentPage" @row-selected="onRowSelected" :items="itemProvider"
-                     :fields="visibleFields"
-                     :empty-text="langNoRecords" :empty-filtered-text="langNoRecords" :responsive="responsive"
-                     :no-provider-paging="handleClientSide" :no-provider-sorting="handleClientSide"
-                     :no-provider-filtering="handleClientSide"
-                     tbody-tr-class="align-middle" thead-tr-class="align-middle" selected-variant=""
-                     :filter="filter" @filtered="onFiltered" @refreshed="onRefreshed"
-                     v-model:sort-by="sortBy" v-model:sort-desc="sortDesc" @sort-changed="onSortChanged">
+            <b-table
+                ref="table"
+                v-model:current-page="currentPage"
+                show-empty
+                striped
+                hover
+                :selectable="selectable"
+                :api-url="apiUrl"
+                :per-page="perPage"
+                :items="itemProvider"
+                :fields="visibleFields"
+                :empty-text="langNoRecords"
+                :empty-filtered-text="langNoRecords"
+                :responsive="responsive"
+                :no-provider-paging="handleClientSide"
+                :no-provider-sorting="handleClientSide"
+                :no-provider-filtering="handleClientSide"
+                tbody-tr-class="align-middle"
+                @row-selected="onRowSelected"
+                thead-tr-class="align-middle"
+                selected-variant=""
+                :filter="filter"
+                v-model:sort-by="sortBy"
+                v-model:sort-desc="sortDesc"
+                @filtered="onFiltered"
+                @refreshed="onRefreshed"
+                @sort-changed="onSortChanged"
+            >
                 <template #head(selected)="data">
-                    <b-form-checkbox :aria-label="langSelectAll" :checked="allSelected"
-                                     @change="toggleSelected"></b-form-checkbox>
+                    <b-form-checkbox
+                        :aria-label="langSelectAll"
+                        :checked="allSelected"
+                        @change="toggleSelected"
+                    />
                 </template>
                 <template #cell(selected)="{ rowSelected }">
                     <div class="text-muted">
                         <template v-if="rowSelected">
                             <span class="sr-only">{{ langDeselectRow }}</span>
-                            <icon icon="check_box"></icon>
+                            <icon icon="check_box" />
                         </template>
                         <template v-else>
                             <span class="sr-only">{{ langSelectRow }}</span>
-                            <icon icon="check_box_outline_blank"></icon>
+                            <icon icon="check_box_outline_blank" />
                         </template>
                     </div>
                 </template>
                 <template #table-busy>
-                    <div role="alert" aria-live="polite">
+                    <div
+                        role="alert"
+                        aria-live="polite"
+                    >
                         <div class="text-center my-2">
                             <div class="progress-circular progress-circular-primary mx-auto mb-3">
                                 <div class="progress-circular-wrapper">
                                     <div class="progress-circular-inner">
                                         <div class="progress-circular-left">
-                                            <div class="progress-circular-spinner"></div>
+                                            <div class="progress-circular-spinner" />
                                         </div>
-                                        <div class="progress-circular-gap"></div>
+                                        <div class="progress-circular-gap" />
                                         <div class="progress-circular-right">
-                                            <div class="progress-circular-spinner"></div>
+                                            <div class="progress-circular-spinner" />
                                         </div>
                                     </div>
                                 </div>
@@ -106,53 +192,29 @@
                     </div>
                 </template>
 
-                <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
-                    <slot :name="slot" v-bind="scope"></slot>
+                <template
+                    v-for="(_, slot) of $slots"
+                    #[slot]="scope"
+                >
+                    <slot
+                        :name="slot"
+                        v-bind="scope"
+                    />
                 </template>
             </b-table>
         </div>
         <div class="datatable-toolbar-bottom card-body">
-            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"
-                          class="mb-0 mt-2" v-if="showPagination">
-            </b-pagination>
+            <b-pagination
+                v-if="showPagination"
+                v-model="currentPage"
+                :total-rows="totalRows"
+                :per-page="perPage"
+                class="mb-0 mt-2"
+            />
         </div>
     </div>
 </template>
 
-<style lang="scss">
-div.datatable-main {
-    flex: 1;
-}
-
-div.datatable-toolbar-top,
-div.datatable-toolbar-bottom {
-    flex: 0;
-    padding: 0;
-}
-
-table.b-table {
-    td.shrink {
-        width: 0.1%;
-        white-space: nowrap;
-    }
-}
-
-table.b-table-selectable {
-    thead tr th:nth-child(1),
-    tbody tr td:nth-child(1),
-    tbody tr th:nth-child(1) {
-        padding-right: 0.75rem;
-        width: 3rem;
-    }
-
-    thead tr th:nth-child(2),
-    tbody tr td:nth-child(2),
-    tbody tr th:nth-child(2) {
-        padding-left: 0.5rem;
-    }
-}
-</style>
-
 <script>
 import store from 'store';
 import _ from 'lodash';
@@ -237,9 +299,6 @@ export default defineComponent({
             flushCache: false
         };
     },
-    created() {
-        this.loadStoredSettings();
-    },
     computed: {
         langRefreshTooltip() {
             return this.$gettext('Refresh rows');
@@ -325,6 +384,9 @@ export default defineComponent({
             this.currentPage = 1;
         }
     },
+    created() {
+        this.loadStoredSettings();
+    },
     methods: {
         loadStoredSettings() {
             if (store.enabled && store.get(this.storeKey) !== undefined) {
@@ -463,3 +525,37 @@ export default defineComponent({
     }
 });
 </script>
+
+<style lang="scss">
+div.datatable-main {
+    flex: 1;
+}
+
+div.datatable-toolbar-top,
+div.datatable-toolbar-bottom {
+    flex: 0;
+    padding: 0;
+}
+
+table.b-table {
+    td.shrink {
+        width: 0.1%;
+        white-space: nowrap;
+    }
+}
+
+table.b-table-selectable {
+    thead tr th:nth-child(1),
+    tbody tr td:nth-child(1),
+    tbody tr th:nth-child(1) {
+        padding-right: 0.75rem;
+        width: 3rem;
+    }
+
+    thead tr th:nth-child(2),
+    tbody tr td:nth-child(2),
+    tbody tr th:nth-child(2) {
+        padding-left: 0.5rem;
+    }
+}
+</style>
diff --git a/frontend/vue/components/Common/DateRangeDropdown.vue b/frontend/vue/components/Common/DateRangeDropdown.vue
index 3c2b0152a..63385e5b5 100644
--- a/frontend/vue/components/Common/DateRangeDropdown.vue
+++ b/frontend/vue/components/Common/DateRangeDropdown.vue
@@ -1,25 +1,40 @@
 <template>
     <date-range-picker
-        v-bind="$props" ref="picker" controlContainerClass="" opens="left" show-dropdowns
-        :time-picker-increment="1" :ranges="ranges" v-model="dateRange" v-model:date-range="dateRange"
-        @select="onSelect">
+        v-bind="$props"
+        ref="picker"
+        v-model="dateRange"
+        v-model:date-range="dateRange"
+        control-container-class=""
+        opens="left"
+        show-dropdowns
+        :time-picker-increment="1"
+        :ranges="ranges"
+        @select="onSelect"
+    >
         <template #input="datePicker">
-            <a class="btn btn-bg dropdown-toggle" id="reportrange" href="#" @click.prevent="">
-                <icon icon="date_range"></icon>
+            <a
+                id="reportrange"
+                class="btn btn-bg dropdown-toggle"
+                href="#"
+                @click.prevent=""
+            >
+                <icon icon="date_range" />
                 {{ datePicker.rangeText }}
             </a>
         </template>
 
-        <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"></slot>
+        <template
+            v-for="(_, slot) of $slots"
+            #[slot]="scope"
+        >
+            <slot
+                :name="slot"
+                v-bind="scope"
+            />
         </template>
     </date-range-picker>
 </template>
 
-<style lang="scss">
-@import 'vue3-daterange-picker/src/assets/daterangepicker';
-</style>
-
 <script>
 import DateRangePicker from 'vue3-daterange-picker';
 import Icon from "./Icon";
@@ -28,7 +43,6 @@ import {DateTime} from 'luxon';
 export default {
     name: 'DateRangeDropdown',
     components: {DateRangePicker, Icon},
-    emits: ['update:modelValue', 'update'],
     inheritAttrs: false,
     model: {
         prop: 'modelValue',
@@ -64,6 +78,7 @@ export default {
             default: null,
         },
     },
+    emits: ['update:modelValue', 'update'],
     computed: {
         dateRange: {
             get() {
@@ -127,3 +142,7 @@ export default {
     }
 }
 </script>
+
+<style lang="scss">
+@import 'vue3-daterange-picker/src/assets/daterangepicker';
+</style>
diff --git a/frontend/vue/components/Common/FlowUpload.vue b/frontend/vue/components/Common/FlowUpload.vue
index 213ab61e1..31fe11c71 100644
--- a/frontend/vue/components/Common/FlowUpload.vue
+++ b/frontend/vue/components/Common/FlowUpload.vue
@@ -1,72 +1,69 @@
 <template>
     <div class="flow-upload">
         <div class="upload-progress">
-            <template v-for="(file, key) in files.value" :key="key">
-                <div v-if="file.isVisible" class="uploading-file pt-1" :id="'file_upload_' + file.uniqueIdentifier"
-                     :class="{ 'text-success': file.isCompleted, 'text-danger': file.error }">
-                    <h6 class="fileuploadname m-0">{{ file.name }}</h6>
-                    <div v-if="!file.isCompleted" class="progress h-15 my-1">
-                        <div class="progress-bar h-15" role="progressbar" :style="{width: file.progressPercent+'%'}"
-                             :aria-valuenow="file.progressPercent" aria-valuemin="0" aria-valuemax="100"></div>
+            <template
+                v-for="(file, key) in files.value"
+                :key="key"
+            >
+                <div
+                    v-if="file.isVisible"
+                    :id="'file_upload_' + file.uniqueIdentifier"
+                    class="uploading-file pt-1"
+                    :class="{ 'text-success': file.isCompleted, 'text-danger': file.error }"
+                >
+                    <h6 class="fileuploadname m-0">
+                        {{ file.name }}
+                    </h6>
+                    <div
+                        v-if="!file.isCompleted"
+                        class="progress h-15 my-1"
+                    >
+                        <div
+                            class="progress-bar h-15"
+                            role="progressbar"
+                            :style="{width: file.progressPercent+'%'}"
+                            :aria-valuenow="file.progressPercent"
+                            aria-valuemin="0"
+                            aria-valuemax="100"
+                        />
                     </div>
 
-                    <div class="upload-status" v-if="file.error">
+                    <div
+                        v-if="file.error"
+                        class="upload-status"
+                    >
                         {{ file.error }}
                     </div>
-                    <div class="size">{{ file.size }}</div>
+                    <div class="size">
+                        {{ file.size }}
+                    </div>
                 </div>
             </template>
         </div>
-        <div class="file-drop-target" ref="$fileDropTarget">
+        <div
+            ref="$fileDropTarget"
+            class="file-drop-target"
+        >
             {{ $gettext('Drag file(s) here to upload or') }}
-            <button ref="$fileBrowseTarget" class="file-upload btn btn-primary text-center ml-1" type="button">
-                <icon icon="cloud_upload"></icon>
+            <button
+                ref="$fileBrowseTarget"
+                class="file-upload btn btn-primary text-center ml-1"
+                type="button"
+            >
+                <icon icon="cloud_upload" />
                 {{ $gettext('Select File') }}
             </button>
-            <small class="file-name"></small>
-            <input type="file" :accept="validMimeTypesList" :multiple="allowMultiple"
-                   style="visibility: hidden; position: absolute;"/>
+            <small class="file-name" />
+            <input
+                type="file"
+                :accept="validMimeTypesList"
+                :multiple="allowMultiple"
+                style="visibility: hidden; position: absolute;"
+            >
         </div>
     </div>
 </template>
 
-<style lang="scss">
-div.flow-upload {
-    div.upload-progress {
-        padding: 4px 0;
-
-        & > div {
-            padding: 3px 0;
-        }
-
-        .error {
-            color: #a00;
-        }
-
-        .progress {
-            margin-bottom: 5px;
-
-            .progress-bar {
-                border-bottom-width: 10px;
-
-                &::after {
-                    height: 10px;
-                }
-            }
-        }
-    }
-
-    div.file-drop-target {
-        padding: 25px 0;
-        text-align: center;
-
-        input {
-            display: inline;
-        }
-    }
-}
-</style>
-
 <script setup>
 import formatFileSize from '~/functions/formatFileSize.js';
 import Icon from './Icon.vue';
@@ -216,3 +213,40 @@ onUnmounted(() => {
     files.reset();
 });
 </script>
+
+<style lang="scss">
+div.flow-upload {
+    div.upload-progress {
+        padding: 4px 0;
+
+        & > div {
+            padding: 3px 0;
+        }
+
+        .error {
+            color: #a00;
+        }
+
+        .progress {
+            margin-bottom: 5px;
+
+            .progress-bar {
+                border-bottom-width: 10px;
+
+                &::after {
+                    height: 10px;
+                }
+            }
+        }
+    }
+
+    div.file-drop-target {
+        padding: 25px 0;
+        text-align: center;
+
+        input {
+            display: inline;
+        }
+    }
+}
+</style>
diff --git a/frontend/vue/components/Common/Icon.vue b/frontend/vue/components/Common/Icon.vue
index f5171438c..90460d892 100644
--- a/frontend/vue/components/Common/Icon.vue
+++ b/frontend/vue/components/Common/Icon.vue
@@ -1,5 +1,8 @@
 <template>
-    <i :class="iconClass" aria-hidden="true">{{ icon }}</i>
+    <i
+        :class="iconClass"
+        aria-hidden="true"
+    >{{ icon }}</i>
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Common/InfoCard.vue b/frontend/vue/components/Common/InfoCard.vue
index ec18fed39..cbc28a35f 100644
--- a/frontend/vue/components/Common/InfoCard.vue
+++ b/frontend/vue/components/Common/InfoCard.vue
@@ -1,10 +1,13 @@
 <template>
-    <div class="card-body alert-info d-flex align-items-center" role="alert">
+    <div
+        class="card-body alert-info d-flex align-items-center"
+        role="alert"
+    >
         <div class="flex-shrink-0 mr-2">
-            <icon icon="info"/>
+            <icon icon="info" />
         </div>
         <div class="flex-fill">
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>
diff --git a/frontend/vue/components/Common/InvisibleSubmitButton.vue b/frontend/vue/components/Common/InvisibleSubmitButton.vue
index 12e05d025..a9f5d55e7 100644
--- a/frontend/vue/components/Common/InvisibleSubmitButton.vue
+++ b/frontend/vue/components/Common/InvisibleSubmitButton.vue
@@ -1,3 +1,8 @@
 <template>
-    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" aria-hidden="true"/>
+    <input
+        type="submit"
+        style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+        tabindex="-1"
+        aria-hidden="true"
+    >
 </template>
diff --git a/frontend/vue/components/Common/LogList.vue b/frontend/vue/components/Common/LogList.vue
index 7ba9c2cb2..65b7f760f 100644
--- a/frontend/vue/components/Common/LogList.vue
+++ b/frontend/vue/components/Common/LogList.vue
@@ -1,7 +1,12 @@
 <template>
     <div class="list-group list-group-flush">
-        <a v-for="log in logs" :key="log.key" class="list-group-item list-group-item-action log-item"
-           href="#" @click.prevent="viewLog(log.links.self)">
+        <a
+            v-for="log in logs"
+            :key="log.key"
+            class="list-group-item list-group-item-action log-item"
+            href="#"
+            @click.prevent="viewLog(log.links.self)"
+        >
             <span class="log-name">{{ log.name }}</span><br>
             <small class="text-secondary">{{ log.path }}</small>
         </a>
@@ -11,10 +16,10 @@
 <script>
 export default {
     name: 'LogList',
-    emits: ['view'],
     props: {
         url: String,
     },
+    emits: ['view'],
     data() {
         return {
             loading: true,
diff --git a/frontend/vue/components/Common/ModalForm.vue b/frontend/vue/components/Common/ModalForm.vue
index 3399588b9..623fe3f22 100644
--- a/frontend/vue/components/Common/ModalForm.vue
+++ b/frontend/vue/components/Common/ModalForm.vue
@@ -1,25 +1,58 @@
 <template>
-    <b-modal :size="size" :centered="centered" :id="id" ref="modal" :title="title" :busy="loading" @shown="onShown"
-             @hidden="onHidden" :no-enforce-focus="noEnforceFocus">
+    <b-modal
+        :id="id"
+        ref="modal"
+        :size="size"
+        :centered="centered"
+        :title="title"
+        :busy="loading"
+        :no-enforce-focus="noEnforceFocus"
+        @shown="onShown"
+        @hidden="onHidden"
+    >
         <template #default="slotProps">
-            <b-overlay variant="card" :show="loading">
-                <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+            <b-overlay
+                variant="card"
+                :show="loading"
+            >
+                <b-alert
+                    variant="danger"
+                    :show="error != null"
+                >
+                    {{ error }}
+                </b-alert>
 
-                <b-form class="form vue-form" @submit.prevent="doSubmit">
-                    <slot name="default" v-bind="slotProps">
-                    </slot>
+                <b-form
+                    class="form vue-form"
+                    @submit.prevent="doSubmit"
+                >
+                    <slot
+                        name="default"
+                        v-bind="slotProps"
+                    />
 
-                    <invisible-submit-button/>
+                    <invisible-submit-button />
                 </b-form>
             </b-overlay>
         </template>
 
         <template #modal-footer="slotProps">
-            <slot name="modal-footer" v-bind="slotProps">
-                <b-button variant="default" type="button" @click="close">
+            <slot
+                name="modal-footer"
+                v-bind="slotProps"
+            >
+                <b-button
+                    variant="default"
+                    type="button"
+                    @click="close"
+                >
                     {{ $gettext('Close') }}
                 </b-button>
-                <b-button :variant="(disableSaveButton) ? 'danger' : 'primary'" type="submit" @click="doSubmit">
+                <b-button
+                    :variant="(disableSaveButton) ? 'danger' : 'primary'"
+                    type="submit"
+                    @click="doSubmit"
+                >
                     <slot name="save-button-name">
                         {{ $gettext('Save Changes') }}
                     </slot>
@@ -27,8 +60,14 @@
             </slot>
         </template>
 
-        <template v-for="(_, slot) of filteredScopedSlots" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"></slot>
+        <template
+            v-for="(_, slot) of filteredScopedSlots"
+            #[slot]="scope"
+        >
+            <slot
+                :name="slot"
+                v-bind="scope"
+            />
         </template>
     </b-modal>
 </template>
@@ -40,7 +79,6 @@ import _ from "lodash";
 
 export default defineComponent({
     components: {InvisibleSubmitButton},
-    emits: ['submit', 'shown', 'hidden'],
     props: {
         title: {
             type: String,
@@ -74,6 +112,7 @@ export default defineComponent({
             type: String
         }
     },
+    emits: ['submit', 'shown', 'hidden'],
     computed: {
         filteredScopedSlots() {
             return _.filter(this.$slots, (slot, name) => {
diff --git a/frontend/vue/components/Common/PlayButton.vue b/frontend/vue/components/Common/PlayButton.vue
index 098daddfb..578563b5b 100644
--- a/frontend/vue/components/Common/PlayButton.vue
+++ b/frontend/vue/components/Common/PlayButton.vue
@@ -1,6 +1,13 @@
 <template>
-    <a href="#" @click.prevent="toggle" :title="langTitle">
-        <icon :class="iconClass" :icon="iconText"></icon>
+    <a
+        href="#"
+        :title="langTitle"
+        @click.prevent="toggle"
+    >
+        <icon
+            :class="iconClass"
+            :icon="iconText"
+        />
     </a>
 </template>
 
diff --git a/frontend/vue/components/Common/ScheduleView.vue b/frontend/vue/components/Common/ScheduleView.vue
index 19b7ce7af..0efde9d4c 100644
--- a/frontend/vue/components/Common/ScheduleView.vue
+++ b/frontend/vue/components/Common/ScheduleView.vue
@@ -1,5 +1,8 @@
 <template>
-    <full-calendar ref="calendar" :options="calendarOptions"></full-calendar>
+    <full-calendar
+        ref="calendar"
+        :options="calendarOptions"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Common/StreamingLogModal.vue b/frontend/vue/components/Common/StreamingLogModal.vue
index d6bedabec..47df570a2 100644
--- a/frontend/vue/components/Common/StreamingLogModal.vue
+++ b/frontend/vue/components/Common/StreamingLogModal.vue
@@ -1,13 +1,31 @@
 <template>
-    <b-modal id="logs_modal" size="lg" ref="$modal" @hidden="clearContents"
-             :title="$gettext('Log Viewer')" no-enforce-focus>
-        <streaming-log-view ref="$logView" :log-url="logUrl"></streaming-log-view>
+    <b-modal
+        id="logs_modal"
+        ref="$modal"
+        size="lg"
+        :title="$gettext('Log Viewer')"
+        no-enforce-focus
+        @hidden="clearContents"
+    >
+        <streaming-log-view
+            ref="$logView"
+            :log-url="logUrl"
+        />
 
         <template #modal-footer>
-            <b-button variant="default" type="button" @click="close">
+            <b-button
+                variant="default"
+                type="button"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button variant="primary" class="btn_copy" @click.prevent="doCopy" type="button">
+            <b-button
+                variant="primary"
+                class="btn_copy"
+                type="button"
+                @click.prevent="doCopy"
+            >
                 {{ $gettext('Copy to Clipboard') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Common/StreamingLogView.vue b/frontend/vue/components/Common/StreamingLogView.vue
index 917e9f37f..ea8c79a10 100644
--- a/frontend/vue/components/Common/StreamingLogView.vue
+++ b/frontend/vue/components/Common/StreamingLogView.vue
@@ -1,13 +1,24 @@
 <template>
-    <b-overlay variant="card" :show="loading">
+    <b-overlay
+        variant="card"
+        :show="loading"
+    >
         <b-form-group label-for="modal_scroll_to_bottom">
-            <b-form-checkbox id="modal_scroll_to_bottom" v-model="scrollToBottom">
+            <b-form-checkbox
+                id="modal_scroll_to_bottom"
+                v-model="scrollToBottom"
+            >
                 {{ $gettext('Automatically Scroll to Bottom') }}
             </b-form-checkbox>
         </b-form-group>
 
-        <textarea class="form-control log-viewer" ref="textarea" id="log-view-contents" spellcheck="false"
-                  readonly>{{ logs }}</textarea>
+        <textarea
+            id="log-view-contents"
+            ref="textarea"
+            class="form-control log-viewer"
+            spellcheck="false"
+            readonly
+        >{{ logs }}</textarea>
     </b-overlay>
 </template>
 
@@ -56,7 +67,7 @@ export default {
             this.loading = false;
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         clearTimeout(this.timeoutUpdateLog);
     },
     methods: {
diff --git a/frontend/vue/components/Common/TimeCode.vue b/frontend/vue/components/Common/TimeCode.vue
index 760f4f53c..88e39f14c 100644
--- a/frontend/vue/components/Common/TimeCode.vue
+++ b/frontend/vue/components/Common/TimeCode.vue
@@ -1,5 +1,11 @@
 <template>
-    <b-input v-bind="$attrs" type="time" v-model="timeCode" pattern="[0-9]{2}:[0-9]{2}" placeholder="13:45"></b-input>
+    <b-input
+        v-bind="$attrs"
+        v-model="timeCode"
+        type="time"
+        pattern="[0-9]{2}:[0-9]{2}"
+        placeholder="13:45"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Common/Waveform.vue b/frontend/vue/components/Common/Waveform.vue
index 4648b4d99..4fae99161 100644
--- a/frontend/vue/components/Common/Waveform.vue
+++ b/frontend/vue/components/Common/Waveform.vue
@@ -3,8 +3,8 @@
         <b-row>
             <b-form-group class="col-md-12">
                 <div class="waveform__container">
-                    <div id="waveform-timeline"></div>
-                    <div id="waveform"></div>
+                    <div id="waveform-timeline" />
+                    <div id="waveform" />
                 </div>
             </b-form-group>
         </b-row>
@@ -17,27 +17,48 @@
                         </label>
                     </div>
                     <div class="flex-fill mx-3">
-                        <b-form-input id="waveform-zoom" v-model.number="zoom" type="range" min="0" max="256"
-                                      class="w-100"></b-form-input>
+                        <b-form-input
+                            id="waveform-zoom"
+                            v-model.number="zoom"
+                            type="range"
+                            min="0"
+                            max="256"
+                            class="w-100"
+                        />
                     </div>
                 </div>
             </b-col>
             <b-col md="5">
                 <div class="inline-volume-controls d-flex align-items-center">
                     <div class="flex-shrink-0">
-                        <a class="btn btn-sm btn-outline-inverse" href="#" @click.prevent="volume = 0"
-                           :title="$gettext('Mute')">
-                            <icon icon="volume_mute"></icon>
+                        <a
+                            class="btn btn-sm btn-outline-inverse"
+                            href="#"
+                            :title="$gettext('Mute')"
+                            @click.prevent="volume = 0"
+                        >
+                            <icon icon="volume_mute" />
                         </a>
                     </div>
                     <div class="flex-fill mx-1">
-                        <input type="range" :title="$gettext('Volume')" class="player-volume-range custom-range w-100"
-                               min="0" max="100" step="1" v-model.number="volume">
+                        <input
+                            v-model.number="volume"
+                            type="range"
+                            :title="$gettext('Volume')"
+                            class="player-volume-range custom-range w-100"
+                            min="0"
+                            max="100"
+                            step="1"
+                        >
                     </div>
                     <div class="flex-shrink-0">
-                        <a class="btn btn-sm btn-outline-inverse" href="#" @click.prevent="volume = 100"
-                           :title="$gettext('Full Volume')">
-                            <icon icon="volume_up"></icon>
+                        <a
+                            class="btn btn-sm btn-outline-inverse"
+                            href="#"
+                            :title="$gettext('Full Volume')"
+                            @click.prevent="volume = 100"
+                        >
+                            <icon icon="volume_up" />
                         </a>
                     </div>
                 </div>
diff --git a/frontend/vue/components/Dashboard.vue b/frontend/vue/components/Dashboard.vue
index 4518cf693..0747d66df 100644
--- a/frontend/vue/components/Dashboard.vue
+++ b/frontend/vue/components/Dashboard.vue
@@ -1,42 +1,90 @@
 <template>
     <div id="dashboard">
-        <section class="card mb-4" role="region">
+        <section
+            class="card mb-4"
+            role="region"
+        >
             <div class="card-header bg-primary-dark d-flex flex-wrap align-items-center">
-                <avatar class="flex-shrink-0 mr-3" v-if="user.avatar.url" :url="user.avatar.url"
-                        :service="user.avatar.service" :service-url="user.avatar.serviceUrl"></avatar>
+                <avatar
+                    v-if="user.avatar.url"
+                    class="flex-shrink-0 mr-3"
+                    :url="user.avatar.url"
+                    :service="user.avatar.service"
+                    :service-url="user.avatar.serviceUrl"
+                />
 
                 <div class="flex-fill">
-                    <h2 class="card-title mt-0">{{ user.name }}</h2>
-                    <h3 class="card-subtitle">{{ user.email }}</h3>
+                    <h2 class="card-title mt-0">
+                        {{ user.name }}
+                    </h2>
+                    <h3 class="card-subtitle">
+                        {{ user.email }}
+                    </h3>
                 </div>
 
                 <div class="flex-md-shrink-0 mt-3 mt-md-0 buttons">
-                    <a class="btn btn-bg" role="button" :href="profileUrl">
-                        <icon icon="account_circle"></icon>
+                    <a
+                        class="btn btn-bg"
+                        role="button"
+                        :href="profileUrl"
+                    >
+                        <icon icon="account_circle" />
                         {{ $gettext('My Account') }}
                     </a>
-                    <a v-if="showAdmin" class="btn btn-bg" role="button" :href="adminUrl">
-                        <icon icon="settings"></icon>
+                    <a
+                        v-if="showAdmin"
+                        class="btn btn-bg"
+                        role="button"
+                        :href="adminUrl"
+                    >
+                        <icon icon="settings" />
                         {{ $gettext('Administration') }}
                     </a>
                 </div>
             </div>
 
             <template v-if="!notificationsLoading && notifications.length > 0">
-                <div v-for="notification in notifications" class="card-body d-flex align-items-center"
-                     :class="'alert-'+notification.type" role="alert">
-                    <div class="flex-shrink-0 mr-3" v-if="'info' === notification.type">
-                        <icon class="lg" icon="info"></icon>
+                <div
+                    v-for="notification in notifications"
+                    class="card-body d-flex align-items-center"
+                    :class="'alert-'+notification.type"
+                    role="alert"
+                >
+                    <div
+                        v-if="'info' === notification.type"
+                        class="flex-shrink-0 mr-3"
+                    >
+                        <icon
+                            class="lg"
+                            icon="info"
+                        />
                     </div>
-                    <div class="flex-shrink-0 mr-3" v-else>
-                        <icon class="lg" icon="warning"></icon>
+                    <div
+                        v-else
+                        class="flex-shrink-0 mr-3"
+                    >
+                        <icon
+                            class="lg"
+                            icon="warning"
+                        />
                     </div>
                     <div class="flex-fill">
                         <h4>{{ notification.title }}</h4>
-                        <p class="card-text" v-html="notification.body"></p>
+                        <p
+                            class="card-text"
+                            v-html="notification.body"
+                        />
                     </div>
-                    <div v-if="notification.actionLabel && notification.actionUrl" class="flex-shrink-0 ml-3">
-                        <b-button :href="notification.actionUrl" target="_blank" size="sm" variant="light">
+                    <div
+                        v-if="notification.actionLabel && notification.actionUrl"
+                        class="flex-shrink-0 ml-3"
+                    >
+                        <b-button
+                            :href="notification.actionUrl"
+                            target="_blank"
+                            size="sm"
+                            variant="light"
+                        >
                             {{ notification.actionLabel }}
                         </b-button>
                     </div>
@@ -44,31 +92,60 @@
             </template>
         </section>
 
-        <section class="card mb-4" role="region" v-if="showCharts">
+        <section
+            v-if="showCharts"
+            class="card mb-4"
+            role="region"
+        >
             <div class="card-header bg-primary-dark d-flex align-items-center">
                 <div class="flex-fill">
-                    <h3 class="card-title">{{ $gettext('Listeners Per Station') }}</h3>
+                    <h3 class="card-title">
+                        {{ $gettext('Listeners Per Station') }}
+                    </h3>
                 </div>
                 <div class="flex-shrink-0">
-                    <b-button variant="outline-light" size="sm" class="py-2" @click="toggleCharts">{{
+                    <b-button
+                        variant="outline-light"
+                        size="sm"
+                        class="py-2"
+                        @click="toggleCharts"
+                    >
+                        {{
                             langShowHideCharts
                         }}
                     </b-button>
                 </div>
             </div>
-            <b-collapse id="charts" v-model="chartsVisible">
-                <b-overlay variant="card" :show="chartsLoading">
-                    <div class="card-body py-5" v-if="chartsLoading">
+            <b-collapse
+                id="charts"
+                v-model="chartsVisible"
+            >
+                <b-overlay
+                    variant="card"
+                    :show="chartsLoading"
+                >
+                    <div
+                        v-if="chartsLoading"
+                        class="card-body py-5"
+                    >
                         &nbsp;
                     </div>
-                    <b-tabs pills card lazy v-else>
+                    <b-tabs
+                        v-else
+                        pills
+                        card
+                        lazy
+                    >
                         <b-tab active>
                             <template #title>
                                 {{ $gettext('Average Listeners') }}
                             </template>
 
-                            <time-series-chart style="width: 100%;" :data="chartsData.average.metrics">
-                                <span v-html="chartsData.average.alt"></span>
+                            <time-series-chart
+                                style="width: 100%;"
+                                :data="chartsData.average.metrics"
+                            >
+                                <span v-html="chartsData.average.alt" />
                             </time-series-chart>
                         </b-tab>
                         <b-tab>
@@ -76,8 +153,11 @@
                                 {{ $gettext('Unique Listeners') }}
                             </template>
 
-                            <time-series-chart style="width: 100%;" :data="chartsData.unique.metrics">
-                                <span v-html="chartsData.unique.alt"></span>
+                            <time-series-chart
+                                style="width: 100%;"
+                                :data="chartsData.unique.metrics"
+                            >
+                                <span v-html="chartsData.unique.alt" />
                             </time-series-chart>
                         </b-tab>
                     </b-tabs>
@@ -85,24 +165,47 @@
             </b-collapse>
         </section>
 
-        <section class="card" role="region">
+        <section
+            class="card"
+            role="region"
+        >
             <div class="card-header bg-primary-dark d-flex flex-wrap align-items-center">
                 <div class="flex-fill">
-                    <h2 class="card-title">{{ $gettext('Station Overview') }}</h2>
+                    <h2 class="card-title">
+                        {{ $gettext('Station Overview') }}
+                    </h2>
                 </div>
-                <div class="flex-shrink-0" v-if="showAdmin">
-                    <b-button variant="outline-light" size="sm" class="py-2" :href="manageStationsUrl">
-                        <icon icon="settings"></icon>
+                <div
+                    v-if="showAdmin"
+                    class="flex-shrink-0"
+                >
+                    <b-button
+                        variant="outline-light"
+                        size="sm"
+                        class="py-2"
+                        :href="manageStationsUrl"
+                    >
+                        <icon icon="settings" />
                         {{ $gettext('Manage Stations') }}
                     </b-button>
                 </div>
             </div>
 
-            <b-overlay variant="card" :show="stationsLoading">
-                <div class="card-body py-3" v-if="stationsLoading">
+            <b-overlay
+                variant="card"
+                :show="stationsLoading"
+            >
+                <div
+                    v-if="stationsLoading"
+                    class="card-body py-3"
+                >
                     &nbsp;
                 </div>
-                <table class="table table-striped table-responsive mb-0" id="station_dashboard" v-else>
+                <table
+                    v-else
+                    id="station_dashboard"
+                    class="table table-striped table-responsive mb-0"
+                >
                     <colgroup>
                         <col width="5%">
                         <col width="30%">
@@ -111,68 +214,105 @@
                         <col width="15%">
                     </colgroup>
                     <thead>
-                    <tr>
-                        <th class="pr-3">&nbsp;</th>
-                        <th class="pl-2">{{ $gettext('Station Name') }}</th>
-                        <th class="text-center">{{ $gettext('Listeners') }}</th>
-                        <th>{{ $gettext('Now Playing') }}</th>
-                        <th class="text-right"></th>
-                    </tr>
+                        <tr>
+                            <th class="pr-3">
+&nbsp;
+                            </th>
+                            <th class="pl-2">
+                                {{ $gettext('Station Name') }}
+                            </th>
+                            <th class="text-center">
+                                {{ $gettext('Listeners') }}
+                            </th>
+                            <th>{{ $gettext('Now Playing') }}</th>
+                            <th class="text-right" />
+                        </tr>
                     </thead>
                     <tbody>
-                    <tr class="align-middle" v-for="item in stations" :key="item.station.id">
-                        <td class="text-center pr-3">
-                            <play-button class="file-icon" icon-class="lg outlined align-middle"
-                                         :url="item.station.listen_url" is-stream></play-button>
-                        </td>
-                        <td class="pl-2">
-                            <div class="typography-subheading">{{ item.station.name }}</div>
-                            <div v-if="item.station.is_public">
-                                <a :href="item.links.public" target="_blank">
-                                    {{ $gettext('Public Page') }}
-                                </a>
-                            </div>
-                        </td>
-                        <td class="text-center">
-                            <span class="pr-1">
-                                <icon class="sm align-middle" icon="headset"></icon>
-                            </span>
-                            <template v-if="item.links.listeners">
-                                <a :href="item.links.listeners">
+                        <tr
+                            v-for="item in stations"
+                            :key="item.station.id"
+                            class="align-middle"
+                        >
+                            <td class="text-center pr-3">
+                                <play-button
+                                    class="file-icon"
+                                    icon-class="lg outlined align-middle"
+                                    :url="item.station.listen_url"
+                                    is-stream
+                                />
+                            </td>
+                            <td class="pl-2">
+                                <div class="typography-subheading">
+                                    {{ item.station.name }}
+                                </div>
+                                <div v-if="item.station.is_public">
+                                    <a
+                                        :href="item.links.public"
+                                        target="_blank"
+                                    >
+                                        {{ $gettext('Public Page') }}
+                                    </a>
+                                </div>
+                            </td>
+                            <td class="text-center">
+                                <span class="pr-1">
+                                    <icon
+                                        class="sm align-middle"
+                                        icon="headset"
+                                    />
+                                </span>
+                                <template v-if="item.links.listeners">
+                                    <a :href="item.links.listeners">
+                                        {{ item.listeners.total }}
+                                    </a>
+                                </template>
+                                <template v-else>
                                     {{ item.listeners.total }}
-                                </a>
-                            </template>
-                            <template v-else>
-                                {{ item.listeners.total }}
-                            </template>
-                        </td>
-                        <td>
-                            <div class="d-flex align-items-center">
-                                <album-art v-if="showAlbumArt" :src="item.now_playing.song.art"
-                                           class="flex-shrink-0 pr-3"></album-art>
+                                </template>
+                            </td>
+                            <td>
+                                <div class="d-flex align-items-center">
+                                    <album-art
+                                        v-if="showAlbumArt"
+                                        :src="item.now_playing.song.art"
+                                        class="flex-shrink-0 pr-3"
+                                    />
 
-                                <div v-if="!item.is_online" class="flex-fill text-muted">
-                                    {{ $gettext('Station Offline') }}
+                                    <div
+                                        v-if="!item.is_online"
+                                        class="flex-fill text-muted"
+                                    >
+                                        {{ $gettext('Station Offline') }}
+                                    </div>
+                                    <div
+                                        v-else-if="item.now_playing.song.title !== ''"
+                                        class="flex-fill"
+                                    >
+                                        <strong><span class="nowplaying-title">
+                                            {{ item.now_playing.song.title }}
+                                        </span></strong><br>
+                                        <span class="nowplaying-artist">{{ item.now_playing.song.artist }}</span>
+                                    </div>
+                                    <div
+                                        v-else
+                                        class="flex-fill"
+                                    >
+                                        <strong><span class="nowplaying-title">
+                                            {{ item.now_playing.song.text }}
+                                        </span></strong>
+                                    </div>
                                 </div>
-                                <div v-else-if="item.now_playing.song.title !== ''" class="flex-fill">
-                                    <strong><span class="nowplaying-title">
-                                        {{ item.now_playing.song.title }}
-                                    </span></strong><br>
-                                    <span class="nowplaying-artist">{{ item.now_playing.song.artist }}</span>
-                                </div>
-                                <div v-else class="flex-fill">
-                                    <strong><span class="nowplaying-title">
-                                        {{ item.now_playing.song.text }}
-                                    </span></strong>
-                                </div>
-                            </div>
-                        </td>
-                        <td class="text-right">
-                            <a class="btn btn-primary" v-bind:href="item.links.manage">
-                                {{ $gettext('Manage') }}
-                            </a>
-                        </td>
-                    </tr>
+                            </td>
+                            <td class="text-right">
+                                <a
+                                    class="btn btn-primary"
+                                    :href="item.links.manage"
+                                >
+                                    {{ $gettext('Manage') }}
+                                </a>
+                            </td>
+                        </tr>
                     </tbody>
                 </table>
             </b-overlay>
diff --git a/frontend/vue/components/Form/BFormMarkup.vue b/frontend/vue/components/Form/BFormMarkup.vue
index a629ed664..82287b051 100644
--- a/frontend/vue/components/Form/BFormMarkup.vue
+++ b/frontend/vue/components/Form/BFormMarkup.vue
@@ -1,20 +1,38 @@
 <template>
-    <b-form-group v-bind="$attrs" :label-for="id">
+    <b-form-group
+        v-bind="$attrs"
+        :label-for="id"
+    >
         <template #default="slotProps">
             <div :id="id">
-                <slot name="default" v-bind="slotProps"></slot>
+                <slot
+                    name="default"
+                    v-bind="slotProps"
+                />
             </div>
         </template>
 
         <template #label="slotProps">
-            <slot name="label" v-bind="slotProps"></slot>
+            <slot
+                name="label"
+                v-bind="slotProps"
+            />
         </template>
         <template #description="slotProps">
-            <slot name="description" v-bind="slotProps"></slot>
+            <slot
+                name="description"
+                v-bind="slotProps"
+            />
         </template>
 
-        <template v-for="(_, slot) of filteredSlots" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"></slot>
+        <template
+            v-for="(_, slot) of filteredSlots"
+            #[slot]="scope"
+        >
+            <slot
+                :name="slot"
+                v-bind="scope"
+            />
         </template>
     </b-form-group>
 </template>
diff --git a/frontend/vue/components/Form/BWrappedFormCheckbox.vue b/frontend/vue/components/Form/BWrappedFormCheckbox.vue
index 24186d2c6..13609b90d 100644
--- a/frontend/vue/components/Form/BWrappedFormCheckbox.vue
+++ b/frontend/vue/components/Form/BWrappedFormCheckbox.vue
@@ -1,30 +1,57 @@
 <template>
-    <b-form-group v-bind="$attrs" :label-for="id" :state="fieldState">
+    <b-form-group
+        v-bind="$attrs"
+        :label-for="id"
+        :state="fieldState"
+    >
         <template #default>
-            <slot name="default" v-bind="{ id, field, state: fieldState }">
-                <b-form-checkbox v-bind="inputAttrs" v-model="field.$model" :id="id" :name="name">
-                    <slot name="label"></slot>
-                    <span v-if="isRequired" class="text-danger">
+            <slot
+                name="default"
+                v-bind="{ id, field, state: fieldState }"
+            >
+                <b-form-checkbox
+                    v-bind="inputAttrs"
+                    :id="id"
+                    v-model="field.$model"
+                    :name="name"
+                >
+                    <slot name="label" />
+                    <span
+                        v-if="isRequired"
+                        class="text-danger"
+                    >
                         <span aria-hidden="true">*</span>
                         <span class="sr-only">Required</span>
                     </span>
-                    <span v-if="advanced" class="badge small badge-primary">
+                    <span
+                        v-if="advanced"
+                        class="badge small badge-primary"
+                    >
                         {{ $gettext('Advanced') }}
                     </span>
                 </b-form-checkbox>
 
                 <b-form-invalid-feedback :state="fieldState">
-                    <vuelidate-error :field="field"></vuelidate-error>
+                    <vuelidate-error :field="field" />
                 </b-form-invalid-feedback>
             </slot>
         </template>
 
         <template #description="slotProps">
-            <slot name="description" v-bind="slotProps"></slot>
+            <slot
+                name="description"
+                v-bind="slotProps"
+            />
         </template>
 
-        <template v-for="(_, slot) of filteredSlots" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"></slot>
+        <template
+            v-for="(_, slot) of filteredSlots"
+            #[slot]="scope"
+        >
+            <slot
+                :name="slot"
+                v-bind="scope"
+            />
         </template>
     </b-form-group>
 </template>
diff --git a/frontend/vue/components/Form/BWrappedFormGroup.vue b/frontend/vue/components/Form/BWrappedFormGroup.vue
index e4e7a155d..64a7fd913 100644
--- a/frontend/vue/components/Form/BWrappedFormGroup.vue
+++ b/frontend/vue/components/Form/BWrappedFormGroup.vue
@@ -1,36 +1,82 @@
 <template>
-    <b-form-group v-bind="$attrs" :label-for="id" :state="fieldState">
+    <b-form-group
+        v-bind="$attrs"
+        :label-for="id"
+        :state="fieldState"
+    >
         <template #default>
-            <slot name="default" v-bind="{ id, field, state: fieldState }">
-                <b-form-textarea v-bind="inputAttrs" v-if="inputType === 'textarea'" ref="$input" :id="id" :name="name"
-                                 v-model="modelValue" :required="isRequired" :number="isNumeric" :trim="inputTrim"
-                                 :autofocus="autofocus" :state="fieldState"></b-form-textarea>
-                <b-form-input v-bind="inputAttrs" v-else ref="$input" :type="inputType" :id="id" :name="name"
-                              v-model="modelValue" :required="isRequired" :number="isNumeric" :trim="inputTrim"
-                              :autofocus="autofocus" :state="fieldState"></b-form-input>
+            <slot
+                name="default"
+                v-bind="{ id, field, state: fieldState }"
+            >
+                <b-form-textarea
+                    v-if="inputType === 'textarea'"
+                    v-bind="inputAttrs"
+                    :id="id"
+                    ref="$input"
+                    v-model="modelValue"
+                    :name="name"
+                    :required="isRequired"
+                    :number="isNumeric"
+                    :trim="inputTrim"
+                    :autofocus="autofocus"
+                    :state="fieldState"
+                />
+                <b-form-input
+                    v-else
+                    v-bind="inputAttrs"
+                    :id="id"
+                    ref="$input"
+                    v-model="modelValue"
+                    :type="inputType"
+                    :name="name"
+                    :required="isRequired"
+                    :number="isNumeric"
+                    :trim="inputTrim"
+                    :autofocus="autofocus"
+                    :state="fieldState"
+                />
             </slot>
 
             <b-form-invalid-feedback :state="fieldState">
-                <vuelidate-error :field="field"></vuelidate-error>
+                <vuelidate-error :field="field" />
             </b-form-invalid-feedback>
         </template>
 
         <template #label="slotProps">
-            <slot v-bind="slotProps" name="label"></slot>
-            <span v-if="isRequired" class="text-danger">
+            <slot
+                v-bind="slotProps"
+                name="label"
+            />
+            <span
+                v-if="isRequired"
+                class="text-danger"
+            >
                 <span aria-hidden="true">*</span>
                 <span class="sr-only">Required</span>
             </span>
-            <span v-if="advanced" class="badge small badge-primary ml-2">
+            <span
+                v-if="advanced"
+                class="badge small badge-primary ml-2"
+            >
                 {{ $gettext('Advanced') }}
             </span>
         </template>
         <template #description="slotProps">
-            <slot v-bind="slotProps" name="description"></slot>
+            <slot
+                v-bind="slotProps"
+                name="description"
+            />
         </template>
 
-        <template v-for="(_, slot) of filteredSlots" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"></slot>
+        <template
+            v-for="(_, slot) of filteredSlots"
+            #[slot]="scope"
+        >
+            <slot
+                :name="slot"
+                v-bind="scope"
+            />
         </template>
     </b-form-group>
 </template>
diff --git a/frontend/vue/components/InlinePlayer.vue b/frontend/vue/components/InlinePlayer.vue
index b11b18234..467129c21 100644
--- a/frontend/vue/components/InlinePlayer.vue
+++ b/frontend/vue/components/InlinePlayer.vue
@@ -1,69 +1,81 @@
 <template>
-    <audio-player ref="$player" :volume="volume" :is-muted="isMuted"></audio-player>
+    <audio-player
+        ref="$player"
+        :volume="volume"
+        :is-muted="isMuted"
+    />
 
-    <div class="ml-3 player-inline" v-if="isPlaying">
-        <div class="inline-seek d-inline-flex align-items-center ml-1" v-if="!current.isStream && duration !== 0">
+    <div
+        v-if="isPlaying"
+        class="ml-3 player-inline"
+    >
+        <div
+            v-if="!current.isStream && duration !== 0"
+            class="inline-seek d-inline-flex align-items-center ml-1"
+        >
             <div class="flex-shrink-0 mx-1 text-white-50 time-display">
                 {{ currentTimeText }}
             </div>
             <div class="flex-fill mx-2">
-                <input type="range" :title="$gettext('Seek')" class="player-seek-range custom-range" min="0"
-                       max="100"
-                       step="1" v-model="progress">
+                <input
+                    v-model="progress"
+                    type="range"
+                    :title="$gettext('Seek')"
+                    class="player-seek-range custom-range"
+                    min="0"
+                    max="100"
+                    step="1"
+                >
             </div>
             <div class="flex-shrink-0 mx-1 text-white-50 time-display">
                 {{ durationText }}
             </div>
         </div>
 
-        <a class="btn btn-sm btn-outline-light px-2 ml-1" href="#" @click.prevent="stop()"
-           :aria-label="$gettext('Stop')">
-            <icon icon="stop"></icon>
+        <a
+            class="btn btn-sm btn-outline-light px-2 ml-1"
+            href="#"
+            :aria-label="$gettext('Stop')"
+            @click.prevent="stop()"
+        >
+            <icon icon="stop" />
         </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="mute"
-                   :aria-label="$gettext('Mute')">
-                    <icon icon="volume_mute"></icon>
+                <a
+                    class="btn btn-sm btn-outline-light px-2"
+                    href="#"
+                    :aria-label="$gettext('Mute')"
+                    @click.prevent="mute"
+                >
+                    <icon icon="volume_mute" />
                 </a>
             </div>
             <div class="flex-fill mx-1">
-                <input type="range" :title="$gettext('Volume')" class="player-volume-range custom-range" min="0"
-                       max="100"
-                       step="1" v-model="volume">
+                <input
+                    v-model="volume"
+                    type="range"
+                    :title="$gettext('Volume')"
+                    class="player-volume-range custom-range"
+                    min="0"
+                    max="100"
+                    step="1"
+                >
             </div>
             <div class="flex-shrink-0">
-                <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="fullVolume"
-                   :aria-label="$gettext('Full Volume')">
-                    <icon icon="volume_up"></icon>
+                <a
+                    class="btn btn-sm btn-outline-light px-2"
+                    href="#"
+                    :aria-label="$gettext('Full Volume')"
+                    @click.prevent="fullVolume"
+                >
+                    <icon icon="volume_up" />
                 </a>
             </div>
         </div>
     </div>
 </template>
 
-<style lang="scss">
-.player-inline {
-    .inline-seek {
-        width: 300px;
-
-        div.time-display {
-            font-size: 90%;
-        }
-    }
-
-    .inline-volume-controls {
-        width: 175px;
-    }
-
-    input.player-volume-range,
-    input.player-seek-range {
-        width: 100%;
-        height: 10px;
-    }
-}
-</style>
-
 <script setup>
 import AudioPlayer from '~/components/Common/AudioPlayer.vue';
 import formatTime from '~/functions/formatTime.js';
@@ -122,3 +134,25 @@ const fullVolume = () => {
     volume.value = 100;
 };
 </script>
+
+<style lang="scss">
+.player-inline {
+    .inline-seek {
+        width: 300px;
+
+        div.time-display {
+            font-size: 90%;
+        }
+    }
+
+    .inline-volume-controls {
+        width: 175px;
+    }
+
+    input.player-volume-range,
+    input.player-seek-range {
+        width: 100%;
+        height: 10px;
+    }
+}
+</style>
diff --git a/frontend/vue/components/Public/FullPlayer.vue b/frontend/vue/components/Public/FullPlayer.vue
index f87c67eaa..070bd1fdc 100644
--- a/frontend/vue/components/Public/FullPlayer.vue
+++ b/frontend/vue/components/Public/FullPlayer.vue
@@ -2,33 +2,54 @@
     <div class="public-page">
         <div class="card">
             <div class="card-body">
-                <h2 class="card-title">{{ stationName }}</h2>
+                <h2 class="card-title">
+                    {{ stationName }}
+                </h2>
 
                 <div class="stations nowplaying">
-                    <radio-player v-bind="$props" @np_updated="onNowPlayingUpdate"></radio-player>
+                    <radio-player
+                        v-bind="$props"
+                        @np_updated="onNowPlayingUpdate"
+                    />
                 </div>
             </div>
 
             <div class="card-actions">
-                <a class="btn btn-sm btn-outline-secondary" v-b-modal.song_history_modal>
-                    <icon icon="history"></icon>
+                <a
+                    v-b-modal.song_history_modal
+                    class="btn btn-sm btn-outline-secondary"
+                >
+                    <icon icon="history" />
                     {{ $gettext('Song History') }}
                 </a>
-                <a class="btn btn-sm btn-outline-secondary" v-if="enableRequests" v-b-modal.request_modal>
-                    <icon icon="help_outline"></icon>
+                <a
+                    v-if="enableRequests"
+                    v-b-modal.request_modal
+                    class="btn btn-sm btn-outline-secondary"
+                >
+                    <icon icon="help_outline" />
                     {{ $gettext('Request Song') }}
                 </a>
-                <a class="btn btn-sm btn-outline-secondary" :href="downloadPlaylistUri">
-                    <icon icon="file_download"></icon>
+                <a
+                    class="btn btn-sm btn-outline-secondary"
+                    :href="downloadPlaylistUri"
+                >
+                    <icon icon="file_download" />
                     {{ $gettext('Playlist') }}
                 </a>
             </div>
         </div>
     </div>
 
-    <song-history-modal :show-album-art="showAlbumArt" :history="history"></song-history-modal>
-    <request-modal :show-album-art="showAlbumArt" :request-list-uri="requestListUri"
-                   :custom-fields="customFields"></request-modal>
+    <song-history-modal
+        :show-album-art="showAlbumArt"
+        :history="history"
+    />
+    <request-modal
+        :show-album-art="showAlbumArt"
+        :request-list-uri="requestListUri"
+        :custom-fields="customFields"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Public/FullPlayer/RequestModal.vue b/frontend/vue/components/Public/FullPlayer/RequestModal.vue
index 2c25bf451..64debe8e3 100644
--- a/frontend/vue/components/Public/FullPlayer/RequestModal.vue
+++ b/frontend/vue/components/Public/FullPlayer/RequestModal.vue
@@ -1,7 +1,17 @@
 <template>
-    <b-modal size="lg" id="request_modal" ref="$modal" :title="$gettext('Request a Song')" hide-footer>
-        <song-request :show-album-art="showAlbumArt" :request-list-uri="requestListUri" :custom-fields="customFields"
-                      @submitted="doClose"></song-request>
+    <b-modal
+        id="request_modal"
+        ref="$modal"
+        size="lg"
+        :title="$gettext('Request a Song')"
+        hide-footer
+    >
+        <song-request
+            :show-album-art="showAlbumArt"
+            :request-list-uri="requestListUri"
+            :custom-fields="customFields"
+            @submitted="doClose"
+        />
     </b-modal>
 </template>
 
diff --git a/frontend/vue/components/Public/FullPlayer/SongHistory.vue b/frontend/vue/components/Public/FullPlayer/SongHistory.vue
index 25e7add01..8a6f981c2 100644
--- a/frontend/vue/components/Public/FullPlayer/SongHistory.vue
+++ b/frontend/vue/components/Public/FullPlayer/SongHistory.vue
@@ -1,21 +1,54 @@
 <template>
     <div id="station-history">
-        <p v-if="history.length <= 0">{{ $gettext('No records to display.') }}</p>
-        <div class="song" v-for="(row, index) in history">
+        <p v-if="history.length <= 0">
+            {{ $gettext('No records to display.') }}
+        </p>
+        <div
+            v-for="(row, index) in history"
+            class="song"
+        >
             <strong class="order">{{ history.length - index }}</strong>
-            <img v-if="showAlbumArt" class="art" :src="row.song.art">
+            <img
+                v-if="showAlbumArt"
+                class="art"
+                :src="row.song.art"
+            >
             <div class="name">
-                <strong v-html="row.song.title"></strong>
-                <span v-html="albumAndArtist(row.song)"></span>
+                <strong v-html="row.song.title" />
+                <span v-html="albumAndArtist(row.song)" />
             </div>
-            <div class="break"></div>
+            <div class="break" />
             <small class="date-played text-muted">
-                <span v-html="unixTimestampToDate(row.played_at)"></span>
+                <span v-html="unixTimestampToDate(row.played_at)" />
             </small>
         </div>
     </div>
 </template>
 
+<script setup>
+import {DateTime} from "luxon";
+
+const props = defineProps({
+    history: Array,
+    showAlbumArt: {
+        type: Boolean,
+        default: true
+    },
+});
+
+const unixTimestampToDate = (timestamp) => {
+    if (!timestamp) {
+        return '';
+    }
+
+    return DateTime.fromSeconds(timestamp).toRelative();
+};
+
+const albumAndArtist = (song) => {
+    return [song.artist, song.album].filter(str => !!str).join(', ');
+};
+</script>
+
 <style lang="scss">
 #station-history {
     .song {
@@ -76,27 +109,3 @@
     }
 }
 </style>
-
-<script setup>
-import {DateTime} from "luxon";
-
-const props = defineProps({
-    history: Array,
-    showAlbumArt: {
-        type: Boolean,
-        default: true
-    },
-});
-
-const unixTimestampToDate = (timestamp) => {
-    if (!timestamp) {
-        return '';
-    }
-
-    return DateTime.fromSeconds(timestamp).toRelative();
-};
-
-const albumAndArtist = (song) => {
-    return [song.artist, song.album].filter(str => !!str).join(', ');
-};
-</script>
diff --git a/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue b/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue
index b536f07f7..9f2df715e 100644
--- a/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue
+++ b/frontend/vue/components/Public/FullPlayer/SongHistoryModal.vue
@@ -1,6 +1,16 @@
 <template>
-    <b-modal size="md" id="song_history_modal" ref="modal" :title="$gettext('Song History')" centered hide-footer>
-        <song-history :show-album-art="showAlbumArt" :history="history"></song-history>
+    <b-modal
+        id="song_history_modal"
+        ref="modal"
+        size="md"
+        :title="$gettext('Song History')"
+        centered
+        hide-footer
+    >
+        <song-history
+            :show-album-art="showAlbumArt"
+            :history="history"
+        />
     </b-modal>
 </template>
 
diff --git a/frontend/vue/components/Public/History.vue b/frontend/vue/components/Public/History.vue
index 9be40ed1d..4dac9d02e 100644
--- a/frontend/vue/components/Public/History.vue
+++ b/frontend/vue/components/Public/History.vue
@@ -1,6 +1,9 @@
 <template>
     <div id="song_history">
-        <song-history :show-album-art="showAlbumArt" :history="history"></song-history>
+        <song-history
+            :show-album-art="showAlbumArt"
+            :history="history"
+        />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Public/OnDemand.vue b/frontend/vue/components/Public/OnDemand.vue
index b9122b2f8..0ad132a39 100644
--- a/frontend/vue/components/Public/OnDemand.vue
+++ b/frontend/vue/components/Public/OnDemand.vue
@@ -1,7 +1,18 @@
 <template>
-    <section id="content" role="main" class="d-flex align-items-stretch" style="height: 100vh;">
-        <div class="container pt-5 pb-5 h-100" style="flex: 1;">
-            <div class="card" style="height: 100%;">
+    <section
+        id="content"
+        role="main"
+        class="d-flex align-items-stretch"
+        style="height: 100vh;"
+    >
+        <div
+            class="container pt-5 pb-5 h-100"
+            style="flex: 1;"
+        >
+            <div
+                class="card"
+                style="height: 100%;"
+            >
                 <div class="card-header bg-primary-dark">
                     <div class="d-flex align-items-center">
                         <div class="flex-shrink">
@@ -15,31 +26,56 @@
                             </h2>
                         </div>
                         <div class="flex-fill text-right">
-                            <inline-player ref="player"></inline-player>
+                            <inline-player ref="player" />
                         </div>
                     </div>
                 </div>
 
-                <data-table ref="datatable" id="station_on_demand_table" paginated select-fields
-                            :fields="fields" :api-url="listUrl">
+                <data-table
+                    id="station_on_demand_table"
+                    ref="datatable"
+                    paginated
+                    select-fields
+                    :fields="fields"
+                    :api-url="listUrl"
+                >
                     <template #cell(download_url)="row">
-                        <play-button class="file-icon" icon-class="outlined" :url="row.item.download_url"
-                                     :is-stream="false"></play-button>
+                        <play-button
+                            class="file-icon"
+                            icon-class="outlined"
+                            :url="row.item.download_url"
+                            :is-stream="false"
+                        />
                         <template v-if="showDownloadButton">
                             &nbsp;
-                            <a class="name" :href="row.item.download_url" target="_blank" :title="$gettext('Download')">
-                                <icon icon="cloud_download"></icon>
+                            <a
+                                class="name"
+                                :href="row.item.download_url"
+                                target="_blank"
+                                :title="$gettext('Download')"
+                            >
+                                <icon icon="cloud_download" />
                             </a>
                         </template>
                     </template>
                     <template #cell(media_art)="row">
-                        <a :href="row.item.media_art" class="album-art" target="_blank"
-                           data-fancybox="gallery">
-                            <img class="media_manager_album_art" :alt="$gettext('Album Art')" :src="row.item.media_art">
+                        <a
+                            :href="row.item.media_art"
+                            class="album-art"
+                            target="_blank"
+                            data-fancybox="gallery"
+                        >
+                            <img
+                                class="media_manager_album_art"
+                                :alt="$gettext('Album Art')"
+                                :src="row.item.media_art"
+                            >
                         </a>
                     </template>
                     <template #cell(size)="row">
-                        <template v-if="!row.item.size">&nbsp;</template>
+                        <template v-if="!row.item.size">
+&nbsp;
+                        </template>
                         <template v-else>
                             {{ formatFileSize(row.item.size) }}
                         </template>
@@ -50,6 +86,43 @@
     </section>
 </template>
 
+<script setup>
+import InlinePlayer from '../InlinePlayer';
+import DataTable from '~/components/Common/DataTable';
+import {forEach} from 'lodash';
+import Icon from '~/components/Common/Icon';
+import PlayButton from "~/components/Common/PlayButton";
+import {useTranslate} from "~/vendor/gettext";
+
+const props = defineProps({
+    listUrl: String,
+    stationName: String,
+    customFields: Array,
+    showDownloadButton: Boolean
+});
+
+const {$gettext} = useTranslate();
+
+let fields = [
+    {key: 'download_url', label: ' '},
+    {key: 'media_art', label: $gettext('Art')},
+    {key: 'media_title', label: $gettext('Title'), sortable: true, selectable: true},
+    {key: 'media_artist', label: $gettext('Artist'), sortable: true, selectable: true},
+    {key: 'media_album', label: $gettext('Album'), sortable: true, selectable: true, visible: false},
+    {key: 'playlist', label: $gettext('Playlist'), sortable: true, selectable: true, visible: false}
+];
+
+forEach(props.customFields.slice(), (field) => {
+    fields.push({
+        key: field.display_key,
+        label: field.label,
+        sortable: true,
+        selectable: true,
+        visible: false
+    });
+});
+</script>
+
 <style lang="scss">
 .ondemand.embed {
     .container {
@@ -91,40 +164,3 @@
     }
 }
 </style>
-
-<script setup>
-import InlinePlayer from '../InlinePlayer';
-import DataTable from '~/components/Common/DataTable';
-import {forEach} from 'lodash';
-import Icon from '~/components/Common/Icon';
-import PlayButton from "~/components/Common/PlayButton";
-import {useTranslate} from "~/vendor/gettext";
-
-const props = defineProps({
-    listUrl: String,
-    stationName: String,
-    customFields: Array,
-    showDownloadButton: Boolean
-});
-
-const {$gettext} = useTranslate();
-
-let fields = [
-    {key: 'download_url', label: ' '},
-    {key: 'media_art', label: $gettext('Art')},
-    {key: 'media_title', label: $gettext('Title'), sortable: true, selectable: true},
-    {key: 'media_artist', label: $gettext('Artist'), sortable: true, selectable: true},
-    {key: 'media_album', label: $gettext('Album'), sortable: true, selectable: true, visible: false},
-    {key: 'playlist', label: $gettext('Playlist'), sortable: true, selectable: true, visible: false}
-];
-
-forEach(props.customFields.slice(), (field) => {
-    fields.push({
-        key: field.display_key,
-        label: field.label,
-        sortable: true,
-        selectable: true,
-        visible: false
-    });
-});
-</script>
diff --git a/frontend/vue/components/Public/Player.vue b/frontend/vue/components/Public/Player.vue
index 55b5b1c93..e119d3b5d 100644
--- a/frontend/vue/components/Public/Player.vue
+++ b/frontend/vue/components/Public/Player.vue
@@ -1,16 +1,33 @@
 <template>
     <div class="radio-player-widget">
-        <audio-player ref="$player" :title="np.now_playing.song.text" :volume="volume"
-                      :is-muted="isMuted"></audio-player>
+        <audio-player
+            ref="$player"
+            :title="np.now_playing.song.text"
+            :volume="volume"
+            :is-muted="isMuted"
+        />
 
         <div class="now-playing-details">
-            <div class="now-playing-art" v-if="showAlbumArt && np.now_playing.song.art">
-                <a :href="np.now_playing.song.art" data-fancybox target="_blank">
-                    <img :src="np.now_playing.song.art" :alt="$gettext('Album Art')">
+            <div
+                v-if="showAlbumArt && np.now_playing.song.art"
+                class="now-playing-art"
+            >
+                <a
+                    :href="np.now_playing.song.art"
+                    data-fancybox
+                    target="_blank"
+                >
+                    <img
+                        :src="np.now_playing.song.art"
+                        :alt="$gettext('Album Art')"
+                    >
                 </a>
             </div>
             <div class="now-playing-main">
-                <h6 class="now-playing-live" v-if="np.live.is_live">
+                <h6
+                    v-if="np.live.is_live"
+                    class="now-playing-live"
+                >
                     {{ $gettext('Live') }}
                     {{ np.live.streamer_name }}
                 </h6>
@@ -21,21 +38,33 @@
                     </h4>
                 </div>
                 <div v-else-if="np.now_playing.song.title !== ''">
-                    <h4 class="now-playing-title">{{ np.now_playing.song.title }}</h4>
-                    <h5 class="now-playing-artist">{{ np.now_playing.song.artist }}</h5>
+                    <h4 class="now-playing-title">
+                        {{ np.now_playing.song.title }}
+                    </h4>
+                    <h5 class="now-playing-artist">
+                        {{ np.now_playing.song.artist }}
+                    </h5>
                 </div>
                 <div v-else>
-                    <h4 class="now-playing-title">{{ np.now_playing.song.text }}</h4>
+                    <h4 class="now-playing-title">
+                        {{ np.now_playing.song.text }}
+                    </h4>
                 </div>
 
-                <div class="time-display" v-if="currentTimeElapsedDisplay != null">
+                <div
+                    v-if="currentTimeElapsedDisplay != null"
+                    class="time-display"
+                >
                     <div class="time-display-played text-secondary">
                         {{ currentTimeElapsedDisplay }}
                     </div>
                     <div class="time-display-progress">
                         <div class="progress">
-                            <div class="progress-bar bg-secondary" role="progressbar"
-                                 :style="{ width: currentTrackPercent+'%' }"></div>
+                            <div
+                                class="progress-bar bg-secondary"
+                                role="progressbar"
+                                :style="{ width: currentTrackPercent+'%' }"
+                            />
                         </div>
                     </div>
                     <div class="time-display-total text-secondary">
@@ -48,18 +77,39 @@
         <hr>
 
         <div class="radio-controls">
-            <play-button class="radio-control-play-button" icon-class="outlined lg" :url="currentStream.url"
-                         :is-hls="currentStream.hls" is-stream></play-button>
+            <play-button
+                class="radio-control-play-button"
+                icon-class="outlined lg"
+                :url="currentStream.url"
+                :is-hls="currentStream.hls"
+                is-stream
+            />
 
             <div class="radio-control-select-stream">
-                <div v-if="streams.length > 1" class="dropdown">
-                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="btn-select-stream"
-                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div
+                    v-if="streams.length > 1"
+                    class="dropdown"
+                >
+                    <button
+                        id="btn-select-stream"
+                        class="btn btn-sm btn-outline-primary dropdown-toggle"
+                        type="button"
+                        data-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                    >
                         {{ currentStream.name }}
                     </button>
-                    <div class="dropdown-menu" aria-labelledby="btn-select-stream">
-                        <a class="dropdown-item" v-for="stream in streams" href="javascript:"
-                           @click.prevent="switchStream(stream)">
+                    <div
+                        class="dropdown-menu"
+                        aria-labelledby="btn-select-stream"
+                    >
+                        <a
+                            v-for="stream in streams"
+                            class="dropdown-item"
+                            href="javascript:"
+                            @click.prevent="switchStream(stream)"
+                        >
                             {{ stream.name }}
                         </a>
                     </div>
@@ -67,146 +117,41 @@
             </div>
 
             <div class="radio-control-mute-button">
-                <a href="#" class="text-secondary" :title="$gettext('Mute')" @click.prevent="toggleMute">
-                    <icon icon="volume_mute"></icon>
+                <a
+                    href="#"
+                    class="text-secondary"
+                    :title="$gettext('Mute')"
+                    @click.prevent="toggleMute"
+                >
+                    <icon icon="volume_mute" />
                 </a>
             </div>
             <div class="radio-control-volume-slider">
-                <input type="range" :title="$gettext('Volume')" class="custom-range" min="0" max="100" step="1"
-                       :disabled="isMuted" v-model.number="volume">
+                <input
+                    v-model.number="volume"
+                    type="range"
+                    :title="$gettext('Volume')"
+                    class="custom-range"
+                    min="0"
+                    max="100"
+                    step="1"
+                    :disabled="isMuted"
+                >
             </div>
             <div class="radio-control-max-volume-button">
-                <a href="#" class="text-secondary" :title="$gettext('Full Volume')" @click.prevent="fullVolume">
-                    <icon icon="volume_up"></icon>
+                <a
+                    href="#"
+                    class="text-secondary"
+                    :title="$gettext('Full Volume')"
+                    @click.prevent="fullVolume"
+                >
+                    <icon icon="volume_up" />
                 </a>
             </div>
         </div>
     </div>
 </template>
 
-<style lang="scss">
-.radio-player-widget {
-    .now-playing-details {
-        display: flex;
-        align-items: center;
-
-        .now-playing-art {
-            padding-right: .5rem;
-
-            img {
-                width: 75px;
-                height: auto;
-                border-radius: 5px;
-
-                @media (max-width: 575px) {
-                    width: 50px;
-                }
-            }
-        }
-
-        .now-playing-main {
-            flex: 1;
-            min-width: 0;
-        }
-
-        h4, h5, h6 {
-            margin: 0;
-            line-height: 1.3;
-        }
-
-        h4 {
-            font-size: 15px;
-        }
-
-        h5 {
-            font-size: 13px;
-            font-weight: normal;
-        }
-
-        h6 {
-            font-size: 11px;
-            font-weight: normal;
-        }
-
-        .now-playing-title,
-        .now-playing-artist {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-
-            &:hover {
-                text-overflow: clip;
-                white-space: normal;
-                word-break: break-all;
-            }
-        }
-
-        .time-display {
-            font-size: 10px;
-            margin-top: .25rem;
-            flex-direction: row;
-            align-items: center;
-            display: flex;
-
-            .time-display-played {
-                margin-right: .5rem;
-            }
-
-            .time-display-progress {
-                flex: 1 1 auto;
-
-                .progress-bar {
-                    -webkit-transition: width 1s; /* Safari */
-                    transition: width 1s;
-                    transition-timing-function: linear;
-                }
-            }
-
-            .time-display-total {
-                margin-left: .5rem;
-            }
-        }
-    }
-
-    hr {
-        margin-top: .5rem;
-        margin-bottom: .5rem;
-    }
-
-    i.material-icons {
-        line-height: 1;
-    }
-
-    .radio-controls {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .radio-control-play-button {
-            margin-right: .25rem;
-        }
-
-        .radio-control-select-stream {
-            flex: 1 1 auto;
-        }
-
-        .radio-control-mute-button,
-        .radio-control-max-volume-button {
-            flex-shrink: 0;
-        }
-
-        .radio-control-volume-slider {
-            flex: 1 1 auto;
-            max-width: 30%;
-
-            input {
-                height: 10px;
-            }
-        }
-    }
-}
-</style>
-
 <script setup>
 import AudioPlayer from '~/components/Common/AudioPlayer';
 import Icon from '~/components/Common/Icon';
@@ -362,3 +307,126 @@ const onNowPlayingUpdated = (np_new) => {
 
 watch(np, onNowPlayingUpdated, {immediate: true});
 </script>
+
+<style lang="scss">
+.radio-player-widget {
+    .now-playing-details {
+        display: flex;
+        align-items: center;
+
+        .now-playing-art {
+            padding-right: .5rem;
+
+            img {
+                width: 75px;
+                height: auto;
+                border-radius: 5px;
+
+                @media (max-width: 575px) {
+                    width: 50px;
+                }
+            }
+        }
+
+        .now-playing-main {
+            flex: 1;
+            min-width: 0;
+        }
+
+        h4, h5, h6 {
+            margin: 0;
+            line-height: 1.3;
+        }
+
+        h4 {
+            font-size: 15px;
+        }
+
+        h5 {
+            font-size: 13px;
+            font-weight: normal;
+        }
+
+        h6 {
+            font-size: 11px;
+            font-weight: normal;
+        }
+
+        .now-playing-title,
+        .now-playing-artist {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+
+            &:hover {
+                text-overflow: clip;
+                white-space: normal;
+                word-break: break-all;
+            }
+        }
+
+        .time-display {
+            font-size: 10px;
+            margin-top: .25rem;
+            flex-direction: row;
+            align-items: center;
+            display: flex;
+
+            .time-display-played {
+                margin-right: .5rem;
+            }
+
+            .time-display-progress {
+                flex: 1 1 auto;
+
+                .progress-bar {
+                    -webkit-transition: width 1s; /* Safari */
+                    transition: width 1s;
+                    transition-timing-function: linear;
+                }
+            }
+
+            .time-display-total {
+                margin-left: .5rem;
+            }
+        }
+    }
+
+    hr {
+        margin-top: .5rem;
+        margin-bottom: .5rem;
+    }
+
+    i.material-icons {
+        line-height: 1;
+    }
+
+    .radio-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .radio-control-play-button {
+            margin-right: .25rem;
+        }
+
+        .radio-control-select-stream {
+            flex: 1 1 auto;
+        }
+
+        .radio-control-mute-button,
+        .radio-control-max-volume-button {
+            flex-shrink: 0;
+        }
+
+        .radio-control-volume-slider {
+            flex: 1 1 auto;
+            max-width: 30%;
+
+            input {
+                height: 10px;
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/vue/components/Public/Requests.vue b/frontend/vue/components/Public/Requests.vue
index eec4c32b8..d7c4e1dd8 100644
--- a/frontend/vue/components/Public/Requests.vue
+++ b/frontend/vue/components/Public/Requests.vue
@@ -1,12 +1,23 @@
 <template>
     <div style="overflow-x: hidden">
-        <data-table ref="datatable" id="song_requests" paginated select-fields :page-options="pageOptions"
-                    :fields="fields"
-                    :responsive="false" :api-url="requestListUri">
+        <data-table
+            id="song_requests"
+            ref="datatable"
+            paginated
+            select-fields
+            :page-options="pageOptions"
+            :fields="fields"
+            :responsive="false"
+            :api-url="requestListUri"
+        >
             <template #cell(name)="row">
                 <div class="d-flex align-items-center">
-                    <album-art v-if="showAlbumArt" :src="row.item.song.art" :width="40"
-                               class="flex-shrink-1 pr-3"></album-art>
+                    <album-art
+                        v-if="showAlbumArt"
+                        :src="row.item.song.art"
+                        :width="40"
+                        class="flex-shrink-1 pr-3"
+                    />
                     <div class="flex-fill">
                         {{ row.item.song.title }}<br>
                         <small>{{ row.item.song.artist }}</small>
@@ -15,7 +26,11 @@
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="primary" @click.prevent="doSubmitRequest(row.item.request_url)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doSubmitRequest(row.item.request_url)"
+                    >
                         {{ $gettext('Request') }}
                     </b-button>
                 </b-button-group>
@@ -24,14 +39,6 @@
     </div>
 </template>
 
-<style lang="scss">
-img.album_art {
-    width: 40px;
-    height: auto;
-    border-radius: 5px;
-}
-</style>
-
 <script>
 import DataTable from '~/components/Common/DataTable';
 import _ from 'lodash';
@@ -39,7 +46,6 @@ import AlbumArt from '~/components/Common/AlbumArt';
 
 export default {
     components: {AlbumArt, DataTable},
-    emits: ['submitted'],
     props: {
         requestListUri: {
             type: String,
@@ -55,6 +61,7 @@ export default {
             default: () => []
         }
     },
+    emits: ['submitted'],
     data () {
         let fields = [
             {key: 'name', isRowHeader: true, label: this.$gettext('Name'), sortable: true, selectable: true},
@@ -121,3 +128,11 @@ export default {
     }
 };
 </script>
+
+<style lang="scss">
+img.album_art {
+    width: 40px;
+    height: auto;
+    border-radius: 5px;
+}
+</style>
diff --git a/frontend/vue/components/Public/Schedule.vue b/frontend/vue/components/Public/Schedule.vue
index 9657bc9bc..896318fe1 100644
--- a/frontend/vue/components/Public/Schedule.vue
+++ b/frontend/vue/components/Public/Schedule.vue
@@ -1,7 +1,18 @@
 <template>
-    <section id="content" role="main" class="d-flex align-items-stretch" style="height: 100vh;">
-        <div class="container pt-5 pb-5 h-100" style="flex: 1;">
-            <div class="card" style="height: 100%;">
+    <section
+        id="content"
+        role="main"
+        class="d-flex align-items-stretch"
+        style="height: 100vh;"
+    >
+        <div
+            class="container pt-5 pb-5 h-100"
+            style="flex: 1;"
+        >
+            <div
+                class="card"
+                style="height: 100%;"
+            >
                 <div class="card-header bg-primary-dark">
                     <div class="d-flex align-items-center">
                         <div class="flex-shrink">
@@ -18,14 +29,27 @@
                 </div>
 
                 <div id="station-schedule-calendar">
-                    <schedule ref="schedule" :schedule-url="scheduleUrl"
-                              :station-time-zone="stationTimeZone"></schedule>
+                    <schedule
+                        ref="schedule"
+                        :schedule-url="scheduleUrl"
+                        :station-time-zone="stationTimeZone"
+                    />
                 </div>
             </div>
         </div>
     </section>
 </template>
 
+<script setup>
+import Schedule from '~/components/Common/ScheduleView';
+
+const props = defineProps({
+    scheduleUrl: String,
+    stationName: String,
+    stationTimeZone: String
+});
+</script>
+
 <style lang="scss">
 .schedule.embed {
     .container {
@@ -38,13 +62,3 @@
     overflow-y: auto;
 }
 </style>
-
-<script setup>
-import Schedule from '~/components/Common/ScheduleView';
-
-const props = defineProps({
-    scheduleUrl: String,
-    stationName: String,
-    stationTimeZone: String
-});
-</script>
diff --git a/frontend/vue/components/Public/WebDJ.vue b/frontend/vue/components/Public/WebDJ.vue
index def96ef8c..3f640734b 100644
--- a/frontend/vue/components/Public/WebDJ.vue
+++ b/frontend/vue/components/Public/WebDJ.vue
@@ -1,29 +1,33 @@
 <template>
-    <section id="content" role="main" style="height: 100vh;">
+    <section
+        id="content"
+        role="main"
+        style="height: 100vh;"
+    >
         <div class="container pt-5">
             <div class="form-row">
                 <div class="col-md-4 mb-sm-4">
-                    <settings-panel v-bind="{ stationName, baseUri, libUrls }"></settings-panel>
+                    <settings-panel v-bind="{ stationName, baseUri, libUrls }" />
                 </div>
 
                 <div class="col-md-8">
                     <div class="form-row mb-3">
                         <div class="col-md-12">
-                            <microphone-panel></microphone-panel>
+                            <microphone-panel />
                         </div>
                     </div>
                     <div class="form-row mb-3">
                         <div class="col-md-12">
-                            <mixer-panel></mixer-panel>
+                            <mixer-panel />
                         </div>
                     </div>
                     <div class="form-row mb-4">
                         <div class="col-md-6 mb-sm-4">
-                            <playlist-panel id="playlist_1"></playlist-panel>
+                            <playlist-panel id="playlist_1" />
                         </div>
 
                         <div class="col-md-6">
-                            <playlist-panel id="playlist_2"></playlist-panel>
+                            <playlist-panel id="playlist_2" />
                         </div>
                     </div>
                 </div>
@@ -41,26 +45,26 @@ import SettingsPanel from './WebDJ/SettingsPanel.vue';
 import Stream from './WebDJ/Stream.js';
 
 export default {
-    data: function () {
-        return {
-            'stream': Stream
-        };
-    },
     components: {
         MixerPanel,
         MicrophonePanel,
         PlaylistPanel,
         SettingsPanel
     },
+    provide: function () {
+        return {
+            getStream: this.getStream,
+            resumeStream: this.resumeStream
+        };
+    },
     props: {
         stationName: String,
         libUrls: Array,
         baseUri: String
     },
-    provide: function () {
+    data: function () {
         return {
-            getStream: this.getStream,
-            resumeStream: this.resumeStream
+            'stream': Stream
         };
     },
     methods: {
diff --git a/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue b/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue
index 08f29b550..ce046f197 100644
--- a/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue
+++ b/frontend/vue/components/Public/WebDJ/MicrophonePanel.vue
@@ -8,7 +8,7 @@
                     </h5>
                 </div>
                 <div class="flex-shrink-0 pl-3">
-                    <volume-slider v-model.number="volume"></volume-slider>
+                    <volume-slider v-model.number="volume" />
                 </div>
             </div>
         </div>
@@ -18,11 +18,18 @@
                 <div class="d-flex-shrink-0">
                     <div class="control-group">
                         <div class="btn-group btn-group-sm">
-                            <button class="btn btn-danger" v-on:click="toggleRecording"
-                                    v-bind:class="{ active: playing }">
-                                <icon icon="mic"></icon>
+                            <button
+                                class="btn btn-danger"
+                                :class="{ active: playing }"
+                                @click="toggleRecording"
+                            >
+                                <icon icon="mic" />
                             </button>
-                            <button class="btn" v-on:click="cue" v-bind:class="{ 'btn-primary': passThrough }">
+                            <button
+                                class="btn"
+                                :class="{ 'btn-primary': passThrough }"
+                                @click="cue"
+                            >
                                 {{ $gettext('Cue') }}
                             </button>
                         </div>
@@ -30,12 +37,22 @@
                 </div>
                 <div class="flex-fill pl-3">
                     <div class="form-group microphone-entry mb-0">
-                        <label for="select_microphone_source" class="mb-2">
+                        <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">
+                            <select
+                                id="select_microphone_source"
+                                v-model="device"
+                                class="form-control"
+                            >
+                                <option
+                                    v-for="device_row in devices"
+                                    :value="device_row.deviceId"
+                                >
                                     {{ device_row.label }}
                                 </option>
                             </select>
@@ -44,12 +61,21 @@
                 </div>
             </div>
 
-            <div v-if="playing" class="mt-3">
+            <div
+                v-if="playing"
+                class="mt-3"
+            >
                 <div class="progress mb-1">
-                    <div class="progress-bar" v-bind:style="{ width: volumeLeft+'%' }"></div>
+                    <div
+                        class="progress-bar"
+                        :style="{ width: volumeLeft+'%' }"
+                    />
                 </div>
                 <div class="progress mb-2">
-                    <div class="progress-bar" v-bind:style="{ width: volumeRight+'%' }"></div>
+                    <div
+                        class="progress-bar"
+                        :style="{ width: volumeRight+'%' }"
+                    />
                 </div>
             </div>
         </div>
diff --git a/frontend/vue/components/Public/WebDJ/MixerPanel.vue b/frontend/vue/components/Public/WebDJ/MixerPanel.vue
index 0e290feb7..81359f0aa 100644
--- a/frontend/vue/components/Public/WebDJ/MixerPanel.vue
+++ b/frontend/vue/components/Public/WebDJ/MixerPanel.vue
@@ -13,9 +13,16 @@
                             {{ $gettext('Playlist 1') }}
                         </div>
                         <div class="flex-fill px-2">
-                            <input type="range" min="0" max="1" step="0.01" class="custom-range slider"
-                                   v-model="position" @click.right.prevent="position = 0.5"
-                                   style="width: 200px; height: 10px;">
+                            <input
+                                v-model="position"
+                                type="range"
+                                min="0"
+                                max="1"
+                                step="0.01"
+                                class="custom-range slider"
+                                style="width: 200px; height: 10px;"
+                                @click.right.prevent="position = 0.5"
+                            >
                         </div>
                         <div class="flex-shrink-0">
                             {{ $gettext('Playlist 2') }}
diff --git a/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue b/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue
index c0fa902d5..969fc0ed1 100644
--- a/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue
+++ b/frontend/vue/components/Public/WebDJ/PlaylistPanel.vue
@@ -3,64 +3,114 @@
         <div class="card-header bg-primary-dark">
             <div class="d-flex align-items-center">
                 <div class="flex-fill text-nowrap">
-                    <h5 class="card-title">{{ lang_header }}</h5>
+                    <h5 class="card-title">
+                        {{ lang_header }}
+                    </h5>
                 </div>
                 <div class="flex-shrink-0 pl-3">
-                    <volume-slider v-model.number="volume"></volume-slider>
+                    <volume-slider v-model.number="volume" />
                 </div>
             </div>
         </div>
         <div class="card-body">
             <div class="control-group d-flex justify-content-center">
                 <div class="btn-group btn-group-sm">
-                    <button class="btn btn-sm btn-success" v-if="!playing || paused" v-on:click="play">
-                        <icon icon="play_arrow"></icon>
+                    <button
+                        v-if="!playing || paused"
+                        class="btn btn-sm btn-success"
+                        @click="play"
+                    >
+                        <icon icon="play_arrow" />
                     </button>
-                    <button class="btn btn-sm btn-warning" v-if="playing && !paused" v-on:click="togglePause()">
-                        <icon icon="pause"></icon>
+                    <button
+                        v-if="playing && !paused"
+                        class="btn btn-sm btn-warning"
+                        @click="togglePause()"
+                    >
+                        <icon icon="pause" />
                     </button>
-                    <button class="btn btn-sm" v-on:click="previous()">
-                        <icon icon="fast_rewind"></icon>
+                    <button
+                        class="btn btn-sm"
+                        @click="previous()"
+                    >
+                        <icon icon="fast_rewind" />
                     </button>
-                    <button class="btn btn-sm" v-on:click="next()">
-                        <icon icon="fast_forward"></icon>
+                    <button
+                        class="btn btn-sm"
+                        @click="next()"
+                    >
+                        <icon icon="fast_forward" />
                     </button>
-                    <button class="btn btn-sm btn-danger" v-on:click="stop()">
-                        <icon icon="stop"></icon>
+                    <button
+                        class="btn btn-sm btn-danger"
+                        @click="stop()"
+                    >
+                        <icon icon="stop" />
                     </button>
-                    <button class="btn btn-sm" v-on:click="cue()" v-bind:class="{ 'btn-primary': passThrough }">
+                    <button
+                        class="btn btn-sm"
+                        :class="{ 'btn-primary': passThrough }"
+                        @click="cue()"
+                    >
                         {{ $gettext('Cue') }}
                     </button>
                 </div>
             </div>
 
-            <div class="mt-3" v-if="playing">
-
+            <div
+                v-if="playing"
+                class="mt-3"
+            >
                 <div class="d-flex flex-row mb-2">
-                    <div class="flex-shrink-0 pt-1 pr-2">{{ prettifyTime(position) }}</div>
-                    <div class="flex-fill">
-                        <input type="range" min="0" max="100" step="0.1" class="custom-range slider"
-                               v-bind:value="seekingPosition"
-                               v-on:mousedown="isSeeking = true"
-                               v-on:mousemove="doSeek($event)"
-                               v-on:mouseup="isSeeking = false">
+                    <div class="flex-shrink-0 pt-1 pr-2">
+                        {{ prettifyTime(position) }}
+                    </div>
+                    <div class="flex-fill">
+                        <input
+                            type="range"
+                            min="0"
+                            max="100"
+                            step="0.1"
+                            class="custom-range slider"
+                            :value="seekingPosition"
+                            @mousedown="isSeeking = true"
+                            @mousemove="doSeek($event)"
+                            @mouseup="isSeeking = false"
+                        >
+                    </div>
+                    <div class="flex-shrink-0 pt-1 pl-2">
+                        {{ prettifyTime(duration) }}
                     </div>
-                    <div class="flex-shrink-0 pt-1 pl-2">{{ prettifyTime(duration) }}</div>
                 </div>
 
                 <div class="progress mb-1">
-                    <div class="progress-bar" v-bind:style="{ width: volumeLeft+'%' }"></div>
+                    <div
+                        class="progress-bar"
+                        :style="{ width: volumeLeft+'%' }"
+                    />
                 </div>
                 <div class="progress">
-                    <div class="progress-bar" v-bind:style="{ width: volumeRight+'%' }"></div>
+                    <div
+                        class="progress-bar"
+                        :style="{ width: volumeRight+'%' }"
+                    />
                 </div>
             </div>
 
             <div class="form-group mt-2">
                 <div class="custom-file">
-                    <input v-bind:id="id + '_files'" type="file" class="custom-file-input files" accept="audio/*"
-                           multiple="multiple" v-on:change="addNewFiles($event.target.files)">
-                    <label v-bind:for="id + '_files'" class="custom-file-label">
+                    <input
+                        :id="id + '_files'"
+                        type="file"
+                        class="custom-file-input files"
+                        accept="audio/*"
+                        multiple="multiple"
+                        @change="addNewFiles($event.target.files)"
+                    >
+                    <label
+                        :for="id + '_files'"
+                        class="custom-file-label"
+                    >
                         {{ $gettext('Add Files to Playlist') }}
                     </label>
                 </div>
@@ -69,15 +119,30 @@
             <div class="form-group mb-0">
                 <div class="controls">
                     <div class="custom-control custom-checkbox custom-control-inline">
-                        <input v-bind:id="id + '_playthrough'" type="checkbox" class="custom-control-input"
-                               v-model="playThrough">
-                        <label v-bind:for="id + '_playthrough'" class="custom-control-label">
+                        <input
+                            :id="id + '_playthrough'"
+                            v-model="playThrough"
+                            type="checkbox"
+                            class="custom-control-input"
+                        >
+                        <label
+                            :for="id + '_playthrough'"
+                            class="custom-control-label"
+                        >
                             {{ $gettext('Continuous Play') }}
                         </label>
                     </div>
                     <div class="custom-control custom-checkbox custom-control-inline">
-                        <input v-bind:id="id + '_loop'" type="checkbox" class="custom-control-input" v-model="loop">
-                        <label v-bind:for="id + '_loop'" class="custom-control-label">
+                        <input
+                            :id="id + '_loop'"
+                            v-model="loop"
+                            type="checkbox"
+                            class="custom-control-input"
+                        >
+                        <label
+                            :for="id + '_loop'"
+                            class="custom-control-label"
+                        >
                             {{ $gettext('Repeat') }}
                         </label>
                     </div>
@@ -85,14 +150,21 @@
             </div>
         </div>
 
-        <div class="list-group list-group-flush" v-if="files.length > 0">
-            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"
-               v-for="(rowFile, rowIndex) in files" v-bind:class="{ active: rowIndex === fileIndex }"
-               v-on:click.prevent="play({ fileIndex: rowIndex })">
+        <div
+            v-if="files.length > 0"
+            class="list-group list-group-flush"
+        >
+            <a
+                v-for="(rowFile, rowIndex) in files"
+                href="#"
+                class="list-group-item list-group-item-action flex-column align-items-start"
+                :class="{ active: rowIndex === fileIndex }"
+                @click.prevent="play({ fileIndex: rowIndex })"
+            >
                 <div class="d-flex w-100 justify-content-between">
                     <h5 class="mb-0">{{
-                            rowFile.metadata.title ? rowFile.metadata.title : lang_unknown_title
-                        }}</h5>
+                        rowFile.metadata.title ? rowFile.metadata.title : lang_unknown_title
+                    }}</h5>
                     <small class="pt-1">{{ prettifyTime(rowFile.audio.length) }}</small>
                 </div>
                 <p class="mb-0">{{ rowFile.metadata.artist ? rowFile.metadata.artist : lang_unknown_artist }}</p>
@@ -110,6 +182,9 @@ import VolumeSlider from "~/components/Public/WebDJ/VolumeSlider";
 export default {
     components: {VolumeSlider, Icon},
     extends: track,
+    props: {
+        id: String
+    },
     data() {
         return {
             'fileIndex': -1,
@@ -144,9 +219,6 @@ export default {
             return (this.isSeeking) ? this.seekPosition : this.positionPercent;
         }
     },
-    props: {
-        id: String
-    },
     mounted () {
         this.mixGainObj = this.getStream().context.createGain();
         this.mixGainObj.connect(this.getStream().webcast);
diff --git a/frontend/vue/components/Public/WebDJ/SettingsPanel.vue b/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
index 6f97afcf7..e03d25cc4 100644
--- a/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
+++ b/frontend/vue/components/Public/WebDJ/SettingsPanel.vue
@@ -12,12 +12,20 @@
                 <div class="col-sm-12">
                     <ul class="nav nav-tabs card-header-tabs mt-0">
                         <li class="nav-item">
-                            <a class="nav-link active" href="#settings" data-toggle="tab">
+                            <a
+                                class="nav-link active"
+                                href="#settings"
+                                data-toggle="tab"
+                            >
                                 {{ $gettext('Settings') }}
                             </a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="#metadata" data-toggle="tab">
+                            <a
+                                class="nav-link"
+                                href="#metadata"
+                                data-toggle="tab"
+                            >
                                 {{ $gettext('Metadata') }}
                             </a>
                         </li>
@@ -27,70 +35,157 @@
             <div class="form-row">
                 <div class="col-sm-12">
                     <div class="tab-content mt-1">
-                        <div class="tab-pane active" id="settings">
+                        <div
+                            id="settings"
+                            class="tab-pane active"
+                        >
                             <div class="form-group">
                                 <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">
+                                        <input
+                                            id="encoder_mp3"
+                                            v-model="encoder"
+                                            type="radio"
+                                            value="mp3"
+                                            class="custom-control-input"
+                                        >
+                                        <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">
+                                        <input
+                                            id="encoder_raw"
+                                            v-model="encoder"
+                                            type="radio"
+                                            value="raw"
+                                            class="custom-control-input"
+                                        >
+                                        <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">
+                                <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>
-                                        <option value="11025">11.025 kHz</option>
-                                        <option value="12000">12 kHz</option>
-                                        <option value="16000">16 kHz</option>
-                                        <option value="22050">22.05 kHz</option>
-                                        <option value="24000">24 kHz</option>
-                                        <option value="32000">32 kHz</option>
-                                        <option value="44100">44.1 kHz</option>
-                                        <option value="48000">48 kHz</option>
+                                    <select
+                                        id="select_samplerate"
+                                        v-model.number="samplerate"
+                                        class="form-control"
+                                    >
+                                        <option value="8000">
+                                            8 kHz
+                                        </option>
+                                        <option value="11025">
+                                            11.025 kHz
+                                        </option>
+                                        <option value="12000">
+                                            12 kHz
+                                        </option>
+                                        <option value="16000">
+                                            16 kHz
+                                        </option>
+                                        <option value="22050">
+                                            22.05 kHz
+                                        </option>
+                                        <option value="24000">
+                                            24 kHz
+                                        </option>
+                                        <option value="32000">
+                                            32 kHz
+                                        </option>
+                                        <option value="44100">
+                                            44.1 kHz
+                                        </option>
+                                        <option value="48000">
+                                            48 kHz
+                                        </option>
                                     </select>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="select_bitrate" class="mb-2">
+                                <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>
-                                        <option value="16">16 kbps</option>
-                                        <option value="24">24 kbps</option>
-                                        <option value="32">32 kbps</option>
-                                        <option value="40">40 kbps</option>
-                                        <option value="48">48 kbps</option>
-                                        <option value="56">56 kbps</option>
-                                        <option value="64">64 kbps</option>
-                                        <option value="80">80 kbps</option>
-                                        <option value="96">96 kbps</option>
-                                        <option value="112">112 kbps</option>
-                                        <option value="128">128 kbps</option>
-                                        <option value="144">144 kbps</option>
-                                        <option value="160">160 kbps</option>
-                                        <option value="192">192 kbps</option>
-                                        <option value="224">224 kbps</option>
-                                        <option value="256">256 kbps</option>
-                                        <option value="320">320 kbps</option>
+                                    <select
+                                        id="select_bitrate"
+                                        v-model.number="bitrate"
+                                        class="form-control"
+                                    >
+                                        <option value="8">
+                                            8 kbps
+                                        </option>
+                                        <option value="16">
+                                            16 kbps
+                                        </option>
+                                        <option value="24">
+                                            24 kbps
+                                        </option>
+                                        <option value="32">
+                                            32 kbps
+                                        </option>
+                                        <option value="40">
+                                            40 kbps
+                                        </option>
+                                        <option value="48">
+                                            48 kbps
+                                        </option>
+                                        <option value="56">
+                                            56 kbps
+                                        </option>
+                                        <option value="64">
+                                            64 kbps
+                                        </option>
+                                        <option value="80">
+                                            80 kbps
+                                        </option>
+                                        <option value="96">
+                                            96 kbps
+                                        </option>
+                                        <option value="112">
+                                            112 kbps
+                                        </option>
+                                        <option value="128">
+                                            128 kbps
+                                        </option>
+                                        <option value="144">
+                                            144 kbps
+                                        </option>
+                                        <option value="160">
+                                            160 kbps
+                                        </option>
+                                        <option value="192">
+                                            192 kbps
+                                        </option>
+                                        <option value="224">
+                                            224 kbps
+                                        </option>
+                                        <option value="256">
+                                            256 kbps
+                                        </option>
+                                        <option value="320">
+                                            320 kbps
+                                        </option>
                                     </select>
                                 </div>
                             </div>
@@ -101,47 +196,84 @@
 
                                 <div class="form-row">
                                     <div class="col-6">
-                                        <input type="text" v-model="djUsername" class="form-control"
-                                               v-bind:placeholder="langDjUsername">
+                                        <input
+                                            v-model="djUsername"
+                                            type="text"
+                                            class="form-control"
+                                            :placeholder="langDjUsername"
+                                        >
                                     </div>
                                     <div class="col-6">
-                                        <input type="password" v-model="djPassword" class="form-control"
-                                               v-bind:placeholder="langDjPassword">
+                                        <input
+                                            v-model="djPassword"
+                                            type="password"
+                                            class="form-control"
+                                            :placeholder="langDjPassword"
+                                        >
                                     </div>
                                 </div>
                             </div>
                             <div class="form-group mb-0">
                                 <div class="custom-control custom-checkbox">
-                                    <input id="use_async_worker" type="checkbox" v-model="asynchronous"
-                                           class="custom-control-input">
-                                    <label for="use_async_worker" class="custom-control-label">
+                                    <input
+                                        id="use_async_worker"
+                                        v-model="asynchronous"
+                                        type="checkbox"
+                                        class="custom-control-input"
+                                    >
+                                    <label
+                                        for="use_async_worker"
+                                        class="custom-control-label"
+                                    >
                                         {{ $gettext('Use Asynchronous Worker') }}
                                     </label>
                                 </div>
                             </div>
                         </div>
-                        <div class="tab-pane" id="metadata">
+                        <div
+                            id="metadata"
+                            class="tab-pane"
+                        >
                             <div class="form-group">
-                                <label for="metadata_title" class="mb-2">
+                                <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">
+                                    <input
+                                        id="metadata_title"
+                                        v-model="metadata.title"
+                                        class="form-control"
+                                        type="text"
+                                        :disabled="!isStreaming"
+                                    >
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label for="metadata_artist" class="mb-2">
+                                <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">
+                                    <input
+                                        id="metadata_artist"
+                                        v-model="metadata.artist"
+                                        class="form-control"
+                                        type="text"
+                                        :disabled="!isStreaming"
+                                    >
                                 </div>
                             </div>
                             <div class="form-group">
-                                <button class="btn btn-primary" v-on:click="updateMetadata"
-                                        v-bind:disabled="!isStreaming">
+                                <button
+                                    class="btn btn-primary"
+                                    :disabled="!isStreaming"
+                                    @click="updateMetadata"
+                                >
                                     {{ $gettext('Update Metadata') }}
                                 </button>
                             </div>
@@ -152,13 +284,25 @@
         </div>
 
         <div class="card-actions">
-            <button class="btn btn-success" v-on:click="startStreaming" v-if="!isStreaming">
+            <button
+                v-if="!isStreaming"
+                class="btn btn-success"
+                @click="startStreaming"
+            >
                 {{ langStreamButton }}
             </button>
-            <button class="btn btn-danger" v-on:click="stopStreaming" v-if="isStreaming">
+            <button
+                v-if="isStreaming"
+                class="btn btn-danger"
+                @click="stopStreaming"
+            >
                 {{ langStreamButton }}
             </button>
-            <button class="btn" v-on:click="cue" v-bind:class="{ 'btn-primary': passThrough }">
+            <button
+                class="btn"
+                :class="{ 'btn-primary': passThrough }"
+                @click="cue"
+            >
                 {{ $gettext('Cue') }}
             </button>
         </div>
@@ -168,6 +312,11 @@
 <script>
 export default {
     inject: ['getStream', 'resumeStream'],
+    props: {
+        stationName: String,
+        libUrls: Array,
+        baseUri: String
+    },
     data () {
         return {
             'isStreaming': false,
@@ -200,11 +349,6 @@ export default {
             return 'wss://' + this.djUsername + ':' + this.djPassword + '@' + this.baseUri;
         }
     },
-    props: {
-        stationName: String,
-        libUrls: Array,
-        baseUri: String
-    },
     mounted () {
         this.$root.$on('new-cue', this.onNewCue);
         this.$root.$on('metadata-update', this.onMetadataUpdate);
diff --git a/frontend/vue/components/Public/WebDJ/VolumeSlider.vue b/frontend/vue/components/Public/WebDJ/VolumeSlider.vue
index 6706265a6..79bafd3ee 100644
--- a/frontend/vue/components/Public/WebDJ/VolumeSlider.vue
+++ b/frontend/vue/components/Public/WebDJ/VolumeSlider.vue
@@ -1,14 +1,21 @@
 <template>
     <div class="d-flex flex-row align-items-center">
         <div class="flex-shrink-0">
-            <icon icon="volume_mute"></icon>
+            <icon icon="volume_mute" />
         </div>
         <div class="flex-fill px-2">
-            <input type="range" min="0" max="100" class="custom-range slider"
-                   v-model.number="volume" @click.right.prevent="reset" style="height: 10px; width: 100px;">
+            <input
+                v-model.number="volume"
+                type="range"
+                min="0"
+                max="100"
+                class="custom-range slider"
+                style="height: 10px; width: 100px;"
+                @click.right.prevent="reset"
+            >
         </div>
         <div class="flex-shrink-0">
-            <icon icon="volume_up"></icon>
+            <icon icon="volume_up" />
         </div>
     </div>
 </template>
diff --git a/frontend/vue/components/Recover.vue b/frontend/vue/components/Recover.vue
index a62274411..b46123811 100644
--- a/frontend/vue/components/Recover.vue
+++ b/frontend/vue/components/Recover.vue
@@ -13,21 +13,49 @@
                     </h3>
                 </div>
 
-                <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+                <b-alert
+                    variant="danger"
+                    :show="error != null"
+                >
+                    {{ error }}
+                </b-alert>
 
-                <form id="recover-form" class="form vue-form" action="" method="post">
-                    <input type="hidden" name="csrf" :value="csrf"/>
+                <form
+                    id="recover-form"
+                    class="form vue-form"
+                    action=""
+                    method="post"
+                >
+                    <input
+                        type="hidden"
+                        name="csrf"
+                        :value="csrf"
+                    >
 
-                    <b-wrapped-form-group id="password" name="password" label-class="mb-2" :field="v$.password"
-                                          input-type="password">
+                    <b-wrapped-form-group
+                        id="password"
+                        name="password"
+                        label-class="mb-2"
+                        :field="v$.password"
+                        input-type="password"
+                    >
                         <template #label>
-                            <icon icon="vpn_key" class="mr-1"></icon>
+                            <icon
+                                icon="vpn_key"
+                                class="mr-1"
+                            />
                             {{ $gettext('Password') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-button type="submit" size="lg" block variant="primary" :disabled="v$.$invalid"
-                              class="mt-2">
+                    <b-button
+                        type="submit"
+                        size="lg"
+                        block
+                        variant="primary"
+                        :disabled="v$.$invalid"
+                        class="mt-2"
+                    >
                         {{ $gettext('Recover Account') }}
                     </b-button>
                 </form>
diff --git a/frontend/vue/components/Setup/Register.vue b/frontend/vue/components/Setup/Register.vue
index 25607f0ef..82d70ad77 100644
--- a/frontend/vue/components/Setup/Register.vue
+++ b/frontend/vue/components/Setup/Register.vue
@@ -28,29 +28,65 @@
                     </div>
                 </div>
 
-                <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
+                <b-alert
+                    variant="danger"
+                    :show="error != null"
+                >
+                    {{ error }}
+                </b-alert>
 
-                <form id="login-form" class="form vue-form" action="" method="post">
-                    <input type="hidden" name="csrf" :value="csrf"/>
+                <form
+                    id="login-form"
+                    class="form vue-form"
+                    action=""
+                    method="post"
+                >
+                    <input
+                        type="hidden"
+                        name="csrf"
+                        :value="csrf"
+                    >
 
-                    <b-wrapped-form-group id="username" name="username" label-class="mb-2" :field="v$.username"
-                                          input-type="email">
+                    <b-wrapped-form-group
+                        id="username"
+                        name="username"
+                        label-class="mb-2"
+                        :field="v$.username"
+                        input-type="email"
+                    >
                         <template #label>
-                            <icon icon="email" class="mr-1"></icon>
+                            <icon
+                                icon="email"
+                                class="mr-1"
+                            />
                             {{ $gettext('E-mail Address') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group id="password" name="password" label-class="mb-2" :field="v$.password"
-                                          input-type="password">
+                    <b-wrapped-form-group
+                        id="password"
+                        name="password"
+                        label-class="mb-2"
+                        :field="v$.password"
+                        input-type="password"
+                    >
                         <template #label>
-                            <icon icon="vpn_key" class="mr-1"></icon>
+                            <icon
+                                icon="vpn_key"
+                                class="mr-1"
+                            />
                             {{ $gettext('Password') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-button type="submit" size="lg" block variant="primary" :disabled="v$.$invalid"
-                              class="mt-2">
+                    <b-button
+                        type="submit"
+                        size="lg"
+                        block
+                        variant="primary"
+                        :disabled="v$.$invalid"
+                        class="mt-2"
+                    >
                         {{ $gettext('Create Account') }}
                     </b-button>
                 </form>
diff --git a/frontend/vue/components/Setup/Settings.vue b/frontend/vue/components/Setup/Settings.vue
index 7a7fa3735..625cd3e3e 100644
--- a/frontend/vue/components/Setup/Settings.vue
+++ b/frontend/vue/components/Setup/Settings.vue
@@ -1,7 +1,11 @@
 <template>
-    <admin-settings :api-url="apiUrl" :release-channel="releaseChannel" @saved="onSaved">
+    <admin-settings
+        :api-url="apiUrl"
+        :release-channel="releaseChannel"
+        @saved="onSaved"
+    >
         <template #preCard>
-            <setup-step :step="3"></setup-step>
+            <setup-step :step="3" />
         </template>
         <template #cardTitle>
             {{ $gettext('Customize AzuraCast Settings') }}
diff --git a/frontend/vue/components/Setup/SetupStep.vue b/frontend/vue/components/Setup/SetupStep.vue
index c307e94f6..77d7ec2e3 100644
--- a/frontend/vue/components/Setup/SetupStep.vue
+++ b/frontend/vue/components/Setup/SetupStep.vue
@@ -2,7 +2,10 @@
     <div class="stepper-horiz">
         <div :class="getStepperClass(1)">
             <div class="stepper-icon">
-                <icon v-if="step > 1" icon="check"></icon>
+                <icon
+                    v-if="step > 1"
+                    icon="check"
+                />
                 <span v-else>1</span>
             </div>
             <span class="stepper-text">
@@ -11,7 +14,10 @@
         </div>
         <div :class="getStepperClass(2)">
             <div class="stepper-icon">
-                <icon v-if="step > 2" icon="check"></icon>
+                <icon
+                    v-if="step > 2"
+                    icon="check"
+                />
                 <span v-else>2</span>
             </div>
             <span class="stepper-text">
diff --git a/frontend/vue/components/Setup/Station.vue b/frontend/vue/components/Setup/Station.vue
index cea6b0dac..69cfde9ee 100644
--- a/frontend/vue/components/Setup/Station.vue
+++ b/frontend/vue/components/Setup/Station.vue
@@ -1,5 +1,5 @@
 <template>
-    <setup-step :step="2"></setup-step>
+    <setup-step :step="2" />
 
     <b-card no-body>
         <div class="card-header bg-primary-dark">
@@ -14,8 +14,13 @@
             }}
         </info-card>
 
-        <admin-stations-form v-bind="$props" ref="$adminForm" :is-edit-mode="false" :create-url="createUrl"
-                             @submitted="onSubmitted">
+        <admin-stations-form
+            v-bind="$props"
+            ref="$adminForm"
+            :is-edit-mode="false"
+            :create-url="createUrl"
+            @submitted="onSubmitted"
+        >
             <template #submitButtonText>
                 {{ $gettext('Create and Continue') }}
             </template>
diff --git a/frontend/vue/components/Stations/BulkMedia.vue b/frontend/vue/components/Stations/BulkMedia.vue
index eda638b55..00c6096fd 100644
--- a/frontend/vue/components/Stations/BulkMedia.vue
+++ b/frontend/vue/components/Stations/BulkMedia.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="row">
         <div class="col-md-6">
-            <section class="card" role="region">
+            <section
+                class="card"
+                role="region"
+            >
                 <div class="card-header bg-primary-dark">
                     <h2 class="card-title">
                         {{ $gettext('Export Media to CSV') }}
@@ -21,7 +24,12 @@
                     </p>
 
                     <div class="buttons">
-                        <b-button variant="primary" size="lg" block :href="apiUrl">
+                        <b-button
+                            variant="primary"
+                            size="lg"
+                            block
+                            :href="apiUrl"
+                        >
                             {{ $gettext('Export Media to CSV') }}
                         </b-button>
                     </div>
@@ -29,7 +37,10 @@
             </section>
         </div>
         <div class="col-md-6">
-            <section class="card" role="region">
+            <section
+                class="card"
+                role="region"
+            >
                 <div class="card-header bg-primary-dark">
                     <h2 class="card-title">
                         {{ $gettext('Import Changes from CSV') }}
@@ -43,28 +54,49 @@
                         }}
                     </p>
 
-                    <b-form class="form" @submit.prevent="doSubmit">
+                    <b-form
+                        class="form"
+                        @submit.prevent="doSubmit"
+                    >
                         <b-form-group label-for="import_file">
                             <template #label>
                                 {{ $gettext('Select CSV File') }}
                             </template>
-                            <b-form-file id="import_modal_playlist_file" v-model="importFile"></b-form-file>
+                            <b-form-file
+                                id="import_modal_playlist_file"
+                                v-model="importFile"
+                            />
                         </b-form-group>
 
-                        <b-button type="submit" size="lg" block variant="primary" class="mt-2">
+                        <b-button
+                            type="submit"
+                            size="lg"
+                            block
+                            variant="primary"
+                            class="mt-2"
+                        >
                             {{ $gettext('Import Changes from CSV') }}
                         </b-button>
-
                     </b-form>
                 </div>
             </section>
         </div>
 
-        <b-modal id="import_modal" ref="modal" :title="$gettext('Import Results')">
+        <b-modal
+            id="import_modal"
+            ref="modal"
+            :title="$gettext('Import Results')"
+        >
             <div>
-                <p class="card-text">{{ importResults.message }}</p>
+                <p class="card-text">
+                    {{ importResults.message }}
+                </p>
 
-                <b-table-simple striped responsive style="max-height: 300px; overflow-y: scroll;">
+                <b-table-simple
+                    striped
+                    responsive
+                    style="max-height: 300px; overflow-y: scroll;"
+                >
                     <b-thead>
                         <b-tr>
                             <b-th class="p-2">
@@ -76,12 +108,21 @@
                         </b-tr>
                     </b-thead>
                     <b-tbody>
-                        <b-tr v-for="row in importResults.import_results" :key="row.id">
-                            <b-td class="p-2" style="overflow-x: auto;">
+                        <b-tr
+                            v-for="row in importResults.import_results"
+                            :key="row.id"
+                        >
+                            <b-td
+                                class="p-2"
+                                style="overflow-x: auto;"
+                            >
                                 <b>{{ row.title }}</b><br>
                                 {{ row.artist }}
                             </b-td>
-                            <b-td class="p-2" style="overflow-x: auto;">
+                            <b-td
+                                class="p-2"
+                                style="overflow-x: auto;"
+                            >
                                 <template v-if="row.success">
                                     <div class="text-success">
                                         {{ $gettext('Updated successfully.') }}
@@ -101,7 +142,11 @@
                 </b-table-simple>
             </div>
             <template #modal-footer>
-                <b-button variant="default" type="button" @click="closeModal">
+                <b-button
+                    variant="default"
+                    type="button"
+                    @click="closeModal"
+                >
                     {{ $gettext('Close') }}
                 </b-button>
             </template>
diff --git a/frontend/vue/components/Stations/Common/Quota.vue b/frontend/vue/components/Stations/Common/Quota.vue
index 3829de63e..a2d945786 100644
--- a/frontend/vue/components/Stations/Common/Quota.vue
+++ b/frontend/vue/components/Stations/Common/Quota.vue
@@ -1,8 +1,16 @@
 <template>
-    <div v-if="!loading" style="line-height: 1;">
+    <div
+        v-if="!loading"
+        style="line-height: 1;"
+    >
         <template v-if="quota.available">
-            <b-progress :value="quota.used_percent" :variant="progressVariant" show-progress
-                        height="15px" class="mb-1"></b-progress>
+            <b-progress
+                :value="quota.used_percent"
+                :variant="progressVariant"
+                show-progress
+                height="15px"
+                class="mb-1"
+            />
 
             {{ langSpaceUsed }}
         </template>
@@ -17,13 +25,13 @@ import mergeExisting from "~/functions/mergeExisting";
 
 export default {
     name: 'StationsCommonQuota',
-    emits: ['updated'],
     props: {
         quotaUrl: {
             type: String,
             required: true
         }
     },
+    emits: ['updated'],
     data() {
         return {
             loading: true,
@@ -40,9 +48,6 @@ export default {
             },
         }
     },
-    mounted() {
-        this.update();
-    },
     computed: {
         progressVariant() {
             if (this.quota.used_percent > 85) {
@@ -72,6 +77,9 @@ export default {
             return langParsed;
         },
     },
+    mounted() {
+        this.update();
+    },
     methods: {
         update() {
             this.axios.get(this.quotaUrl)
diff --git a/frontend/vue/components/Stations/Fallback.vue b/frontend/vue/components/Stations/Fallback.vue
index b6165594b..56eca360c 100644
--- a/frontend/vue/components/Stations/Fallback.vue
+++ b/frontend/vue/components/Stations/Fallback.vue
@@ -1,5 +1,8 @@
 <template>
-    <section class="card" role="region">
+    <section
+        class="card"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <h2 class="card-title">
                 {{ $gettext('Custom Fallback File') }}
@@ -15,13 +18,19 @@
         <div class="card-body">
             <b-form-group>
                 <div class="form-row">
-                    <b-form-group class="col-md-6" label-for="intro_file">
+                    <b-form-group
+                        class="col-md-6"
+                        label-for="intro_file"
+                    >
                         <template #label>
                             {{ $gettext('Select Custom Fallback File') }}
                         </template>
 
-                        <flow-upload :target-url="apiUrl" :valid-mime-types="['audio/*']"
-                                     @success="onFileSuccess"></flow-upload>
+                        <flow-upload
+                            :target-url="apiUrl"
+                            :valid-mime-types="['audio/*']"
+                            @success="onFileSuccess"
+                        />
                     </b-form-group>
 
                     <b-form-group class="col-md-6">
@@ -31,11 +40,19 @@
 
                         <div v-if="hasFallback">
                             <div class="buttons pt-3">
-                                <b-button block variant="bg" :href="apiUrl"
-                                          target="_blank">
+                                <b-button
+                                    block
+                                    variant="bg"
+                                    :href="apiUrl"
+                                    target="_blank"
+                                >
                                     {{ $gettext('Download') }}
                                 </b-button>
-                                <b-button block variant="danger" @click="deleteFallback">
+                                <b-button
+                                    block
+                                    variant="danger"
+                                    @click="deleteFallback"
+                                >
                                     {{ $gettext('Clear File') }}
                                 </b-button>
                             </div>
diff --git a/frontend/vue/components/Stations/Help.vue b/frontend/vue/components/Stations/Help.vue
index b627d003e..c08fd2bf5 100644
--- a/frontend/vue/components/Stations/Help.vue
+++ b/frontend/vue/components/Stations/Help.vue
@@ -8,10 +8,13 @@
                     </h2>
                 </div>
 
-                <log-list :url="logsUrl" @view="viewLog"></log-list>
+                <log-list
+                    :url="logsUrl"
+                    @view="viewLog"
+                />
             </div>
 
-            <streaming-log-modal ref="$modal"></streaming-log-modal>
+            <streaming-log-modal ref="$modal" />
         </div>
         <div class="col-md-4">
             <div class="card">
@@ -25,7 +28,10 @@
                         {{ $gettext('You can find answers for many common questions in our support documents.') }}
                     </p>
                     <p class="card-text">
-                        <a href="https://docs.azuracast.com/en/user-guide/troubleshooting" target="_blank">
+                        <a
+                            href="https://docs.azuracast.com/en/user-guide/troubleshooting"
+                            target="_blank"
+                        >
                             {{ $gettext('Support Documents') }}
                         </a>
                     </p>
@@ -36,9 +42,13 @@
                     </p>
                 </div>
                 <div class="card-actions">
-                    <a class="btn btn-outline-primary" role="button"
-                       href="https://github.com/AzuraCast/AzuraCast/issues/new/choose" target="_blank">
-                        <icon icon="contact_support"></icon>
+                    <a
+                        class="btn btn-outline-primary"
+                        role="button"
+                        href="https://github.com/AzuraCast/AzuraCast/issues/new/choose"
+                        target="_blank"
+                    >
+                        <icon icon="contact_support" />
                         {{ $gettext('Add New GitHub Issue') }}
                     </a>
                 </div>
diff --git a/frontend/vue/components/Stations/HlsStreams.vue b/frontend/vue/components/Stations/HlsStreams.vue
index d7f2e5843..046d26d78 100644
--- a/frontend/vue/components/Stations/HlsStreams.vue
+++ b/frontend/vue/components/Stations/HlsStreams.vue
@@ -1,7 +1,9 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('HLS Streams') }}</h2>
+            <h2 class="card-title">
+                {{ $gettext('HLS Streams') }}
+            </h2>
         </b-card-header>
 
         <info-card>
@@ -13,16 +15,26 @@
         </info-card>
 
         <b-card-body body-class="card-padding-sm">
-            <b-button variant="outline-primary" @click.prevent="doCreate">
-                <icon icon="add"></icon>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add HLS Stream') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="$dataTable" id="station_hls_streams" :fields="fields" paginated
-                    :api-url="listUrl">
+        <data-table
+            id="station_hls_streams"
+            ref="$dataTable"
+            :fields="fields"
+            paginated
+            :api-url="listUrl"
+        >
             <template #cell(name)="row">
-                <h5 class="m-0">{{ row.item.name }}</h5>
+                <h5 class="m-0">
+                    {{ row.item.name }}
+                </h5>
             </template>
             <template #cell(format)="row">
                 {{ upper(row.item.format) }}
@@ -32,10 +44,18 @@
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -43,7 +63,12 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="$editModal" :create-url="listUrl" @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
+    <edit-modal
+        ref="$editModal"
+        :create-url="listUrl"
+        @relist="relist"
+        @needs-restart="mayNeedRestart"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Stations/HlsStreams/EditModal.vue b/frontend/vue/components/Stations/HlsStreams/EditModal.vue
index 0569fb785..8cde8bb21 100644
--- a/frontend/vue/components/Stations/HlsStreams/EditModal.vue
+++ b/frontend/vue/components/Stations/HlsStreams/EditModal.vue
@@ -1,8 +1,18 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-        <b-tabs content-class="mt-3" pills>
-            <form-basic-info :form="v$"></form-basic-info>
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <form-basic-info :form="v$" />
         </b-tabs>
     </modal-form>
 </template>
@@ -16,6 +26,8 @@ import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 
 export default {
     name: 'EditModal',
+    components: {FormBasicInfo},
+    mixins: [BaseEditModal],
     emits: ['needs-restart'],
     setup() {
         const {form, resetForm, v$} = useVuelidateOnForm(
@@ -37,8 +49,6 @@ export default {
             v$
         }
     },
-    mixins: [BaseEditModal],
-    components: {FormBasicInfo},
     computed: {
         langTitle() {
             return this.isEditMode
diff --git a/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue b/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue
index da5bd0c85..07d12c3f2 100644
--- a/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/HlsStreams/Form/BasicInfo.vue
@@ -1,8 +1,15 @@
 <template>
-    <b-tab :title="$gettext('Basic Info')" active>
+    <b-tab
+        :title="$gettext('Basic Info')"
+        active
+    >
         <b-form-group>
             <div class="form-row mb-3">
-                <b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
+                <b-wrapped-form-group
+                    id="edit_form_name"
+                    class="col-md-12"
+                    :field="form.name"
+                >
                     <template #label>
                         {{ $gettext('Programmatic Name') }}
                     </template>
@@ -13,32 +20,40 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_format" :field="form.format">
+                <b-wrapped-form-group
+                    id="edit_form_format"
+                    class="col-md-6"
+                    :field="form.format"
+                >
                     <template #label>
                         {{ $gettext('Audio Format') }}
                     </template>
                     <template #default="props">
                         <b-form-radio-group
-                            stacked
                             :id="props.id"
-                            :state="props.state"
                             v-model="props.field.$model"
+                            stacked
+                            :state="props.state"
                             :options="formatOptions"
-                        ></b-form-radio-group>
+                        />
                     </template>
                 </b-wrapped-form-group>
-                <b-wrapped-form-group class="col-md-6" id="edit_form_bitrate" :field="form.bitrate">
+                <b-wrapped-form-group
+                    id="edit_form_bitrate"
+                    class="col-md-6"
+                    :field="form.bitrate"
+                >
                     <template #label>
                         {{ $gettext('Audio Bitrate (kbps)') }}
                     </template>
                     <template #default="props">
                         <b-form-radio-group
-                            stacked
                             :id="props.id"
-                            :state="props.state"
                             v-model="props.field.$model"
+                            stacked
+                            :state="props.state"
                             :options="bitrateOptions"
-                        ></b-form-radio-group>
+                        />
                     </template>
                 </b-wrapped-form-group>
             </div>
diff --git a/frontend/vue/components/Stations/LiquidsoapConfig.vue b/frontend/vue/components/Stations/LiquidsoapConfig.vue
index 61fea0196..039262714 100644
--- a/frontend/vue/components/Stations/LiquidsoapConfig.vue
+++ b/frontend/vue/components/Stations/LiquidsoapConfig.vue
@@ -1,6 +1,12 @@
 <template>
-    <form class="form vue-form" @submit.prevent="submit">
-        <section class="card" role="region">
+    <form
+        class="form vue-form"
+        @submit.prevent="submit"
+    >
+        <section
+            class="card"
+            role="region"
+        >
             <div class="card-header bg-primary-dark">
                 <h2 class="card-title">
                     {{ $gettext('Edit Liquidsoap Configuration') }}
@@ -25,19 +31,36 @@
                 </p>
             </info-card>
 
-            <b-overlay variant="card" :show="loading">
+            <b-overlay
+                variant="card"
+                :show="loading"
+            >
                 <div class="card-body">
-                    <b-form-fieldset v-for="(row, index) in config" :key="index" class="mb-0">
-                        <b-wrapped-form-group v-if="row.is_field" :field="v$[row.field_name]"
-                                              :id="'form_edit_'+row.field_name" input-type="textarea"
-                                              :input-attrs="{class: 'text-preformatted mb-3', spellcheck: 'false', 'max-rows': 20, rows: 5}">
-                        </b-wrapped-form-group>
-                        <b-form-markup v-else :id="'form_section_'+index">
+                    <b-form-fieldset
+                        v-for="(row, index) in config"
+                        :key="index"
+                        class="mb-0"
+                    >
+                        <b-wrapped-form-group
+                            v-if="row.is_field"
+                            :id="'form_edit_'+row.field_name"
+                            :field="v$[row.field_name]"
+                            input-type="textarea"
+                            :input-attrs="{class: 'text-preformatted mb-3', spellcheck: 'false', 'max-rows': 20, rows: 5}"
+                        />
+                        <b-form-markup
+                            v-else
+                            :id="'form_section_'+index"
+                        >
                             <pre class="typography-body-1">{{ row.markup }}</pre>
                         </b-form-markup>
                     </b-form-fieldset>
 
-                    <b-button size="lg" type="submit" :variant="(v$.$invalid) ? 'danger' : 'primary'">
+                    <b-button
+                        size="lg"
+                        type="submit"
+                        :variant="(v$.$invalid) ? 'danger' : 'primary'"
+                    >
                         {{ $gettext('Save Changes') }}
                     </b-button>
                 </div>
diff --git a/frontend/vue/components/Stations/Media.vue b/frontend/vue/components/Stations/Media.vue
index 21f550497..2dc58366e 100644
--- a/frontend/vue/components/Stations/Media.vue
+++ b/frontend/vue/components/Stations/Media.vue
@@ -9,15 +9,28 @@
                                 {{ $gettext('Music Files') }}
                             </h2>
                         </b-col>
-                        <b-col md="5" class="text-right text-white-50">
-                            <stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota>
+                        <b-col
+                            md="5"
+                            class="text-right text-white-50"
+                        >
+                            <stations-common-quota
+                                ref="quota"
+                                :quota-url="quotaUrl"
+                            />
                         </b-col>
                     </b-row>
                 </b-card-header>
 
-                <div v-if="showSftp" class="card-body alert-info d-flex align-items-center" role="alert">
+                <div
+                    v-if="showSftp"
+                    class="card-body alert-info d-flex align-items-center"
+                    role="alert"
+                >
                     <div class="flex-shrink-0 mr-2">
-                        <i class="material-icons" aria-hidden="true">info</i>
+                        <i
+                            class="material-icons"
+                            aria-hidden="true"
+                        >info</i>
                     </div>
                     <div class="flex-fill">
                         <p class="mb-0">
@@ -25,64 +38,111 @@
                         </p>
                     </div>
                     <div class="flex-shrink-0 ml-2">
-                        <a class="btn btn-sm btn-light" target="_blank" :href="sftpUrl">
+                        <a
+                            class="btn btn-sm btn-light"
+                            target="_blank"
+                            :href="sftpUrl"
+                        >
                             {{ $gettext('Manage SFTP Accounts') }}
                         </a>
                     </div>
                 </div>
 
                 <div class="card-body">
-                    <breadcrumb :current-directory="currentDirectory" @change-directory="changeDirectory"></breadcrumb>
+                    <breadcrumb
+                        :current-directory="currentDirectory"
+                        @change-directory="changeDirectory"
+                    />
 
-                    <file-upload :upload-url="uploadUrl" :search-phrase="searchPhrase"
-                                 :valid-mime-types="validMimeTypes"
-                                 :current-directory="currentDirectory" @relist="onTriggerRelist"></file-upload>
+                    <file-upload
+                        :upload-url="uploadUrl"
+                        :search-phrase="searchPhrase"
+                        :valid-mime-types="validMimeTypes"
+                        :current-directory="currentDirectory"
+                        @relist="onTriggerRelist"
+                    />
 
-                    <media-toolbar :batch-url="batchUrl" :selected-items="selectedItems"
-                                   :current-directory="currentDirectory"
-                                   :supports-immediate-queue="supportsImmediateQueue"
-                                   :playlists="playlists" @add-playlist="onAddPlaylist"
-                                   @relist="onTriggerRelist"></media-toolbar>
+                    <media-toolbar
+                        :batch-url="batchUrl"
+                        :selected-items="selectedItems"
+                        :current-directory="currentDirectory"
+                        :supports-immediate-queue="supportsImmediateQueue"
+                        :playlists="playlists"
+                        @add-playlist="onAddPlaylist"
+                        @relist="onTriggerRelist"
+                    />
                 </div>
 
-                <data-table ref="datatable" id="station_media" selectable paginated select-fields
-                            @row-selected="onRowSelected" :fields="fields" :api-url="listUrl"
-                            :request-config="requestConfig">
+                <data-table
+                    id="station_media"
+                    ref="datatable"
+                    selectable
+                    paginated
+                    select-fields
+                    :fields="fields"
+                    :api-url="listUrl"
+                    :request-config="requestConfig"
+                    @row-selected="onRowSelected"
+                >
                     <template #cell(path)="row">
                         <div class="d-flex align-items-center">
                             <div class="flex-shrink-0 pr-2">
                                 <template v-if="row.item.media.is_playable">
-                                    <play-button :url="row.item.media.links.play" icon-class="outlined"></play-button>
+                                    <play-button
+                                        :url="row.item.media.links.play"
+                                        icon-class="outlined"
+                                    />
                                 </template>
                                 <template v-else>
-                                    <span class="file-icon" v-if="row.item.is_dir">
-                                        <icon icon="folder"></icon>
+                                    <span
+                                        v-if="row.item.is_dir"
+                                        class="file-icon"
+                                    >
+                                        <icon icon="folder" />
                                     </span>
-                                    <span class="file-icon" v-else-if="row.item.is_cover_art">
-                                        <icon icon="photo"></icon>
+                                    <span
+                                        v-else-if="row.item.is_cover_art"
+                                        class="file-icon"
+                                    >
+                                        <icon icon="photo" />
                                     </span>
-                                    <span class="file-icon" v-else>
-                                        <icon icon="note"></icon>
+                                    <span
+                                        v-else
+                                        class="file-icon"
+                                    >
+                                        <icon icon="note" />
                                     </span>
                                 </template>
                             </div>
 
                             <div class="flex-fill">
                                 <template v-if="row.item.is_dir">
-                                    <a class="name" href="#" @click.prevent="changeDirectory(row.item.path)"
-                                       :title="row.item.name">
+                                    <a
+                                        class="name"
+                                        href="#"
+                                        :title="row.item.name"
+                                        @click.prevent="changeDirectory(row.item.path)"
+                                    >
                                         {{ row.item.path_short }}
                                     </a>
                                 </template>
                                 <template v-else-if="row.item.media.is_playable">
-                                    <a class="name" :href="row.item.media.links.play" target="_blank"
-                                       :title="row.item.name">
+                                    <a
+                                        class="name"
+                                        :href="row.item.media.links.play"
+                                        target="_blank"
+                                        :title="row.item.name"
+                                    >
                                         {{ row.item.text }}
                                     </a>
                                 </template>
                                 <template v-else>
-                                    <a class="name" :href="row.item.links.download" target="_blank"
-                                       :title="row.item.text">
+                                    <a
+                                        class="name"
+                                        :href="row.item.links.download"
+                                        target="_blank"
+                                        :title="row.item.text"
+                                    >
                                         {{ row.item.path_short }}
                                     </a>
                                 </template>
@@ -91,37 +151,56 @@
                                 <small v-else>{{ row.item.text }}</small>
                             </div>
 
-                            <album-art v-if="row.item.media.art" :src="row.item.media.art"
-                                       class="flex-shrink-1 pl-2"></album-art>
-                            <album-art v-else-if="row.item.is_cover_art" :src="row.item.links.download"
-                                       class="flex-shrink-1 pl-2"></album-art>
+                            <album-art
+                                v-if="row.item.media.art"
+                                :src="row.item.media.art"
+                                class="flex-shrink-1 pl-2"
+                            />
+                            <album-art
+                                v-else-if="row.item.is_cover_art"
+                                :src="row.item.links.download"
+                                class="flex-shrink-1 pl-2"
+                            />
                         </div>
                     </template>
                     <template #cell(media.length)="row">
                         {{ row.item.media.length_text }}
                     </template>
                     <template #cell(size)="row">
-                        <template v-if="!row.item.size">&nbsp;</template>
+                        <template v-if="!row.item.size">
+&nbsp;
+                        </template>
                         <template v-else>
                             {{ formatFileSize(row.item.size) }}
                         </template>
                     </template>
                     <template #cell(playlists)="row">
                         <template v-for="(playlist, index) in row.item.playlists">
-                            <a class="btn-search" href="#" @click.prevent="filter('playlist:'+playlist.name)"
-                               :title="$gettext('View tracks in playlist')">{{ playlist.name }}</a>
+                            <a
+                                class="btn-search"
+                                href="#"
+                                :title="$gettext('View tracks in playlist')"
+                                @click.prevent="filter('playlist:'+playlist.name)"
+                            >{{ playlist.name }}</a>
                             <span v-if="index+1 < row.item.playlists.length">, </span>
                         </template>
                     </template>
                     <template #cell(commands)="row">
                         <template v-if="row.item.media.links.edit">
-                            <b-button size="sm" variant="primary"
-                                      @click.prevent="edit(row.item.media.links.edit, row.item.media.links.art, row.item.media.links.play, row.item.media.links.waveform)">
+                            <b-button
+                                size="sm"
+                                variant="primary"
+                                @click.prevent="edit(row.item.media.links.edit, row.item.media.links.art, row.item.media.links.play, row.item.media.links.waveform)"
+                            >
                                 {{ $gettext('Edit') }}
                             </b-button>
                         </template>
                         <template v-else>
-                            <b-button size="sm" variant="primary" @click.prevent="rename(row.item.path)">
+                            <b-button
+                                size="sm"
+                                variant="primary"
+                                @click.prevent="rename(row.item.path)"
+                            >
                                 {{ $gettext('Rename') }}
                             </b-button>
                         </template>
@@ -130,19 +209,32 @@
             </div>
         </div>
 
-        <new-directory-modal :current-directory="currentDirectory" :mkdir-url="mkdirUrl"
-                             @relist="onTriggerRelist">
-        </new-directory-modal>
+        <new-directory-modal
+            :current-directory="currentDirectory"
+            :mkdir-url="mkdirUrl"
+            @relist="onTriggerRelist"
+        />
 
-        <move-files-modal :selected-items="selectedItems" :current-directory="currentDirectory" :batch-url="batchUrl"
-                          :list-directories-url="listDirectoriesUrl" @relist="onTriggerRelist">
-        </move-files-modal>
+        <move-files-modal
+            :selected-items="selectedItems"
+            :current-directory="currentDirectory"
+            :batch-url="batchUrl"
+            :list-directories-url="listDirectoriesUrl"
+            @relist="onTriggerRelist"
+        />
 
-        <rename-modal :rename-url="renameUrl" ref="renameModal" @relist="onTriggerRelist">
-        </rename-modal>
+        <rename-modal
+            ref="renameModal"
+            :rename-url="renameUrl"
+            @relist="onTriggerRelist"
+        />
 
-        <edit-modal ref="editModal" :custom-fields="customFields" :playlists="playlists"
-                    @relist="onTriggerRelist"></edit-modal>
+        <edit-modal
+            ref="editModal"
+            :custom-fields="customFields"
+            :playlists="playlists"
+            @relist="onTriggerRelist"
+        />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Stations/Media/Breadcrumb.vue b/frontend/vue/components/Stations/Media/Breadcrumb.vue
index cdea432b7..8e3e8e035 100644
--- a/frontend/vue/components/Stations/Media/Breadcrumb.vue
+++ b/frontend/vue/components/Stations/Media/Breadcrumb.vue
@@ -1,9 +1,18 @@
 <template>
-    <h3 class="card-subtitle mt-0 mb-2" id="breadcrumb">
-        <a href="#" @click.prevent="changeDirectory('')">{{ $gettext('Home') }}</a>
+    <h3
+        id="breadcrumb"
+        class="card-subtitle mt-0 mb-2"
+    >
+        <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>
+            <a
+                href="#"
+                @click.prevent="changeDirectory(part.dir)"
+            >{{ part.display }}</a>
         </template>
     </h3>
 </template>
diff --git a/frontend/vue/components/Stations/Media/EditModal.vue b/frontend/vue/components/Stations/Media/EditModal.vue
index c98d5be9c..cd235ba4b 100644
--- a/frontend/vue/components/Stations/Media/EditModal.vue
+++ b/frontend/vue/components/Stations/Media/EditModal.vue
@@ -1,29 +1,40 @@
 <template>
-    <modal-form ref="$modal" :loading="loading" :title="$gettext('Edit Media')" :error="error"
-                :disable-save-button="v$.$invalid"
-                @submit="doEdit" @hidden="resetForm">
-
-        <b-tabs content-class="mt-3" pills>
+    <modal-form
+        ref="$modal"
+        :loading="loading"
+        :title="$gettext('Edit Media')"
+        :error="error"
+        :disable-save-button="v$.$invalid"
+        @submit="doEdit"
+        @hidden="resetForm"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
             <b-tab active>
                 <template #title>
                     {{ $gettext('Basic Information') }}
                 </template>
 
-                <media-form-basic-info :form="v$"></media-form-basic-info>
+                <media-form-basic-info :form="v$" />
             </b-tab>
             <b-tab>
                 <template #title>
                     {{ $gettext('Playlists') }}
                 </template>
 
-                <media-form-playlists :form="v$" :playlists="playlists"></media-form-playlists>
+                <media-form-playlists
+                    :form="v$"
+                    :playlists="playlists"
+                />
             </b-tab>
             <b-tab lazy>
                 <template #title>
                     {{ $gettext('Album Art') }}
                 </template>
 
-                <media-form-album-art :album-art-url="albumArtUrl"></media-form-album-art>
+                <media-form-album-art :album-art-url="albumArtUrl" />
             </b-tab>
 
             <b-tab v-if="customFields.length > 0">
@@ -31,7 +42,10 @@
                     {{ $gettext('Custom Fields') }}
                 </template>
 
-                <media-form-custom-fields :form="v$" :custom-fields="customFields"></media-form-custom-fields>
+                <media-form-custom-fields
+                    :form="v$"
+                    :custom-fields="customFields"
+                />
             </b-tab>
 
             <b-tab lazy>
@@ -39,8 +53,11 @@
                     {{ $gettext('Visual Cue Editor') }}
                 </template>
 
-                <media-form-waveform-editor :form="form" :audio-url="audioUrl"
-                                            :waveform-url="waveformUrl"></media-form-waveform-editor>
+                <media-form-waveform-editor
+                    :form="form"
+                    :audio-url="audioUrl"
+                    :waveform-url="waveformUrl"
+                />
             </b-tab>
 
             <b-tab>
@@ -48,7 +65,10 @@
                     {{ $gettext('Advanced') }}
                 </template>
 
-                <media-form-advanced-settings :form="v$" :song-length="songLength"></media-form-advanced-settings>
+                <media-form-advanced-settings
+                    :form="v$"
+                    :song-length="songLength"
+                />
             </b-tab>
         </b-tabs>
     </modal-form>
diff --git a/frontend/vue/components/Stations/Media/FileUpload.vue b/frontend/vue/components/Stations/Media/FileUpload.vue
index 7607d477f..6f6b33671 100644
--- a/frontend/vue/components/Stations/Media/FileUpload.vue
+++ b/frontend/vue/components/Stations/Media/FileUpload.vue
@@ -1,8 +1,12 @@
 <template>
-    <flow-upload :target-url="uploadUrl" :flow-configuration="flowConfiguration"
-                 :valid-mime-types="validMimeTypes" allow-multiple
-                 @complete="onFlowUpload" @error="onFlowUpload">
-    </flow-upload>
+    <flow-upload
+        :target-url="uploadUrl"
+        :flow-configuration="flowConfiguration"
+        :valid-mime-types="validMimeTypes"
+        allow-multiple
+        @complete="onFlowUpload"
+        @error="onFlowUpload"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue b/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue
index c8eccd987..3a153fe00 100644
--- a/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue
+++ b/frontend/vue/components/Stations/Media/Form/AdvancedSettings.vue
@@ -1,16 +1,28 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-form-group class="col-md-6" label-for="edit_form_song_length">
+            <b-form-group
+                class="col-md-6"
+                label-for="edit_form_song_length"
+            >
                 <template #label>
                     {{ $gettext('Song Length') }}
                 </template>
 
-                <b-form-input id="edit_form_song_length" readonly :value="songLength"></b-form-input>
+                <b-form-input
+                    id="edit_form_song_length"
+                    readonly
+                    :value="songLength"
+                />
             </b-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_amplify" :field="form.amplify"
-                                  input-type="number" :input-attrs="{ step: '0.1' }">
+            <b-wrapped-form-group
+                id="edit_form_amplify"
+                class="col-md-6"
+                :field="form.amplify"
+                input-type="number"
+                :input-attrs="{ step: '0.1' }"
+            >
                 <template #label>
                     {{ $gettext('Amplify: Amplification (dB)') }}
                 </template>
@@ -21,8 +33,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_fade_overlap" :field="form.fade_overlap"
-                                  input-type="number" :input-attrs="{ step: '0.1' }">
+            <b-wrapped-form-group
+                id="edit_form_fade_overlap"
+                class="col-md-6"
+                :field="form.fade_overlap"
+                input-type="number"
+                :input-attrs="{ step: '0.1' }"
+            >
                 <template #label>
                     {{ $gettext('Custom Fading: Overlap Time (seconds)') }}
                 </template>
@@ -33,8 +50,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_fade_in" :field="form.fade_in"
-                                  input-type="number" :input-attrs="{ step: '0.1' }">
+            <b-wrapped-form-group
+                id="edit_form_fade_in"
+                class="col-md-6"
+                :field="form.fade_in"
+                input-type="number"
+                :input-attrs="{ step: '0.1' }"
+            >
                 <template #label>
                     {{ $gettext('Custom Fading: Fade-In Time (seconds)') }}
                 </template>
@@ -45,8 +67,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_fade_out" :field="form.fade_out"
-                                  input-type="number" :input-attrs="{ step: '0.1' }">
+            <b-wrapped-form-group
+                id="edit_form_fade_out"
+                class="col-md-6"
+                :field="form.fade_out"
+                input-type="number"
+                :input-attrs="{ step: '0.1' }"
+            >
                 <template #label>
                     {{ $gettext('Custom Fading: Fade-Out Time (seconds)') }}
                 </template>
@@ -57,8 +84,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_cue_in" :field="form.cue_in"
-                                  input-type="number" :input-attrs="{ step: '0.1' }">
+            <b-wrapped-form-group
+                id="edit_form_cue_in"
+                class="col-md-6"
+                :field="form.cue_in"
+                input-type="number"
+                :input-attrs="{ step: '0.1' }"
+            >
                 <template #label>
                     {{ $gettext('Custom Cues: Cue-In Point (seconds)') }}
                 </template>
@@ -67,8 +99,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_cue_out" :field="form.cue_out"
-                                  input-type="number" :input-attrs="{ step: '0.1' }">
+            <b-wrapped-form-group
+                id="edit_form_cue_out"
+                class="col-md-6"
+                :field="form.cue_out"
+                input-type="number"
+                :input-attrs="{ step: '0.1' }"
+            >
                 <template #label>
                     {{ $gettext('Custom Cues: Cue-Out Point (seconds)') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Media/Form/AlbumArt.vue b/frontend/vue/components/Stations/Media/Form/AlbumArt.vue
index 2bc76962a..b1ade2ff7 100644
--- a/frontend/vue/components/Stations/Media/Form/AlbumArt.vue
+++ b/frontend/vue/components/Stations/Media/Form/AlbumArt.vue
@@ -2,9 +2,18 @@
     <b-form-group>
         <b-row>
             <b-col md="4">
-                <b-img :src="albumArtSrc" rounded fluid></b-img>
+                <b-img
+                    :src="albumArtSrc"
+                    rounded
+                    fluid
+                />
                 <br>
-                <b-button block variant="link" class="text-danger mt-2" @click="deleteArt">
+                <b-button
+                    block
+                    variant="link"
+                    class="text-danger mt-2"
+                    @click="deleteArt"
+                >
                     {{ $gettext('Delete Album Art') }}
                 </b-button>
             </b-col>
@@ -13,7 +22,11 @@
                     <template #label>
                         {{ $gettext('Replace Album Cover Art') }}
                     </template>
-                    <b-form-file id="edit_form_art" v-model="artFile" accept="image/*"></b-form-file>
+                    <b-form-file
+                        id="edit_form_art"
+                        v-model="artFile"
+                        accept="image/*"
+                    />
                 </b-form-group>
             </b-col>
         </b-row>
diff --git a/frontend/vue/components/Stations/Media/Form/BasicInfo.vue b/frontend/vue/components/Stations/Media/Form/BasicInfo.vue
index a68e5dde5..49524d36e 100644
--- a/frontend/vue/components/Stations/Media/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Media/Form/BasicInfo.vue
@@ -1,7 +1,11 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_path" :field="form.path">
+            <b-wrapped-form-group
+                id="edit_form_path"
+                class="col-md-6"
+                :field="form.path"
+            >
                 <template #label>
                     {{ $gettext('File Name') }}
                 </template>
@@ -10,37 +14,62 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_title" :field="form.title">
+            <b-wrapped-form-group
+                id="edit_form_title"
+                class="col-md-6"
+                :field="form.title"
+            >
                 <template #label>
                     {{ $gettext('Song Title') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_artist" :field="form.artist">
+            <b-wrapped-form-group
+                id="edit_form_artist"
+                class="col-md-6"
+                :field="form.artist"
+            >
                 <template #label>
                     {{ $gettext('Song Artist') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_genre" :field="form.genre">
+            <b-wrapped-form-group
+                id="edit_form_genre"
+                class="col-md-6"
+                :field="form.genre"
+            >
                 <template #label>
                     {{ $gettext('Song Genre') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_album" :field="form.album">
+            <b-wrapped-form-group
+                id="edit_form_album"
+                class="col-md-6"
+                :field="form.album"
+            >
                 <template #label>
                     {{ $gettext('Song Album') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_lyrics" :field="form.lyrics" input-type="textarea">
+            <b-wrapped-form-group
+                id="edit_form_lyrics"
+                class="col-md-6"
+                :field="form.lyrics"
+                input-type="textarea"
+            >
                 <template #label>
                     {{ $gettext('Song Lyrics') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_isrc" :field="form.isrc">
+            <b-wrapped-form-group
+                id="edit_form_isrc"
+                class="col-md-6"
+                :field="form.isrc"
+            >
                 <template #label>
                     {{ $gettext('ISRC') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Media/Form/CustomFields.vue b/frontend/vue/components/Stations/Media/Form/CustomFields.vue
index 58631606d..e7d1af886 100644
--- a/frontend/vue/components/Stations/Media/Form/CustomFields.vue
+++ b/frontend/vue/components/Stations/Media/Form/CustomFields.vue
@@ -1,10 +1,16 @@
 <template>
     <b-form-group>
         <b-row>
-            <b-wrapped-form-group v-for="field in customFields" :key="field.short_name" class="col-md-6"
-                                  :id="'edit_form_custom_'+field.short_name"
-                                  :field="form.custom_fields[field.short_name]">
-                <template #label>{{ field.name }}</template>
+            <b-wrapped-form-group
+                v-for="field in customFields"
+                :id="'edit_form_custom_'+field.short_name"
+                :key="field.short_name"
+                class="col-md-6"
+                :field="form.custom_fields[field.short_name]"
+            >
+                <template #label>
+                    {{ field.name }}
+                </template>
             </b-wrapped-form-group>
         </b-row>
     </b-form-group>
diff --git a/frontend/vue/components/Stations/Media/Form/Playlists.vue b/frontend/vue/components/Stations/Media/Form/Playlists.vue
index f58825b79..4b0a310b7 100644
--- a/frontend/vue/components/Stations/Media/Form/Playlists.vue
+++ b/frontend/vue/components/Stations/Media/Form/Playlists.vue
@@ -1,7 +1,11 @@
 <template>
     <b-form-group>
         <b-row>
-            <b-wrapped-form-group class="col-md-12" id="edit_form_playlists" :field="form.playlists">
+            <b-wrapped-form-group
+                id="edit_form_playlists"
+                class="col-md-12"
+                :field="form.playlists"
+            >
                 <template #label>
                     {{ $gettext('Playlists') }}
                 </template>
@@ -11,7 +15,7 @@
                         v-model="props.field.$model"
                         :options="options"
                         stacked
-                    ></b-form-checkbox-group>
+                    />
                 </template>
             </b-wrapped-form-group>
         </b-row>
diff --git a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
index f719147ed..38f793fa7 100644
--- a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
+++ b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
@@ -6,38 +6,72 @@
     </p>
 
     <b-form-group>
-        <waveform-component ref="$waveform" :audio-url="audioUrl" :waveform-url="waveformUrl"
-                            @ready="updateRegions"></waveform-component>
+        <waveform-component
+            ref="$waveform"
+            :audio-url="audioUrl"
+            :waveform-url="waveformUrl"
+            @ready="updateRegions"
+        />
     </b-form-group>
     <b-form-group>
         <div class="buttons">
             <b-button-group size="sm">
-                <b-button variant="light" @click="playAudio" :title="$gettext('Play')" size="sm">
-                    <icon icon="play_arrow"></icon>
+                <b-button
+                    variant="light"
+                    :title="$gettext('Play')"
+                    size="sm"
+                    @click="playAudio"
+                >
+                    <icon icon="play_arrow" />
                 </b-button>
-                <b-button variant="dark" @click="stopAudio" :title="$gettext('Stop')" size="sm">
-                    <icon icon="stop"></icon>
+                <b-button
+                    variant="dark"
+                    :title="$gettext('Stop')"
+                    size="sm"
+                    @click="stopAudio"
+                >
+                    <icon icon="stop" />
                 </b-button>
             </b-button-group>
             <b-button-group size="sm">
-                <b-button variant="primary" @click="setCueIn" size="sm">
+                <b-button
+                    variant="primary"
+                    size="sm"
+                    @click="setCueIn"
+                >
                     {{ $gettext('Set Cue In') }}
                 </b-button>
-                <b-button variant="primary" @click="setCueOut" size="sm">
+                <b-button
+                    variant="primary"
+                    size="sm"
+                    @click="setCueOut"
+                >
                     {{ $gettext('Set Cue Out') }}
                 </b-button>
             </b-button-group>
             <b-button-group size="sm">
-                <b-button variant="warning" @click="setFadeOverlap" size="sm">
+                <b-button
+                    variant="warning"
+                    size="sm"
+                    @click="setFadeOverlap"
+                >
                     {{ $gettext('Set Overlap') }}
                 </b-button>
             </b-button-group>
             <b-button-group size="sm">
-                <b-button variant="danger" @click="setFadeIn" size="sm">
+                <b-button
+                    variant="danger"
+                    size="sm"
+                    @click="setFadeIn"
+                >
                     {{ $gettext('Set Fade In') }}
                 </b-button>
 
-                <b-button variant="danger" @click="setFadeOut" size="sm">
+                <b-button
+                    variant="danger"
+                    size="sm"
+                    @click="setFadeOut"
+                >
                     {{ $gettext('Set Fade Out') }}
                 </b-button>
             </b-button-group>
diff --git a/frontend/vue/components/Stations/Media/MediaToolbar.vue b/frontend/vue/components/Stations/Media/MediaToolbar.vue
index bec24c627..58d37fc18 100644
--- a/frontend/vue/components/Stations/Media/MediaToolbar.vue
+++ b/frontend/vue/components/Stations/Media/MediaToolbar.vue
@@ -1,75 +1,147 @@
 <template>
-    <div class="row pt-4" id="app-toolbar">
+    <div
+        id="app-toolbar"
+        class="row pt-4"
+    >
         <div class="col-md-8 buttons">
             <div class="btn-group dropdown allow-focus">
-                <b-dropdown size="sm" variant="primary" ref="setPlaylistsDropdown" v-b-tooltip.hover
-                            :title="langPlaylistDropdown">
+                <b-dropdown
+                    ref="setPlaylistsDropdown"
+                    v-b-tooltip.hover
+                    size="sm"
+                    variant="primary"
+                    :title="langPlaylistDropdown"
+                >
                     <template #button-content>
-                        <icon icon="clear_all"></icon>
+                        <icon icon="clear_all" />
                         {{ $gettext('Playlists') }}
-                        <span class="caret"></span>
+                        <span class="caret" />
                     </template>
-                    <b-dropdown-form class="pt-2" @submit.prevent="setPlaylists">
-                        <div v-for="playlist in playlists" class="form-group">
+                    <b-dropdown-form
+                        class="pt-2"
+                        @submit.prevent="setPlaylists"
+                    >
+                        <div
+                            v-for="playlist in playlists"
+                            class="form-group"
+                        >
                             <div class="custom-control custom-checkbox">
-                                <input type="checkbox" class="custom-control-input"
-                                       v-bind:id="'chk_playlist_' + playlist.id" name="playlists[]"
-                                       v-model="checkedPlaylists" v-bind:value="playlist.id">
-                                <label class="custom-control-label" v-bind:for="'chk_playlist_'+playlist.id">
+                                <input
+                                    :id="'chk_playlist_' + playlist.id"
+                                    v-model="checkedPlaylists"
+                                    type="checkbox"
+                                    class="custom-control-input"
+                                    name="playlists[]"
+                                    :value="playlist.id"
+                                >
+                                <label
+                                    class="custom-control-label"
+                                    :for="'chk_playlist_'+playlist.id"
+                                >
                                     {{ playlist.name }}
                                 </label>
                             </div>
                         </div>
                         <div class="form-group">
                             <div class="custom-control custom-checkbox">
-                                <input type="checkbox" class="custom-control-input" id="chk_playlist_new"
-                                       v-model="checkedPlaylists" value="new">
-                                <label class="custom-control-label" for="chk_playlist_new">
-                                    <input type="text" class="form-control p-2" id="new_playlist_name"
-                                           name="new_playlist_name" v-model="newPlaylist" style="min-width: 150px;"
-                                           :placeholder="langNewPlaylist">
+                                <input
+                                    id="chk_playlist_new"
+                                    v-model="checkedPlaylists"
+                                    type="checkbox"
+                                    class="custom-control-input"
+                                    value="new"
+                                >
+                                <label
+                                    class="custom-control-label"
+                                    for="chk_playlist_new"
+                                >
+                                    <input
+                                        id="new_playlist_name"
+                                        v-model="newPlaylist"
+                                        type="text"
+                                        class="form-control p-2"
+                                        name="new_playlist_name"
+                                        style="min-width: 150px;"
+                                        :placeholder="langNewPlaylist"
+                                    >
                                 </label>
                             </div>
                         </div>
 
-                        <b-button type="submit" size="sm" variant="primary">
+                        <b-button
+                            type="submit"
+                            size="sm"
+                            variant="primary"
+                        >
                             {{ $gettext('Save') }}
                         </b-button>
-                        <b-button type="button" size="sm" variant="warning" @click="clearPlaylists()">
+                        <b-button
+                            type="button"
+                            size="sm"
+                            variant="warning"
+                            @click="clearPlaylists()"
+                        >
                             {{ $gettext('Clear') }}
                         </b-button>
                     </b-dropdown-form>
                 </b-dropdown>
             </div>
-            <b-button size="sm" variant="primary" v-b-modal.move_file>
-                <icon icon="open_with"></icon>
+            <b-button
+                v-b-modal.move_file
+                size="sm"
+                variant="primary"
+            >
+                <icon icon="open_with" />
                 {{ $gettext('Move') }}
             </b-button>
-            <b-dropdown size="sm" variant="default">
+            <b-dropdown
+                size="sm"
+                variant="default"
+            >
                 <template #button-content>
-                    <icon icon="more_horiz"></icon>
+                    <icon icon="more_horiz" />
                     {{ langMore }}
                 </template>
-                <b-dropdown-item @click="doQueue" v-b-tooltip.hover :title="langQueue">
+                <b-dropdown-item
+                    v-b-tooltip.hover
+                    :title="langQueue"
+                    @click="doQueue"
+                >
                     {{ $gettext('Queue') }}
                 </b-dropdown-item>
-                <b-dropdown-item v-if="supportsImmediateQueue" @click="doImmediateQueue" v-b-tooltip.hover
-                                 :title="langImmediateQueue">
+                <b-dropdown-item
+                    v-if="supportsImmediateQueue"
+                    v-b-tooltip.hover
+                    :title="langImmediateQueue"
+                    @click="doImmediateQueue"
+                >
                     {{ $gettext('Play Now') }}
                 </b-dropdown-item>
-                <b-dropdown-item @click="doReprocess" v-b-tooltip.hover :title="langReprocess">
+                <b-dropdown-item
+                    v-b-tooltip.hover
+                    :title="langReprocess"
+                    @click="doReprocess"
+                >
                     {{ $gettext('Reprocess') }}
                 </b-dropdown-item>
             </b-dropdown>
 
-            <b-button size="sm" variant="danger" @click="doDelete">
-                <icon icon="delete"></icon>
+            <b-button
+                size="sm"
+                variant="danger"
+                @click="doDelete"
+            >
+                <icon icon="delete" />
                 {{ $gettext('Delete') }}
             </b-button>
         </div>
         <div class="col-md-4 text-right">
-            <b-button size="sm" variant="primary" v-b-modal.create_directory>
-                <icon icon="folder"></icon>
+            <b-button
+                v-b-modal.create_directory
+                size="sm"
+                variant="primary"
+            >
+                <icon icon="folder" />
                 {{ $gettext('New Folder') }}
             </b-button>
         </div>
@@ -81,7 +153,7 @@ import Icon from '~/components/Common/Icon';
 import '~/vendor/sweetalert';
 
 export default {
-    name: 'station-media-toolbar',
+    name: 'StationMediaToolbar',
     components: {Icon},
     props: {
         currentDirectory: String,
@@ -96,24 +168,6 @@ export default {
             newPlaylist: '',
         };
     },
-    watch: {
-        selectedItems (items) {
-            // Get all playlists that are active on ALL selected items.
-            let playlistsForItems = _.map(items.all, (item) => {
-                return _.map(item.playlists, 'id');
-            });
-
-            // Check the checkboxes for those playlists.
-            this.checkedPlaylists = _.intersection(...playlistsForItems);
-        },
-        newPlaylist (text) {
-            if (text !== '') {
-                if (!this.checkedPlaylists.includes('new')) {
-                    this.checkedPlaylists.push('new');
-                }
-            }
-        }
-    },
     computed: {
         langPlaylistDropdown() {
             return this.$gettext('Set or clear playlists from the selected media');
@@ -137,6 +191,24 @@ export default {
             return this.$gettext('The request could not be processed.');
         },
     },
+    watch: {
+        selectedItems (items) {
+            // Get all playlists that are active on ALL selected items.
+            let playlistsForItems = _.map(items.all, (item) => {
+                return _.map(item.playlists, 'id');
+            });
+
+            // Check the checkboxes for those playlists.
+            this.checkedPlaylists = _.intersection(...playlistsForItems);
+        },
+        newPlaylist (text) {
+            if (text !== '') {
+                if (!this.checkedPlaylists.includes('new')) {
+                    this.checkedPlaylists.push('new');
+                }
+            }
+        }
+    },
     methods: {
         doImmediateQueue() {
             this.doBatch('immediate', this.$gettext('Files played immediately:'));
diff --git a/frontend/vue/components/Stations/Media/MoveFilesModal.vue b/frontend/vue/components/Stations/Media/MoveFilesModal.vue
index 2e8835a3f..c69936759 100644
--- a/frontend/vue/components/Stations/Media/MoveFilesModal.vue
+++ b/frontend/vue/components/Stations/Media/MoveFilesModal.vue
@@ -1,28 +1,53 @@
 <template>
-    <b-modal id="move_file" size="xl" centered ref="modal" :title="langHeader">
+    <b-modal
+        id="move_file"
+        ref="modal"
+        size="xl"
+        centered
+        :title="langHeader"
+    >
         <b-row class="mb-3 align-items-center">
             <b-col md="6">
-                <b-button size="sm" variant="primary" @click="pageBack" :disabled="dirHistory.length === 0">
-                    <icon icon="chevron_left"></icon>
+                <b-button
+                    size="sm"
+                    variant="primary"
+                    :disabled="dirHistory.length === 0"
+                    @click="pageBack"
+                >
+                    <icon icon="chevron_left" />
                     {{ $gettext('Back') }}
                 </b-button>
             </b-col>
-            <b-col md="6" class="text-right">
-                <h6 class="m-0">{{ destinationDirectory }}</h6>
+            <b-col
+                md="6"
+                class="text-right"
+            >
+                <h6 class="m-0">
+                    {{ destinationDirectory }}
+                </h6>
             </b-col>
         </b-row>
         <b-row>
             <b-col md="12">
-                <data-table ref="datatable" id="station_media" :show-toolbar="false"
-                            :selectable="false" :fields="fields"
-                            :api-url="listDirectoriesUrl" :request-config="requestConfig">
+                <data-table
+                    id="station_media"
+                    ref="datatable"
+                    :show-toolbar="false"
+                    :selectable="false"
+                    :fields="fields"
+                    :api-url="listDirectoriesUrl"
+                    :request-config="requestConfig"
+                >
                     <template #cell(directory)="row">
                         <div class="is_dir">
                             <span class="file-icon">
-                                <icon icon="folder"></icon>
+                                <icon icon="folder" />
                             </span>
 
-                            <a href="#" @click.prevent="enterDirectory(row.item.path)">
+                            <a
+                                href="#"
+                                @click.prevent="enterDirectory(row.item.path)"
+                            >
                                 {{ row.item.name }}
                             </a>
                         </div>
@@ -31,10 +56,16 @@
             </b-col>
         </b-row>
         <template #modal-footer>
-            <b-button variant="default" @click="close">
+            <b-button
+                variant="default"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button variant="primary" @click="doMove">
+            <b-button
+                variant="primary"
+                @click="doMove"
+            >
                 {{ $gettext('Move to Directory') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Stations/Media/NewDirectoryModal.vue b/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
index bf769dd65..07aebfa58 100644
--- a/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
+++ b/frontend/vue/components/Stations/Media/NewDirectoryModal.vue
@@ -1,17 +1,32 @@
 <template>
-    <b-modal id="create_directory" centered ref="modal" :title="$gettext('New Directory')">
+    <b-modal
+        id="create_directory"
+        ref="modal"
+        centered
+        :title="$gettext('New Directory')"
+    >
         <b-form @submit.prevent="doMkdir">
-            <b-wrapped-form-group id="new_directory_name" :field="v$.newDirectory" autofocus>
+            <b-wrapped-form-group
+                id="new_directory_name"
+                :field="v$.newDirectory"
+                autofocus
+            >
                 <template #label>
                     {{ $gettext('Directory Name') }}
                 </template>
             </b-wrapped-form-group>
         </b-form>
         <template #modal-footer>
-            <b-button variant="default" @click="close">
+            <b-button
+                variant="default"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button :variant="(v$.$invalid) ? 'danger' : 'primary'" @click="doMkdir">
+            <b-button
+                :variant="(v$.$invalid) ? 'danger' : 'primary'"
+                @click="doMkdir"
+            >
                 {{ $gettext('Create Directory') }}
             </b-button>
         </template>
@@ -25,13 +40,13 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 export default {
     name: 'NewDirectoryModal',
     components: {BWrappedFormGroup},
-    setup() {
-        return {v$: useVuelidate()}
-    },
     props: {
         currentDirectory: String,
         mkdirUrl: String
     },
+    setup() {
+        return {v$: useVuelidate()}
+    },
     data() {
         return {
             newDirectory: null
diff --git a/frontend/vue/components/Stations/Media/RenameModal.vue b/frontend/vue/components/Stations/Media/RenameModal.vue
index 3cb66426b..bdb00822e 100644
--- a/frontend/vue/components/Stations/Media/RenameModal.vue
+++ b/frontend/vue/components/Stations/Media/RenameModal.vue
@@ -1,17 +1,32 @@
 <template>
-    <b-modal id="rename_file" centered ref="modal" :title="$gettext('Rename File/Directory')">
+    <b-modal
+        id="rename_file"
+        ref="modal"
+        centered
+        :title="$gettext('Rename File/Directory')"
+    >
         <b-form @submit.prevent="doRename">
-            <b-wrapped-form-group id="new_directory_name" :field="v$.form.newPath" autofocus>
+            <b-wrapped-form-group
+                id="new_directory_name"
+                :field="v$.form.newPath"
+                autofocus
+            >
                 <template #label>
                     {{ $gettext('New File Name') }}
                 </template>
             </b-wrapped-form-group>
         </b-form>
         <template #modal-footer>
-            <b-button variant="default" @click="close">
+            <b-button
+                variant="default"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button :variant="(v$.form.$invalid) ? 'danger' : 'primary'" @click="doRename">
+            <b-button
+                :variant="(v$.form.$invalid) ? 'danger' : 'primary'"
+                @click="doRename"
+            >
                 {{ $gettext('Rename') }}
             </b-button>
         </template>
@@ -25,12 +40,12 @@ import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 export default {
     name: 'RenameModal',
     components: {BWrappedFormGroup},
-    setup() {
-        return {v$: useVuelidate()}
-    },
     props: {
         renameUrl: String
     },
+    setup() {
+        return {v$: useVuelidate()}
+    },
     data() {
         return {
             form: {
diff --git a/frontend/vue/components/Stations/Mounts.vue b/frontend/vue/components/Stations/Mounts.vue
index 544a76c2f..a63026954 100644
--- a/frontend/vue/components/Stations/Mounts.vue
+++ b/frontend/vue/components/Stations/Mounts.vue
@@ -1,7 +1,9 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('Mount Points') }}</h2>
+            <h2 class="card-title">
+                {{ $gettext('Mount Points') }}
+            </h2>
         </b-card-header>
 
         <info-card>
@@ -13,14 +15,22 @@
         </info-card>
 
         <b-card-body body-class="card-padding-sm">
-            <b-button variant="outline-primary" @click.prevent="doCreate">
-                <icon icon="add"></icon>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Mount Point') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="$dataTable" id="station_mounts" :fields="fields" paginated
-                    :api-url="listUrl">
+        <data-table
+            id="station_mounts"
+            ref="$dataTable"
+            :fields="fields"
+            paginated
+            :api-url="listUrl"
+        >
             <template #cell(display_name)="row">
                 <h5 class="m-0">
                     <a :href="row.item.links.listen">{{ row.item.display_name }}</a>
@@ -42,10 +52,18 @@
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -53,9 +71,15 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="$editModal" :create-url="listUrl" :new-intro-url="newIntroUrl"
-                :show-advanced="showAdvanced" :station-frontend-type="stationFrontendType"
-                @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
+    <edit-modal
+        ref="$editModal"
+        :create-url="listUrl"
+        :new-intro-url="newIntroUrl"
+        :show-advanced="showAdvanced"
+        :station-frontend-type="stationFrontendType"
+        @relist="relist"
+        @needs-restart="mayNeedRestart"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Stations/Mounts/EditModal.vue b/frontend/vue/components/Stations/Mounts/EditModal.vue
index f9817d96c..668f9bda9 100644
--- a/frontend/vue/components/Stations/Mounts/EditModal.vue
+++ b/frontend/vue/components/Stations/Mounts/EditModal.vue
@@ -1,19 +1,37 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <b-tabs content-class="mt-3" pills>
-            <mount-form-basic-info :form="v$.form"
-                                   :station-frontend-type="stationFrontendType"></mount-form-basic-info>
-            <mount-form-auto-dj :form="v$.form"
-                                :station-frontend-type="stationFrontendType"></mount-form-auto-dj>
-            <mount-form-intro v-model="v$.form.intro_file.$model" :record-has-intro="record.intro_path !== null"
-                              :new-intro-url="newIntroUrl"
-                              :edit-intro-url="record.links.intro"></mount-form-intro>
-            <mount-form-advanced v-if="showAdvanced" :form="v$.form"
-                                 :station-frontend-type="stationFrontendType"></mount-form-advanced>
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <mount-form-basic-info
+                :form="v$.form"
+                :station-frontend-type="stationFrontendType"
+            />
+            <mount-form-auto-dj
+                :form="v$.form"
+                :station-frontend-type="stationFrontendType"
+            />
+            <mount-form-intro
+                v-model="v$.form.intro_file.$model"
+                :record-has-intro="record.intro_path !== null"
+                :new-intro-url="newIntroUrl"
+                :edit-intro-url="record.links.intro"
+            />
+            <mount-form-advanced
+                v-if="showAdvanced"
+                :form="v$.form"
+                :station-frontend-type="stationFrontendType"
+            />
         </b-tabs>
-
     </modal-form>
 </template>
 <script>
@@ -30,12 +48,8 @@ import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
-    emits: ['needs-restart'],
-    setup() {
-        return {v$: useVuelidate()}
-    },
-    mixins: [BaseEditModal],
     components: {MountFormIntro, MountFormAdvanced, MountFormAutoDj, MountFormBasicInfo},
+    mixins: [BaseEditModal],
     props: {
         stationFrontendType: String,
         newIntroUrl: String,
@@ -44,6 +58,10 @@ export default {
             default: true
         },
     },
+    emits: ['needs-restart'],
+    setup() {
+        return {v$: useVuelidate()}
+    },
     data() {
         return {
             record: {
diff --git a/frontend/vue/components/Stations/Mounts/Form/Advanced.vue b/frontend/vue/components/Stations/Mounts/Form/Advanced.vue
index 9597eca8a..e689353e6 100644
--- a/frontend/vue/components/Stations/Mounts/Form/Advanced.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/Advanced.vue
@@ -2,8 +2,12 @@
     <b-tab :title="$gettext('Advanced')">
         <b-form-group>
             <div class="form-row mb-3">
-                <b-wrapped-form-group class="col-md-12" id="edit_form_custom_listen_url"
-                                      :field="form.custom_listen_url" advanced>
+                <b-wrapped-form-group
+                    id="edit_form_custom_listen_url"
+                    class="col-md-12"
+                    :field="form.custom_listen_url"
+                    advanced
+                >
                     <template #label>
                         {{ $gettext('Mount Point URL') }}
                     </template>
@@ -14,10 +18,18 @@
                     </template>
                 </b-wrapped-form-group>
             </div>
-            <div class="form-row" v-if="isIcecast">
-                <b-wrapped-form-group class="col-md-12" id="edit_form_frontend_config" :field="form.frontend_config"
-                                      input-type="textarea" advanced
-                                      :input-attrs="{class: 'text-preformatted', spellcheck: 'false', 'max-rows': 25, rows: 5}">
+            <div
+                v-if="isIcecast"
+                class="form-row"
+            >
+                <b-wrapped-form-group
+                    id="edit_form_frontend_config"
+                    class="col-md-12"
+                    :field="form.frontend_config"
+                    input-type="textarea"
+                    advanced
+                    :input-attrs="{class: 'text-preformatted', spellcheck: 'false', 'max-rows': 25, rows: 5}"
+                >
                     <template #label>
                         {{ $gettext('Custom Frontend Configuration') }}
                     </template>
diff --git a/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue b/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue
index 8a70565e0..048206364 100644
--- a/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/AutoDj.vue
@@ -2,7 +2,11 @@
     <b-tab :title="$gettext('AutoDJ')">
         <b-form-group>
             <div class="form-row mb-3">
-                <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_autodj" :field="form.enable_autodj">
+                <b-wrapped-form-checkbox
+                    id="edit_form_enable_autodj"
+                    class="col-md-12"
+                    :field="form.enable_autodj"
+                >
                     <template #label>
                         {{ $gettext('Enable AutoDJ') }}
                     </template>
@@ -12,34 +16,45 @@
                 </b-wrapped-form-checkbox>
             </div>
 
-            <div class="form-row" v-if="form.enable_autodj.$model">
-                <b-wrapped-form-group class="col-md-6" id="edit_form_autodj_format" :field="form.autodj_format">
+            <div
+                v-if="form.enable_autodj.$model"
+                class="form-row"
+            >
+                <b-wrapped-form-group
+                    id="edit_form_autodj_format"
+                    class="col-md-6"
+                    :field="form.autodj_format"
+                >
                     <template #label>
                         {{ $gettext('AutoDJ Format') }}
                     </template>
                     <template #default="props">
                         <b-form-radio-group
-                            stacked
                             :id="props.id"
-                            :state="props.state"
                             v-model="props.field.$model"
+                            stacked
+                            :state="props.state"
                             :options="formatOptions"
-                        ></b-form-radio-group>
+                        />
                     </template>
                 </b-wrapped-form-group>
-                <b-wrapped-form-group class="col-md-6" id="edit_form_autodj_bitrate" :field="form.autodj_bitrate"
-                                      v-if="formatSupportsBitrateOptions">
+                <b-wrapped-form-group
+                    v-if="formatSupportsBitrateOptions"
+                    id="edit_form_autodj_bitrate"
+                    class="col-md-6"
+                    :field="form.autodj_bitrate"
+                >
                     <template #label>
                         {{ $gettext('AutoDJ Bitrate (kbps)') }}
                     </template>
                     <template #default="props">
                         <b-form-radio-group
-                            stacked
                             :id="props.id"
-                            :state="props.state"
                             v-model="props.field.$model"
+                            stacked
+                            :state="props.state"
                             :options="bitrateOptions"
-                        ></b-form-radio-group>
+                        />
                     </template>
                 </b-wrapped-form-group>
             </div>
diff --git a/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue b/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue
index 57cad66f7..86726db46 100644
--- a/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/BasicInfo.vue
@@ -1,8 +1,15 @@
 <template>
-    <b-tab :title="$gettext('Basic Info')" active>
+    <b-tab
+        :title="$gettext('Basic Info')"
+        active
+    >
         <b-form-group>
             <div class="form-row mb-3">
-                <b-wrapped-form-group class="col-md-6" id="edit_form_name" :field="form.name">
+                <b-wrapped-form-group
+                    id="edit_form_name"
+                    class="col-md-6"
+                    :field="form.name"
+                >
                     <template #label>
                         {{ $gettext('Mount Point URL') }}
                     </template>
@@ -13,7 +20,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_display_name" :field="form.display_name">
+                <b-wrapped-form-group
+                    id="edit_form_display_name"
+                    class="col-md-6"
+                    :field="form.display_name"
+                >
                     <template #label>
                         {{ $gettext('Display Name') }}
                     </template>
@@ -24,8 +35,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_visible_on_public_pages"
-                                         :field="form.is_visible_on_public_pages">
+                <b-wrapped-form-checkbox
+                    id="edit_form_is_visible_on_public_pages"
+                    class="col-md-6"
+                    :field="form.is_visible_on_public_pages"
+                >
                     <template #label>
                         {{ $gettext('Show on Public Pages') }}
                     </template>
@@ -36,7 +50,11 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_default" :field="form.is_default">
+                <b-wrapped-form-checkbox
+                    id="edit_form_is_default"
+                    class="col-md-6"
+                    :field="form.is_default"
+                >
                     <template #label>
                         {{ $gettext('Set as Default Mount Point') }}
                     </template>
@@ -47,7 +65,11 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_relay_url" :field="form.relay_url">
+                <b-wrapped-form-group
+                    id="edit_form_relay_url"
+                    class="col-md-6"
+                    :field="form.relay_url"
+                >
                     <template #label>
                         {{ $gettext('Relay Stream URL') }}
                     </template>
@@ -58,7 +80,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_public" :field="form.is_public">
+                <b-wrapped-form-checkbox
+                    id="edit_form_is_public"
+                    class="col-md-6"
+                    :field="form.is_public"
+                >
                     <template #label>
                         {{ $gettext('Publish to "Yellow Pages" Directories') }}
                     </template>
@@ -69,9 +95,13 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_max_listener_duration"
-                                      :field="form.max_listener_duration" input-type="number"
-                                      :input-attrs="{min: '0', max: '2147483647'}">
+                <b-wrapped-form-group
+                    id="edit_form_max_listener_duration"
+                    class="col-md-6"
+                    :field="form.max_listener_duration"
+                    input-type="number"
+                    :input-attrs="{min: '0', max: '2147483647'}"
+                >
                     <template #label>
                         {{ $gettext('Max Listener Duration') }}
                     </template>
@@ -83,15 +113,25 @@
                 </b-wrapped-form-group>
 
                 <template v-if="isShoutcast">
-                    <b-wrapped-form-group class="col-md-6" id="edit_form_authhash" :field="form.authhash">
+                    <b-wrapped-form-group
+                        id="edit_form_authhash"
+                        class="col-md-6"
+                        :field="form.authhash"
+                    >
                         <template #label>
                             {{ $gettext('YP Directory Authorization Hash') }}
                         </template>
-                        <template #description><span v-html="langAuthhashDesc"></span></template>
+                        <template #description>
+                            <span v-html="langAuthhashDesc" />
+                        </template>
                     </b-wrapped-form-group>
                 </template>
                 <template v-if="isIcecast">
-                    <b-wrapped-form-group class="col-md-6" id="edit_form_fallback_mount" :field="form.fallback_mount">
+                    <b-wrapped-form-group
+                        id="edit_form_fallback_mount"
+                        class="col-md-6"
+                        :field="form.fallback_mount"
+                    >
                         <template #label>
                             {{ $gettext('Fallback Mount') }}
                         </template>
diff --git a/frontend/vue/components/Stations/Mounts/Form/Intro.vue b/frontend/vue/components/Stations/Mounts/Form/Intro.vue
index dce699302..55f1427c1 100644
--- a/frontend/vue/components/Stations/Mounts/Form/Intro.vue
+++ b/frontend/vue/components/Stations/Mounts/Form/Intro.vue
@@ -2,7 +2,10 @@
     <b-tab :title="$gettext('Intro')">
         <b-form-group>
             <div class="form-row">
-                <b-form-group class="col-md-6" label-for="intro_file">
+                <b-form-group
+                    class="col-md-6"
+                    label-for="intro_file"
+                >
                     <template #label>
                         {{ $gettext('Select Intro File') }}
                     </template>
@@ -12,8 +15,11 @@
                         }}
                     </template>
 
-                    <flow-upload :target-url="targetUrl" :valid-mime-types="['audio/*']"
-                                 @success="onFileSuccess"></flow-upload>
+                    <flow-upload
+                        :target-url="targetUrl"
+                        :valid-mime-types="['audio/*']"
+                        @success="onFileSuccess"
+                    />
                 </b-form-group>
 
                 <b-form-group class="col-md-6">
@@ -23,10 +29,20 @@
 
                     <div v-if="hasIntro">
                         <div class="buttons pt-3">
-                            <b-button v-if="editIntroUrl" block variant="bg" :href="editIntroUrl" target="_blank">
+                            <b-button
+                                v-if="editIntroUrl"
+                                block
+                                variant="bg"
+                                :href="editIntroUrl"
+                                target="_blank"
+                            >
                                 {{ $gettext('Download') }}
                             </b-button>
-                            <b-button block variant="danger" @click="deleteIntro">
+                            <b-button
+                                block
+                                variant="danger"
+                                @click="deleteIntro"
+                            >
                                 {{ $gettext('Clear File') }}
                             </b-button>
                         </div>
diff --git a/frontend/vue/components/Stations/Playlists.vue b/frontend/vue/components/Stations/Playlists.vue
index 3f37cec10..f721785af 100644
--- a/frontend/vue/components/Stations/Playlists.vue
+++ b/frontend/vue/components/Stations/Playlists.vue
@@ -3,9 +3,14 @@
         <b-card-header header-bg-variant="primary-dark">
             <b-row class="align-items-center">
                 <b-col md="6">
-                    <h2 class="card-title">{{ $gettext('Playlists') }}</h2>
+                    <h2 class="card-title">
+                        {{ $gettext('Playlists') }}
+                    </h2>
                 </b-col>
-                <b-col md="6" class="text-right text-muted">
+                <b-col
+                    md="6"
+                    class="text-right text-muted"
+                >
                     {{
                         $gettext(
                             'This station\'s time zone is currently %{tz}.',
@@ -15,51 +20,91 @@
                 </b-col>
             </b-row>
         </b-card-header>
-        <b-tabs pills card lazy>
-            <b-tab :title="$gettext('All Playlists')" no-body>
+        <b-tabs
+            pills
+            card
+            lazy
+        >
+            <b-tab
+                :title="$gettext('All Playlists')"
+                no-body
+            >
                 <b-card-body body-class="card-padding-sm">
-                    <b-button variant="outline-primary" @click.prevent="doCreate">
-                        <icon icon="add"></icon>
+                    <b-button
+                        variant="outline-primary"
+                        @click.prevent="doCreate"
+                    >
+                        <icon icon="add" />
                         {{ $gettext('Add Playlist') }}
                     </b-button>
                 </b-card-body>
 
-                <data-table ref="datatable" id="station_playlists" paginated :fields="fields" :responsive="false"
-                            :api-url="listUrl">
+                <data-table
+                    id="station_playlists"
+                    ref="datatable"
+                    paginated
+                    :fields="fields"
+                    :responsive="false"
+                    :api-url="listUrl"
+                >
                     <template #cell(actions)="row">
                         <b-button-group size="sm">
-                            <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                            <b-button
+                                size="sm"
+                                variant="primary"
+                                @click.prevent="doEdit(row.item.links.self)"
+                            >
                                 {{ $gettext('Edit') }}
                             </b-button>
-                            <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                            <b-button
+                                size="sm"
+                                variant="danger"
+                                @click.prevent="doDelete(row.item.links.self)"
+                            >
                                 {{ $gettext('Delete') }}
                             </b-button>
 
-                            <b-dropdown size="sm" variant="dark" boundary="window" :text="$gettext('More')">
+                            <b-dropdown
+                                size="sm"
+                                variant="dark"
+                                boundary="window"
+                                :text="$gettext('More')"
+                            >
                                 <b-dropdown-item @click.prevent="doModify(row.item.links.toggle)">
                                     {{ langToggleButton(row.item) }}
                                 </b-dropdown-item>
-                                <b-dropdown-item @click.prevent="doImport(row.item.links.import)"
-                                                 v-if="row.item.source === 'songs'">
+                                <b-dropdown-item
+                                    v-if="row.item.source === 'songs'"
+                                    @click.prevent="doImport(row.item.links.import)"
+                                >
                                     {{ $gettext('Import from PLS/M3U') }}
                                 </b-dropdown-item>
-                                <b-dropdown-item @click.prevent="doReorder(row.item.links.order)"
-                                                 v-if="row.item.source === 'songs' && row.item.order === 'sequential'">
+                                <b-dropdown-item
+                                    v-if="row.item.source === 'songs' && row.item.order === 'sequential'"
+                                    @click.prevent="doReorder(row.item.links.order)"
+                                >
                                     {{ $gettext('Reorder') }}
                                 </b-dropdown-item>
-                                <b-dropdown-item @click.prevent="doQueue(row.item.links.queue)"
-                                                 v-if="row.item.source === 'songs' && row.item.order !== 'random'">
+                                <b-dropdown-item
+                                    v-if="row.item.source === 'songs' && row.item.order !== 'random'"
+                                    @click.prevent="doQueue(row.item.links.queue)"
+                                >
                                     {{ $gettext('Playback Queue') }}
                                 </b-dropdown-item>
-                                <b-dropdown-item @click.prevent="doModify(row.item.links.reshuffle)"
-                                                 v-if="row.item.order === 'shuffle'">
+                                <b-dropdown-item
+                                    v-if="row.item.order === 'shuffle'"
+                                    @click.prevent="doModify(row.item.links.reshuffle)"
+                                >
                                     {{ $gettext('Reshuffle') }}
                                 </b-dropdown-item>
                                 <b-dropdown-item @click.prevent="doClone(row.item.name, row.item.links.clone)">
                                     {{ $gettext('Duplicate') }}
                                 </b-dropdown-item>
                                 <template v-for="format in ['pls', 'm3u']">
-                                    <b-dropdown-item :href="row.item.links.export[format]" target="_blank">
+                                    <b-dropdown-item
+                                        :href="row.item.links.export[format]"
+                                        target="_blank"
+                                    >
                                         {{
                                             $gettext(
                                                 'Export %{format}',
@@ -72,7 +117,9 @@
                         </b-button-group>
                     </template>
                     <template #cell(name)="row">
-                        <h5 class="m-0">{{ row.item.name }}</h5>
+                        <h5 class="m-0">
+                            {{ row.item.name }}
+                        </h5>
                         <div>
                             <span class="badge badge-dark">
                                 <template v-if="row.item.source === 'songs'">
@@ -82,26 +129,40 @@
                                     {{ $gettext('Remote URL') }}
                                 </template>
                             </span>
-                            <span class="badge badge-primary" v-if="row.item.is_jingle">
+                            <span
+                                v-if="row.item.is_jingle"
+                                class="badge badge-primary"
+                            >
                                 {{ $gettext('Jingle Mode') }}
                             </span>
-                            <span class="badge badge-info"
-                                  v-if="row.item.source === 'songs' && row.item.order === 'sequential'">
+                            <span
+                                v-if="row.item.source === 'songs' && row.item.order === 'sequential'"
+                                class="badge badge-info"
+                            >
                                 {{ $gettext('Sequential') }}
                             </span>
-                            <span class="badge badge-info" v-if="row.item.include_in_on_demand">
+                            <span
+                                v-if="row.item.include_in_on_demand"
+                                class="badge badge-info"
+                            >
                                 {{ $gettext('On-Demand') }}
                             </span>
-                            <span class="badge badge-success" v-if="row.item.include_in_automation">
+                            <span
+                                v-if="row.item.include_in_automation"
+                                class="badge badge-success"
+                            >
                                 {{ $gettext('Auto-Assigned') }}
                             </span>
-                            <span class="badge badge-danger" v-if="!row.item.is_enabled">
+                            <span
+                                v-if="!row.item.is_enabled"
+                                class="badge badge-danger"
+                            >
                                 {{ $gettext('Disabled') }}
                             </span>
                         </div>
                     </template>
                     <template #cell(scheduling)="row">
-                        <span v-html="formatType(row.item)"></span>
+                        <span v-html="formatType(row.item)" />
                     </template>
                     <template #cell(num_songs)="row">
                         <template v-if="row.item.source === 'songs'">
@@ -110,25 +171,46 @@
                             </a>
                             ({{ formatLength(row.item.total_length) }})
                         </template>
-                        <template v-else>&nbsp;</template>
+                        <template v-else>
+&nbsp;
+                        </template>
                     </template>
                 </data-table>
             </b-tab>
-            <b-tab :title="$gettext('Schedule View')" no-body>
-                <schedule ref="schedule" :schedule-url="scheduleUrl" :station-time-zone="stationTimeZone"
-                          @click="doCalendarClick"></schedule>
+            <b-tab
+                :title="$gettext('Schedule View')"
+                no-body
+            >
+                <schedule
+                    ref="schedule"
+                    :schedule-url="scheduleUrl"
+                    :station-time-zone="stationTimeZone"
+                    @click="doCalendarClick"
+                />
             </b-tab>
         </b-tabs>
     </b-card>
 
-    <edit-modal ref="editModal" :create-url="listUrl" :station-time-zone="stationTimeZone"
-                :enable-advanced-features="enableAdvancedFeatures"
-                @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
-    <reorder-modal ref="reorderModal"></reorder-modal>
-    <queue-modal ref="queueModal"></queue-modal>
-    <reorder-modal ref="reorderModal"></reorder-modal>
-    <import-modal ref="importModal" @relist="relist"></import-modal>
-    <clone-modal ref="cloneModal" @relist="relist" @needs-restart="mayNeedRestart"></clone-modal>
+    <edit-modal
+        ref="editModal"
+        :create-url="listUrl"
+        :station-time-zone="stationTimeZone"
+        :enable-advanced-features="enableAdvancedFeatures"
+        @relist="relist"
+        @needs-restart="mayNeedRestart"
+    />
+    <reorder-modal ref="reorderModal" />
+    <queue-modal ref="queueModal" />
+    <reorder-modal ref="reorderModal" />
+    <import-modal
+        ref="importModal"
+        @relist="relist"
+    />
+    <clone-modal
+        ref="cloneModal"
+        @relist="relist"
+        @needs-restart="mayNeedRestart"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Stations/Playlists/CloneModal.vue b/frontend/vue/components/Stations/Playlists/CloneModal.vue
index eb79ce89d..2aede5fc0 100644
--- a/frontend/vue/components/Stations/Playlists/CloneModal.vue
+++ b/frontend/vue/components/Stations/Playlists/CloneModal.vue
@@ -1,20 +1,38 @@
 <template>
-    <modal-form ref="modal" id="clone_modal" :title="$gettext('Duplicate Playlist')" :error="error"
-                :disable-save-button="v$.form.$invalid" @submit="doSubmit" @hidden="clearContents">
-
+    <modal-form
+        id="clone_modal"
+        ref="modal"
+        :title="$gettext('Duplicate Playlist')"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_edit_name" :field="v$.form.name">
+            <b-wrapped-form-group
+                id="form_edit_name"
+                class="col-md-12"
+                :field="v$.form.name"
+            >
                 <template #label>
                     {{ $gettext('New Playlist Name') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="form_edit_clone" :field="v$.form.clone">
+            <b-wrapped-form-group
+                id="form_edit_clone"
+                class="col-md-12"
+                :field="v$.form.clone"
+            >
                 <template #label>
                     {{ $gettext('Customize Copy') }}
                 </template>
                 <template #default="props">
-                    <b-form-checkbox-group stacked :id="props.id" v-model="props.field.$model">
+                    <b-form-checkbox-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                    >
                         <b-form-checkbox value="media">
                             {{ $gettext('Copy associated media and folders.') }}
                         </b-form-checkbox>
@@ -25,7 +43,6 @@
                 </template>
             </b-wrapped-form-group>
         </div>
-
     </modal-form>
 </template>
 
@@ -39,10 +56,10 @@ import ModalForm from "~/components/Common/ModalForm";
 export default {
     name: 'CloneModal',
     components: {ModalForm, BWrappedFormGroup, InvisibleSubmitButton},
+    emits: ['relist', 'needs-restart'],
     setup() {
         return {v$: useVuelidate()}
     },
-    emits: ['relist', 'needs-restart'],
     data() {
         return {
             error: null,
diff --git a/frontend/vue/components/Stations/Playlists/EditModal.vue b/frontend/vue/components/Stations/Playlists/EditModal.vue
index 48614bb01..1f0e822f4 100644
--- a/frontend/vue/components/Stations/Playlists/EditModal.vue
+++ b/frontend/vue/components/Stations/Playlists/EditModal.vue
@@ -1,14 +1,28 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <b-tabs content-class="mt-3" pills>
-            <form-basic-info :form="v$.form"></form-basic-info>
-            <form-schedule :form="v$.form" :schedule-items="form.schedule_items"
-                           :station-time-zone="stationTimeZone"></form-schedule>
-            <form-advanced :form="v$.form" v-if="enableAdvancedFeatures"></form-advanced>
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <form-basic-info :form="v$.form" />
+            <form-schedule
+                :form="v$.form"
+                :schedule-items="form.schedule_items"
+                :station-time-zone="stationTimeZone"
+            />
+            <form-advanced
+                v-if="enableAdvancedFeatures"
+                :form="v$.form"
+            />
         </b-tabs>
-
     </modal-form>
 </template>
 
@@ -22,16 +36,16 @@ import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
-    emits: ['needs-restart'],
     components: {FormSchedule, FormBasicInfo, FormAdvanced},
-    setup() {
-        return {v$: useVuelidate()}
-    },
     mixins: [BaseEditModal],
     props: {
         stationTimeZone: String,
         enableAdvancedFeatures: Boolean
     },
+    emits: ['needs-restart'],
+    setup() {
+        return {v$: useVuelidate()}
+    },
     computed: {
         langTitle() {
             return this.isEditMode
diff --git a/frontend/vue/components/Stations/Playlists/Form/Advanced.vue b/frontend/vue/components/Stations/Playlists/Form/Advanced.vue
index d8cf10b2b..4faa77035 100644
--- a/frontend/vue/components/Stations/Playlists/Form/Advanced.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/Advanced.vue
@@ -2,7 +2,11 @@
     <b-tab :title="$gettext('Advanced')">
         <b-form-group>
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-6" id="edit_form_backend_options" :field="form.backend_options">
+                <b-wrapped-form-group
+                    id="edit_form_backend_options"
+                    class="col-md-6"
+                    :field="form.backend_options"
+                >
                     <template #label>
                         {{ $gettext('Advanced Manual AutoDJ Scheduling Options') }}
                     </template>
@@ -10,7 +14,11 @@
                         {{ $gettext('Control how this playlist is handled by the AutoDJ software.') }}
                     </template>
                     <template #default="props">
-                        <b-form-checkbox-group stacked :id="props.id" v-model="props.field.$model">
+                        <b-form-checkbox-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                        >
                             <b-form-checkbox value="interrupt">
                                 {{ $gettext('Interrupt other songs to play at scheduled time.') }}
                             </b-form-checkbox>
diff --git a/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue b/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue
index f5b773eef..7641f6e7c 100644
--- a/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/BasicInfo.vue
@@ -1,14 +1,25 @@
 <template>
-    <b-tab :title="$gettext('Basic Info')" active>
+    <b-tab
+        :title="$gettext('Basic Info')"
+        active
+    >
         <b-form-group>
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-6" id="form_edit_name" :field="form.name">
+                <b-wrapped-form-group
+                    id="form_edit_name"
+                    class="col-md-6"
+                    :field="form.name"
+                >
                     <template #label>
                         {{ $gettext('Playlist Name') }}
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-checkbox class="col-md-6" id="form_edit_is_enabled" :field="form.is_enabled">
+                <b-wrapped-form-checkbox
+                    id="form_edit_is_enabled"
+                    class="col-md-6"
+                    :field="form.is_enabled"
+                >
                     <template #label>
                         {{ $gettext('Enable') }}
                     </template>
@@ -19,12 +30,20 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-group class="col-md-12" id="edit_form_source" :field="form.source">
+                <b-wrapped-form-group
+                    id="edit_form_source"
+                    class="col-md-12"
+                    :field="form.source"
+                >
                     <template #label>
                         {{ $gettext('Source') }}
                     </template>
                     <template #default="props">
-                        <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
+                        <b-form-radio-group
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            stacked
+                        >
                             <b-form-radio value="songs">
                                 {{ $gettext('Song-Based') }}
                                 {{ $gettext('A playlist containing media files hosted on this server.') }}
@@ -39,7 +58,11 @@
             </div>
         </b-form-group>
 
-        <b-card v-show="form.source.$model === 'songs'" class="mb-3" no-body>
+        <b-card
+            v-show="form.source.$model === 'songs'"
+            class="mb-3"
+            no-body
+        >
             <div class="card-header bg-primary-dark">
                 <h2 class="card-title">
                     {{ $gettext('Song-Based Playlist') }}
@@ -48,8 +71,11 @@
             <b-card-body>
                 <b-form-group>
                     <div class="form-row">
-                        <b-wrapped-form-checkbox class="col-md-6" id="form_edit_avoid_duplicates"
-                                                 :field="form.avoid_duplicates">
+                        <b-wrapped-form-checkbox
+                            id="form_edit_avoid_duplicates"
+                            class="col-md-6"
+                            :field="form.avoid_duplicates"
+                        >
                             <template #label>
                                 {{ $gettext('Avoid Duplicate Artists/Titles') }}
                             </template>
@@ -60,8 +86,11 @@
                             </template>
                         </b-wrapped-form-checkbox>
 
-                        <b-wrapped-form-checkbox class="col-md-6" id="form_edit_include_in_on_demand"
-                                                 :field="form.include_in_on_demand">
+                        <b-wrapped-form-checkbox
+                            id="form_edit_include_in_on_demand"
+                            class="col-md-6"
+                            :field="form.include_in_on_demand"
+                        >
                             <template #label>
                                 {{ $gettext('Include in On-Demand Player') }}
                             </template>
@@ -72,39 +101,60 @@
                             </template>
                         </b-wrapped-form-checkbox>
 
-                        <b-wrapped-form-group class="col-md-6" id="form_edit_include_in_requests"
-                                              :field="form.include_in_requests">
+                        <b-wrapped-form-group
+                            id="form_edit_include_in_requests"
+                            class="col-md-6"
+                            :field="form.include_in_requests"
+                        >
                             <template #description>
                                 {{
                                     $gettext('If requests are enabled for your station, users will be able to request media that is on this playlist.')
                                 }}
                             </template>
                             <template #default="props">
-                                <b-form-checkbox :id="props.id" v-model="props.field.$model">
+                                <b-form-checkbox
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                >
                                     {{ $gettext('Allow Requests from This Playlist') }}
                                 </b-form-checkbox>
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-6" id="form_edit_is_jingle" :field="form.is_jingle">
+                        <b-wrapped-form-group
+                            id="form_edit_is_jingle"
+                            class="col-md-6"
+                            :field="form.is_jingle"
+                        >
                             <template #description>
                                 {{
                                     $gettext('Enable this setting to prevent metadata from being sent to the AutoDJ for files in this playlist. This is useful if the playlist contains jingles or bumpers.')
                                 }}
                             </template>
                             <template #default="props">
-                                <b-form-checkbox :id="props.id" v-model="props.field.$model">
+                                <b-form-checkbox
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                >
                                     {{ $gettext('Hide Metadata from Listeners ("Jingle Mode")') }}
                                 </b-form-checkbox>
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-6" id="edit_form_type" :field="form.type">
+                        <b-wrapped-form-group
+                            id="edit_form_type"
+                            class="col-md-6"
+                            :field="form.type"
+                        >
                             <template #label>
                                 {{ $gettext('Playlist Type') }}
                             </template>
                             <template #default="props">
-                                <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
+                                <b-form-radio-group
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                    stacked
+                                >
                                     <b-form-radio value="default">
                                         {{ $gettext('General Rotation') }}
                                         {{
@@ -126,23 +176,33 @@
                                     <b-form-radio value="custom">
                                         {{ $gettext('Advanced') }}
                                         <span class="form-text mt-0">
-                                {{ $gettext('Manually define how this playlist is used in Liquidsoap configuration.') }}
-                                <a href="https://docs.azuracast.com/en/user-guide/playlists/advanced-playlists"
-                                   target="_blank">
-                                    {{ $gettext('Learn about Advanced Playlists') }}
-                                </a>
-                            </span>
+                                            {{ $gettext('Manually define how this playlist is used in Liquidsoap configuration.') }}
+                                            <a
+                                                href="https://docs.azuracast.com/en/user-guide/playlists/advanced-playlists"
+                                                target="_blank"
+                                            >
+                                                {{ $gettext('Learn about Advanced Playlists') }}
+                                            </a>
+                                        </span>
                                     </b-form-radio>
                                 </b-form-radio-group>
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-6" id="edit_form_order" :field="form.order">
+                        <b-wrapped-form-group
+                            id="edit_form_order"
+                            class="col-md-6"
+                            :field="form.order"
+                        >
                             <template #label>
                                 {{ $gettext('Song Playback Order') }}
                             </template>
                             <template #default="props">
-                                <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
+                                <b-form-radio-group
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                    stacked
+                                >
                                     <b-form-radio value="shuffle">
                                         {{ $gettext('Shuffled') }}
                                         {{
@@ -174,7 +234,11 @@
 
                     <b-form-group>
                         <div class="form-row">
-                            <b-wrapped-form-group class="col-md-12" id="form_edit_weight" :field="form.weight">
+                            <b-wrapped-form-group
+                                id="form_edit_weight"
+                                class="col-md-12"
+                                :field="form.weight"
+                            >
                                 <template #label>
                                     {{ $gettext('Playlist Weight') }}
                                 </template>
@@ -184,8 +248,12 @@
                                     }}
                                 </template>
                                 <template #default="props">
-                                    <b-form-select :id="props.id" v-model="props.field.$model" :options="weightOptions"
-                                                   :state="props.state"></b-form-select>
+                                    <b-form-select
+                                        :id="props.id"
+                                        v-model="props.field.$model"
+                                        :options="weightOptions"
+                                        :state="props.state"
+                                    />
                                 </template>
                             </b-wrapped-form-group>
                         </div>
@@ -199,9 +267,13 @@
 
                     <b-form-group>
                         <div class="form-row">
-                            <b-wrapped-form-group class="col-md-12" id="form_edit_play_per_songs"
-                                                  :field="form.play_per_songs" input-type="number"
-                                                  :input-attrs="{min: '0', max: '150'}">
+                            <b-wrapped-form-group
+                                id="form_edit_play_per_songs"
+                                class="col-md-12"
+                                :field="form.play_per_songs"
+                                input-type="number"
+                                :input-attrs="{min: '0', max: '150'}"
+                            >
                                 <template #label>
                                     {{ $gettext('Number of Songs Between Plays') }}
                                 </template>
@@ -222,10 +294,13 @@
 
                     <b-form-group>
                         <div class="form-row">
-
-                            <b-wrapped-form-group class="col-md-12" id="form_edit_play_per_minutes"
-                                                  :field="form.play_per_minutes" input-type="number"
-                                                  :input-attrs="{min: '0', max: '360'}">
+                            <b-wrapped-form-group
+                                id="form_edit_play_per_minutes"
+                                class="col-md-12"
+                                :field="form.play_per_minutes"
+                                input-type="number"
+                                :input-attrs="{min: '0', max: '360'}"
+                            >
                                 <template #label>
                                     {{ $gettext('Number of Minutes Between Plays') }}
                                 </template>
@@ -235,7 +310,6 @@
                                     }}
                                 </template>
                             </b-wrapped-form-group>
-
                         </div>
                     </b-form-group>
                 </b-form-fieldset>
@@ -247,9 +321,13 @@
 
                     <b-form-group>
                         <div class="form-row">
-                            <b-wrapped-form-group class="col-md-12" id="form_edit_play_per_hour_minute"
-                                                  :field="form.play_per_hour_minute" input-type="number"
-                                                  :input-attrs="{min: '0', max: '59'}">
+                            <b-wrapped-form-group
+                                id="form_edit_play_per_hour_minute"
+                                class="col-md-12"
+                                :field="form.play_per_hour_minute"
+                                input-type="number"
+                                :input-attrs="{min: '0', max: '59'}"
+                            >
                                 <template #label>
                                     {{ $gettext('Minute of Hour to Play') }}
                                 </template>
@@ -263,7 +341,11 @@
             </b-card-body>
         </b-card>
 
-        <b-card v-show="form.source.$model === 'remote_url'" class="mb-3" no-body>
+        <b-card
+            v-show="form.source.$model === 'remote_url'"
+            class="mb-3"
+            no-body
+        >
             <div class="card-header bg-primary-dark">
                 <h2 class="card-title">
                     {{ $gettext('Remote URL Playlist') }}
@@ -272,18 +354,30 @@
             <b-card-body>
                 <b-form-group>
                     <div class="form-row">
-                        <b-wrapped-form-group class="col-md-6" id="form_edit_remote_url" :field="form.remote_url">
+                        <b-wrapped-form-group
+                            id="form_edit_remote_url"
+                            class="col-md-6"
+                            :field="form.remote_url"
+                        >
                             <template #label>
                                 {{ $gettext('Remote URL') }}
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-6" id="edit_form_remote_type" :field="form.remote_type">
+                        <b-wrapped-form-group
+                            id="edit_form_remote_type"
+                            class="col-md-6"
+                            :field="form.remote_type"
+                        >
                             <template #label>
                                 {{ $gettext('Remote URL Type') }}
                             </template>
                             <template #default="props">
-                                <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
+                                <b-form-radio-group
+                                    :id="props.id"
+                                    v-model="props.field.$model"
+                                    stacked
+                                >
                                     <b-form-radio value="stream">
                                         {{ $gettext('Direct Stream URL') }}
                                     </b-form-radio>
@@ -294,7 +388,11 @@
                             </template>
                         </b-wrapped-form-group>
 
-                        <b-wrapped-form-group class="col-md-6" id="form_edit_remote_buffer" :field="form.remote_buffer">
+                        <b-wrapped-form-group
+                            id="form_edit_remote_buffer"
+                            class="col-md-6"
+                            :field="form.remote_buffer"
+                        >
                             <template #label>
                                 {{ $gettext('Remote Playback Buffer (Seconds)') }}
                             </template>
@@ -304,12 +402,16 @@
                                 }}
                             </template>
                             <template #default="props">
-                                <b-form-input id="form_edit_remote_buffer" type="number" min="0" max="120"
-                                              v-model="form.remote_buffer.$model"
-                                              :state="form.remote_buffer.$dirty ? !form.remote_buffer.$error : null"></b-form-input>
+                                <b-form-input
+                                    id="form_edit_remote_buffer"
+                                    v-model="form.remote_buffer.$model"
+                                    type="number"
+                                    min="0"
+                                    max="120"
+                                    :state="form.remote_buffer.$dirty ? !form.remote_buffer.$error : null"
+                                />
                             </template>
                         </b-wrapped-form-group>
-
                     </div>
                 </b-form-group>
             </b-card-body>
diff --git a/frontend/vue/components/Stations/Playlists/Form/Schedule.vue b/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
index b216c3b79..01b8e5a0c 100644
--- a/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
@@ -11,14 +11,22 @@
             </p>
         </b-form-group>
 
-        <playlists-form-schedule-row v-for="(row, index) in scheduleItems" :key="index"
-                                     :station-time-zone="stationTimeZone"
-                                     :index="index" v-model:row="scheduleItems[index]" @remove="remove(index)">
-        </playlists-form-schedule-row>
+        <playlists-form-schedule-row
+            v-for="(row, index) in scheduleItems"
+            :key="index"
+            v-model:row="scheduleItems[index]"
+            :station-time-zone="stationTimeZone"
+            :index="index"
+            @remove="remove(index)"
+        />
 
         <b-button-group>
-            <b-button size="sm" variant="outline-primary" @click.prevent="add">
-                <icon icon="add"></icon>
+            <b-button
+                size="sm"
+                variant="outline-primary"
+                @click.prevent="add"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Schedule Item') }}
             </b-button>
         </b-button-group>
diff --git a/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue b/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue
index 226d53ec8..d1613aac4 100644
--- a/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/ScheduleRow.vue
@@ -1,5 +1,8 @@
 <template>
-    <b-card class="mb-3" no-body>
+    <b-card
+        class="mb-3"
+        no-body
+    >
         <div class="card-header bg-primary-dark d-flex align-items-center">
             <div class="flex-fill">
                 <h2 class="card-title">
@@ -7,8 +10,13 @@
                 </h2>
             </div>
             <div class="flex-shrink-0">
-                <b-button size="sm" variant="outline-light" class="py-2 pr-0" @click.prevent="$emit('remove')">
-                    <icon icon="remove"></icon>
+                <b-button
+                    size="sm"
+                    variant="outline-light"
+                    class="py-2 pr-0"
+                    @click.prevent="$emit('remove')"
+                >
+                    <icon icon="remove" />
                     {{ $gettext('Remove') }}
                 </b-button>
             </div>
@@ -16,8 +24,11 @@
         <b-card-body>
             <b-form-group>
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_start_time_'+index"
-                                          :field="v$.row.start_time">
+                    <b-wrapped-form-group
+                        :id="'edit_form_start_time_'+index"
+                        class="col-md-4"
+                        :field="v$.row.start_time"
+                    >
                         <template #label>
                             {{ $gettext('Start Time') }}
                         </template>
@@ -25,12 +36,19 @@
                             {{ $gettext('To play once per day, set the start and end times to the same value.') }}.00
                         </template>
                         <template #default="props">
-                            <playlist-time :id="props.id" v-model="props.field.$model"
-                                           :state="props.state"></playlist-time>
+                            <playlist-time
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :state="props.state"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_end_time_'+index" :field="v$.row.end_time">
+                    <b-wrapped-form-group
+                        :id="'edit_form_end_time_'+index"
+                        class="col-md-4"
+                        :field="v$.row.end_time"
+                    >
                         <template #label>
                             {{ $gettext('End Time') }}
                         </template>
@@ -40,12 +58,18 @@
                             }}
                         </template>
                         <template #default="props">
-                            <playlist-time :id="props.id" v-model="props.field.$model"
-                                           :state="props.state"></playlist-time>
+                            <playlist-time
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :state="props.state"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-col md="4" class="form-group">
+                    <b-col
+                        md="4"
+                        class="form-group"
+                    >
                         <label>
                             {{ $gettext('Station Time Zone') }}
                         </label>
@@ -54,8 +78,11 @@
                         </div>
                     </b-col>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_start_date_'+index"
-                                          :field="v$.row.start_date">
+                    <b-wrapped-form-group
+                        :id="'edit_form_start_date_'+index"
+                        class="col-md-4"
+                        :field="v$.row.start_date"
+                    >
                         <template #label>
                             {{ $gettext('Start Date') }}
                         </template>
@@ -65,23 +92,38 @@
                             }}
                         </template>
                         <template #default="props">
-                            <b-form-input :id="props.id" type="date"
-                                          v-model="props.field.$model" :state="props.state"></b-form-input>
+                            <b-form-input
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                type="date"
+                                :state="props.state"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_end_date_'+index" :field="v$.row.end_date">
+                    <b-wrapped-form-group
+                        :id="'edit_form_end_date_'+index"
+                        class="col-md-4"
+                        :field="v$.row.end_date"
+                    >
                         <template #label>
                             {{ $gettext('End Date') }}
                         </template>
                         <template #default="props">
-                            <b-form-input :id="props.id" type="date" v-model="props.field.$model"
-                                          :state="props.state"></b-form-input>
+                            <b-form-input
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                type="date"
+                                :state="props.state"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-checkbox class="col-md-4" :id="'edit_form_loop_once_'+index"
-                                             :field="v$.row.loop_once">
+                    <b-wrapped-form-checkbox
+                        :id="'edit_form_loop_once_'+index"
+                        class="col-md-4"
+                        :field="v$.row.loop_once"
+                    >
                         <template #label>
                             {{ $gettext('Loop Once') }}
                         </template>
@@ -90,7 +132,11 @@
                         </template>
                     </b-wrapped-form-checkbox>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_days_'+index" :field="v$.row.days">
+                    <b-wrapped-form-group
+                        :id="'edit_form_days_'+index"
+                        class="col-md-4"
+                        :field="v$.row.days"
+                    >
                         <template #label>
                             {{ $gettext('Scheduled Play Days of Week') }}
                         </template>
@@ -98,11 +144,14 @@
                             {{ $gettext('Leave blank to play on every day of the week.') }}
                         </template>
                         <template #default="props">
-                            <b-checkbox-group stacked :id="'edit_form_days_'+index" v-model="v$.row.days.$model"
-                                              :options="dayOptions"></b-checkbox-group>
+                            <b-checkbox-group
+                                :id="'edit_form_days_'+index"
+                                v-model="v$.row.days.$model"
+                                stacked
+                                :options="dayOptions"
+                            />
                         </template>
                     </b-wrapped-form-group>
-
                 </div>
             </b-form-group>
         </b-card-body>
@@ -125,10 +174,10 @@ export default {
         row: Object,
         stationTimeZone: String,
     },
+    emits: ['remove'],
     setup() {
         return {v$: useVuelidate()}
     },
-    emits: ['remove'],
     validations: {
         row: {
             'start_time': {required},
diff --git a/frontend/vue/components/Stations/Playlists/ImportModal.vue b/frontend/vue/components/Stations/Playlists/ImportModal.vue
index 695106291..cd2b6b9ed 100644
--- a/frontend/vue/components/Stations/Playlists/ImportModal.vue
+++ b/frontend/vue/components/Stations/Playlists/ImportModal.vue
@@ -1,9 +1,20 @@
 <template>
-    <b-modal id="import_modal" ref="modal" :title="$gettext('Import from PLS/M3U')" @hidden="onHidden">
+    <b-modal
+        id="import_modal"
+        ref="modal"
+        :title="$gettext('Import from PLS/M3U')"
+        @hidden="onHidden"
+    >
         <div v-if="results">
-            <p class="card-text">{{ results.message }}</p>
+            <p class="card-text">
+                {{ results.message }}
+            </p>
 
-            <b-table-simple striped responsive style="max-height: 300px; overflow-y: scroll;">
+            <b-table-simple
+                striped
+                responsive
+                style="max-height: 300px; overflow-y: scroll;"
+            >
                 <b-thead>
                     <b-tr>
                         <b-th class="p-2">
@@ -14,11 +25,23 @@
                     </b-tr>
                 </b-thead>
                 <b-tbody>
-                    <b-tr v-for="row in results.import_results" :key="row.path">
-                        <b-td class="p-2 text-monospace" style="overflow-x: auto;">
+                    <b-tr
+                        v-for="row in results.import_results"
+                        :key="row.path"
+                    >
+                        <b-td
+                            class="p-2 text-monospace"
+                            style="overflow-x: auto;"
+                        >
                             <pre class="mb-0">{{ row.path }}</pre>
-                            <pre v-if="row.match" class="mb-0 text-success">{{ row.match }}</pre>
-                            <pre v-else class="mb-0 text-danger">
+                            <pre
+                                v-if="row.match"
+                                class="mb-0 text-success"
+                            >{{ row.match }}</pre>
+                            <pre
+                                v-else
+                                class="mb-0 text-danger"
+                            >
                                 {{ $gettext('No Match') }}
                             </pre>
                         </b-td>
@@ -26,7 +49,11 @@
                 </b-tbody>
             </b-table-simple>
         </div>
-        <b-form v-else class="form" @submit.prevent="doSubmit">
+        <b-form
+            v-else
+            class="form"
+            @submit.prevent="doSubmit"
+        >
             <b-form-group label-for="import_modal_playlist_file">
                 <template #label>
                     {{ $gettext('Select PLS/M3U File to Import') }}
@@ -36,16 +63,28 @@
                         $gettext('AzuraCast will scan the uploaded file for matches in this station\'s music library. Media should already be uploaded before running this step. You can re-run this tool as many times as needed.')
                     }}
                 </template>
-                <b-form-file id="import_modal_playlist_file" v-model="playlistFile"></b-form-file>
+                <b-form-file
+                    id="import_modal_playlist_file"
+                    v-model="playlistFile"
+                />
             </b-form-group>
 
-            <invisible-submit-button/>
+            <invisible-submit-button />
         </b-form>
         <template #modal-footer>
-            <b-button variant="default" type="button" @click="close">
+            <b-button
+                variant="default"
+                type="button"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button v-if="!results" variant="primary" type="submit" @click="doSubmit">
+            <b-button
+                v-if="!results"
+                variant="primary"
+                type="submit"
+                @click="doSubmit"
+            >
                 {{ $gettext('Import from PLS/M3U') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Stations/Playlists/QueueModal.vue b/frontend/vue/components/Stations/Playlists/QueueModal.vue
index f0a6e8832..584274368 100644
--- a/frontend/vue/components/Stations/Playlists/QueueModal.vue
+++ b/frontend/vue/components/Stations/Playlists/QueueModal.vue
@@ -1,20 +1,40 @@
 <template>
-    <b-modal size="lg" id="queue_modal" ref="modal" :title="$gettext('Playback Queue')" :busy="loading">
+    <b-modal
+        id="queue_modal"
+        ref="modal"
+        size="lg"
+        :title="$gettext('Playback Queue')"
+        :busy="loading"
+    >
         <p>
             {{
                 $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-overlay
+            variant="card"
+            :show="loading"
+        >
+            <b-table-simple
+                striped
+                class="sortable mb-0"
+            >
                 <b-thead>
                     <tr>
-                        <th style="width: 50%;">{{ $gettext('Title') }}</th>
-                        <th style="width: 50%;">{{ $gettext('Artist') }}</th>
+                        <th style="width: 50%;">
+                            {{ $gettext('Title') }}
+                        </th>
+                        <th style="width: 50%;">
+                            {{ $gettext('Artist') }}
+                        </th>
                     </tr>
                 </b-thead>
                 <b-tbody>
-                    <tr class="align-middle" v-for="(row,index) in media" :key="row.id">
+                    <tr
+                        v-for="(row,index) in media"
+                        :key="row.id"
+                        class="align-middle"
+                    >
                         <td>
                             <span class="typography-subheading">{{ row.title }}</span>
                         </td>
@@ -24,10 +44,18 @@
             </b-table-simple>
         </b-overlay>
         <template #modal-footer>
-            <b-button variant="default" type="button" @click="close">
+            <b-button
+                variant="default"
+                type="button"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button variant="danger" type="submit" @click="doClear">
+            <b-button
+                variant="danger"
+                type="submit"
+                @click="doClear"
+            >
                 {{ $gettext('Clear Queue') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Stations/Playlists/ReorderModal.vue b/frontend/vue/components/Stations/Playlists/ReorderModal.vue
index f75b5dd7f..c40569fd6 100644
--- a/frontend/vue/components/Stations/Playlists/ReorderModal.vue
+++ b/frontend/vue/components/Stations/Playlists/ReorderModal.vue
@@ -1,23 +1,60 @@
 <template>
-    <b-modal size="lg" id="reorder_modal" ref="modal" :title="$gettext('Reorder Playlist')" :busy="loading" hide-footer>
-        <b-overlay variant="card" :show="loading">
-            <div style="min-height: 40px;" class="flex-fill text-left bg-primary rounded mb-2">
-                <inline-player ref="player"></inline-player>
+    <b-modal
+        id="reorder_modal"
+        ref="modal"
+        size="lg"
+        :title="$gettext('Reorder Playlist')"
+        :busy="loading"
+        hide-footer
+    >
+        <b-overlay
+            variant="card"
+            :show="loading"
+        >
+            <div
+                style="min-height: 40px;"
+                class="flex-fill text-left bg-primary rounded mb-2"
+            >
+                <inline-player ref="player" />
             </div>
-            <b-table-simple striped class="sortable mb-0">
+            <b-table-simple
+                striped
+                class="sortable mb-0"
+            >
                 <b-thead>
                     <tr>
-                        <th style="width: 5%">&nbsp;</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>
+                        <th style="width: 5%">
+&nbsp;
+                        </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">
-                    <tr class="align-middle" v-for="(row,index) in media" :key="media.id">
+                <draggable
+                    v-model="media"
+                    tag="tbody"
+                    @change="save"
+                >
+                    <tr
+                        v-for="(row,index) in media"
+                        :key="media.id"
+                        class="align-middle"
+                    >
                         <td class="pr-2">
-                            <play-button :url="row.media.links.play" icon-class="lg outlined"></play-button>
+                            <play-button
+                                :url="row.media.links.play"
+                                icon-class="lg outlined"
+                            />
                         </td>
                         <td class="pl-2">
                             <span class="typography-subheading">{{ row.media.title }}</span>
@@ -26,15 +63,23 @@
                         <td>{{ row.media.album }}</td>
                         <td>
                             <b-button-group size="sm">
-                                <b-button size="sm" variant="primary" @click.prevent="moveDown(index)"
-                                          :title="$gettext('Down')"
-                                          v-if="index+1 < media.length">
-                                    <icon icon="arrow_downward"></icon>
+                                <b-button
+                                    v-if="index+1 < media.length"
+                                    size="sm"
+                                    variant="primary"
+                                    :title="$gettext('Down')"
+                                    @click.prevent="moveDown(index)"
+                                >
+                                    <icon icon="arrow_downward" />
                                 </b-button>
-                                <b-button size="sm" variant="primary" @click.prevent="moveUp(index)"
-                                          :title="$gettext('Up')"
-                                          v-if="index > 0">
-                                    <icon icon="arrow_upward"></icon>
+                                <b-button
+                                    v-if="index > 0"
+                                    size="sm"
+                                    variant="primary"
+                                    :title="$gettext('Up')"
+                                    @click.prevent="moveUp(index)"
+                                >
+                                    <icon icon="arrow_upward" />
                                 </b-button>
                             </b-button-group>
                         </td>
@@ -45,12 +90,6 @@
     </b-modal>
 </template>
 
-<style lang="scss">
-table.sortable {
-    cursor: pointer;
-}
-</style>
-
 <script>
 import Draggable from 'vuedraggable';
 import Icon from '~/components/Common/Icon';
@@ -107,3 +146,9 @@ export default {
     }
 };
 </script>
+
+<style lang="scss">
+table.sortable {
+    cursor: pointer;
+}
+</style>
diff --git a/frontend/vue/components/Stations/Podcasts.vue b/frontend/vue/components/Stations/Podcasts.vue
index ac7fb0050..84ecaf543 100644
--- a/frontend/vue/components/Stations/Podcasts.vue
+++ b/frontend/vue/components/Stations/Podcasts.vue
@@ -1,7 +1,15 @@
 <template>
-    <episodes-view v-if="activePodcast" v-bind="$props" :podcast="activePodcast"
-                   @clear-podcast="onClearPodcast"></episodes-view>
-    <list-view v-else v-bind="$props" @select-podcast="onSelectPodcast"></list-view>
+    <episodes-view
+        v-if="activePodcast"
+        v-bind="$props"
+        :podcast="activePodcast"
+        @clear-podcast="onClearPodcast"
+    />
+    <list-view
+        v-else
+        v-bind="$props"
+        @select-podcast="onSelectPodcast"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue b/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue
index 4f4a63f62..da56690fe 100644
--- a/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue
+++ b/frontend/vue/components/Stations/Podcasts/Common/Artwork.vue
@@ -12,15 +12,30 @@
                                 $gettext('Artwork must be a minimum size of 1400 x 1400 pixels and a maximum size of 3000 x 3000 pixels for Apple Podcasts.')
                             }}
                         </template>
-                        <b-form-file id="edit_form_art" accept="image/jpeg, image/png"
-                                     v-model="uploadedFile"></b-form-file>
+                        <b-form-file
+                            id="edit_form_art"
+                            v-model="uploadedFile"
+                            accept="image/jpeg, image/png"
+                        />
                     </b-form-group>
                 </b-col>
-                <b-col md="4" v-if="src && src !== ''">
-                    <b-img :src="src" :alt="langTitle" rounded fluid></b-img>
+                <b-col
+                    v-if="src && src !== ''"
+                    md="4"
+                >
+                    <b-img
+                        :src="src"
+                        :alt="langTitle"
+                        rounded
+                        fluid
+                    />
 
                     <div class="buttons pt-3">
-                        <b-button block variant="danger" @click="deleteArt">
+                        <b-button
+                            block
+                            variant="danger"
+                            @click="deleteArt"
+                        >
                             {{ $gettext('Clear Artwork') }}
                         </b-button>
                     </div>
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
index ce702646a..783b72f59 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
@@ -1,18 +1,34 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <episode-form-basic-info :form="v$.form" />
 
-        <b-tabs content-class="mt-3" pills>
-            <episode-form-basic-info :form="v$.form"></episode-form-basic-info>
+            <episode-form-media
+                v-model="v$.form.media_file.$model"
+                :record-has-media="record.has_media"
+                :new-media-url="newMediaUrl"
+                :edit-media-url="record.links.media"
+                :download-url="record.links.download"
+            />
 
-            <episode-form-media v-model="v$.form.media_file.$model" :record-has-media="record.has_media"
-                                :new-media-url="newMediaUrl" :edit-media-url="record.links.media"
-                                :download-url="record.links.download"></episode-form-media>
-
-            <podcast-common-artwork v-model="v$.form.artwork_file.$model" :artwork-src="record.art"
-                                    :new-art-url="newArtUrl" :edit-art-url="record.links.art"></podcast-common-artwork>
+            <podcast-common-artwork
+                v-model="v$.form.artwork_file.$model"
+                :artwork-src="record.art"
+                :new-art-url="newArtUrl"
+                :edit-art-url="record.links.art"
+            />
         </b-tabs>
-
     </modal-form>
 </template>
 
@@ -29,9 +45,6 @@ import useVuelidate from "@vuelidate/core";
 export default {
     name: 'EditModal',
     components: {EpisodeFormMedia, PodcastCommonArtwork, EpisodeFormBasicInfo},
-    setup() {
-        return {v$: useVuelidate()}
-    },
     mixins: [BaseEditModal],
     props: {
         stationTimeZone: String,
@@ -40,6 +53,9 @@ export default {
         newArtUrl: String,
         newMediaUrl: String
     },
+    setup() {
+        return {v$: useVuelidate()}
+    },
     data() {
         return {
             uploadPercentage: null,
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue b/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue
index f6d3262e6..c82d91335 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeForm/BasicInfo.vue
@@ -1,15 +1,25 @@
 <template>
-    <b-tab :title="$gettext('Basic Information')" active>
+    <b-tab
+        :title="$gettext('Basic Information')"
+        active
+    >
         <b-form-group>
             <div class="form-row">
-
-                <b-wrapped-form-group class="col-md-6" id="form_edit_title" :field="form.title">
+                <b-wrapped-form-group
+                    id="form_edit_title"
+                    class="col-md-6"
+                    :field="form.title"
+                >
                     <template #label>
                         {{ $gettext('Episode') }}
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="form_edit_link" :field="form.link">
+                <b-wrapped-form-group
+                    id="form_edit_link"
+                    class="col-md-6"
+                    :field="form.link"
+                >
                     <template #label>
                         {{ $gettext('Website') }}
                     </template>
@@ -18,8 +28,12 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-12" id="form_edit_description" :field="form.description"
-                                      input-type="textarea">
+                <b-wrapped-form-group
+                    id="form_edit_description"
+                    class="col-md-12"
+                    :field="form.description"
+                    input-type="textarea"
+                >
                     <template #label>
                         {{ $gettext('Description') }}
                     </template>
@@ -30,7 +44,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="form_edit_publish_date" :field="form.publish_date">
+                <b-wrapped-form-group
+                    id="form_edit_publish_date"
+                    class="col-md-6"
+                    :field="form.publish_date"
+                >
                     <template #label>
                         {{ $gettext('Publish Date') }}
                     </template>
@@ -38,12 +56,20 @@
                         {{ $gettext('The date when the episode should be published.') }}
                     </template>
                     <template #default="props">
-                        <b-form-datepicker :id="props.id" v-model="props.field.$model" :state="props.state"
-                                           :locale="locale"></b-form-datepicker>
+                        <b-form-datepicker
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :state="props.state"
+                            :locale="locale"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="form_edit_publish_time" :field="form.publish_time">
+                <b-wrapped-form-group
+                    id="form_edit_publish_time"
+                    class="col-md-6"
+                    :field="form.publish_time"
+                >
                     <template #label>
                         {{ $gettext('Publish Time') }}
                     </template>
@@ -53,12 +79,20 @@
                         }}
                     </template>
                     <template #default="props">
-                        <b-form-timepicker :id="props.id" v-model="props.field.$model"
-                                           :state="props.state" :locale="locale"></b-form-timepicker>
+                        <b-form-timepicker
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :state="props.state"
+                            :locale="locale"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-checkbox class="col-md-12" id="form_edit_explicit" :field="form.explicit">
+                <b-wrapped-form-checkbox
+                    id="form_edit_explicit"
+                    class="col-md-12"
+                    :field="form.explicit"
+                >
                     <template #label>
                         {{ $gettext('Contains explicit content') }}
                     </template>
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue b/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue
index c52a9bfc0..fa158cf93 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeForm/Media.vue
@@ -2,7 +2,10 @@
     <b-tab :title="$gettext('Media')">
         <b-form-group>
             <div class="form-row">
-                <b-form-group class="col-md-6" label-for="media_file">
+                <b-form-group
+                    class="col-md-6"
+                    label-for="media_file"
+                >
                     <template #label>
                         {{ $gettext('Select Media File') }}
                     </template>
@@ -12,8 +15,11 @@
                         }}
                     </template>
 
-                    <flow-upload :target-url="targetUrl" :valid-mime-types="['audio/x-m4a', 'audio/mpeg']"
-                                 @success="onFileSuccess"></flow-upload>
+                    <flow-upload
+                        :target-url="targetUrl"
+                        :valid-mime-types="['audio/x-m4a', 'audio/mpeg']"
+                        @success="onFileSuccess"
+                    />
                 </b-form-group>
 
                 <b-form-group class="col-md-6">
@@ -23,10 +29,20 @@
 
                     <div v-if="hasMedia">
                         <div class="buttons pt-3">
-                            <b-button v-if="downloadUrl" block variant="bg" :href="downloadUrl" target="_blank">
+                            <b-button
+                                v-if="downloadUrl"
+                                block
+                                variant="bg"
+                                :href="downloadUrl"
+                                target="_blank"
+                            >
                                 {{ $gettext('Download') }}
                             </b-button>
-                            <b-button block variant="danger" @click="deleteMedia">
+                            <b-button
+                                block
+                                variant="danger"
+                                @click="deleteMedia"
+                            >
                                 {{ $gettext('Clear Media') }}
                             </b-button>
                         </div>
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodesView.vue b/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
index 94052695e..025fd2125 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodesView.vue
@@ -5,59 +5,100 @@
                 <b-col md="7">
                     <div class="d-flex align-items-center">
                         <div class="flex-shrink-0 pr-3">
-                            <album-art :src="podcast.art"></album-art>
+                            <album-art :src="podcast.art" />
                         </div>
                         <div class="flex-fill">
-                            <h2 class="card-title">{{ podcast.title }}</h2>
-                            <h4 class="card-subtitle text-muted">{{ $gettext('Episodes') }}</h4>
+                            <h2 class="card-title">
+                                {{ podcast.title }}
+                            </h2>
+                            <h4 class="card-subtitle text-muted">
+                                {{ $gettext('Episodes') }}
+                            </h4>
                         </div>
                     </div>
                 </b-col>
-                <b-col md="5" class="text-right text-white-50">
-                    <stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota>
+                <b-col
+                    md="5"
+                    class="text-right text-white-50"
+                >
+                    <stations-common-quota
+                        ref="quota"
+                        :quota-url="quotaUrl"
+                    />
                 </b-col>
             </b-row>
         </b-card-header>
 
         <b-card-body body-class="card-padding-sm">
             <div class="buttons">
-                <b-button variant="bg" @click="doClearPodcast()">
-                    <icon icon="arrow_back"></icon>
+                <b-button
+                    variant="bg"
+                    @click="doClearPodcast()"
+                >
+                    <icon icon="arrow_back" />
                     {{ $gettext('All Podcasts') }}
                 </b-button>
 
-                <b-button variant="outline-primary" @click.prevent="doCreate">
-                    <i class="material-icons" aria-hidden="true">add</i>
+                <b-button
+                    variant="outline-primary"
+                    @click.prevent="doCreate"
+                >
+                    <i
+                        class="material-icons"
+                        aria-hidden="true"
+                    >add</i>
                     {{ $gettext('Add Episode') }}
                 </b-button>
             </div>
         </b-card-body>
 
-        <data-table ref="datatable" id="station_podcast_episodes" paginated :fields="fields" :responsive="false"
-                    :api-url="podcast.links.episodes">
+        <data-table
+            id="station_podcast_episodes"
+            ref="datatable"
+            paginated
+            :fields="fields"
+            :responsive="false"
+            :api-url="podcast.links.episodes"
+        >
             <template #cell(art)="row">
-                <album-art :src="row.item.art"></album-art>
+                <album-art :src="row.item.art" />
             </template>
             <template #cell(title)="row">
-                <h5 class="m-0">{{ row.item.title }}</h5>
-                <a :href="row.item.links.public" target="_blank">{{ $gettext('Public Page') }}</a>
+                <h5 class="m-0">
+                    {{ row.item.title }}
+                </h5>
+                <a
+                    :href="row.item.links.public"
+                    target="_blank"
+                >{{ $gettext('Public Page') }}</a>
             </template>
             <template #cell(podcast_media)="row">
                 <template v-if="row.item.media">
                     <span>{{ row.item.media.original_name }}</span>
-                    <br/>
+                    <br>
                     <small>{{ row.item.media.length_text }}</small>
                 </template>
             </template>
             <template #cell(explicit)="row">
-                <span class="badge badge-danger" v-if="row.item.explicit">{{ $gettext('Explicit') }}</span>
+                <span
+                    v-if="row.item.explicit"
+                    class="badge badge-danger"
+                >{{ $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)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -65,9 +106,16 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editEpisodeModal" :create-url="podcast.links.episodes" :station-time-zone="stationTimeZone"
-                :new-art-url="podcast.links.episode_new_art" :new-media-url="podcast.links.episode_new_media"
-                :locale="locale" :podcast-id="podcast.id" @relist="relist"></edit-modal>
+    <edit-modal
+        ref="editEpisodeModal"
+        :create-url="podcast.links.episodes"
+        :station-time-zone="stationTimeZone"
+        :new-art-url="podcast.links.episode_new_art"
+        :new-media-url="podcast.links.episode_new_media"
+        :locale="locale"
+        :podcast-id="podcast.id"
+        @relist="relist"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Stations/Podcasts/ListView.vue b/frontend/vue/components/Stations/Podcasts/ListView.vue
index 1716922e8..44d6dfba8 100644
--- a/frontend/vue/components/Stations/Podcasts/ListView.vue
+++ b/frontend/vue/components/Stations/Podcasts/ListView.vue
@@ -3,45 +3,85 @@
         <b-card-header header-bg-variant="primary-dark">
             <b-row class="align-items-center">
                 <b-col md="7">
-                    <h2 class="card-title">{{ $gettext('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>
+                <b-col
+                    md="5"
+                    class="text-right text-white-50"
+                >
+                    <stations-common-quota
+                        ref="quota"
+                        :quota-url="quotaUrl"
+                    />
                 </b-col>
             </b-row>
         </b-card-header>
 
         <b-card-body body-class="card-padding-sm">
             <div class="buttons">
-                <b-button variant="outline-primary" @click.prevent="doCreate">
-                    <i class="material-icons" aria-hidden="true">add</i>
+                <b-button
+                    variant="outline-primary"
+                    @click.prevent="doCreate"
+                >
+                    <i
+                        class="material-icons"
+                        aria-hidden="true"
+                    >add</i>
                     {{ $gettext('Add Podcast') }}
                 </b-button>
             </div>
         </b-card-body>
 
-        <data-table ref="datatable" id="station_podcasts" paginated :fields="fields" :responsive="false"
-                    :api-url="listUrl">
+        <data-table
+            id="station_podcasts"
+            ref="datatable"
+            paginated
+            :fields="fields"
+            :responsive="false"
+            :api-url="listUrl"
+        >
             <template #cell(art)="row">
-                <album-art :src="row.item.art"></album-art>
+                <album-art :src="row.item.art" />
             </template>
             <template #cell(title)="row">
-                <h5 class="m-0">{{ row.item.title }}</h5>
-                <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>
+                <h5 class="m-0">
+                    {{ row.item.title }}
+                </h5>
+                <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) }}
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
-                    <b-button size="sm" variant="dark" @click.prevent="doSelectPodcast(row.item)">
+                    <b-button
+                        size="sm"
+                        variant="dark"
+                        @click.prevent="doSelectPodcast(row.item)"
+                    >
                         {{ $gettext('Episodes') }}
                     </b-button>
                 </b-button-group>
@@ -49,9 +89,15 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editPodcastModal" :create-url="listUrl" :station-time-zone="stationTimeZone"
-                :new-art-url="newArtUrl" :language-options="languageOptions"
-                :categories-options="categoriesOptions" @relist="relist"></edit-modal>
+    <edit-modal
+        ref="editPodcastModal"
+        :create-url="listUrl"
+        :station-time-zone="stationTimeZone"
+        :new-art-url="newArtUrl"
+        :language-options="languageOptions"
+        :categories-options="categoriesOptions"
+        @relist="relist"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue b/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
index 59497a7e1..fc8109da7 100644
--- a/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
+++ b/frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
@@ -1,16 +1,30 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <podcast-form-basic-info
+                :form="v$.form"
+                :categories-options="categoriesOptions"
+                :language-options="languageOptions"
+            />
 
-        <b-tabs content-class="mt-3" pills>
-            <podcast-form-basic-info :form="v$.form"
-                                     :categories-options="categoriesOptions" :language-options="languageOptions">
-            </podcast-form-basic-info>
-
-            <podcast-common-artwork v-model="v$.form.artwork_file.$model" :artwork-src="record.art"
-                                    :new-art-url="newArtUrl" :edit-art-url="record.links.art"></podcast-common-artwork>
+            <podcast-common-artwork
+                v-model="v$.form.artwork_file.$model"
+                :artwork-src="record.art"
+                :new-art-url="newArtUrl"
+                :edit-art-url="record.links.art"
+            />
         </b-tabs>
-
     </modal-form>
 </template>
 
@@ -25,9 +39,6 @@ import useVuelidate from "@vuelidate/core";
 export default {
     name: 'EditModal',
     components: {PodcastCommonArtwork, PodcastFormBasicInfo},
-    setup() {
-        return {v$: useVuelidate()}
-    },
     mixins: [BaseEditModal],
     props: {
         stationTimeZone: String,
@@ -35,6 +46,9 @@ export default {
         categoriesOptions: Object,
         newArtUrl: String
     },
+    setup() {
+        return {v$: useVuelidate()}
+    },
     data() {
         return {
             record: {
diff --git a/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue b/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue
index 9d3a7de44..cbdb55439 100644
--- a/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Podcasts/PodcastForm/BasicInfo.vue
@@ -1,15 +1,25 @@
 <template>
-    <b-tab :title="$gettext('Basic Information')" active>
+    <b-tab
+        :title="$gettext('Basic Information')"
+        active
+    >
         <b-form-group>
             <div class="form-row">
-
-                <b-wrapped-form-group class="col-md-6" id="form_edit_title" :field="form.title">
+                <b-wrapped-form-group
+                    id="form_edit_title"
+                    class="col-md-6"
+                    :field="form.title"
+                >
                     <template #label>
                         {{ $gettext('Podcast Title') }}
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="form_edit_link" :field="form.link">
+                <b-wrapped-form-group
+                    id="form_edit_link"
+                    class="col-md-6"
+                    :field="form.link"
+                >
                     <template #label>
                         {{ $gettext('Website') }}
                     </template>
@@ -18,8 +28,12 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-12" id="form_edit_description" :field="form.description"
-                                      input-type="textarea">
+                <b-wrapped-form-group
+                    id="form_edit_description"
+                    class="col-md-12"
+                    :field="form.description"
+                    input-type="textarea"
+                >
                     <template #label>
                         {{ $gettext('Description') }}
                     </template>
@@ -30,7 +44,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-12" id="form_edit_language" :field="form.language">
+                <b-wrapped-form-group
+                    id="form_edit_language"
+                    class="col-md-12"
+                    :field="form.language"
+                >
                     <template #label>
                         {{ $gettext('Language') }}
                     </template>
@@ -38,12 +56,20 @@
                         {{ $gettext('The language spoken on the podcast.') }}
                     </template>
                     <template #default="props">
-                        <b-form-select :id="props.id" v-model="props.field.$model" :options="languageOptions"
-                                       :state="props.state"></b-form-select>
+                        <b-form-select
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :options="languageOptions"
+                            :state="props.state"
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="form_edit_author" :field="form.author">
+                <b-wrapped-form-group
+                    id="form_edit_author"
+                    class="col-md-6"
+                    :field="form.author"
+                >
                     <template #label>
                         {{ $gettext('Author') }}
                     </template>
@@ -54,7 +80,12 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="form_edit_email" :field="form.email" input-type="email">
+                <b-wrapped-form-group
+                    id="form_edit_email"
+                    class="col-md-6"
+                    :field="form.email"
+                    input-type="email"
+                >
                     <template #label>
                         {{ $gettext('E-Mail') }}
                     </template>
@@ -65,7 +96,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-12" id="form_edit_categories" :field="form.categories">
+                <b-wrapped-form-group
+                    id="form_edit_categories"
+                    class="col-md-12"
+                    :field="form.categories"
+                >
                     <template #label>
                         {{ $gettext('Categories') }}
                     </template>
@@ -73,11 +108,15 @@
                         {{ $gettext('Select the category/categories that best reflects the content of your podcast.') }}
                     </template>
                     <template #default="props">
-                        <b-form-select :id="props.id" v-model="props.field.$model" :options="categoriesOptions"
-                                       :state="props.state" multiple></b-form-select>
+                        <b-form-select
+                            :id="props.id"
+                            v-model="props.field.$model"
+                            :options="categoriesOptions"
+                            :state="props.state"
+                            multiple
+                        />
                     </template>
                 </b-wrapped-form-group>
-
             </div>
         </b-form-group>
     </b-tab>
diff --git a/frontend/vue/components/Stations/Profile.vue b/frontend/vue/components/Stations/Profile.vue
index 357abbdc7..53fe409b3 100644
--- a/frontend/vue/components/Stations/Profile.vue
+++ b/frontend/vue/components/Stations/Profile.vue
@@ -1,31 +1,58 @@
 <template>
-    <profile-header v-bind="$props" :np="np"></profile-header>
+    <profile-header
+        v-bind="$props"
+        :np="np"
+    />
 
-    <div class="row" id="profile">
+    <div
+        id="profile"
+        class="row"
+    >
         <div class="col-lg-7">
-            <profile-now-playing v-bind="$props" :np="np"></profile-now-playing>
+            <profile-now-playing
+                v-bind="$props"
+                :np="np"
+            />
 
-            <profile-schedule :station-time-zone="stationTimeZone" :schedule-items="np.schedule"></profile-schedule>
+            <profile-schedule
+                :station-time-zone="stationTimeZone"
+                :schedule-items="np.schedule"
+            />
 
-            <profile-streams v-bind="$props" :np="np"></profile-streams>
+            <profile-streams
+                v-bind="$props"
+                :np="np"
+            />
 
-            <profile-public-pages v-bind="$props"></profile-public-pages>
+            <profile-public-pages v-bind="$props" />
         </div>
 
         <div class="col-lg-5">
-            <profile-requests v-bind="$props" v-if="stationSupportsRequests"></profile-requests>
+            <profile-requests
+                v-if="stationSupportsRequests"
+                v-bind="$props"
+            />
 
-            <profile-streamers v-bind="$props" v-if="stationSupportsStreamers"></profile-streamers>
+            <profile-streamers
+                v-if="stationSupportsStreamers"
+                v-bind="$props"
+            />
 
             <template v-if="hasActiveFrontend">
-                <profile-frontend v-bind="$props" :np="np"></profile-frontend>
+                <profile-frontend
+                    v-bind="$props"
+                    :np="np"
+                />
             </template>
 
             <template v-if="hasActiveBackend">
-                <profile-backend v-bind="$props" :np="np"></profile-backend>
+                <profile-backend
+                    v-bind="$props"
+                    :np="np"
+                />
             </template>
             <template v-else>
-                <profile-backend-none></profile-backend-none>
+                <profile-backend-none />
             </template>
         </div>
     </div>
diff --git a/frontend/vue/components/Stations/Profile/BackendNonePanel.vue b/frontend/vue/components/Stations/Profile/BackendNonePanel.vue
index 5c9f7ecec..6e632ede7 100644
--- a/frontend/vue/components/Stations/Profile/BackendNonePanel.vue
+++ b/frontend/vue/components/Stations/Profile/BackendNonePanel.vue
@@ -1,7 +1,13 @@
 <template>
-    <section class="card" role="region" id="profile-backend">
+    <section
+        id="profile-backend"
+        class="card"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
-            <h3 class="card-title">{{ $gettext('AutoDJ Disabled') }}</h3>
+            <h3 class="card-title">
+                {{ $gettext('AutoDJ Disabled') }}
+            </h3>
         </div>
         <div class="card-body">
             <p class="card-text">
diff --git a/frontend/vue/components/Stations/Profile/BackendPanel.vue b/frontend/vue/components/Stations/Profile/BackendPanel.vue
index b291137cc..116d8e42b 100644
--- a/frontend/vue/components/Stations/Profile/BackendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/BackendPanel.vue
@@ -1,9 +1,13 @@
 <template>
-    <section class="card" role="region" id="profile-backend">
+    <section
+        id="profile-backend"
+        class="card"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <h3 class="card-title">
                 {{ $gettext('AutoDJ Service') }}
-                <running-badge :running="np.services.backend_running"></running-badge>
+                <running-badge :running="np.services.backend_running" />
                 <br>
                 <small>{{ backendName }}</small>
             </h3>
@@ -13,24 +17,45 @@
                 {{ langTotalTracks }}
             </p>
 
-            <div class="buttons" v-if="userCanManageMedia">
-                <a class="btn btn-primary" :href="manageMediaUri">{{ $gettext('Music Files') }}</a>
-                <a class="btn btn-primary" :href="managePlaylistsUri">{{ $gettext('Playlists') }}</a>
+            <div
+                v-if="userCanManageMedia"
+                class="buttons"
+            >
+                <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>
+        <div
+            v-if="userCanManageBroadcasting && hasStarted"
+            class="card-actions"
+        >
+            <a
+                class="api-call no-reload btn btn-outline-secondary"
+                :href="backendRestartUri"
+            >
+                <icon icon="update" />
                 {{ $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>
+            <a
+                v-show="!np.services.backend_running"
+                class="api-call no-reload btn btn-outline-success"
+                :href="backendStartUri"
+            >
+                <icon icon="play_arrow" />
                 {{ $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>
+            <a
+                v-show="np.services.backend_running"
+                class="api-call no-reload btn btn-outline-danger"
+                :href="backendStopUri"
+            >
+                <icon icon="stop" />
                 {{ $gettext('Stop') }}
             </a>
         </div>
diff --git a/frontend/vue/components/Stations/Profile/EmbedModal.vue b/frontend/vue/components/Stations/Profile/EmbedModal.vue
index a463e85d4..b589c7d26 100644
--- a/frontend/vue/components/Stations/Profile/EmbedModal.vue
+++ b/frontend/vue/components/Stations/Profile/EmbedModal.vue
@@ -1,10 +1,22 @@
 <template>
-    <b-modal size="lg" id="embed_modal" ref="$modal" :title="$gettext('Embed Widgets')" hide-footer no-enforce-focus>
+    <b-modal
+        id="embed_modal"
+        ref="$modal"
+        size="lg"
+        :title="$gettext('Embed Widgets')"
+        hide-footer
+        no-enforce-focus
+    >
         <b-row>
             <b-col md="7">
-                <b-card class="mb-3" no-body>
+                <b-card
+                    class="mb-3"
+                    no-body
+                >
                     <div class="card-header bg-primary-dark">
-                        <h2 class="card-title">{{ $gettext('Customize') }}</h2>
+                        <h2 class="card-title">
+                            {{ $gettext('Customize') }}
+                        </h2>
                     </div>
                     <b-card-body>
                         <b-row>
@@ -16,7 +28,7 @@
                                         :options="types"
                                         name="embed_type"
                                         stacked
-                                    ></b-form-radio-group>
+                                    />
                                 </b-form-group>
                             </b-col>
                             <b-col md="6">
@@ -27,7 +39,7 @@
                                         :options="themes"
                                         name="embed_theme"
                                         stacked
-                                    ></b-form-radio-group>
+                                    />
                                 </b-form-group>
                             </b-col>
                         </b-row>
@@ -35,26 +47,44 @@
                 </b-card>
             </b-col>
             <b-col md="5">
-                <b-card class="mb-3" no-body>
+                <b-card
+                    class="mb-3"
+                    no-body
+                >
                     <div class="card-header bg-primary-dark">
-                        <h2 class="card-title">{{ $gettext('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"
-                                  style="height: 100px;">{{ embedCode }}</textarea>
-                        <copy-to-clipboard-button :text="embedCode"></copy-to-clipboard-button>
+                        <textarea
+                            class="full-width form-control text-preformatted"
+                            spellcheck="false"
+                            style="height: 100px;"
+                        >{{ embedCode }}</textarea>
+                        <copy-to-clipboard-button :text="embedCode" />
                     </b-card-body>
                 </b-card>
             </b-col>
         </b-row>
 
-        <b-card class="mb-3" no-body>
+        <b-card
+            class="mb-3"
+            no-body
+        >
             <div class="card-header bg-primary-dark">
-                <h2 class="card-title">{{ $gettext('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;"
-                        :style="{ 'min-height': this.embedHeight }"></iframe>
+                <iframe
+                    width="100%"
+                    :src="embedUrl"
+                    frameborder="0"
+                    style="width: 100%; border: 0;"
+                    :style="{ 'min-height': embedHeight }"
+                />
             </b-card-body>
         </b-card>
     </b-modal>
diff --git a/frontend/vue/components/Stations/Profile/FrontendPanel.vue b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
index f4dc83d99..0e07d4140 100644
--- a/frontend/vue/components/Stations/Profile/FrontendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
@@ -1,90 +1,121 @@
 <template>
-    <section class="card mb-4" role="region" id="profile-frontend">
+    <section
+        id="profile-frontend"
+        class="card mb-4"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <h3 class="card-title">
                 {{ $gettext('Broadcasting Service') }}
 
-                <running-badge :running="np.services.frontend_running"></running-badge>
+                <running-badge :running="np.services.frontend_running" />
                 <br>
                 <small>{{ frontendName }}</small>
             </h3>
         </div>
 
         <template v-if="userCanManageBroadcasting">
-            <b-table-simple striped responsive>
+            <b-table-simple
+                striped
+                responsive
+            >
                 <tbody>
-                <tr class="align-middle">
-                    <td>
-                        <a :href="frontendAdminUri" target="_blank">
-                            {{ $gettext('Administration') }}
-                        </a>
-                    </td>
-                    <td class="px-0">
-                        <div>
-                            {{ $gettext('Username:') }}
-                            <span class="text-monospace">admin</span>
-                        </div>
-                        <div>
-                            {{ $gettext('Password:') }}
-                            <span class="text-monospace">{{ frontendAdminPassword }}</span>
-                        </div>
-                    </td>
-                    <td class="px-0">
-                        <copy-to-clipboard-button :text="frontendAdminPassword" hide-text></copy-to-clipboard-button>
-                    </td>
-                </tr>
-                <tr class="align-middle">
-                    <td>
-                        {{ $gettext('Source') }}
-                    </td>
-                    <td class="px-0">
-                        <div>
-                            {{ $gettext('Username:') }}
-                            <span class="text-monospace">source</span>
-                        </div>
-                        <div>
-                            {{ $gettext('Password:') }}
-                            <span class="text-monospace">{{ frontendSourcePassword }}</span>
-                        </div>
-                    </td>
-                    <td class="px-0">
-                        <copy-to-clipboard-button :text="frontendSourcePassword" hide-text></copy-to-clipboard-button>
-                    </td>
-                </tr>
-                <tr class="align-middle">
-                    <td>
-                        {{ $gettext('Relay') }}
-                    </td>
-                    <td class="px-0">
-                        <div>
-                            {{ $gettext('Username:') }}
-                            <span class="text-monospace">relay</span>
-                        </div>
-                        <div>
-                            {{ $gettext('Password:') }}
-                            <span class="text-monospace">{{ frontendRelayPassword }}</span>
-                        </div>
-                    </td>
-                    <td class="px-0">
-                        <copy-to-clipboard-button :text="frontendRelayPassword" hide-text></copy-to-clipboard-button>
-                    </td>
-                </tr>
+                    <tr class="align-middle">
+                        <td>
+                            <a
+                                :href="frontendAdminUri"
+                                target="_blank"
+                            >
+                                {{ $gettext('Administration') }}
+                            </a>
+                        </td>
+                        <td class="px-0">
+                            <div>
+                                {{ $gettext('Username:') }}
+                                <span class="text-monospace">admin</span>
+                            </div>
+                            <div>
+                                {{ $gettext('Password:') }}
+                                <span class="text-monospace">{{ frontendAdminPassword }}</span>
+                            </div>
+                        </td>
+                        <td class="px-0">
+                            <copy-to-clipboard-button
+                                :text="frontendAdminPassword"
+                                hide-text
+                            />
+                        </td>
+                    </tr>
+                    <tr class="align-middle">
+                        <td>
+                            {{ $gettext('Source') }}
+                        </td>
+                        <td class="px-0">
+                            <div>
+                                {{ $gettext('Username:') }}
+                                <span class="text-monospace">source</span>
+                            </div>
+                            <div>
+                                {{ $gettext('Password:') }}
+                                <span class="text-monospace">{{ frontendSourcePassword }}</span>
+                            </div>
+                        </td>
+                        <td class="px-0">
+                            <copy-to-clipboard-button
+                                :text="frontendSourcePassword"
+                                hide-text
+                            />
+                        </td>
+                    </tr>
+                    <tr class="align-middle">
+                        <td>
+                            {{ $gettext('Relay') }}
+                        </td>
+                        <td class="px-0">
+                            <div>
+                                {{ $gettext('Username:') }}
+                                <span class="text-monospace">relay</span>
+                            </div>
+                            <div>
+                                {{ $gettext('Password:') }}
+                                <span class="text-monospace">{{ frontendRelayPassword }}</span>
+                            </div>
+                        </td>
+                        <td class="px-0">
+                            <copy-to-clipboard-button
+                                :text="frontendRelayPassword"
+                                hide-text
+                            />
+                        </td>
+                    </tr>
                 </tbody>
             </b-table-simple>
 
-            <div class="card-actions" v-if="hasStarted">
-                <a class="api-call no-reload btn btn-outline-secondary" :href="frontendRestartUri">
-                    <icon icon="update"></icon>
+            <div
+                v-if="hasStarted"
+                class="card-actions"
+            >
+                <a
+                    class="api-call no-reload btn btn-outline-secondary"
+                    :href="frontendRestartUri"
+                >
+                    <icon icon="update" />
                     {{ $gettext('Restart') }}
                 </a>
-                <a class="api-call no-reload btn btn-outline-success" v-show="!np.services.frontend_running"
-                   :href="frontendStartUri">
-                    <icon icon="play_arrow"></icon>
+                <a
+                    v-show="!np.services.frontend_running"
+                    class="api-call no-reload btn btn-outline-success"
+                    :href="frontendStartUri"
+                >
+                    <icon icon="play_arrow" />
                     {{ $gettext('Start') }}
                 </a>
-                <a class="api-call no-reload btn btn-outline-danger" v-show="np.services.frontend_running"
-                   :href="frontendStopUri">
-                    <icon icon="stop"></icon>
+                <a
+                    v-show="np.services.frontend_running"
+                    class="api-call no-reload btn btn-outline-danger"
+                    :href="frontendStopUri"
+                >
+                    <icon icon="stop" />
                     {{ $gettext('Stop') }}
                 </a>
             </div>
diff --git a/frontend/vue/components/Stations/Profile/HeaderPanel.vue b/frontend/vue/components/Stations/Profile/HeaderPanel.vue
index c42d2adf6..71c8fbba9 100644
--- a/frontend/vue/components/Stations/Profile/HeaderPanel.vue
+++ b/frontend/vue/components/Stations/Profile/HeaderPanel.vue
@@ -1,15 +1,36 @@
 <template>
     <div class="outside-card-header d-flex align-items-center mb-3">
-        <div class="flex-shrink-0 mr-3" v-if="np.station.listen_url">
-            <play-button icon-class="outlined xl" :url="np.station.listen_url" is-stream></play-button>
+        <div
+            v-if="np.station.listen_url"
+            class="flex-shrink-0 mr-3"
+        >
+            <play-button
+                icon-class="outlined xl"
+                :url="np.station.listen_url"
+                is-stream
+            />
         </div>
         <div class="flex-fill">
-            <h2 class="m-0">{{ stationName }}</h2>
-            <h3 class="m-0" v-if="stationDescription">{{ stationDescription }}</h3>
+            <h2 class="m-0">
+                {{ stationName }}
+            </h2>
+            <h3
+                v-if="stationDescription"
+                class="m-0"
+            >
+                {{ stationDescription }}
+            </h3>
         </div>
-        <div class="flex-shrink-0 ml-3" v-if="userCanManageProfile">
-            <a class="btn btn-primary btn-lg" role="button" :href="manageProfileUri">
-                <icon icon="edit"></icon>
+        <div
+            v-if="userCanManageProfile"
+            class="flex-shrink-0 ml-3"
+        >
+            <a
+                class="btn btn-primary btn-lg"
+                role="button"
+                :href="manageProfileUri"
+            >
+                <icon icon="edit" />
                 {{ $gettext('Edit Profile') }}
             </a>
         </div>
diff --git a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
index 51f2d5e17..fb60f1fc5 100644
--- a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
+++ b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
@@ -1,10 +1,22 @@
 <template>
-    <section class="card mb-4 nowplaying" role="region" id="profile-nowplaying">
+    <section
+        id="profile-nowplaying"
+        class="card mb-4 nowplaying"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <div class="d-flex align-items-center">
-                <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>
+                <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"
+                    />
                     <span class="pl-1">
                         {{ langListeners }}
                     </span>
@@ -17,20 +29,32 @@
                 </h6>
             </div>
         </div>
-        <b-overlay variant="card" :show="np.loading">
+        <b-overlay
+            variant="card"
+            :show="np.loading"
+        >
             <div class="card-body">
                 <div class="row">
                     <div class="col-md-6">
                         <div class="clearfix">
                             <h6 style="margin-left: 32px;">
-                                <icon icon="music_note"></icon>
+                                <icon icon="music_note" />
                                 {{ $gettext('Now Playing') }}
                             </h6>
                             <div class="media">
-                                <a class="mr-2" v-if="np.now_playing.song.art" :href="np.now_playing.song.art"
-                                   data-fancybox target="_blank">
-                                    <img class="rounded" :src="np.now_playing.song.art" alt="Album Art"
-                                         style="width: 50px;">
+                                <a
+                                    v-if="np.now_playing.song.art"
+                                    class="mr-2"
+                                    :href="np.now_playing.song.art"
+                                    data-fancybox
+                                    target="_blank"
+                                >
+                                    <img
+                                        class="rounded"
+                                        :src="np.now_playing.song.art"
+                                        alt="Album Art"
+                                        style="width: 50px;"
+                                    >
                                 </a>
                                 <div class="media-body">
                                     <div v-if="!np.is_online">
@@ -39,21 +63,31 @@
                                         </h5>
                                     </div>
                                     <div v-else-if="np.now_playing.song.title !== ''">
-                                        <h5 class="media-heading m-0" style="line-height: 1;">
+                                        <h5
+                                            class="media-heading m-0"
+                                            style="line-height: 1;"
+                                        >
                                             {{ np.now_playing.song.title }}<br>
                                             <small>{{ np.now_playing.song.artist }}</small>
                                         </h5>
                                     </div>
                                     <div v-else>
-                                        <h5 class="media-heading m-0" style="line-height: 1;">
-                                            {{ np.now_playing.song.text }}</h5>
+                                        <h5
+                                            class="media-heading m-0"
+                                            style="line-height: 1;"
+                                        >
+                                            {{ np.now_playing.song.text }}
+                                        </h5>
                                     </div>
                                     <div v-if="np.now_playing.playlist">
                                         <small class="text-muted">
                                             {{ $gettext('Playlist') }}
                                             : {{ np.now_playing.playlist }}</small>
                                     </div>
-                                    <div class="nowplaying-progress" v-if="timeDisplay">
+                                    <div
+                                        v-if="timeDisplay"
+                                        class="nowplaying-progress"
+                                    >
                                         <small>{{ timeDisplay }}</small>
                                     </div>
                                 </div>
@@ -61,28 +95,47 @@
                         </div>
                     </div>
                     <div class="col-md-6">
-                        <div class="clearfix" v-if="!np.live.is_live && np.playing_next">
+                        <div
+                            v-if="!np.live.is_live && np.playing_next"
+                            class="clearfix"
+                        >
                             <h6 style="margin-left: 22px;">
-                                <icon icon="skip_next"></icon>
+                                <icon icon="skip_next" />
                                 {{ $gettext('Playing Next') }}
                             </h6>
 
                             <div class="media">
-                                <a class="mr-2" v-if="np.playing_next.song.art" :href="np.playing_next.song.art"
-                                   data-fancybox target="_blank">
-                                    <img :src="np.playing_next.song.art" class="rounded" alt="Album Art"
-                                         style="width: 40px;">
+                                <a
+                                    v-if="np.playing_next.song.art"
+                                    class="mr-2"
+                                    :href="np.playing_next.song.art"
+                                    data-fancybox
+                                    target="_blank"
+                                >
+                                    <img
+                                        :src="np.playing_next.song.art"
+                                        class="rounded"
+                                        alt="Album Art"
+                                        style="width: 40px;"
+                                    >
                                 </a>
                                 <div class="media-body">
                                     <div v-if="np.playing_next.song.title !== ''">
-                                        <h5 class="media-heading m-0" style="line-height: 1;">
+                                        <h5
+                                            class="media-heading m-0"
+                                            style="line-height: 1;"
+                                        >
                                             {{ np.playing_next.song.title }}<br>
                                             <small>{{ np.playing_next.song.artist }}</small>
                                         </h5>
                                     </div>
                                     <div v-else>
-                                        <h5 class="media-heading m-0" style="line-height: 1;">
-                                            {{ np.playing_next.song.text }}</h5>
+                                        <h5
+                                            class="media-heading m-0"
+                                            style="line-height: 1;"
+                                        >
+                                            {{ np.playing_next.song.text }}
+                                        </h5>
                                     </div>
 
                                     <div v-if="np.playing_next.playlist">
@@ -93,13 +146,19 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="clearfix" v-else-if="np.live.is_live">
+                        <div
+                            v-else-if="np.live.is_live"
+                            class="clearfix"
+                        >
                             <h6 style="margin-left: 22px;">
-                                <icon icon="mic"></icon>
+                                <icon icon="mic" />
                                 {{ $gettext('Live') }}
                             </h6>
 
-                            <h4 class="media-heading" style="margin-left: 22px;">
+                            <h4
+                                class="media-heading"
+                                style="margin-left: 22px;"
+                            >
                                 {{ np.live.streamer_name }}
                             </h4>
                         </div>
@@ -108,15 +167,28 @@
             </div>
         </b-overlay>
 
-        <div class="card-actions flex-shrink" v-if="isLiquidsoap && userCanManageBroadcasting">
-            <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>
+        <div
+            v-if="isLiquidsoap && userCanManageBroadcasting"
+            class="card-actions flex-shrink"
+        >
+            <a
+                v-if="!np.live.is_live"
+                id="btn_skip_song"
+                class="btn btn-outline-primary api-call no-reload"
+                role="button"
+                :href="backendSkipSongUri"
+            >
+                <icon icon="skip_next" />
                 {{ $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>
+            <a
+                v-if="np.live.is_live"
+                id="btn_disconnect_streamer"
+                class="btn btn-outline-primary api-call no-reload"
+                role="button"
+                :href="backendDisconnectStreamerUri"
+            >
+                <icon icon="volume_off" />
                 {{ $gettext('Disconnect Streamer') }}
             </a>
         </div>
diff --git a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
index f4109e091..f847d1cf7 100644
--- a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
+++ b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
@@ -1,10 +1,13 @@
 <template>
-    <section class="card mb-4" role="region">
+    <section
+        class="card mb-4"
+        role="region"
+    >
         <template v-if="enablePublicPage">
             <div class="card-header bg-primary-dark">
                 <h3 class="card-title">
                     {{ $gettext('Public Pages') }}
-                    <enabled-badge :enabled="true"></enabled-badge>
+                    <enabled-badge :enabled="true" />
                 </h3>
             </div>
             <table class="table table-striped table-responsive-md mb-0">
@@ -13,62 +16,80 @@
                     <col style="width: 70%;">
                 </colgroup>
                 <tbody>
-                <tr>
-                    <td>{{ $gettext('Public Page') }}</td>
-                    <td>
-                        <a :href="publicPageUri">{{ publicPageUri }}</a>
-                    </td>
-                </tr>
-                <tr v-if="stationSupportsStreamers && enableStreamers">
-                    <td>{{ $gettext('Web DJ') }}</td>
-                    <td>
-                        <a :href="publicWebDjUri">{{ publicWebDjUri }}</a>
-                    </td>
-                </tr>
-                <tr v-if="enableOnDemand">
-                    <td>{{ $gettext('On-Demand Media') }}</td>
-                    <td>
-                        <a :href="publicOnDemandUri">{{ publicOnDemandUri }}</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>{{ $gettext('Podcasts') }}</td>
-                    <td>
-                        <a :href="publicPodcastsUri">{{ publicPodcastsUri }}</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>{{ $gettext('Schedule') }}</td>
-                    <td>
-                        <a :href="publicScheduleUri">{{ publicScheduleUri }}</a>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $gettext('Public Page') }}</td>
+                        <td>
+                            <a :href="publicPageUri">{{ publicPageUri }}</a>
+                        </td>
+                    </tr>
+                    <tr v-if="stationSupportsStreamers && enableStreamers">
+                        <td>{{ $gettext('Web DJ') }}</td>
+                        <td>
+                            <a :href="publicWebDjUri">{{ publicWebDjUri }}</a>
+                        </td>
+                    </tr>
+                    <tr v-if="enableOnDemand">
+                        <td>{{ $gettext('On-Demand Media') }}</td>
+                        <td>
+                            <a :href="publicOnDemandUri">{{ publicOnDemandUri }}</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{ $gettext('Podcasts') }}</td>
+                        <td>
+                            <a :href="publicPodcastsUri">{{ publicPodcastsUri }}</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{ $gettext('Schedule') }}</td>
+                        <td>
+                            <a :href="publicScheduleUri">{{ publicScheduleUri }}</a>
+                        </td>
+                    </tr>
                 </tbody>
             </table>
-            <div class="card-actions" v-if="userCanManageProfile">
-                <a class="btn btn-outline-danger" @click.prevent="doOpenEmbed">
-                    <icon icon="code"></icon>
+            <div
+                v-if="userCanManageProfile"
+                class="card-actions"
+            >
+                <a
+                    class="btn btn-outline-danger"
+                    @click.prevent="doOpenEmbed"
+                >
+                    <icon icon="code" />
                     {{ $gettext('Embed Widgets') }}
                 </a>
-                <a class="btn btn-outline-danger" :data-confirm-title="$gettext('Disable public pages?')"
-                   :href="togglePublicPageUri">
-                    <icon icon="close"></icon>
+                <a
+                    class="btn btn-outline-danger"
+                    :data-confirm-title="$gettext('Disable public pages?')"
+                    :href="togglePublicPageUri"
+                >
+                    <icon icon="close" />
                     {{ $gettext('Disable') }}
                 </a>
             </div>
-            <embed-modal v-bind="$props" ref="$embedModal"></embed-modal>
+            <embed-modal
+                v-bind="$props"
+                ref="$embedModal"
+            />
         </template>
         <template v-else>
             <div class="card-header bg-primary-dark">
                 <h3 class="card-title">
                     {{ $gettext('Public Pages') }}
-                    <enabled-badge :enabled="false"></enabled-badge>
+                    <enabled-badge :enabled="false" />
                 </h3>
             </div>
-            <div class="card-actions" v-if="userCanManageProfile">
-                <a class="btn btn-outline-success" :data-confirm-title="$gettext('Enable public pages?')"
-                   :href="togglePublicPageUri">
-                    <icon icon="check"></icon>
+            <div
+                v-if="userCanManageProfile"
+                class="card-actions"
+            >
+                <a
+                    class="btn btn-outline-success"
+                    :data-confirm-title="$gettext('Enable public pages?')"
+                    :href="togglePublicPageUri"
+                >
+                    <icon icon="check" />
                     {{ $gettext('Enable') }}
                 </a>
             </div>
diff --git a/frontend/vue/components/Stations/Profile/RequestsPanel.vue b/frontend/vue/components/Stations/Profile/RequestsPanel.vue
index 873ecd585..ab0e05811 100644
--- a/frontend/vue/components/Stations/Profile/RequestsPanel.vue
+++ b/frontend/vue/components/Stations/Profile/RequestsPanel.vue
@@ -1,20 +1,34 @@
 <template>
-    <section class="card mb-4" role="region">
+    <section
+        class="card mb-4"
+        role="region"
+    >
         <template v-if="enableRequests">
             <div class="card-header bg-primary-dark">
                 <h3 class="card-title">
                     {{ $gettext('Song Requests') }}
-                    <enabled-badge :enabled="true"></enabled-badge>
+                    <enabled-badge :enabled="true" />
                 </h3>
             </div>
-            <div class="card-actions" v-if="userCanManageReports || userCanManageProfile">
-                <a class="btn btn-outline-primary" v-if="userCanManageReports" :href="requestsViewUri">
-                    <icon icon="assignment"></icon>
+            <div
+                v-if="userCanManageReports || userCanManageProfile"
+                class="card-actions"
+            >
+                <a
+                    v-if="userCanManageReports"
+                    class="btn btn-outline-primary"
+                    :href="requestsViewUri"
+                >
+                    <icon icon="assignment" />
                     {{ $gettext('View') }}
                 </a>
-                <a class="btn btn-outline-danger" v-if="userCanManageProfile"
-                   :data-confirm-title="$gettext('Disable song requests?')" :href="requestsToggleUri">
-                    <icon icon="close"></icon>
+                <a
+                    v-if="userCanManageProfile"
+                    class="btn btn-outline-danger"
+                    :data-confirm-title="$gettext('Disable song requests?')"
+                    :href="requestsToggleUri"
+                >
+                    <icon icon="close" />
                     {{ $gettext('Disable') }}
                 </a>
             </div>
@@ -23,13 +37,19 @@
             <div class="card-header bg-primary-dark">
                 <h3 class="card-title">
                     {{ $gettext('Song Requests') }}
-                    <enabled-badge :enabled="false"></enabled-badge>
+                    <enabled-badge :enabled="false" />
                 </h3>
             </div>
-            <div class="card-actions" v-if="userCanManageProfile">
-                <a class="btn btn-outline-success" :data-confirm-title="$gettext('Enable song requests?')"
-                   :href="requestsToggleUri">
-                    <icon icon="check"></icon>
+            <div
+                v-if="userCanManageProfile"
+                class="card-actions"
+            >
+                <a
+                    class="btn btn-outline-success"
+                    :data-confirm-title="$gettext('Enable song requests?')"
+                    :href="requestsToggleUri"
+                >
+                    <icon icon="check" />
                     {{ $gettext('Enable') }}
                 </a>
             </div>
diff --git a/frontend/vue/components/Stations/Profile/SchedulePanel.vue b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
index 03aef6775..b5ede9c6f 100644
--- a/frontend/vue/components/Stations/Profile/SchedulePanel.vue
+++ b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
@@ -1,38 +1,44 @@
 <template>
     <div id="profile-scheduled">
-        <section class="card mb-4 scheduled" role="region" v-if="processedScheduleItems.length > 0">
+        <section
+            v-if="processedScheduleItems.length > 0"
+            class="card mb-4 scheduled"
+            role="region"
+        >
             <div class="card-header bg-primary-dark">
-                <h3 class="card-title">{{ $gettext('Scheduled') }}</h3>
+                <h3 class="card-title">
+                    {{ $gettext('Scheduled') }}
+                </h3>
             </div>
             <table class="table table-striped mb-0">
                 <tbody>
-                <tr v-for="row in processedScheduleItems">
-                    <td>
-                        <div class="d-flex w-100 justify-content-between align-items-center">
-                            <h5 class="m-0">
-                                <small>
-                                    <template v-if="row.type === 'playlist'">
-                                        {{ $gettext('Playlist') }}
-                                    </template>
-                                    <template v-else>
-                                        {{ $gettext('Streamer/DJ') }}
-                                    </template>
-                                </small><br>
-                                {{ row.name }}
-                            </h5>
-                            <p class="text-right m-0">
-                                <small>{{ row.start_formatted }} - {{ row.end_formatted }}</small>
-                                <br>
-                                <strong>
-                                    <template v-if="row.is_now">
-                                        {{ $gettext('Now') }}
-                                    </template>
-                                    <template v-else>{{ row.time_until }}</template>
-                                </strong>
-                            </p>
-                        </div>
-                    </td>
-                </tr>
+                    <tr v-for="row in processedScheduleItems">
+                        <td>
+                            <div class="d-flex w-100 justify-content-between align-items-center">
+                                <h5 class="m-0">
+                                    <small>
+                                        <template v-if="row.type === 'playlist'">
+                                            {{ $gettext('Playlist') }}
+                                        </template>
+                                        <template v-else>
+                                            {{ $gettext('Streamer/DJ') }}
+                                        </template>
+                                    </small><br>
+                                    {{ row.name }}
+                                </h5>
+                                <p class="text-right m-0">
+                                    <small>{{ row.start_formatted }} - {{ row.end_formatted }}</small>
+                                    <br>
+                                    <strong>
+                                        <template v-if="row.is_now">
+                                            {{ $gettext('Now') }}
+                                        </template>
+                                        <template v-else>{{ row.time_until }}</template>
+                                    </strong>
+                                </p>
+                            </div>
+                        </td>
+                    </tr>
                 </tbody>
             </table>
         </section>
diff --git a/frontend/vue/components/Stations/Profile/StreamersPanel.vue b/frontend/vue/components/Stations/Profile/StreamersPanel.vue
index 1b5b3f265..3e61b4401 100644
--- a/frontend/vue/components/Stations/Profile/StreamersPanel.vue
+++ b/frontend/vue/components/Stations/Profile/StreamersPanel.vue
@@ -1,20 +1,34 @@
 <template>
-    <section class="card mb-4" role="region">
+    <section
+        class="card mb-4"
+        role="region"
+    >
         <template v-if="enableStreamers">
             <div class="card-header bg-primary-dark">
                 <h3 class="card-title">
                     {{ $gettext('Streamers/DJs') }}
-                    <enabled-badge :enabled="true"></enabled-badge>
+                    <enabled-badge :enabled="true" />
                 </h3>
             </div>
-            <div class="card-actions" v-if="userCanManageStreamers || userCanManageProfile">
-                <a class="btn btn-outline-primary" v-if="userCanManageStreamers" :href="streamersViewUri">
-                    <icon icon="settings"></icon>
+            <div
+                v-if="userCanManageStreamers || userCanManageProfile"
+                class="card-actions"
+            >
+                <a
+                    v-if="userCanManageStreamers"
+                    class="btn btn-outline-primary"
+                    :href="streamersViewUri"
+                >
+                    <icon icon="settings" />
                     {{ $gettext('Manage') }}
                 </a>
-                <a class="btn btn-outline-danger" v-if="userCanManageProfile"
-                   :data-confirm-title="$gettext('Disable streamers?')" :href="streamersToggleUri">
-                    <icon icon="close"></icon>
+                <a
+                    v-if="userCanManageProfile"
+                    class="btn btn-outline-danger"
+                    :data-confirm-title="$gettext('Disable streamers?')"
+                    :href="streamersToggleUri"
+                >
+                    <icon icon="close" />
                     {{ $gettext('Disable') }}
                 </a>
             </div>
@@ -23,13 +37,19 @@
             <div class="card-header bg-primary-dark">
                 <h3 class="card-title">
                     {{ $gettext('Streamers/DJs') }}
-                    <enabled-badge :enabled="false"></enabled-badge>
+                    <enabled-badge :enabled="false" />
                 </h3>
             </div>
-            <div class="card-actions" v-if="userCanManageProfile">
-                <a class="btn btn-outline-success" :data-confirm-title="$gettext('Enable streamers?')"
-                   :href="streamersToggleUri">
-                    <icon icon="check"></icon>
+            <div
+                v-if="userCanManageProfile"
+                class="card-actions"
+            >
+                <a
+                    class="btn btn-outline-success"
+                    :data-confirm-title="$gettext('Enable streamers?')"
+                    :href="streamersToggleUri"
+                >
+                    <icon icon="check" />
                     {{ $gettext('Enable') }}
                 </a>
             </div>
diff --git a/frontend/vue/components/Stations/Profile/StreamsPanel.vue b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
index 45953b486..bd577dd63 100644
--- a/frontend/vue/components/Stations/Profile/StreamsPanel.vue
+++ b/frontend/vue/components/Stations/Profile/StreamsPanel.vue
@@ -1,7 +1,12 @@
 <template>
-    <section class="card mb-4" role="region">
+    <section
+        class="card mb-4"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
-            <h3 class="card-title">{{ $gettext('Streams') }}</h3>
+            <h3 class="card-title">
+                {{ $gettext('Streams') }}
+            </h3>
         </div>
         <table class="table table-sm table-striped table-responsive mb-0">
             <colgroup>
@@ -11,90 +16,149 @@
             </colgroup>
             <template v-if="np.station.mounts.length > 0">
                 <thead>
-                <tr>
-                    <th colspan="2">{{ $gettext('Local Streams') }}</th>
-                    <th class="text-right">{{ $gettext('Listeners') }}</th>
-                </tr>
+                    <tr>
+                        <th colspan="2">
+                            {{ $gettext('Local Streams') }}
+                        </th>
+                        <th class="text-right">
+                            {{ $gettext('Listeners') }}
+                        </th>
+                    </tr>
                 </thead>
                 <tbody>
-                <tr class="align-middle" v-for="mount in np.station.mounts">
-                    <td class="pr-1">
-                        <play-button icon-class="outlined" :url="mount.url" is-stream></play-button>
-                    </td>
-                    <td class="pl-1">
-                        <h6 class="mb-0">{{ mount.name }}</h6>
-                        <a v-bind:href="mount.url" target="_blank">{{ mount.url }}</a>
-                    </td>
-                    <td class="pl-1 text-right">
-                        <icon class="sm align-middle" icon="headset"></icon>
-                        <span class="listeners-total pl-1">{{ mount.listeners.total }}</span><br>
-                        <small>
-                            <span class="listeners-unique pr-1">{{ mount.listeners.unique }}</span>
-                            {{ $gettext('Unique') }}
-                        </small>
-                    </td>
-                </tr>
+                    <tr
+                        v-for="mount in np.station.mounts"
+                        class="align-middle"
+                    >
+                        <td class="pr-1">
+                            <play-button
+                                icon-class="outlined"
+                                :url="mount.url"
+                                is-stream
+                            />
+                        </td>
+                        <td class="pl-1">
+                            <h6 class="mb-0">
+                                {{ mount.name }}
+                            </h6>
+                            <a
+                                :href="mount.url"
+                                target="_blank"
+                            >{{ mount.url }}</a>
+                        </td>
+                        <td class="pl-1 text-right">
+                            <icon
+                                class="sm align-middle"
+                                icon="headset"
+                            />
+                            <span class="listeners-total pl-1">{{ mount.listeners.total }}</span><br>
+                            <small>
+                                <span class="listeners-unique pr-1">{{ mount.listeners.unique }}</span>
+                                {{ $gettext('Unique') }}
+                            </small>
+                        </td>
+                    </tr>
                 </tbody>
             </template>
 
             <template v-if="np.station.remotes.length > 0">
                 <thead>
-                <tr>
-                    <th colspan="2">{{ $gettext('Remote Relays') }}</th>
-                    <th class="text-right">{{ $gettext('Listeners') }}</th>
-                </tr>
+                    <tr>
+                        <th colspan="2">
+                            {{ $gettext('Remote Relays') }}
+                        </th>
+                        <th class="text-right">
+                            {{ $gettext('Listeners') }}
+                        </th>
+                    </tr>
                 </thead>
                 <tbody>
-                <tr class="align-middle" v-for="remote in np.station.remotes">
-                    <td class="pr-1">
-                        <play-button icon-class="outlined" :url="remote.url" is-stream></play-button>
-                    </td>
-                    <td class="pl-1">
-                        <h6 class="mb-0">{{ remote.name }}</h6>
-                        <a v-bind:href="remote.url" target="_blank">{{ remote.url }}</a>
-                    </td>
-                    <td class="pl-1 text-right">
-                        <icon class="sm align-middle" icon="headset"></icon>
-                        <span class="listeners-total pl-1">{{ remote.listeners.total }}</span><br>
-                        <small>
-                            <span class="listeners-unique pr-1">{{ remote.listeners.unique }}</span>
-                            {{ $gettext('Unique') }}
-                        </small>
-                    </td>
-                </tr>
+                    <tr
+                        v-for="remote in np.station.remotes"
+                        class="align-middle"
+                    >
+                        <td class="pr-1">
+                            <play-button
+                                icon-class="outlined"
+                                :url="remote.url"
+                                is-stream
+                            />
+                        </td>
+                        <td class="pl-1">
+                            <h6 class="mb-0">
+                                {{ remote.name }}
+                            </h6>
+                            <a
+                                :href="remote.url"
+                                target="_blank"
+                            >{{ remote.url }}</a>
+                        </td>
+                        <td class="pl-1 text-right">
+                            <icon
+                                class="sm align-middle"
+                                icon="headset"
+                            />
+                            <span class="listeners-total pl-1">{{ remote.listeners.total }}</span><br>
+                            <small>
+                                <span class="listeners-unique pr-1">{{ remote.listeners.unique }}</span>
+                                {{ $gettext('Unique') }}
+                            </small>
+                        </td>
+                    </tr>
                 </tbody>
             </template>
 
             <template v-if="np.station.hls_enabled">
                 <thead>
-                <tr>
-                    <th colspan="2">{{ $gettext('HTTP Live Streaming (HLS)') }}</th>
-                    <th class="text-right">{{ $gettext('Listeners') }}</th>
-                </tr>
+                    <tr>
+                        <th colspan="2">
+                            {{ $gettext('HTTP Live Streaming (HLS)') }}
+                        </th>
+                        <th class="text-right">
+                            {{ $gettext('Listeners') }}
+                        </th>
+                    </tr>
                 </thead>
                 <tbody>
-                <tr class="align-middle">
-                    <td class="pr-1">
-                        <play-button icon-class="outlined" :url="np.station.hls_url" is-stream is-hls></play-button>
-                    </td>
-                    <td class="pl-1">
-                        <a v-bind:href="np.station.hls_url" target="_blank">{{ np.station.hls_url }}</a>
-                    </td>
-                    <td class="pl-1 text-right">
-                        <icon class="sm align-middle" icon="headset"></icon>
-                        <span class="listeners-total pl-1">{{ np.station.hls_listeners }}</span>
-                    </td>
-                </tr>
+                    <tr class="align-middle">
+                        <td class="pr-1">
+                            <play-button
+                                icon-class="outlined"
+                                :url="np.station.hls_url"
+                                is-stream
+                                is-hls
+                            />
+                        </td>
+                        <td class="pl-1">
+                            <a
+                                :href="np.station.hls_url"
+                                target="_blank"
+                            >{{ np.station.hls_url }}</a>
+                        </td>
+                        <td class="pl-1 text-right">
+                            <icon
+                                class="sm align-middle"
+                                icon="headset"
+                            />
+                            <span class="listeners-total pl-1">{{ np.station.hls_listeners }}</span>
+                        </td>
+                    </tr>
                 </tbody>
             </template>
         </table>
         <div class="card-actions">
-            <a class="btn btn-outline-primary" :href="np.station.playlist_pls_url">
-                <icon icon="file_download"></icon>
+            <a
+                class="btn btn-outline-primary"
+                :href="np.station.playlist_pls_url"
+            >
+                <icon icon="file_download" />
                 {{ $gettext('Download PLS') }}
             </a>
-            <a class="btn btn-outline-primary" :href="np.station.playlist_m3u_url">
-                <icon icon="file_download"></icon>
+            <a
+                class="btn btn-outline-primary"
+                :href="np.station.playlist_m3u_url"
+            >
+                <icon icon="file_download" />
                 {{ $gettext('Download M3U') }}
             </a>
         </div>
diff --git a/frontend/vue/components/Stations/ProfileEdit.vue b/frontend/vue/components/Stations/ProfileEdit.vue
index 946d159c7..d8960e9f0 100644
--- a/frontend/vue/components/Stations/ProfileEdit.vue
+++ b/frontend/vue/components/Stations/ProfileEdit.vue
@@ -1,13 +1,21 @@
 <template>
-    <section class="card" role="region">
+    <section
+        class="card"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <h3 class="card-title">
                 {{ $gettext('Edit Station Profile') }}
             </h3>
         </div>
 
-        <admin-stations-form v-bind="$props" ref="$form" :is-edit-mode="true" :edit-url="editUrl"
-                             @submitted="onSubmitted"></admin-stations-form>
+        <admin-stations-form
+            v-bind="$props"
+            ref="$form"
+            :is-edit-mode="true"
+            :edit-url="editUrl"
+            @submitted="onSubmitted"
+        />
     </section>
 </template>
 
diff --git a/frontend/vue/components/Stations/Queue.vue b/frontend/vue/components/Stations/Queue.vue
index 6dd6c2619..3e47ba6b8 100644
--- a/frontend/vue/components/Stations/Queue.vue
+++ b/frontend/vue/components/Stations/Queue.vue
@@ -1,23 +1,41 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('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>
+            <b-button
+                variant="outline-danger"
+                @click="doClear()"
+            >
+                <icon icon="remove" />
                 {{ $gettext('Clear Upcoming Song Queue') }}
             </b-button>
         </div>
-        <data-table ref="datatable" id="station_queue" :fields="fields" :api-url="listUrl">
+        <data-table
+            id="station_queue"
+            ref="datatable"
+            :fields="fields"
+            :api-url="listUrl"
+        >
             <template #cell(actions)="row">
                 <b-button-group>
-                    <b-button v-if="row.item.log" size="sm" variant="primary"
-                              @click.prevent="doShowLogs(row.item.log)">
+                    <b-button
+                        v-if="row.item.log"
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doShowLogs(row.item.log)"
+                    >
                         {{ $gettext('Logs') }}
                     </b-button>
-                    <b-button v-if="!row.item.sent_to_autodj" size="sm" variant="danger"
-                              @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        v-if="!row.item.sent_to_autodj"
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -49,7 +67,7 @@
         </data-table>
     </b-card>
 
-    <queue-logs-modal ref="logs_modal"></queue-logs-modal>
+    <queue-logs-modal ref="logs_modal" />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Stations/Queue/LogsModal.vue b/frontend/vue/components/Stations/Queue/LogsModal.vue
index d2e53be26..6380f1b49 100644
--- a/frontend/vue/components/Stations/Queue/LogsModal.vue
+++ b/frontend/vue/components/Stations/Queue/LogsModal.vue
@@ -1,12 +1,29 @@
 <template>
-    <b-modal id="logs_modal" ref="$modal" :title="$gettext('Log Viewer')">
-        <textarea class="form-control log-viewer" spellcheck="false" readonly>{{ logs }}</textarea>
+    <b-modal
+        id="logs_modal"
+        ref="$modal"
+        :title="$gettext('Log Viewer')"
+    >
+        <textarea
+            class="form-control log-viewer"
+            spellcheck="false"
+            readonly
+        >{{ logs }}</textarea>
 
         <template #modal-footer>
-            <b-button variant="default" type="button" @click="close">
+            <b-button
+                variant="default"
+                type="button"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
-            <b-button variant="primary" class="btn_copy" @click.prevent="doCopy" type="button">
+            <b-button
+                variant="primary"
+                class="btn_copy"
+                type="button"
+                @click.prevent="doCopy"
+            >
                 {{ $gettext('Copy to Clipboard') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Stations/Remotes.vue b/frontend/vue/components/Stations/Remotes.vue
index 46c220905..680a53246 100644
--- a/frontend/vue/components/Stations/Remotes.vue
+++ b/frontend/vue/components/Stations/Remotes.vue
@@ -1,7 +1,9 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('Remote Relays') }}</h2>
+            <h2 class="card-title">
+                {{ $gettext('Remote Relays') }}
+            </h2>
         </b-card-header>
 
         <info-card>
@@ -13,16 +15,28 @@
         </info-card>
 
         <b-card-body body-class="card-padding-sm">
-            <b-button variant="outline-primary" @click.prevent="doCreate">
-                <icon icon="add"></icon>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Remote Relay') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="$dataTable" id="station_remotes" paginated :fields="fields" :api-url="listUrl">
+        <data-table
+            id="station_remotes"
+            ref="$dataTable"
+            paginated
+            :fields="fields"
+            :api-url="listUrl"
+        >
             <template #cell(display_name)="row">
                 <h5 class="m-0">
-                    <a :href="row.item.url" target="_blank">{{ row.item.display_name }}</a>
+                    <a
+                        :href="row.item.url"
+                        target="_blank"
+                    >{{ row.item.display_name }}</a>
                 </h5>
             </template>
             <template #cell(enable_autodj)="row">
@@ -35,11 +49,22 @@
                 </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)">
+                <b-button-group
+                    v-if="row.item.is_editable"
+                    size="sm"
+                >
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -47,8 +72,12 @@
         </data-table>
     </b-card>
 
-    <remote-edit-modal ref="$editModal" :create-url="listUrl"
-                       @relist="relist" @needs-restart="mayNeedRestart"></remote-edit-modal>
+    <remote-edit-modal
+        ref="$editModal"
+        :create-url="listUrl"
+        @relist="relist"
+        @needs-restart="mayNeedRestart"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Stations/Remotes/EditModal.vue b/frontend/vue/components/Stations/Remotes/EditModal.vue
index 09971784a..47ea51b70 100644
--- a/frontend/vue/components/Stations/Remotes/EditModal.vue
+++ b/frontend/vue/components/Stations/Remotes/EditModal.vue
@@ -1,13 +1,21 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <remote-form-basic-info :form="v$.form" />
 
-        <b-tabs content-class="mt-3" pills>
-            <remote-form-basic-info :form="v$.form"></remote-form-basic-info>
-
-            <remote-form-auto-dj :form="v$.form"></remote-form-auto-dj>
+            <remote-form-auto-dj :form="v$.form" />
         </b-tabs>
-
     </modal-form>
 </template>
 <script>
@@ -20,15 +28,15 @@ import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'RemoteEditModal',
-    emits: ['needs-restart'],
-    setup() {
-        return {v$: useVuelidate()}
-    },
-    mixins: [BaseEditModal],
     components: {
         RemoteFormAutoDj,
         RemoteFormBasicInfo
     },
+    mixins: [BaseEditModal],
+    emits: ['needs-restart'],
+    setup() {
+        return {v$: useVuelidate()}
+    },
     validations() {
         return {
             form: {
diff --git a/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue b/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue
index 395d1a3fb..50a47127f 100644
--- a/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue
+++ b/frontend/vue/components/Stations/Remotes/Form/AutoDj.vue
@@ -1,7 +1,11 @@
 <template>
     <b-tab :title="$gettext('AutoDJ')">
         <div class="form-row mb-3">
-            <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_autodj" :field="form.enable_autodj">
+            <b-wrapped-form-checkbox
+                id="edit_form_enable_autodj"
+                class="col-md-12"
+                :field="form.enable_autodj"
+            >
                 <template #label>
                     {{ $gettext('Broadcast AutoDJ to Remote Station') }}
                 </template>
@@ -13,29 +17,52 @@
             </b-wrapped-form-checkbox>
         </div>
 
-        <div class="form-row" v-if="form.enable_autodj.$model">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_autodj_format" :field="form.autodj_format">
+        <div
+            v-if="form.enable_autodj.$model"
+            class="form-row"
+        >
+            <b-wrapped-form-group
+                id="edit_form_autodj_format"
+                class="col-md-6"
+                :field="form.autodj_format"
+            >
                 <template #label>
                     {{ $gettext('AutoDJ Format') }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" v-model="props.field.$model"
-                                        :options="formatOptions"></b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="formatOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_autodj_bitrate" :field="form.autodj_bitrate"
-                                  v-if="formatSupportsBitrateOptions">
+            <b-wrapped-form-group
+                v-if="formatSupportsBitrateOptions"
+                id="edit_form_autodj_bitrate"
+                class="col-md-6"
+                :field="form.autodj_bitrate"
+            >
                 <template #label>
                     {{ $gettext('AutoDJ Bitrate (kbps)') }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" v-model="props.field.$model"
-                                        :options="bitrateOptions"></b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="bitrateOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_source_port" :field="form.source_port">
+            <b-wrapped-form-group
+                id="edit_form_source_port"
+                class="col-md-6"
+                :field="form.source_port"
+            >
                 <template #label>
                     {{ $gettext('Remote Station Source Port') }}
                 </template>
@@ -46,7 +73,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_source_mount" :field="form.source_mount">
+            <b-wrapped-form-group
+                id="edit_form_source_mount"
+                class="col-md-6"
+                :field="form.source_mount"
+            >
                 <template #label>
                     {{ $gettext('Remote Station Source Mountpoint/SID') }}
                 </template>
@@ -57,7 +88,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_source_username" :field="form.source_username">
+            <b-wrapped-form-group
+                id="edit_form_source_username"
+                class="col-md-6"
+                :field="form.source_username"
+            >
                 <template #label>
                     {{ $gettext('Remote Station Source Username') }}
                 </template>
@@ -68,7 +103,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_source_password" :field="form.source_password">
+            <b-wrapped-form-group
+                id="edit_form_source_password"
+                class="col-md-6"
+                :field="form.source_password"
+            >
                 <template #label>
                     {{ $gettext('Remote Station Source Password') }}
                 </template>
@@ -77,7 +116,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_public" :field="form.is_public">
+            <b-wrapped-form-checkbox
+                id="edit_form_is_public"
+                class="col-md-6"
+                :field="form.is_public"
+            >
                 <template #label>
                     {{ $gettext('Publish to "Yellow Pages" Directories') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue b/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue
index 835ec97ca..6b5df304b 100644
--- a/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Remotes/Form/BasicInfo.vue
@@ -1,23 +1,34 @@
 <template>
-    <b-tab :title="$gettext('Basic Info')" active>
+    <b-tab
+        :title="$gettext('Basic Info')"
+        active
+    >
         <b-form-group>
             <div class="form-row">
-                <b-wrapped-form-group class="col-md-12" id="edit_form_type" :field="form.type">
+                <b-wrapped-form-group
+                    id="edit_form_type"
+                    class="col-md-12"
+                    :field="form.type"
+                >
                     <template #label>
                         {{ $gettext('Remote Station Type') }}
                     </template>
                     <template #default="props">
                         <b-form-radio-group
-                            stacked
                             :id="props.id"
-                            :state="props.state"
                             v-model="props.field.$model"
+                            stacked
+                            :state="props.state"
                             :options="typeOptions"
-                        ></b-form-radio-group>
+                        />
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_display_name" :field="form.display_name">
+                <b-wrapped-form-group
+                    id="edit_form_display_name"
+                    class="col-md-6"
+                    :field="form.display_name"
+                >
                     <template #label>
                         {{ $gettext('Display Name') }}
                     </template>
@@ -28,7 +39,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_url" :field="form.url">
+                <b-wrapped-form-group
+                    id="edit_form_url"
+                    class="col-md-6"
+                    :field="form.url"
+                >
                     <template #label>
                         {{ $gettext('Remote Station Listening URL') }}
                     </template>
@@ -39,7 +54,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_mount" :field="form.mount">
+                <b-wrapped-form-group
+                    id="edit_form_mount"
+                    class="col-md-6"
+                    :field="form.mount"
+                >
                     <template #label>
                         {{ $gettext('Remote Station Listening Mountpoint/SID') }}
                     </template>
@@ -50,7 +69,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_admin_password" :field="form.admin_password">
+                <b-wrapped-form-group
+                    id="edit_form_admin_password"
+                    class="col-md-6"
+                    :field="form.admin_password"
+                >
                     <template #label>
                         {{ $gettext('Remote Station Administrator Password') }}
                     </template>
@@ -61,8 +84,11 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_visible_on_public_pages"
-                                         :field="form.is_visible_on_public_pages">
+                <b-wrapped-form-checkbox
+                    id="edit_form_is_visible_on_public_pages"
+                    class="col-md-6"
+                    :field="form.is_visible_on_public_pages"
+                >
                     <template #label>
                         {{ $gettext('Show on Public Pages') }}
                     </template>
@@ -72,7 +98,6 @@
                         }}
                     </template>
                 </b-wrapped-form-checkbox>
-
             </div>
         </b-form-group>
     </b-tab>
diff --git a/frontend/vue/components/Stations/Reports/Listeners.vue b/frontend/vue/components/Stations/Reports/Listeners.vue
index c4468b203..562564f71 100644
--- a/frontend/vue/components/Stations/Reports/Listeners.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners.vue
@@ -10,26 +10,48 @@
                             </h2>
                         </div>
                         <div class="flex-shrink buttons">
-                            <a class="btn btn-bg" id="btn-export" :href="exportUrl" target="_blank">
-                                <icon icon="file_download"></icon>
+                            <a
+                                id="btn-export"
+                                class="btn btn-bg"
+                                :href="exportUrl"
+                                target="_blank"
+                            >
+                                <icon icon="file_download" />
                                 {{ $gettext('Download CSV') }}
                             </a>
 
-                            <date-range-dropdown v-if="!isLive" time-picker :min-date="minDate" :max-date="maxDate"
-                                                 :tz="stationTimeZone" v-model="dateRange"
-                                                 @update="updateListeners">
-                            </date-range-dropdown>
+                            <date-range-dropdown
+                                v-if="!isLive"
+                                v-model="dateRange"
+                                time-picker
+                                :min-date="minDate"
+                                :max-date="maxDate"
+                                :tz="stationTimeZone"
+                                @update="updateListeners"
+                            />
                         </div>
                     </div>
                 </div>
-                <b-tabs pills card>
-                    <b-tab key="live" active @click="setIsLive(true)" :title="$gettext('Live Listeners')"
-                           no-body></b-tab>
-                    <b-tab key="not-live" @click="setIsLive(false)" :title="$gettext('Listener History')"
-                           no-body></b-tab>
+                <b-tabs
+                    pills
+                    card
+                >
+                    <b-tab
+                        key="live"
+                        active
+                        :title="$gettext('Live Listeners')"
+                        no-body
+                        @click="setIsLive(true)"
+                    />
+                    <b-tab
+                        key="not-live"
+                        :title="$gettext('Listener History')"
+                        no-body
+                        @click="setIsLive(false)"
+                    />
                 </b-tabs>
                 <div id="map">
-                    <StationReportsListenersMap :listeners="listeners"></StationReportsListenersMap>
+                    <StationReportsListenersMap :listeners="listeners" />
                 </div>
                 <div>
                     <div class="card-body row">
@@ -55,8 +77,15 @@
                         </div>
                     </div>
 
-                    <data-table ref="datatable" id="station_playlists" paginated handle-client-side
-                                :fields="fields" :responsive="false" :items="listeners">
+                    <data-table
+                        id="station_playlists"
+                        ref="datatable"
+                        paginated
+                        handle-client-side
+                        :fields="fields"
+                        :responsive="false"
+                        :items="listeners"
+                    >
                         <template #cell(ip)="row">
                             {{ row.item.ip }}
                         </template>
@@ -69,13 +98,13 @@
                         <template #cell(user_agent)="row">
                             <div>
                                 <span v-if="row.item.is_mobile">
-                                    <icon icon="smartphone"></icon>
+                                    <icon icon="smartphone" />
                                     <span class="sr-only">
                                         {{ $gettext('Mobile Device') }}
                                     </span>
                                 </span>
                                 <span v-else>
-                                    <icon icon="desktop_windows"></icon>
+                                    <icon icon="desktop_windows" />
                                     <span class="sr-only">
                                         {{ $gettext('Desktop Device') }}
                                     </span>
diff --git a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
index d6dfe477f..6538a0c18 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
@@ -1,18 +1,15 @@
 <template>
-    <div id="leaflet-container" ref="$container">
-        <slot v-if="$map" :map="$map"/>
+    <div
+        id="leaflet-container"
+        ref="$container"
+    >
+        <slot
+            v-if="$map"
+            :map="$map"
+        />
     </div>
 </template>
 
-<style lang="scss">
-@import 'leaflet/dist/leaflet.css';
-
-.leaflet-container {
-    height: 300px;
-    z-index: 0;
-}
-</style>
-
 <script setup>
 import {onMounted, provide, ref, shallowRef} from "vue";
 import L from "leaflet";
@@ -62,3 +59,12 @@ onMounted(() => {
 
 });
 </script>
+
+<style lang="scss">
+@import 'leaflet/dist/leaflet.css';
+
+.leaflet-container {
+    height: 300px;
+    z-index: 0;
+}
+</style>
diff --git a/frontend/vue/components/Stations/Reports/Listeners/Map.vue b/frontend/vue/components/Stations/Reports/Listeners/Map.vue
index b2a6f702a..7fbd845db 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/Map.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/Map.vue
@@ -1,8 +1,13 @@
 <template>
-    <inner-map v-if="visibleListeners.length < 3000"
-               :attribution="attribution">
-        <map-point v-for="l in visibleListeners" :key="l.hash"
-                   :position="[l.location.lat, l.location.lon]">
+    <inner-map
+        v-if="visibleListeners.length < 3000"
+        :attribution="attribution"
+    >
+        <map-point
+            v-for="l in visibleListeners"
+            :key="l.hash"
+            :position="[l.location.lat, l.location.lon]"
+        >
             {{ $gettext('IP') }}
             : {{ l.ip }}<br>
             {{ $gettext('Country') }}
diff --git a/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue b/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
index 8afab3190..8d70b33e2 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="$content">
-        <slot/>
+        <slot />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Stations/Reports/Overview.vue b/frontend/vue/components/Stations/Reports/Overview.vue
index 82216bfd7..2016c8d0d 100644
--- a/frontend/vue/components/Stations/Reports/Overview.vue
+++ b/frontend/vue/components/Stations/Reports/Overview.vue
@@ -1,25 +1,38 @@
 <template>
-    <section class="card mb-4" role="region">
+    <section
+        class="card mb-4"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <div class="d-flex align-items-center">
                 <h2 class="card-title flex-fill my-0">
                     {{ $gettext('Station Statistics') }}
                 </h2>
                 <div class="flex-shrink">
-                    <date-range-dropdown time-picker v-model="dateRange"
-                                         :tz="stationTimeZone"></date-range-dropdown>
+                    <date-range-dropdown
+                        v-model="dateRange"
+                        time-picker
+                        :tz="stationTimeZone"
+                    />
                 </div>
             </div>
         </div>
 
-        <b-tabs pills lazy nav-class="card-header-pills" nav-wrapper-class="card-header">
+        <b-tabs
+            pills
+            lazy
+            nav-class="card-header-pills"
+            nav-wrapper-class="card-header"
+        >
             <b-tab>
                 <template #title>
                     {{ $gettext('Best & Worst') }}
                 </template>
 
-                <best-and-worst-tab :api-url="bestAndWorstUrl" :date-range="dateRange">
-                </best-and-worst-tab>
+                <best-and-worst-tab
+                    :api-url="bestAndWorstUrl"
+                    :date-range="dateRange"
+                />
             </b-tab>
 
             <b-tab>
@@ -27,8 +40,10 @@
                     {{ $gettext('Listeners By Time Period') }}
                 </template>
 
-                <listeners-by-time-period-tab :api-url="listenersByTimePeriodUrl" :date-range="dateRange">
-                </listeners-by-time-period-tab>
+                <listeners-by-time-period-tab
+                    :api-url="listenersByTimePeriodUrl"
+                    :date-range="dateRange"
+                />
             </b-tab>
 
             <b-tab>
@@ -36,8 +51,10 @@
                     {{ $gettext('Listening Time') }}
                 </template>
 
-                <listening-time-tab :api-url="listeningTimeUrl" :date-range="dateRange">
-                </listening-time-tab>
+                <listening-time-tab
+                    :api-url="listeningTimeUrl"
+                    :date-range="dateRange"
+                />
             </b-tab>
 
             <b-tab>
@@ -45,8 +62,10 @@
                     {{ $gettext('Streams') }}
                 </template>
 
-                <streams-tab :api-url="byStreamUrl" :date-range="dateRange">
-                </streams-tab>
+                <streams-tab
+                    :api-url="byStreamUrl"
+                    :date-range="dateRange"
+                />
             </b-tab>
 
             <b-tab v-if="showFullAnalytics">
@@ -54,8 +73,10 @@
                     {{ $gettext('Clients') }}
                 </template>
 
-                <clients-tab :api-url="byClientUrl" :date-range="dateRange">
-                </clients-tab>
+                <clients-tab
+                    :api-url="byClientUrl"
+                    :date-range="dateRange"
+                />
             </b-tab>
 
             <b-tab v-if="showFullAnalytics">
@@ -63,8 +84,10 @@
                     {{ $gettext('Browsers') }}
                 </template>
 
-                <browsers-tab :api-url="byBrowserUrl" :date-range="dateRange">
-                </browsers-tab>
+                <browsers-tab
+                    :api-url="byBrowserUrl"
+                    :date-range="dateRange"
+                />
             </b-tab>
 
             <b-tab v-if="showFullAnalytics">
@@ -72,8 +95,10 @@
                     {{ $gettext('Countries') }}
                 </template>
 
-                <countries-tab :api-url="byCountryUrl" :date-range="dateRange">
-                </countries-tab>
+                <countries-tab
+                    :api-url="byCountryUrl"
+                    :date-range="dateRange"
+                />
             </b-tab>
         </b-tabs>
     </section>
diff --git a/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue b/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue
index f2e555a70..23c27fe99 100644
--- a/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/BestAndWorstTab.vue
@@ -1,11 +1,23 @@
 <template>
-    <b-overlay variant="card" :show="loading">
-        <div class="card-body py-5" v-if="loading">
+    <b-overlay
+        variant="card"
+        :show="loading"
+    >
+        <div
+            v-if="loading"
+            class="card-body py-5"
+        >
             &nbsp;
         </div>
-        <div class="card-body" v-else>
+        <div
+            v-else
+            class="card-body"
+        >
             <b-row>
-                <b-col md="6" class="mb-4">
+                <b-col
+                    md="6"
+                    class="mb-4"
+                >
                     <fieldset>
                         <legend>
                             {{ $gettext('Best Performing Songs') }}
@@ -17,32 +29,35 @@
                                 <col width="80%">
                             </colgroup>
                             <thead>
-                            <tr>
-                                <th>
-                                    {{ $gettext('Change') }}
-                                </th>
-                                <th>
-                                    {{ $gettext('Song') }}
-                                </th>
-                            </tr>
+                                <tr>
+                                    <th>
+                                        {{ $gettext('Change') }}
+                                    </th>
+                                    <th>
+                                        {{ $gettext('Song') }}
+                                    </th>
+                                </tr>
                             </thead>
                             <tbody>
-                            <tr v-for="row in bestAndWorst.best">
-                                <td class="text-center text-success">
-                                    <icon icon="keyboard_arrow_up"></icon>
-                                    {{ row.stat_delta }}
-                                    <br>
-                                    <small>{{ row.stat_start }} to {{ row.stat_end }}</small>
-                                </td>
-                                <td>
-                                    <span v-html="getSongText(row.song)"></span>
-                                </td>
-                            </tr>
+                                <tr v-for="row in bestAndWorst.best">
+                                    <td class="text-center text-success">
+                                        <icon icon="keyboard_arrow_up" />
+                                        {{ row.stat_delta }}
+                                        <br>
+                                        <small>{{ row.stat_start }} to {{ row.stat_end }}</small>
+                                    </td>
+                                    <td>
+                                        <span v-html="getSongText(row.song)" />
+                                    </td>
+                                </tr>
                             </tbody>
                         </table>
                     </fieldset>
                 </b-col>
-                <b-col md="6" class="mb-4">
+                <b-col
+                    md="6"
+                    class="mb-4"
+                >
                     <fieldset>
                         <legend>
                             {{ $gettext('Worst Performing Songs') }}
@@ -54,33 +69,36 @@
                                 <col width="80%">
                             </colgroup>
                             <thead>
-                            <tr>
-                                <th>
-                                    {{ $gettext('Change') }}
-                                </th>
-                                <th>
-                                    {{ $gettext('Song') }}
-                                </th>
-                            </tr>
+                                <tr>
+                                    <th>
+                                        {{ $gettext('Change') }}
+                                    </th>
+                                    <th>
+                                        {{ $gettext('Song') }}
+                                    </th>
+                                </tr>
                             </thead>
                             <tbody>
-                            <tr v-for="row in bestAndWorst.worst">
-                                <td class="text-center text-danger">
-                                    <icon icon="keyboard_arrow_down"></icon>
-                                    {{ row.stat_delta }}
-                                    <br>
-                                    <small>{{ row.stat_start }} to {{ row.stat_end }}</small>
-                                </td>
-                                <td>
-                                    <span v-html="getSongText(row.song)"></span>
-                                </td>
-                            </tr>
+                                <tr v-for="row in bestAndWorst.worst">
+                                    <td class="text-center text-danger">
+                                        <icon icon="keyboard_arrow_down" />
+                                        {{ row.stat_delta }}
+                                        <br>
+                                        <small>{{ row.stat_start }} to {{ row.stat_end }}</small>
+                                    </td>
+                                    <td>
+                                        <span v-html="getSongText(row.song)" />
+                                    </td>
+                                </tr>
                             </tbody>
                         </table>
                     </fieldset>
                 </b-col>
 
-                <b-col md="12" class="mb-4">
+                <b-col
+                    md="12"
+                    class="mb-4"
+                >
                     <fieldset>
                         <legend>
                             {{ $gettext('Most Played Songs') }}
@@ -92,24 +110,24 @@
                                 <col width="90%">
                             </colgroup>
                             <thead>
-                            <tr>
-                                <th>
-                                    {{ $gettext('Plays') }}
-                                </th>
-                                <th>
-                                    {{ $gettext('Song') }}
-                                </th>
-                            </tr>
+                                <tr>
+                                    <th>
+                                        {{ $gettext('Plays') }}
+                                    </th>
+                                    <th>
+                                        {{ $gettext('Song') }}
+                                    </th>
+                                </tr>
                             </thead>
                             <tbody>
-                            <tr v-for="row in mostPlayed">
-                                <td class="text-center">
-                                    {{ row.num_plays }}
-                                </td>
-                                <td>
-                                    <span v-html="getSongText(row.song)"></span>
-                                </td>
-                            </tr>
+                                <tr v-for="row in mostPlayed">
+                                    <td class="text-center">
+                                        {{ row.num_plays }}
+                                    </td>
+                                    <td>
+                                        <span v-html="getSongText(row.song)" />
+                                    </td>
+                                </tr>
                             </tbody>
                         </table>
                     </fieldset>
diff --git a/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue b/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue
index 48f4bee6b..c74d60a79 100644
--- a/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/BrowsersTab.vue
@@ -1,6 +1,10 @@
 <template>
-    <common-metrics-view :date-range="dateRange" :api-url="apiUrl"
-                         field-key="browser" :field-label="$gettext('Browser')">
+    <common-metrics-view
+        :date-range="dateRange"
+        :api-url="apiUrl"
+        field-key="browser"
+        :field-label="$gettext('Browser')"
+    >
         <template #by_listeners_legend>
             {{ $gettext('Top Browsers by Listeners') }}
         </template>
diff --git a/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue b/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue
index 00d85f698..f2f623580 100644
--- a/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/ClientsTab.vue
@@ -1,6 +1,10 @@
 <template>
-    <common-metrics-view :date-range="dateRange" :api-url="apiUrl"
-                         field-key="client" :field-label="$gettext('Client')">
+    <common-metrics-view
+        :date-range="dateRange"
+        :api-url="apiUrl"
+        field-key="client"
+        :field-label="$gettext('Client')"
+    >
         <template #by_listeners_legend>
             {{ $gettext('Clients by Listeners') }}
         </template>
diff --git a/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue b/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue
index 7052c73c5..7c15c3d49 100644
--- a/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/CommonMetricsView.vue
@@ -1,40 +1,65 @@
 <template>
-    <b-overlay variant="card" :show="loading">
-        <div class="card-body py-5" v-if="loading">
+    <b-overlay
+        variant="card"
+        :show="loading"
+    >
+        <div
+            v-if="loading"
+            class="card-body py-5"
+        >
             &nbsp;
         </div>
         <div v-else>
             <div class="card-body">
                 <b-row>
-                    <b-col md="6" class="mb-4">
+                    <b-col
+                        md="6"
+                        class="mb-4"
+                    >
                         <fieldset>
                             <legend>
-                                <slot name="by_listeners_legend"></slot>
+                                <slot name="by_listeners_legend" />
                             </legend>
 
-                            <pie-chart style="width: 100%;" :data="stats.top_listeners.datasets"
-                                       :labels="stats.top_listeners.labels">
-                                <span v-html="stats.top_listeners.alt"></span>
+                            <pie-chart
+                                style="width: 100%;"
+                                :data="stats.top_listeners.datasets"
+                                :labels="stats.top_listeners.labels"
+                            >
+                                <span v-html="stats.top_listeners.alt" />
                             </pie-chart>
                         </fieldset>
                     </b-col>
-                    <b-col md="6" class="mb-4">
+                    <b-col
+                        md="6"
+                        class="mb-4"
+                    >
                         <fieldset>
                             <legend>
-                                <slot name="by_connected_time_legend"></slot>
+                                <slot name="by_connected_time_legend" />
                             </legend>
 
-                            <pie-chart style="width: 100%;" :data="stats.top_connected_time.datasets"
-                                       :labels="stats.top_connected_time.labels">
-                                <span v-html="stats.top_connected_time.alt"></span>
+                            <pie-chart
+                                style="width: 100%;"
+                                :data="stats.top_connected_time.datasets"
+                                :labels="stats.top_connected_time.labels"
+                            >
+                                <span v-html="stats.top_connected_time.alt" />
                             </pie-chart>
                         </fieldset>
                     </b-col>
                 </b-row>
             </div>
 
-            <data-table ref="datatable" :id="fieldKey+'_table'" paginated handle-client-side
-                        :fields="fields" :responsive="false" :items="stats.all">
+            <data-table
+                :id="fieldKey+'_table'"
+                ref="datatable"
+                paginated
+                handle-client-side
+                :fields="fields"
+                :responsive="false"
+                :items="stats.all"
+            >
                 <template #cell(connected_seconds_calc)="row">
                     {{ formatTime(row.item.connected_seconds) }}
                 </template>
diff --git a/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue b/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue
index 38f20adeb..2f333d427 100644
--- a/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/CountriesTab.vue
@@ -1,6 +1,10 @@
 <template>
-    <common-metrics-view :date-range="dateRange" :api-url="apiUrl"
-                         field-key="country" :field-label="$gettext('Country')">
+    <common-metrics-view
+        :date-range="dateRange"
+        :api-url="apiUrl"
+        field-key="country"
+        :field-label="$gettext('Country')"
+    >
         <template #by_listeners_legend>
             {{ $gettext('Top Countries by Listeners') }}
         </template>
diff --git a/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue b/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue
index 477be77bc..67de326d0 100644
--- a/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/ListenersByTimePeriodTab.vue
@@ -1,42 +1,69 @@
 <template>
-    <b-overlay variant="card" :show="loading">
-        <div class="card-body py-5" v-if="loading">
+    <b-overlay
+        variant="card"
+        :show="loading"
+    >
+        <div
+            v-if="loading"
+            class="card-body py-5"
+        >
             &nbsp;
         </div>
-        <div class="card-body" v-else>
+        <div
+            v-else
+            class="card-body"
+        >
             <b-row>
-                <b-col md="12" class="mb-4">
+                <b-col
+                    md="12"
+                    class="mb-4"
+                >
                     <fieldset>
                         <legend>
                             {{ $gettext('Listeners by Day') }}
                         </legend>
 
-                        <time-series-chart style="width: 100%;" :data="chartData.daily.metrics">
-                            <span v-html="chartData.daily.alt"></span>
+                        <time-series-chart
+                            style="width: 100%;"
+                            :data="chartData.daily.metrics"
+                        >
+                            <span v-html="chartData.daily.alt" />
                         </time-series-chart>
                     </fieldset>
                 </b-col>
-                <b-col md="6" class="mb-4">
+                <b-col
+                    md="6"
+                    class="mb-4"
+                >
                     <fieldset>
                         <legend>
                             {{ $gettext('Listeners by Day of Week') }}
                         </legend>
 
-                        <pie-chart style="width: 100%;" :data="chartData.day_of_week.metrics"
-                                   :labels="chartData.day_of_week.labels">
-                            <span v-html="chartData.day_of_week.alt"></span>
+                        <pie-chart
+                            style="width: 100%;"
+                            :data="chartData.day_of_week.metrics"
+                            :labels="chartData.day_of_week.labels"
+                        >
+                            <span v-html="chartData.day_of_week.alt" />
                         </pie-chart>
                     </fieldset>
                 </b-col>
-                <b-col md="6" class="mb-4">
+                <b-col
+                    md="6"
+                    class="mb-4"
+                >
                     <fieldset>
                         <legend>
                             {{ $gettext('Listeners by Hour') }}
                         </legend>
 
-                        <hour-chart style="width: 100%;" :data="chartData.hourly.metrics"
-                                    :labels="chartData.hourly.labels">
-                            <span v-html="chartData.hourly.alt"></span>
+                        <hour-chart
+                            style="width: 100%;"
+                            :data="chartData.hourly.metrics"
+                            :labels="chartData.hourly.labels"
+                        >
+                            <span v-html="chartData.hourly.alt" />
                         </hour-chart>
                     </fieldset>
                 </b-col>
diff --git a/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue b/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue
index 129106460..91bd912dd 100644
--- a/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue
@@ -1,6 +1,12 @@
 <template>
-    <b-overlay variant="card" :show="loading">
-        <div class="card-body py-5" v-if="loading">
+    <b-overlay
+        variant="card"
+        :show="loading"
+    >
+        <div
+            v-if="loading"
+            class="card-body py-5"
+        >
             &nbsp;
         </div>
         <div v-else>
@@ -10,16 +16,26 @@
                         {{ $gettext('Listeners by Listening Time') }}
                     </legend>
 
-                    <pie-chart style="width: 100%;" :data="stats.chart.datasets"
-                               :labels="stats.chart.labels" :aspect-ratio="4">
-                        <span v-html="stats.chart.alt"></span>
+                    <pie-chart
+                        style="width: 100%;"
+                        :data="stats.chart.datasets"
+                        :labels="stats.chart.labels"
+                        :aspect-ratio="4"
+                    >
+                        <span v-html="stats.chart.alt" />
                     </pie-chart>
                 </fieldset>
             </div>
 
-            <data-table ref="datatable" id="listening_time_table" paginated handle-client-side
-                        :fields="fields" :responsive="false" :items="stats.all">
-            </data-table>
+            <data-table
+                id="listening_time_table"
+                ref="datatable"
+                paginated
+                handle-client-side
+                :fields="fields"
+                :responsive="false"
+                :items="stats.all"
+            />
         </div>
     </b-overlay>
 </template>
diff --git a/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue b/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue
index be9b14c74..0c8f88e96 100644
--- a/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue
+++ b/frontend/vue/components/Stations/Reports/Overview/StreamsTab.vue
@@ -1,6 +1,10 @@
 <template>
-    <common-metrics-view :date-range="dateRange" :api-url="apiUrl"
-                         field-key="stream" :field-label="$gettext('Stream')">
+    <common-metrics-view
+        :date-range="dateRange"
+        :api-url="apiUrl"
+        field-key="stream"
+        :field-label="$gettext('Stream')"
+    >
         <template #by_listeners_legend>
             {{ $gettext('Top Streams by Listeners') }}
         </template>
diff --git a/frontend/vue/components/Stations/Reports/Requests.vue b/frontend/vue/components/Stations/Reports/Requests.vue
index 8b673e466..6e31e3973 100644
--- a/frontend/vue/components/Stations/Reports/Requests.vue
+++ b/frontend/vue/components/Stations/Reports/Requests.vue
@@ -1,21 +1,43 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('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)"
-                   :title="tab.title" no-body></b-tab>
+        <b-tabs
+            pills
+            card
+        >
+            <b-tab
+                v-for="tab in tabs"
+                :key="tab.type"
+                :active="activeType === tab.type"
+                :title="tab.title"
+                no-body
+                @click="setType(tab.type)"
+            />
         </b-tabs>
 
-        <div class="card-actions" v-if="activeType === 'pending'">
-            <b-button variant="outline-danger" @click="doClear()">
-                <icon icon="remove"></icon>
+        <div
+            v-if="activeType === 'pending'"
+            class="card-actions"
+        >
+            <b-button
+                variant="outline-danger"
+                @click="doClear()"
+            >
+                <icon icon="remove" />
                 {{ $gettext('Clear Pending Requests') }}
             </b-button>
         </div>
 
-        <data-table ref="datatable" id="station_queue" :fields="fields" :api-url="listUrlForType">
+        <data-table
+            id="station_queue"
+            ref="datatable"
+            :fields="fields"
+            :api-url="listUrlForType"
+        >
             <template #cell(timestamp)="row">
                 {{ formatTime(row.item.timestamp) }}
             </template>
@@ -41,8 +63,12 @@
             </template>
             <template #cell(actions)="row">
                 <b-button-group>
-                    <b-button v-if="row.item.played_at === 0" size="sm" variant="danger"
-                              @click.prevent="doDelete(row.item.links.delete)">
+                    <b-button
+                        v-if="row.item.played_at === 0"
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.delete)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -65,6 +91,18 @@ export default {
         clearUrl: String,
         stationTimeZone: String
     },
+    data() {
+        return {
+            activeType: 'pending',
+            fields: [
+                {key: 'timestamp', label: this.$gettext('Date Requested'), sortable: false},
+                {key: 'played_at', label: this.$gettext('Date Played'), sortable: false},
+                {key: 'song_title', isRowHeader: true, label: this.$gettext('Song Title'), sortable: false},
+                {key: 'ip', label: this.$gettext('Requester IP'), sortable: false},
+                {key: 'actions', label: this.$gettext('Actions'), sortable: false}
+            ]
+        }
+    },
     computed: {
         tabs() {
             return [
@@ -82,18 +120,6 @@ export default {
             return this.listUrl + '?type=' + this.activeType;
         }
     },
-    data() {
-        return {
-            activeType: 'pending',
-            fields: [
-                {key: 'timestamp', label: this.$gettext('Date Requested'), sortable: false},
-                {key: 'played_at', label: this.$gettext('Date Played'), sortable: false},
-                {key: 'song_title', isRowHeader: true, label: this.$gettext('Song Title'), sortable: false},
-                {key: 'ip', label: this.$gettext('Requester IP'), sortable: false},
-                {key: 'actions', label: this.$gettext('Actions'), sortable: false}
-            ]
-        }
-    },
     methods: {
         setType(type) {
             this.activeType = type;
diff --git a/frontend/vue/components/Stations/Reports/SoundExchange.vue b/frontend/vue/components/Stations/Reports/SoundExchange.vue
index 9e850c598..8dcaf1bf3 100644
--- a/frontend/vue/components/Stations/Reports/SoundExchange.vue
+++ b/frontend/vue/components/Stations/Reports/SoundExchange.vue
@@ -1,62 +1,93 @@
 <template>
-    <section class="card" role="region">
+    <section
+        class="card"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <h3 class="card-title">
                 {{ $gettext('SoundExchange Report') }}
             </h3>
         </div>
 
-        <form id="report-form" class="form vue-form" method="GET" :action="apiUrl" target="_blank">
+        <form
+            id="report-form"
+            class="form vue-form"
+            method="GET"
+            :action="apiUrl"
+            target="_blank"
+        >
             <div class="card-body">
                 <b-form-fieldset>
-                    <p>This report is intended for licensing in the United States only, for webcasters paying royalties
+                    <p>
+                        This report is intended for licensing in the United States only, for webcasters paying royalties
                         via SoundExchange. Learn more about the requirements for reporting and classification on the
-                        <a href="https://www.soundexchange.com/service-provider/reporting-requirements/"
-                           target="_blank">
+                        <a
+                            href="https://www.soundexchange.com/service-provider/reporting-requirements/"
+                            target="_blank"
+                        >
                             SoundExchange web site
                         </a>.
                     </p>
 
                     <ul>
-                        <li>AzuraCast assumes that your station fits SoundExchange Transmission Category A, "Eligible
+                        <li>
+                            AzuraCast assumes that your station fits SoundExchange Transmission Category A, "Eligible
                             nonsubscription transmissions other than broadcast simulcasts and transmissions of non-music
                             programming." If your station does not fall within this category, update the transmission
                             category field accordingly.
                         </li>
-                        <li>The data collected by AzuraCast meets the SoundExchange standard for Actual Total
+                        <li>
+                            The data collected by AzuraCast meets the SoundExchange standard for Actual Total
                             Performances (ATP) by tracking unique listeners across all song plays. All other information
                             is derived from the metadata of the uploaded songs themselves, and may not be completely
                             accurate.
                         </li>
-                        <li>Reporting requirements for SoundExchange may change at any time. AzuraCast is non-commercial
+                        <li>
+                            Reporting requirements for SoundExchange may change at any time. AzuraCast is non-commercial
                             community-built software and cannot guarantee that its reporting format will always be
                             up-to-date.
                         </li>
-                        <li>You should always verify the report generated by AzuraCast before sending it. In particular,
+                        <li>
+                            You should always verify the report generated by AzuraCast before sending it. In particular,
                             either the ISRC (International Standard Recording Code) or *both* the album and label are
                             required for every row, and may not be provided in the song metadata. To locate an ISRC for
-                            a track, you should use <a href="https://isrc.soundexchange.com" target="_blank">SoundExchange's
+                            a track, you should use <a
+                                href="https://isrc.soundexchange.com"
+                                target="_blank"
+                            >SoundExchange's
                                 ISRC search tool</a>.
                         </li>
                     </ul>
                 </b-form-fieldset>
 
                 <b-form-fieldset>
-                    <b-wrapped-form-group name="start_date" id="form_start_date" :field="v$.form.start_date"
-                                          input-type="date">
+                    <b-wrapped-form-group
+                        id="form_start_date"
+                        name="start_date"
+                        :field="v$.form.start_date"
+                        input-type="date"
+                    >
                         <template #label>
                             {{ $gettext('Start Date') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group name="end_date" id="form_end_date" :field="v$.form.end_date"
-                                          input-type="date">
+                    <b-wrapped-form-group
+                        id="form_end_date"
+                        name="end_date"
+                        :field="v$.form.end_date"
+                        input-type="date"
+                    >
                         <template #label>
                             {{ $gettext('End Date') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-checkbox name="fetch_isrc" id="form_edit_fetch_isrc" :field="v$.form.fetch_isrc">
+                    <b-wrapped-form-checkbox
+                        id="form_edit_fetch_isrc"
+                        name="fetch_isrc"
+                        :field="v$.form.fetch_isrc"
+                    >
                         <template #label>
                             {{ $gettext('Attempt to Automatically Retrieve ISRC When Missing') }}
                         </template>
@@ -68,7 +99,12 @@
                     </b-wrapped-form-checkbox>
                 </b-form-fieldset>
 
-                <b-button type="submit" size="lg" :variant="(v$.form.$invalid) ? 'danger' : 'primary'" class="mt-2">
+                <b-button
+                    type="submit"
+                    size="lg"
+                    :variant="(v$.form.$invalid) ? 'danger' : 'primary'"
+                    class="mt-2"
+                >
                     {{ $gettext('Generate Report') }}
                 </b-button>
             </div>
@@ -86,12 +122,12 @@ import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
 
 export default {
     name: 'StationsReportsSoundExchange',
+    components: {Icon, BWrappedFormGroup, BFormFieldset, BWrappedFormCheckbox},
     props: {
         apiUrl: String,
         startDate: String,
         endDate: String
     },
-    components: {Icon, BWrappedFormGroup, BFormFieldset, BWrappedFormCheckbox},
     setup() {
         return {v$: useVuelidate()}
     },
diff --git a/frontend/vue/components/Stations/Reports/Timeline.vue b/frontend/vue/components/Stations/Reports/Timeline.vue
index f73daf415..19922383f 100644
--- a/frontend/vue/components/Stations/Reports/Timeline.vue
+++ b/frontend/vue/components/Stations/Reports/Timeline.vue
@@ -6,18 +6,33 @@
                     {{ $gettext('Song Playback Timeline') }}
                 </h2>
                 <div class="flex-shrink">
-                    <a class="btn btn-bg" id="btn-export" :href="exportUrl" target="_blank">
-                        <icon icon="file_download"></icon>
+                    <a
+                        id="btn-export"
+                        class="btn btn-bg"
+                        :href="exportUrl"
+                        target="_blank"
+                    >
+                        <icon icon="file_download" />
                         {{ $gettext('Download CSV') }}
                     </a>
 
-                    <date-range-dropdown time-picker v-model="dateRange" :tz="stationTimeZone"
-                                         @update="relist"></date-range-dropdown>
+                    <date-range-dropdown
+                        v-model="dateRange"
+                        time-picker
+                        :tz="stationTimeZone"
+                        @update="relist"
+                    />
                 </div>
             </div>
         </div>
-        <data-table ref="datatable" responsive paginated select-fields
-                    :fields="fields" :apiUrl="apiUrl">
+        <data-table
+            ref="datatable"
+            responsive
+            paginated
+            select-fields
+            :fields="fields"
+            :api-url="apiUrl"
+        >
             <template #cell(datetime)="row">
                 {{ formatTimestamp(row.item.played_at) }}
             </template>
@@ -29,21 +44,21 @@
             </template>
             <template #cell(delta)="row">
                 <span class="typography-subheading">
-                <template v-if="row.item.delta_total > 0">
-                    <span class="text-success">
-                        <icon icon="trending_up"></icon>
-                        {{ abs(row.item.delta_total) }}
-                    </span>
-                </template>
-                <template v-else-if="row.item.delta_total < 0">
-                    <span class="text-danger">
-                        <icon icon="trending_down"></icon>
-                        {{ abs(row.item.delta_total) }}
-                    </span>
-                </template>
-                <template v-else>
-                    0
-                </template>
+                    <template v-if="row.item.delta_total > 0">
+                        <span class="text-success">
+                            <icon icon="trending_up" />
+                            {{ abs(row.item.delta_total) }}
+                        </span>
+                    </template>
+                    <template v-else-if="row.item.delta_total < 0">
+                        <span class="text-danger">
+                            <icon icon="trending_down" />
+                            {{ abs(row.item.delta_total) }}
+                        </span>
+                    </template>
+                    <template v-else>
+                        0
+                    </template>
                 </span>
             </template>
             <template #cell(song)="row">
diff --git a/frontend/vue/components/Stations/SftpUsers.vue b/frontend/vue/components/Stations/SftpUsers.vue
index e80f4b792..246b2e863 100644
--- a/frontend/vue/components/Stations/SftpUsers.vue
+++ b/frontend/vue/components/Stations/SftpUsers.vue
@@ -3,24 +3,42 @@
         <div class="col-md-8">
             <b-card no-body>
                 <b-card-header header-bg-variant="primary-dark">
-                    <h2 class="card-title">{{ $gettext('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>
+                    <b-button
+                        variant="outline-primary"
+                        @click.prevent="doCreate"
+                    >
+                        <icon icon="add" />
                         {{ $gettext('Add SFTP User') }}
                     </b-button>
                 </b-card-body>
 
-                <data-table ref="datatable" id="station_remotes" :show-toolbar="false" :fields="fields"
-                            :api-url="listUrl">
+                <data-table
+                    id="station_remotes"
+                    ref="datatable"
+                    :show-toolbar="false"
+                    :fields="fields"
+                    :api-url="listUrl"
+                >
                     <template #cell(actions)="row">
                         <b-button-group size="sm">
-                            <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                            <b-button
+                                size="sm"
+                                variant="primary"
+                                @click.prevent="doEdit(row.item.links.self)"
+                            >
                                 {{ $gettext('Edit') }}
                             </b-button>
-                            <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                            <b-button
+                                size="sm"
+                                variant="danger"
+                                @click.prevent="doDelete(row.item.links.self)"
+                            >
                                 {{ $gettext('Delete') }}
                             </b-button>
                         </b-button-group>
@@ -56,7 +74,11 @@
             </div>
         </div>
 
-        <sftp-users-edit-modal ref="editModal" :create-url="listUrl" @relist="relist"></sftp-users-edit-modal>
+        <sftp-users-edit-modal
+            ref="editModal"
+            :create-url="listUrl"
+            @relist="relist"
+        />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Stations/SftpUsers/EditModal.vue b/frontend/vue/components/Stations/SftpUsers/EditModal.vue
index c67820772..6c9ecdd27 100644
--- a/frontend/vue/components/Stations/SftpUsers/EditModal.vue
+++ b/frontend/vue/components/Stations/SftpUsers/EditModal.vue
@@ -1,9 +1,17 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <sftp-users-form :form="v$.form" :is-edit-mode="isEditMode"></sftp-users-form>
-
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <sftp-users-form
+            :form="v$.form"
+            :is-edit-mode="isEditMode"
+        />
     </modal-form>
 </template>
 <script>
@@ -14,11 +22,11 @@ import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'SftpUsersEditModal',
+    components: {SftpUsersForm},
+    mixins: [BaseEditModal],
     setup() {
         return {v$: useVuelidate()}
     },
-    mixins: [BaseEditModal],
-    components: {SftpUsersForm},
     validations() {
         return {
             form: {
diff --git a/frontend/vue/components/Stations/SftpUsers/Form.vue b/frontend/vue/components/Stations/SftpUsers/Form.vue
index 8dab00d18..624846217 100644
--- a/frontend/vue/components/Stations/SftpUsers/Form.vue
+++ b/frontend/vue/components/Stations/SftpUsers/Form.vue
@@ -1,28 +1,49 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="edit_form_username" :field="form.username">
+            <b-wrapped-form-group
+                id="edit_form_username"
+                class="col-md-6"
+                :field="form.username"
+            >
                 <template #label>
                     {{ $gettext('Username') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="edit_form_password" :field="form.password"
-                                  input-type="password">
-                <template #label v-if="isEditMode">
+            <b-wrapped-form-group
+                id="edit_form_password"
+                class="col-md-6"
+                :field="form.password"
+                input-type="password"
+            >
+                <template
+                    v-if="isEditMode"
+                    #label
+                >
                     {{ $gettext('New Password') }}
                 </template>
-                <template #label v-else>
+                <template
+                    v-else
+                    #label
+                >
                     {{ $gettext('Password') }}
                 </template>
 
-                <template #description v-if="isEditMode">
+                <template
+                    v-if="isEditMode"
+                    #description
+                >
                     {{ $gettext('Leave blank to use the current password.') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="edit_form_publicKeys" :field="form.publicKeys"
-                                  input-type="textarea">
+            <b-wrapped-form-group
+                id="edit_form_publicKeys"
+                class="col-md-12"
+                :field="form.publicKeys"
+                input-type="textarea"
+            >
                 <template #label>
                     {{ $gettext('SSH Public Keys') }}
                 </template>
@@ -32,7 +53,6 @@
                     }}
                 </template>
             </b-wrapped-form-group>
-
         </div>
     </b-form-group>
 </template>
diff --git a/frontend/vue/components/Stations/StereoToolConfig.vue b/frontend/vue/components/Stations/StereoToolConfig.vue
index 781d72568..ca8c93dcb 100644
--- a/frontend/vue/components/Stations/StereoToolConfig.vue
+++ b/frontend/vue/components/Stations/StereoToolConfig.vue
@@ -1,5 +1,8 @@
 <template>
-    <section class="card" role="region">
+    <section
+        class="card"
+        role="region"
+    >
         <div class="card-header bg-primary-dark">
             <h2 class="card-title">
                 {{ $gettext('Upload Stereo Tool Configuration') }}
@@ -9,7 +12,10 @@
         <info-card>
             <p class="card-text">
                 {{ $gettext('Stereo Tool is an industry standard for software audio processing. For more information on how to configure it, please refer to the') }}
-                <a href="https://www.thimeo.com/stereo-tool/" target="_blank">
+                <a
+                    href="https://www.thimeo.com/stereo-tool/"
+                    target="_blank"
+                >
                     {{ $gettext('Stereo Tool documentation.') }}
                 </a>
             </p>
@@ -18,7 +24,10 @@
         <div class="card-body">
             <b-form-group>
                 <div class="form-row">
-                    <b-form-group class="col-md-6" label-for="stereo_tool_configuration_file">
+                    <b-form-group
+                        class="col-md-6"
+                        label-for="stereo_tool_configuration_file"
+                    >
                         <template #label>
                             {{ $gettext('Select Configuration File') }}
                         </template>
@@ -28,8 +37,11 @@
                             }}
                         </template>
 
-                        <flow-upload :target-url="apiUrl" :valid-mime-types="['text/plain']"
-                                     @success="onFileSuccess"></flow-upload>
+                        <flow-upload
+                            :target-url="apiUrl"
+                            :valid-mime-types="['text/plain']"
+                            @success="onFileSuccess"
+                        />
                     </b-form-group>
 
                     <b-form-group class="col-md-6">
@@ -38,10 +50,19 @@
                         </template>
                         <div v-if="hasStereoToolConfiguration">
                             <div class="buttons pt-3">
-                                <b-button block variant="bg" :href="apiUrl" target="_blank">
+                                <b-button
+                                    block
+                                    variant="bg"
+                                    :href="apiUrl"
+                                    target="_blank"
+                                >
                                     {{ $gettext('Download') }}
                                 </b-button>
-                                <b-button block variant="danger" @click="deleteConfigurationFile">
+                                <b-button
+                                    block
+                                    variant="danger"
+                                    @click="deleteConfigurationFile"
+                                >
                                     {{ $gettext('Clear File') }}
                                 </b-button>
                             </div>
diff --git a/frontend/vue/components/Stations/Streamers.vue b/frontend/vue/components/Stations/Streamers.vue
index b335a2ee2..39762b67a 100644
--- a/frontend/vue/components/Stations/Streamers.vue
+++ b/frontend/vue/components/Stations/Streamers.vue
@@ -5,9 +5,14 @@
                 <b-card-header header-bg-variant="primary-dark">
                     <b-row class="align-items-center">
                         <b-col md="6">
-                            <h2 class="card-title">{{ $gettext('Streamer/DJ Accounts') }}</h2>
+                            <h2 class="card-title">
+                                {{ $gettext('Streamer/DJ Accounts') }}
+                            </h2>
                         </b-col>
-                        <b-col md="6" class="text-right text-muted">
+                        <b-col
+                            md="6"
+                            class="text-right text-muted"
+                        >
                             {{
                                 $gettext(
                                     'This station\'s time zone is currently %{tz}.',
@@ -18,58 +23,98 @@
                     </b-row>
                 </b-card-header>
 
-                <b-tabs pills card lazy>
-                    <b-tab :title="$gettext('Account List')" no-body>
+                <b-tabs
+                    pills
+                    card
+                    lazy
+                >
+                    <b-tab
+                        :title="$gettext('Account List')"
+                        no-body
+                    >
                         <b-card-body body-class="card-padding-sm">
-                            <b-button variant="outline-primary" @click.prevent="doCreate">
-                                <icon icon="add"></icon>
+                            <b-button
+                                variant="outline-primary"
+                                @click.prevent="doCreate"
+                            >
+                                <icon icon="add" />
                                 {{ $gettext('Add Streamer') }}
                             </b-button>
                         </b-card-body>
 
-                        <data-table ref="datatable" id="station_streamers" :fields="fields"
-                                    :api-url="listUrl">
+                        <data-table
+                            id="station_streamers"
+                            ref="datatable"
+                            :fields="fields"
+                            :api-url="listUrl"
+                        >
                             <template #cell(art)="row">
-                                <album-art :src="row.item.art"></album-art>
+                                <album-art :src="row.item.art" />
                             </template>
                             <template #cell(streamer_username)="row">
                                 <code>{{ row.item.streamer_username }}</code>
                                 <div>
-                                <span class="badge badge-danger" v-if="!row.item.is_active">
-                                    {{ $gettext('Disabled') }}
-                                </span>
+                                    <span
+                                        v-if="!row.item.is_active"
+                                        class="badge badge-danger"
+                                    >
+                                        {{ $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)">
+                                    <b-button
+                                        size="sm"
+                                        variant="primary"
+                                        @click.prevent="doEdit(row.item.links.self)"
+                                    >
                                         {{ $gettext('Edit') }}
                                     </b-button>
-                                    <b-button size="sm" variant="default"
-                                              @click.prevent="doShowBroadcasts(row.item.links.broadcasts)">
+                                    <b-button
+                                        size="sm"
+                                        variant="default"
+                                        @click.prevent="doShowBroadcasts(row.item.links.broadcasts)"
+                                    >
                                         {{ $gettext('Broadcasts') }}
                                     </b-button>
-                                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                                    <b-button
+                                        size="sm"
+                                        variant="danger"
+                                        @click.prevent="doDelete(row.item.links.self)"
+                                    >
                                         {{ $gettext('Delete') }}
                                     </b-button>
                                 </b-button-group>
                             </template>
                         </data-table>
                     </b-tab>
-                    <b-tab :title="$gettext('Schedule View')" no-body>
-                        <schedule ref="schedule" :schedule-url="scheduleUrl" :station-time-zone="stationTimeZone"
-                                  @click="doCalendarClick"></schedule>
+                    <b-tab
+                        :title="$gettext('Schedule View')"
+                        no-body
+                    >
+                        <schedule
+                            ref="schedule"
+                            :schedule-url="scheduleUrl"
+                            :station-time-zone="stationTimeZone"
+                            @click="doCalendarClick"
+                        />
                     </b-tab>
                 </b-tabs>
             </b-card>
         </div>
         <div class="col-md-4">
-            <connection-info :connection-info="connectionInfo"></connection-info>
+            <connection-info :connection-info="connectionInfo" />
         </div>
 
-        <edit-modal ref="editModal" :create-url="listUrl" :station-time-zone="stationTimeZone"
-                    :new-art-url="newArtUrl" @relist="relist"></edit-modal>
-        <broadcasts-modal ref="broadcastsModal"></broadcasts-modal>
+        <edit-modal
+            ref="editModal"
+            :create-url="listUrl"
+            :station-time-zone="stationTimeZone"
+            :new-art-url="newArtUrl"
+            @relist="relist"
+        />
+        <broadcasts-modal ref="broadcastsModal" />
     </div>
 </template>
 
diff --git a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
index 006ec51ab..04b17b809 100644
--- a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
+++ b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
@@ -1,27 +1,54 @@
 <template>
-    <b-modal id="streamer_broadcasts" size="lg" centered ref="modal" :title="$gettext('Streamer Broadcasts')">
+    <b-modal
+        id="streamer_broadcasts"
+        ref="modal"
+        size="lg"
+        centered
+        :title="$gettext('Streamer Broadcasts')"
+    >
         <template v-if="listUrl">
-            <div style="min-height: 40px;" class="flex-fill text-left bg-primary rounded mb-2">
-                <inline-player ref="player"></inline-player>
+            <div
+                style="min-height: 40px;"
+                class="flex-fill text-left bg-primary rounded mb-2"
+            >
+                <inline-player ref="player" />
             </div>
 
-            <data-table ref="datatable" id="station_streamer_broadcasts" :show-toolbar="false"
-                        :fields="fields" :api-url="listUrl">
+            <data-table
+                id="station_streamer_broadcasts"
+                ref="datatable"
+                :show-toolbar="false"
+                :fields="fields"
+                :api-url="listUrl"
+            >
                 <template #cell(download)="row">
                     <template v-if="row.item.recording?.links?.download">
-                        <play-button class="file-icon" icon-class="outlined"
-                                     :url="row.item.recording?.links?.download"></play-button>
+                        <play-button
+                            class="file-icon"
+                            icon-class="outlined"
+                            :url="row.item.recording?.links?.download"
+                        />
                         &nbsp;
-                        <a class="name" :href="row.item.recording?.links?.download" target="_blank"
-                           :title="$gettext('Download')">
-                            <icon icon="cloud_download"></icon>
+                        <a
+                            class="name"
+                            :href="row.item.recording?.links?.download"
+                            target="_blank"
+                            :title="$gettext('Download')"
+                        >
+                            <icon icon="cloud_download" />
                         </a>
                     </template>
-                    <template v-else>&nbsp;</template>
+                    <template v-else>
+&nbsp;
+                    </template>
                 </template>
                 <template #cell(actions)="row">
                     <b-button-group size="sm">
-                        <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.delete)">
+                        <b-button
+                            size="sm"
+                            variant="danger"
+                            @click.prevent="doDelete(row.item.links.delete)"
+                        >
                             {{ $gettext('Delete') }}
                         </b-button>
                     </b-button-group>
@@ -29,7 +56,10 @@
             </data-table>
         </template>
         <template #modal-footer>
-            <b-button variant="default" @click="close">
+            <b-button
+                variant="default"
+                @click="close"
+            >
                 {{ $gettext('Close') }}
             </b-button>
         </template>
diff --git a/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue b/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue
index 2914c8b5c..0f6953123 100644
--- a/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue
+++ b/frontend/vue/components/Stations/Streamers/ConnectionInfo.vue
@@ -71,7 +71,10 @@
             <p class="card-text">
                 {{ $gettext('Setup instructions for broadcasting software are available on the AzuraCast wiki.') }}
                 <br>
-                <a href="https://docs.azuracast.com/en/user-guide/streaming-software" target="_blank">
+                <a
+                    href="https://docs.azuracast.com/en/user-guide/streaming-software"
+                    target="_blank"
+                >
                     {{ $gettext('AzuraCast Wiki') }}
                 </a>
             </p>
diff --git a/frontend/vue/components/Stations/Streamers/EditModal.vue b/frontend/vue/components/Stations/Streamers/EditModal.vue
index b8fbe7f7d..8654bae5a 100644
--- a/frontend/vue/components/Stations/Streamers/EditModal.vue
+++ b/frontend/vue/components/Stations/Streamers/EditModal.vue
@@ -1,15 +1,30 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <b-tabs content-class="mt-3" pills>
-            <form-basic-info :form="v$.form"></form-basic-info>
-            <form-schedule :form="v$.form" :schedule-items="form.schedule_items"
-                           :station-time-zone="stationTimeZone"></form-schedule>
-            <form-artwork v-model="v$.form.artwork_file.$model" :artwork-src="record.links.art"
-                          :new-art-url="newArtUrl" :edit-art-url="record.links.art"></form-artwork>
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <b-tabs
+            content-class="mt-3"
+            pills
+        >
+            <form-basic-info :form="v$.form" />
+            <form-schedule
+                :form="v$.form"
+                :schedule-items="form.schedule_items"
+                :station-time-zone="stationTimeZone"
+            />
+            <form-artwork
+                v-model="v$.form.artwork_file.$model"
+                :artwork-src="record.links.art"
+                :new-art-url="newArtUrl"
+                :edit-art-url="record.links.art"
+            />
         </b-tabs>
-
     </modal-form>
 </template>
 <script>
@@ -23,15 +38,15 @@ import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
-    setup() {
-        return {v$: useVuelidate()}
-    },
-    mixins: [BaseEditModal],
     components: {FormBasicInfo, FormSchedule, FormArtwork},
+    mixins: [BaseEditModal],
     props: {
         stationTimeZone: String,
         newArtUrl: String,
     },
+    setup() {
+        return {v$: useVuelidate()}
+    },
     validations() {
         let validations = {
             form: {
diff --git a/frontend/vue/components/Stations/Streamers/Form/Artwork.vue b/frontend/vue/components/Stations/Streamers/Form/Artwork.vue
index 3000a4c83..aaa7e913b 100644
--- a/frontend/vue/components/Stations/Streamers/Form/Artwork.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/Artwork.vue
@@ -12,15 +12,30 @@
                                 $gettext('This image will be used as the default album art when this streamer is live.')
                             }}
                         </template>
-                        <b-form-file id="edit_form_art" accept="image/jpeg, image/png"
-                                     v-model="uploadedFile"></b-form-file>
+                        <b-form-file
+                            id="edit_form_art"
+                            v-model="uploadedFile"
+                            accept="image/jpeg, image/png"
+                        />
                     </b-form-group>
                 </b-col>
-                <b-col md="4" v-if="src && src !== ''">
-                    <b-img :src="src" :alt="$gettext('Artwork')" rounded fluid></b-img>
+                <b-col
+                    v-if="src && src !== ''"
+                    md="4"
+                >
+                    <b-img
+                        :src="src"
+                        :alt="$gettext('Artwork')"
+                        rounded
+                        fluid
+                    />
 
                     <div class="buttons pt-3">
-                        <b-button block variant="danger" @click="deleteArt">
+                        <b-button
+                            block
+                            variant="danger"
+                            @click="deleteArt"
+                        >
                             {{ $gettext('Clear Artwork') }}
                         </b-button>
                     </div>
diff --git a/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue b/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue
index 1f91741cf..302c66f1f 100644
--- a/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/BasicInfo.vue
@@ -1,9 +1,15 @@
 <template>
-    <b-tab :title="$gettext('Basic Info')" active>
+    <b-tab
+        :title="$gettext('Basic Info')"
+        active
+    >
         <b-form-group>
             <div class="form-row">
-
-                <b-wrapped-form-group class="col-md-6" id="edit_form_streamer_username" :field="form.streamer_username">
+                <b-wrapped-form-group
+                    id="edit_form_streamer_username"
+                    class="col-md-6"
+                    :field="form.streamer_username"
+                >
                     <template #label>
                         {{ $gettext('Streamer Username') }}
                     </template>
@@ -12,8 +18,12 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_streamer_password" :field="form.streamer_password"
-                                      input-type="password">
+                <b-wrapped-form-group
+                    id="edit_form_streamer_password"
+                    class="col-md-6"
+                    :field="form.streamer_password"
+                    input-type="password"
+                >
                     <template #label>
                         {{ $gettext('Streamer password') }}
                     </template>
@@ -21,11 +31,13 @@
                         {{ $gettext('The streamer will use this password to connect to the radio server.') }}
                     </template>
                 </b-wrapped-form-group>
-
             </div>
             <div class="form-row">
-
-                <b-wrapped-form-group class="col-md-6" id="edit_form_display_name" :field="form.display_name">
+                <b-wrapped-form-group
+                    id="edit_form_display_name"
+                    class="col-md-6"
+                    :field="form.display_name"
+                >
                     <template #label>
                         {{ $gettext('Streamer Display Name') }}
                     </template>
@@ -36,8 +48,12 @@
                     </template>
                 </b-wrapped-form-group>
 
-                <b-wrapped-form-group class="col-md-6" id="edit_form_comments" :field="form.comments"
-                                      input-type="textarea">
+                <b-wrapped-form-group
+                    id="edit_form_comments"
+                    class="col-md-6"
+                    :field="form.comments"
+                    input-type="textarea"
+                >
                     <template #label>
                         {{ $gettext('Comments') }}
                     </template>
@@ -45,11 +61,13 @@
                         {{ $gettext('Internal notes or comments about the user, visible only on this control panel.') }}
                     </template>
                 </b-wrapped-form-group>
-
             </div>
             <div class="form-row mt-3">
-
-                <b-wrapped-form-checkbox class="col-md-6" id="form_edit_is_active" :field="form.is_active">
+                <b-wrapped-form-checkbox
+                    id="form_edit_is_active"
+                    class="col-md-6"
+                    :field="form.is_active"
+                >
                     <template #label>
                         {{ $gettext('Account is Active') }}
                     </template>
@@ -58,8 +76,11 @@
                     </template>
                 </b-wrapped-form-checkbox>
 
-                <b-wrapped-form-checkbox class="col-md-6" id="form_edit_enforce_schedule"
-                                         :field="form.enforce_schedule">
+                <b-wrapped-form-checkbox
+                    id="form_edit_enforce_schedule"
+                    class="col-md-6"
+                    :field="form.enforce_schedule"
+                >
                     <template #label>
                         {{ $gettext('Enforce Schedule Times') }}
                     </template>
diff --git a/frontend/vue/components/Stations/Streamers/Form/Schedule.vue b/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
index 23e594731..9cfc38dcb 100644
--- a/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
@@ -9,14 +9,22 @@
             </p>
         </b-form-group>
 
-        <streamers-form-schedule-row v-for="(row, index) in scheduleItems" :key="index"
-                                     :station-time-zone="stationTimeZone"
-                                     :index="index" v-model:row="scheduleItems[index]" @remove="remove(index)">
-        </streamers-form-schedule-row>
+        <streamers-form-schedule-row
+            v-for="(row, index) in scheduleItems"
+            :key="index"
+            v-model:row="scheduleItems[index]"
+            :station-time-zone="stationTimeZone"
+            :index="index"
+            @remove="remove(index)"
+        />
 
         <b-button-group>
-            <b-button size="sm" variant="outline-primary" @click.prevent="add">
-                <icon icon="add"></icon>
+            <b-button
+                size="sm"
+                variant="outline-primary"
+                @click.prevent="add"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Schedule Item') }}
             </b-button>
         </b-button-group>
diff --git a/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue b/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue
index f36150f43..e13ba62e5 100644
--- a/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/ScheduleRow.vue
@@ -1,5 +1,8 @@
 <template>
-    <b-card class="mb-3" no-body>
+    <b-card
+        class="mb-3"
+        no-body
+    >
         <div class="card-header bg-primary-dark d-flex align-items-center">
             <div class="flex-fill">
                 <h2 class="card-title">
@@ -7,8 +10,13 @@
                 </h2>
             </div>
             <div class="flex-shrink-0">
-                <b-button size="sm" variant="outline-light" class="py-2 pr-0" @click.prevent="$emit('remove')">
-                    <icon icon="remove"></icon>
+                <b-button
+                    size="sm"
+                    variant="outline-light"
+                    class="py-2 pr-0"
+                    @click.prevent="$emit('remove')"
+                >
+                    <icon icon="remove" />
                     {{ $gettext('Remove') }}
                 </b-button>
             </div>
@@ -16,18 +24,28 @@
         <b-card-body>
             <b-form-group>
                 <div class="form-row">
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_start_time_'+index"
-                                          :field="v$.row.start_time">
+                    <b-wrapped-form-group
+                        :id="'edit_form_start_time_'+index"
+                        class="col-md-4"
+                        :field="v$.row.start_time"
+                    >
                         <template #label>
                             {{ $gettext('Start Time') }}
                         </template>
                         <template #default="props">
-                            <playlist-time :id="props.id" v-model="props.field.$model"
-                                           :state="props.state"></playlist-time>
+                            <playlist-time
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :state="props.state"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_end_time_'+index" :field="v$.row.end_time">
+                    <b-wrapped-form-group
+                        :id="'edit_form_end_time_'+index"
+                        class="col-md-4"
+                        :field="v$.row.end_time"
+                    >
                         <template #label>
                             {{ $gettext('End Time') }}
                         </template>
@@ -37,12 +55,18 @@
                             }}
                         </template>
                         <template #default="props">
-                            <playlist-time :id="props.id" v-model="props.field.$model"
-                                           :state="props.state"></playlist-time>
+                            <playlist-time
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                :state="props.state"
+                            />
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-col md="4" class="form-group">
+                    <b-col
+                        md="4"
+                        class="form-group"
+                    >
                         <label>
                             {{ $gettext('Station Time Zone') }}
                         </label>
@@ -51,8 +75,12 @@
                         </div>
                     </b-col>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_start_date_'+index"
-                                          :field="v$.row.start_date" input-type="date">
+                    <b-wrapped-form-group
+                        :id="'edit_form_start_date_'+index"
+                        class="col-md-4"
+                        :field="v$.row.start_date"
+                        input-type="date"
+                    >
                         <template #label>
                             {{ $gettext('Start Date') }}
                         </template>
@@ -63,14 +91,22 @@
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_end_date_'+index" :field="v$.row.end_date"
-                                          input-type="date">
+                    <b-wrapped-form-group
+                        :id="'edit_form_end_date_'+index"
+                        class="col-md-4"
+                        :field="v$.row.end_date"
+                        input-type="date"
+                    >
                         <template #label>
                             {{ $gettext('End Date') }}
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group class="col-md-4" :id="'edit_form_days_'+index" :field="v$.row.days">
+                    <b-wrapped-form-group
+                        :id="'edit_form_days_'+index"
+                        class="col-md-4"
+                        :field="v$.row.days"
+                    >
                         <template #label>
                             {{ $gettext('Scheduled Play Days of Week') }}
                         </template>
@@ -78,11 +114,14 @@
                             {{ $gettext('Leave blank to play on every day of the week.') }}
                         </template>
                         <template #default="props">
-                            <b-checkbox-group stacked :id="props.id" v-model="props.field.$model"
-                                              :options="dayOptions"></b-checkbox-group>
+                            <b-checkbox-group
+                                :id="props.id"
+                                v-model="props.field.$model"
+                                stacked
+                                :options="dayOptions"
+                            />
                         </template>
                     </b-wrapped-form-group>
-
                 </div>
             </b-form-group>
         </b-card-body>
@@ -105,10 +144,10 @@ export default {
         row: Object,
         stationTimeZone: String,
     },
+    emits: ['remove'],
     setup() {
         return {v$: useVuelidate()}
     },
-    emits: ['remove'],
     validations: {
         row: {
             'start_time': {required},
diff --git a/frontend/vue/components/Stations/Webhooks.vue b/frontend/vue/components/Stations/Webhooks.vue
index 04ded1207..f8e384d10 100644
--- a/frontend/vue/components/Stations/Webhooks.vue
+++ b/frontend/vue/components/Stations/Webhooks.vue
@@ -1,7 +1,9 @@
 <template>
     <b-card no-body>
         <b-card-header header-bg-variant="primary-dark">
-            <h2 class="card-title">{{ $gettext('Web Hooks') }}</h2>
+            <h2 class="card-title">
+                {{ $gettext('Web Hooks') }}
+            </h2>
         </b-card-header>
 
         <info-card>
@@ -11,40 +13,70 @@
         </info-card>
 
         <b-card-body body-class="card-padding-sm">
-            <b-button variant="outline-primary" @click.prevent="doCreate">
-                <icon icon="add"></icon>
+            <b-button
+                variant="outline-primary"
+                @click.prevent="doCreate"
+            >
+                <icon icon="add" />
                 {{ $gettext('Add Web Hook') }}
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="station_webhooks" :fields="fields"
-                    :api-url="listUrl">
+        <data-table
+            id="station_webhooks"
+            ref="datatable"
+            :fields="fields"
+            :api-url="listUrl"
+        >
             <template #cell(name)="row">
-                <div class="typography-subheading">{{ row.item.name }}</div>
+                <div class="typography-subheading">
+                    {{ row.item.name }}
+                </div>
                 {{ getWebhookName(row.item.type) }}
-                <b-badge v-if="!row.item.is_enabled" variant="danger">
+                <b-badge
+                    v-if="!row.item.is_enabled"
+                    variant="danger"
+                >
                     {{ $gettext('Disabled') }}
                 </b-badge>
             </template>
             <template #cell(triggers)="row">
-                <div v-for="(name, index) in getTriggerNames(row.item.triggers)" :key="row.item.id+'_'+index"
-                     class="small">
+                <div
+                    v-for="(name, index) in getTriggerNames(row.item.triggers)"
+                    :key="row.item.id+'_'+index"
+                    class="small"
+                >
                     {{ name }}
                 </div>
             </template>
             <template #cell(actions)="row">
                 <b-button-group size="sm">
-                    <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="primary"
+                        @click.prevent="doEdit(row.item.links.self)"
+                    >
                         {{ $gettext('Edit') }}
                     </b-button>
-                    <b-button size="sm" :variant="getToggleVariant(row.item)"
-                              @click.prevent="doToggle(row.item.links.toggle)">
+                    <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)">
+                    <b-button
+                        size="sm"
+                        variant="default"
+                        @click.prevent="doTest(row.item.links.test)"
+                    >
                         {{ $gettext('Test') }}
                     </b-button>
-                    <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
+                    <b-button
+                        size="sm"
+                        variant="danger"
+                        @click.prevent="doDelete(row.item.links.self)"
+                    >
                         {{ $gettext('Delete') }}
                     </b-button>
                 </b-button-group>
@@ -52,10 +84,16 @@
         </data-table>
     </b-card>
 
-    <streaming-log-modal ref="logModal"></streaming-log-modal>
-    <edit-modal ref="editModal" :create-url="listUrl" :webhook-types="webhookTypes"
-                :trigger-titles="langTriggerTitles" :trigger-descriptions="langTriggerDescriptions"
-                :now-playing-url="nowPlayingUrl" @relist="relist"></edit-modal>
+    <streaming-log-modal ref="logModal" />
+    <edit-modal
+        ref="editModal"
+        :create-url="listUrl"
+        :webhook-types="webhookTypes"
+        :trigger-titles="langTriggerTitles"
+        :trigger-descriptions="langTriggerDescriptions"
+        :now-playing-url="nowPlayingUrl"
+        @relist="relist"
+    />
 </template>
 
 <script>
diff --git a/frontend/vue/components/Stations/Webhooks/EditModal.vue b/frontend/vue/components/Stations/Webhooks/EditModal.vue
index 1dabae5ac..0d78bae77 100644
--- a/frontend/vue/components/Stations/Webhooks/EditModal.vue
+++ b/frontend/vue/components/Stations/Webhooks/EditModal.vue
@@ -1,21 +1,42 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
-                @submit="doSubmit" @hidden="clearContents">
-
-        <type-select v-if="!type" :webhook-types="webhookTypes" @select="setType"></type-select>
-        <b-tabs v-else lazy content-class="mt-3" pills>
+    <modal-form
+        ref="modal"
+        :loading="loading"
+        :title="langTitle"
+        :error="error"
+        :disable-save-button="v$.form.$invalid"
+        @submit="doSubmit"
+        @hidden="clearContents"
+    >
+        <type-select
+            v-if="!type"
+            :webhook-types="webhookTypes"
+            @select="setType"
+        />
+        <b-tabs
+            v-else
+            lazy
+            content-class="mt-3"
+            pills
+        >
             <b-tab active>
                 <template #title>
                     {{ $gettext('Basic Info') }}
                 </template>
 
-                <basic-info :trigger-options="triggerOptions" :form="v$.form"></basic-info>
+                <basic-info
+                    :trigger-options="triggerOptions"
+                    :form="v$.form"
+                />
             </b-tab>
             <b-tab :title="typeTitle">
-                <component :is="formComponent" :now-playing-url="nowPlayingUrl" :form="v$.form"></component>
+                <component
+                    :is="formComponent"
+                    :now-playing-url="nowPlayingUrl"
+                    :form="v$.form"
+                />
             </b-tab>
         </b-tabs>
-
     </modal-form>
 </template>
 <script>
@@ -37,9 +58,6 @@ import useVuelidate from "@vuelidate/core";
 
 export default {
     name: 'EditModal',
-    setup() {
-        return {v$: useVuelidate()}
-    },
     components: {BasicInfo, TypeSelect},
     mixins: [BaseEditModal],
     props: {
@@ -48,6 +66,9 @@ export default {
         triggerTitles: Object,
         triggerDescriptions: Object
     },
+    setup() {
+        return {v$: useVuelidate()}
+    },
     data() {
         return {
             type: null,
diff --git a/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue b/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue
index 859b05176..528764802 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/BasicInfo.vue
@@ -1,7 +1,11 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_edit_name" :field="form.name">
+            <b-wrapped-form-group
+                id="form_edit_name"
+                class="col-md-12"
+                :field="form.name"
+            >
                 <template #label>
                     {{ $gettext('Web Hook Name') }}
                 </template>
@@ -12,9 +16,12 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group v-if="triggerOptions.length > 0" class="col-md-12"
-                                  id="edit_form_triggers"
-                                  :field="form.triggers">
+            <b-wrapped-form-group
+                v-if="triggerOptions.length > 0"
+                id="edit_form_triggers"
+                class="col-md-12"
+                :field="form.triggers"
+            >
                 <template #label>
                     {{ $gettext('Web Hook Triggers') }}
                 </template>
@@ -24,9 +31,12 @@
                     }}
                 </template>
                 <template #default="props">
-                    <b-form-checkbox-group :id="props.id" :options="triggerOptions"
-                                           v-model="props.field.$model" stacked>
-                    </b-form-checkbox-group>
+                    <b-form-checkbox-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        :options="triggerOptions"
+                        stacked
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue
index a71ba1d43..d396aa5dc 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/FormattingInfo.vue
@@ -12,7 +12,10 @@
         <p class="card-text">
             {{ $gettext('All values in the NowPlaying API response are available for use. Any empty fields are ignored.') }}
             <br>
-            <a :href="nowPlayingUrl" target="_blank">
+            <a
+                :href="nowPlayingUrl"
+                target="_blank"
+            >
                 {{ $gettext('NowPlaying API Response') }}
             </a>
         </p>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
index 30ee9ae8d..806cd4a6c 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
@@ -1,11 +1,18 @@
 <template>
-    <b-wrapped-form-group class="col-md-12" id="form_config_rate_limit" :field="form.config.rate_limit">
+    <b-wrapped-form-group
+        id="form_config_rate_limit"
+        class="col-md-12"
+        :field="form.config.rate_limit"
+    >
         <template #label>
             {{ $gettext('Only Post Once Every...') }}
         </template>
         <template #default="props">
-            <b-form-select :id="props.id" :options="rateLimitOptions" v-model="props.field.$model">
-            </b-form-select>
+            <b-form-select
+                :id="props.id"
+                v-model="props.field.$model"
+                :options="rateLimitOptions"
+            />
         </template>
     </b-wrapped-form-group>
 </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
index ef835886d..648b58fb4 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
@@ -1,53 +1,76 @@
 <template>
     <div>
-        <common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info>
+        <common-formatting-info :now-playing-url="nowPlayingUrl" />
 
         <b-form-group>
             <div class="form-row">
                 <template v-if="hasTrigger('song_changed')">
-                    <b-wrapped-form-group class="col-md-12" id="form_config_message" :field="form.config.message"
-                                          input-type="textarea">
+                    <b-wrapped-form-group
+                        id="form_config_message"
+                        class="col-md-12"
+                        :field="form.config.message"
+                        input-type="textarea"
+                    >
                         <template #label>
                             {{ $gettext('Message Body on Song Change') }}
                         </template>
                     </b-wrapped-form-group>
                 </template>
                 <template v-if="hasTrigger('song_changed_live')">
-                    <b-wrapped-form-group class="col-md-12" id="form_config_message_song_changed_live"
-                                          :field="form.config.message_song_changed_live"
-                                          input-type="textarea">
+                    <b-wrapped-form-group
+                        id="form_config_message_song_changed_live"
+                        class="col-md-12"
+                        :field="form.config.message_song_changed_live"
+                        input-type="textarea"
+                    >
                         <template #label>
                             {{ $gettext('Message Body on Song Change with Stramer/DJ Connected') }}
                         </template>
                     </b-wrapped-form-group>
                 </template>
                 <template v-if="hasTrigger('live_connect')">
-                    <b-wrapped-form-group class="col-md-12" id="form_config_message_live_connect"
-                                          :field="form.config.message_live_connect" input-type="textarea">
+                    <b-wrapped-form-group
+                        id="form_config_message_live_connect"
+                        class="col-md-12"
+                        :field="form.config.message_live_connect"
+                        input-type="textarea"
+                    >
                         <template #label>
                             {{ $gettext('Message Body on Streamer/DJ Connect') }}
                         </template>
                     </b-wrapped-form-group>
                 </template>
                 <template v-if="hasTrigger('live_disconnect')">
-                    <b-wrapped-form-group class="col-md-12" id="form_config_message_live_disconnect"
-                                          :field="form.config.message_live_disconnect" input-type="textarea">
+                    <b-wrapped-form-group
+                        id="form_config_message_live_disconnect"
+                        class="col-md-12"
+                        :field="form.config.message_live_disconnect"
+                        input-type="textarea"
+                    >
                         <template #label>
                             {{ $gettext('Message Body on Streamer/DJ Disconnect') }}
                         </template>
                     </b-wrapped-form-group>
                 </template>
                 <template v-if="hasTrigger('station_offline')">
-                    <b-wrapped-form-group class="col-md-12" id="form_config_message_station_offline"
-                                          :field="form.config.message_station_offline" input-type="textarea">
+                    <b-wrapped-form-group
+                        id="form_config_message_station_offline"
+                        class="col-md-12"
+                        :field="form.config.message_station_offline"
+                        input-type="textarea"
+                    >
                         <template #label>
                             {{ $gettext('Message Body on Station Offline') }}
                         </template>
                     </b-wrapped-form-group>
                 </template>
                 <template v-if="hasTrigger('station_online')">
-                    <b-wrapped-form-group class="col-md-12" id="form_config_message_station_online"
-                                          :field="form.config.message_station_online" input-type="textarea">
+                    <b-wrapped-form-group
+                        id="form_config_message_station_online"
+                        class="col-md-12"
+                        :field="form.config.message_station_online"
+                        input-type="textarea"
+                    >
                         <template #label>
                             {{ $gettext('Message Body on Station Online') }}
                         </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Discord.vue b/frontend/vue/components/Stations/Webhooks/Form/Discord.vue
index bc6600f08..a24e85936 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Discord.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Discord.vue
@@ -1,8 +1,12 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_webhook_url" :field="form.config.webhook_url"
-                                  input-type="url">
+            <b-wrapped-form-group
+                id="form_config_webhook_url"
+                class="col-md-12"
+                :field="form.config.webhook_url"
+                input-type="url"
+            >
                 <template #label>
                     {{ $gettext('Discord Web Hook URL') }}
                 </template>
@@ -13,48 +17,77 @@
         </div>
     </b-form-group>
 
-    <common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info>
+    <common-formatting-info :now-playing-url="nowPlayingUrl" />
 
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="form_config_content" :field="form.config.content">
+            <b-wrapped-form-group
+                id="form_config_content"
+                class="col-md-6"
+                :field="form.config.content"
+            >
                 <template #label>
                     {{ $gettext('Main Message Content') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_title" :field="form.config.title">
+            <b-wrapped-form-group
+                id="form_config_title"
+                class="col-md-6"
+                :field="form.config.title"
+            >
                 <template #label>
                     {{ $gettext('Title') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_description" :field="form.config.description">
+            <b-wrapped-form-group
+                id="form_config_description"
+                class="col-md-6"
+                :field="form.config.description"
+            >
                 <template #label>
                     {{ $gettext('Description') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_url" :field="form.config.url" input-type="url">
+            <b-wrapped-form-group
+                id="form_config_url"
+                class="col-md-6"
+                :field="form.config.url"
+                input-type="url"
+            >
                 <template #label>
                     {{ $gettext('URL') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_author" :field="form.config.author">
+            <b-wrapped-form-group
+                id="form_config_author"
+                class="col-md-6"
+                :field="form.config.author"
+            >
                 <template #label>
                     {{ $gettext('Author') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_thumbnail" :field="form.config.thumbnail"
-                                  input-type="url">
+            <b-wrapped-form-group
+                id="form_config_thumbnail"
+                class="col-md-6"
+                :field="form.config.thumbnail"
+                input-type="url"
+            >
                 <template #label>
                     {{ $gettext('Thumbnail Image URL') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_footer" :field="form.config.footer">
+            <b-wrapped-form-group
+                id="form_config_footer"
+                class="col-md-6"
+                :field="form.config.footer"
+            >
                 <template #label>
                     {{ $gettext('Footer Text') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Email.vue b/frontend/vue/components/Stations/Webhooks/Form/Email.vue
index e3c0e4e7a..174358f54 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Email.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Email.vue
@@ -1,7 +1,11 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_to" :field="form.config.to">
+            <b-wrapped-form-group
+                id="form_config_to"
+                class="col-md-12"
+                :field="form.config.to"
+            >
                 <template #label>
                     {{ $gettext('Message Recipient(s)') }}
                 </template>
@@ -12,17 +16,25 @@
         </div>
     </b-form-group>
 
-    <common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info>
+    <common-formatting-info :now-playing-url="nowPlayingUrl" />
 
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_subject" :field="form.config.subject">
+            <b-wrapped-form-group
+                id="form_config_subject"
+                class="col-md-12"
+                :field="form.config.subject"
+            >
                 <template #label>
                     {{ $gettext('Message Subject') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="form_config_message" :field="form.config.message">
+            <b-wrapped-form-group
+                id="form_config_message"
+                class="col-md-12"
+                :field="form.config.message"
+            >
                 <template #label>
                     {{ $gettext('Message Body') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Generic.vue b/frontend/vue/components/Stations/Webhooks/Form/Generic.vue
index 363e64927..80e21417c 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Generic.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Generic.vue
@@ -16,7 +16,10 @@
         </p>
         <ul>
             <li>
-                <a href="https://azuracast.com/api" target="_blank">
+                <a
+                    href="https://azuracast.com/api"
+                    target="_blank"
+                >
                     {{ $gettext('NowPlaying API Response') }}
                 </a>
             </li>
@@ -30,8 +33,12 @@
 
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_webhook_url" :field="form.config.webhook_url"
-                                  input-type="url">
+            <b-wrapped-form-group
+                id="form_config_webhook_url"
+                class="col-md-12"
+                :field="form.config.webhook_url"
+                input-type="url"
+            >
                 <template #label>
                     {{ $gettext('Web Hook URL') }}
                 </template>
@@ -40,8 +47,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_basic_auth_username"
-                                  :field="form.config.basic_auth_username">
+            <b-wrapped-form-group
+                id="form_config_basic_auth_username"
+                class="col-md-6"
+                :field="form.config.basic_auth_username"
+            >
                 <template #label>
                     {{ $gettext('Optional: HTTP Basic Authentication Username') }}
                 </template>
@@ -50,8 +60,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_basic_auth_password"
-                                  :field="form.config.basic_auth_password">
+            <b-wrapped-form-group
+                id="form_config_basic_auth_password"
+                class="col-md-6"
+                :field="form.config.basic_auth_password"
+            >
                 <template #label>
                     {{ $gettext('Optional: HTTP Basic Authentication Password') }}
                 </template>
@@ -60,9 +73,13 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_timeout"
-                                  :field="form.config.timeout" input-type="number"
-                                  :input-attrs="{ min: '0.0', max: '600.0', step: '0.1' }">
+            <b-wrapped-form-group
+                id="form_config_timeout"
+                class="col-md-6"
+                :field="form.config.timeout"
+                input-type="number"
+                :input-attrs="{ min: '0.0', max: '600.0', step: '0.1' }"
+            >
                 <template #label>
                     {{ $gettext('Optional: Request Timeout (Seconds)') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue b/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue
index c64f4b5d3..164f77f4d 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/GoogleAnalytics.vue
@@ -1,7 +1,11 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_tracking_id" :field="form.config.tracking_id">
+            <b-wrapped-form-group
+                id="form_config_tracking_id"
+                class="col-md-12"
+                :field="form.config.tracking_id"
+            >
                 <template #label>
                     {{ $gettext('GA Property Tracking ID') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue b/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue
index 27be16e89..9ce6b55e0 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue
@@ -32,7 +32,11 @@
 
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="form_config_instance_url" :field="form.config.instance_url">
+            <b-wrapped-form-group
+                id="form_config_instance_url"
+                class="col-md-6"
+                :field="form.config.instance_url"
+            >
                 <template #label>
                     {{ $gettext('Mastodon Instance URL') }}
                 </template>
@@ -41,33 +45,46 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_access_token"
-                                  :field="form.config.access_token">
+            <b-wrapped-form-group
+                id="form_config_access_token"
+                class="col-md-6"
+                :field="form.config.access_token"
+            >
                 <template #label>
                     {{ $gettext('Access Token') }}
                 </template>
             </b-wrapped-form-group>
 
-            <common-rate-limit-fields :form="form"></common-rate-limit-fields>
+            <common-rate-limit-fields :form="form" />
         </div>
     </b-form-group>
 
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_visibility" :field="form.config.visibility">
+            <b-wrapped-form-group
+                id="form_config_visibility"
+                class="col-md-12"
+                :field="form.config.visibility"
+            >
                 <template #label>
                     {{ $gettext('Message Visibility') }}
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" :options="visibilityOptions"
-                                        v-model="props.field.$model">
-                    </b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="visibilityOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
     </b-form-group>
 
-    <common-social-post-fields :form="form" :now-playing-url="nowPlayingUrl"></common-social-post-fields>
+    <common-social-post-fields
+        :form="form"
+        :now-playing-url="nowPlayingUrl"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue b/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue
index 5435fbc25..42c287486 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/MatomoAnalytics.vue
@@ -1,8 +1,12 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_matomo_url" :field="form.config.matomo_url"
-                                  input-type="url">
+            <b-wrapped-form-group
+                id="form_config_matomo_url"
+                class="col-md-12"
+                :field="form.config.matomo_url"
+                input-type="url"
+            >
                 <template #label>
                     {{ $gettext('Matomo Installation Base URL') }}
                 </template>
@@ -11,7 +15,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_site_id" :field="form.config.site_id">
+            <b-wrapped-form-group
+                id="form_config_site_id"
+                class="col-md-6"
+                :field="form.config.site_id"
+            >
                 <template #label>
                     {{ $gettext('Matomo Site ID') }}
                 </template>
@@ -20,7 +28,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_token" :field="form.config.token">
+            <b-wrapped-form-group
+                id="form_config_token"
+                class="col-md-6"
+                :field="form.config.token"
+            >
                 <template #label>
                     {{ $gettext('Matomo API Token') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue b/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue
index 2f90ae61d..e969d2f0a 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Telegram.vue
@@ -1,18 +1,29 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="form_config_bot_token" :field="form.config.bot_token">
+            <b-wrapped-form-group
+                id="form_config_bot_token"
+                class="col-md-6"
+                :field="form.config.bot_token"
+            >
                 <template #label>
                     {{ $gettext('Bot Token') }}
                 </template>
                 <template #description>
-                    <a href="https://core.telegram.org/bots#botfather" target="_blank">
+                    <a
+                        href="https://core.telegram.org/bots#botfather"
+                        target="_blank"
+                    >
                         {{ $gettext('See the Telegram Documentation for more details.') }}
                     </a>
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_chat_id" :field="form.config.chat_id">
+            <b-wrapped-form-group
+                id="form_config_chat_id"
+                class="col-md-6"
+                :field="form.config.chat_id"
+            >
                 <template #label>
                     {{ $gettext('Chat ID') }}
                 </template>
@@ -23,7 +34,11 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_api" :field="form.config.api">
+            <b-wrapped-form-group
+                id="form_config_api"
+                class="col-md-6"
+                :field="form.config.api"
+            >
                 <template #label>
                     {{ $gettext('Custom API Base URL') }}
                 </template>
@@ -34,30 +49,44 @@
         </div>
     </b-form-group>
 
-    <common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info>
+    <common-formatting-info :now-playing-url="nowPlayingUrl" />
 
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-12" id="form_config_text" :field="form.config.text"
-                                  input-type="textarea">
+            <b-wrapped-form-group
+                id="form_config_text"
+                class="col-md-12"
+                :field="form.config.text"
+                input-type="textarea"
+            >
                 <template #label>
                     {{ $gettext('Main Message Content') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-12" id="form_config_parse_mode" :field="form.config.parse_mode">
+            <b-wrapped-form-group
+                id="form_config_parse_mode"
+                class="col-md-12"
+                :field="form.config.parse_mode"
+            >
                 <template #label>
                     {{ $gettext('Message parsing mode') }}
                 </template>
                 <template #description>
-                    <a href="https://core.telegram.org/bots/api#sendmessage" target="_blank">
+                    <a
+                        href="https://core.telegram.org/bots/api#sendmessage"
+                        target="_blank"
+                    >
                         {{ $gettext('See the Telegram documentation for more details.') }}
                     </a>
                 </template>
                 <template #default="props">
-                    <b-form-radio-group stacked :id="props.id" :options="parseModeOptions"
-                                        v-model="props.field.$model">
-                    </b-form-radio-group>
+                    <b-form-radio-group
+                        :id="props.id"
+                        v-model="props.field.$model"
+                        stacked
+                        :options="parseModeOptions"
+                    />
                 </template>
             </b-wrapped-form-group>
         </div>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue b/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue
index f701c6415..790f88de5 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Tunein.vue
@@ -1,7 +1,11 @@
 <template>
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="form_config_station_id" :field="form.config.station_id">
+            <b-wrapped-form-group
+                id="form_config_station_id"
+                class="col-md-6"
+                :field="form.config.station_id"
+            >
                 <template #label>
                     {{ $gettext('TuneIn Station ID') }}
                 </template>
@@ -10,13 +14,21 @@
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_partner_id" :field="form.config.partner_id">
+            <b-wrapped-form-group
+                id="form_config_partner_id"
+                class="col-md-6"
+                :field="form.config.partner_id"
+            >
                 <template #label>
                     {{ $gettext('TuneIn Partner ID') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_partner_key" :field="form.config.partner_key">
+            <b-wrapped-form-group
+                id="form_config_partner_key"
+                class="col-md-6"
+                :field="form.config.partner_key"
+            >
                 <template #label>
                     {{ $gettext('TuneIn Partner Key') }}
                 </template>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue b/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue
index 361d270d2..9263bee4f 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Twitter.vue
@@ -13,7 +13,10 @@
                     $gettext('Create a new app on the Twitter Applications site. Use this installation\'s base URL as the application URL.')
                 }}
                 <br>
-                <a href="https://developer.twitter.com/en/apps" target="_blank">
+                <a
+                    href="https://developer.twitter.com/en/apps"
+                    target="_blank"
+                >
                     {{ $gettext('Twitter Applications') }}
                 </a>
             </li>
@@ -33,36 +36,54 @@
 
     <b-form-group>
         <div class="form-row">
-            <b-wrapped-form-group class="col-md-6" id="form_config_consumer_key" :field="form.config.consumer_key">
+            <b-wrapped-form-group
+                id="form_config_consumer_key"
+                class="col-md-6"
+                :field="form.config.consumer_key"
+            >
                 <template #label>
                     {{ $gettext('Consumer Key (API Key)') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_consumer_secret"
-                                  :field="form.config.consumer_secret">
+            <b-wrapped-form-group
+                id="form_config_consumer_secret"
+                class="col-md-6"
+                :field="form.config.consumer_secret"
+            >
                 <template #label>
                     {{ $gettext('Consumer Secret (API Secret)') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_token" :field="form.config.token">
+            <b-wrapped-form-group
+                id="form_config_token"
+                class="col-md-6"
+                :field="form.config.token"
+            >
                 <template #label>
                     {{ $gettext('Access Token') }}
                 </template>
             </b-wrapped-form-group>
 
-            <b-wrapped-form-group class="col-md-6" id="form_config_token_secret" :field="form.config.token_secret">
+            <b-wrapped-form-group
+                id="form_config_token_secret"
+                class="col-md-6"
+                :field="form.config.token_secret"
+            >
                 <template #label>
                     {{ $gettext('Access Token Secret') }}
                 </template>
             </b-wrapped-form-group>
 
-            <common-rate-limit-fields :form="form"></common-rate-limit-fields>
+            <common-rate-limit-fields :form="form" />
         </div>
     </b-form-group>
 
-    <common-social-post-fields :form="form" :now-playing-url="nowPlayingUrl"></common-social-post-fields>
+    <common-social-post-fields
+        :form="form"
+        :now-playing-url="nowPlayingUrl"
+    />
 </template>
 
 <script setup>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue b/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue
index db1afe28b..8bb34e398 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/TypeSelect.vue
@@ -5,10 +5,19 @@
         </template>
 
         <b-list-group>
-            <b-list-group-item v-for="(info, key) in webhookTypes" :key="key" href="#" @click.prevent="selectType(key)"
-                               class="px-3">
-                <h6 class="font-weight-bold mb-0">{{ info.name }}</h6>
-                <p class="card-text small">{{ info.description }}</p>
+            <b-list-group-item
+                v-for="(info, key) in webhookTypes"
+                :key="key"
+                href="#"
+                class="px-3"
+                @click.prevent="selectType(key)"
+            >
+                <h6 class="font-weight-bold mb-0">
+                    {{ info.name }}
+                </h6>
+                <p class="card-text small">
+                    {{ info.description }}
+                </p>
             </b-list-group-item>
         </b-list-group>
     </b-form-group>