From edad84b0b6877c7315e31a8e05abb910f6b1801c Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sat, 7 Dec 2024 16:23:33 +0100
Subject: [PATCH] consistent use of i18n for translations, replace ,  and 
 global variables with local definitions

---
 docs/developer/contribute/copy.md             |   8 +-
 front/src/LegacyLayout.vue                    |   6 +-
 front/src/components/About.vue                |  44 +++---
 front/src/components/AboutPod.vue             |  76 +++++-----
 front/src/components/Home.vue                 |  58 ++++----
 front/src/components/PageNotFound.vue         |   6 +-
 front/src/components/Queue.vue                |  53 +++----
 front/src/components/QueueItem.vue            |   9 +-
 front/src/components/RemoteSearchForm.vue     |  14 +-
 front/src/components/ServiceMessages.vue      |   8 +-
 front/src/components/ShortcutsModal.vue       |   4 +-
 front/src/components/Sidebar.vue              |  56 +++----
 front/src/components/admin/SettingsGroup.vue  |  13 +-
 .../components/admin/SignupFormBuilder.vue    |  30 ++--
 front/src/components/album/Card.vue           |   8 +-
 front/src/components/album/Widget.vue         |   6 +-
 front/src/components/artist/Card.vue          |   8 +-
 front/src/components/artist/Widget.vue        |   6 +-
 .../components/audio/ArtistCreditLabel.vue    |   5 +-
 front/src/components/audio/ArtistLabel.vue    |   5 +-
 front/src/components/audio/ChannelCard.vue    |   8 +-
 front/src/components/audio/ChannelEntries.vue |   4 +-
 .../src/components/audio/ChannelEntryCard.vue |  22 ++-
 front/src/components/audio/ChannelForm.vue    |  30 ++--
 .../src/components/audio/ChannelSerieCard.vue |  21 ++-
 front/src/components/audio/ChannelSeries.vue  |   7 +-
 front/src/components/audio/ChannelsWidget.vue |   5 +-
 front/src/components/audio/EmbedWizard.vue    |  23 +--
 .../components/audio/LibraryFollowButton.vue  |   8 +-
 front/src/components/audio/PlayButton.vue     |  21 ++-
 front/src/components/audio/Player.vue         |  26 ++--
 front/src/components/audio/Search.vue         |  10 +-
 front/src/components/audio/artist/Card.vue    |   7 +-
 .../components/audio/podcast/MobileRow.vue    |  10 +-
 front/src/components/audio/podcast/Modal.vue  |  23 +--
 front/src/components/audio/podcast/Row.vue    |   7 +-
 .../src/components/audio/track/MobileRow.vue  |  10 +-
 front/src/components/audio/track/Modal.vue    |  21 +--
 front/src/components/audio/track/Row.vue      |  12 +-
 front/src/components/audio/track/Table.vue    |   6 +-
 front/src/components/audio/track/Widget.vue   |  10 +-
 front/src/components/auth/ApplicationEdit.vue |  20 +--
 front/src/components/auth/ApplicationForm.vue |  16 +-
 front/src/components/auth/ApplicationNew.vue  |   2 +-
 front/src/components/auth/Authorize.vue       |  22 +--
 front/src/components/auth/LoginForm.vue       |  18 +--
 front/src/components/auth/Logout.vue          |  17 ++-
 front/src/components/auth/Plugin.vue          |  17 ++-
 front/src/components/auth/Settings.vue        | 138 +++++++++---------
 front/src/components/auth/SignupForm.vue      |  22 +--
 .../src/components/auth/SubsonicTokenForm.vue |  30 ++--
 front/src/components/channels/AlbumForm.vue   |   7 +-
 front/src/components/channels/AlbumModal.vue  |  11 +-
 front/src/components/channels/AlbumSelect.vue |  11 +-
 .../src/components/channels/LicenseSelect.vue |   9 +-
 .../components/channels/SubscribeButton.vue   |   7 +-
 front/src/components/channels/UploadForm.vue  |  30 ++--
 .../channels/UploadMetadataForm.vue           |  13 +-
 front/src/components/channels/UploadModal.vue |  28 ++--
 front/src/components/common/ActionTable.vue   |  26 ++--
 .../src/components/common/AttachmentInput.vue |  13 +-
 front/src/components/common/CollapseLink.vue  |   7 +-
 front/src/components/common/ContentForm.vue   |   8 +-
 front/src/components/common/CopyInput.vue     |   7 +-
 .../src/components/common/DangerousButton.vue |  11 +-
 front/src/components/common/Duration.vue      |   7 +-
 front/src/components/common/EmptyState.vue    |   9 +-
 front/src/components/common/ExpandableDiv.vue |   7 +-
 .../src/components/common/InlineSearchBar.vue |   2 +-
 front/src/components/common/LoginModal.vue    |   5 +-
 .../components/common/RenderedDescription.vue |  17 ++-
 front/src/components/common/UserLink.vue      |   9 +-
 front/src/components/common/UserMenu.vue      |  28 ++--
 front/src/components/common/UserModal.vue     |  23 +--
 front/src/components/favorites/List.vue       |  18 +--
 .../favorites/TrackFavoriteIcon.vue           |   4 +-
 .../src/components/federation/FetchButton.vue |  52 ++++---
 .../components/federation/LibraryWidget.vue   |  11 +-
 front/src/components/library/AlbumBase.vue    |  33 +++--
 front/src/components/library/AlbumDetail.vue  |  12 +-
 .../src/components/library/AlbumDropdown.vue  |  32 ++--
 front/src/components/library/AlbumEdit.vue    |   8 +-
 front/src/components/library/Albums.vue       |  20 +--
 front/src/components/library/ArtistBase.vue   |  41 +++---
 front/src/components/library/ArtistDetail.vue |  22 +--
 front/src/components/library/ArtistEdit.vue   |  10 +-
 front/src/components/library/Artists.vue      |  24 +--
 front/src/components/library/EditCard.vue     |  42 +++---
 front/src/components/library/EditForm.vue     |  34 ++---
 front/src/components/library/FileUpload.vue   |  56 +++----
 front/src/components/library/FsBrowser.vue    |   6 +-
 front/src/components/library/FsLogs.vue       |   6 +-
 front/src/components/library/Home.vue         |  14 +-
 .../components/library/ImportStatusModal.vue  |  24 +--
 front/src/components/library/Podcasts.vue     |  28 ++--
 front/src/components/library/Radios.vue       |  24 +--
 front/src/components/library/TagDetail.vue    |  17 ++-
 front/src/components/library/TagsSelector.vue |   6 +-
 front/src/components/library/TrackBase.vue    |  53 ++++---
 front/src/components/library/TrackDetail.vue  |  63 ++++----
 front/src/components/library/TrackEdit.vue    |  10 +-
 .../src/components/library/radios/Builder.vue |  34 ++---
 .../src/components/library/radios/Filter.vue  |  13 +-
 front/src/components/manage/ChannelsTable.vue |  30 ++--
 .../components/manage/library/AlbumsTable.vue |  28 ++--
 .../manage/library/ArtistsTable.vue           |  28 ++--
 .../manage/library/EditsCardList.vue          |  22 +--
 .../manage/library/LibrariesTable.vue         |  32 ++--
 .../components/manage/library/TagsTable.vue   |  22 +--
 .../components/manage/library/TracksTable.vue |  28 ++--
 .../manage/library/UploadsTable.vue           |  52 +++----
 .../manage/moderation/AccountsTable.vue       |  28 ++--
 .../manage/moderation/DomainsTable.vue        |  34 ++---
 .../manage/moderation/InstancePolicyCard.vue  |  21 +--
 .../manage/moderation/InstancePolicyForm.vue  |  30 ++--
 .../manage/moderation/InstancePolicyModal.vue |  11 +-
 .../components/manage/moderation/NoteForm.vue |   4 +-
 .../manage/moderation/NotesThread.vue         |  12 +-
 .../manage/moderation/ReportCard.vue          |  56 +++----
 .../manage/moderation/UserRequestCard.vue     |  42 +++---
 .../manage/users/InvitationForm.vue           |  12 +-
 .../manage/users/InvitationsTable.vue         |  32 ++--
 .../components/manage/users/UsersTable.vue    |  38 ++---
 .../src/components/moderation/FilterModal.vue |  20 +--
 .../moderation/ReportCategoryDropdown.vue     |   2 +-
 .../src/components/moderation/ReportModal.vue |  24 +--
 front/src/components/playlists/Card.vue       |   8 +-
 front/src/components/playlists/Editor.vue     |  24 +--
 front/src/components/playlists/Form.vue       |  16 +-
 .../components/playlists/PlaylistModal.vue    |  34 ++---
 .../playlists/TrackPlaylistIcon.vue           |   8 +-
 front/src/components/playlists/Widget.vue     |  14 +-
 front/src/components/radios/Card.vue          |   7 +-
 front/src/components/tags/List.vue            |   4 +-
 front/src/components/ui/alert.scss            |  23 +--
 front/src/ui/components/Sidebar.vue           |  17 ++-
 front/src/views/Notifications.vue             |  46 +++---
 front/src/views/Search.vue                    |   2 +-
 front/src/views/admin/ChannelDetail.vue       |  68 ++++-----
 front/src/views/admin/Settings.vue            |   2 +-
 front/src/views/admin/library/AlbumDetail.vue |  66 +++++----
 .../src/views/admin/library/ArtistDetail.vue  |  68 ++++-----
 front/src/views/admin/library/Base.vue        |  16 +-
 front/src/views/admin/library/EditsList.vue   |   2 +-
 .../src/views/admin/library/LibraryDetail.vue |  62 ++++----
 front/src/views/admin/library/TagDetail.vue   |  37 +++--
 front/src/views/admin/library/TrackDetail.vue |  77 +++++-----
 .../src/views/admin/library/UploadDetail.vue  |  81 +++++-----
 .../views/admin/moderation/AccountsDetail.vue |  98 +++++++------
 front/src/views/admin/moderation/Base.vue     |  22 +--
 .../views/admin/moderation/DomainsDetail.vue  |  78 +++++-----
 .../views/admin/moderation/DomainsList.vue    |  10 +-
 .../views/admin/moderation/ReportsList.vue    |  20 +--
 .../views/admin/moderation/RequestsList.vue   |  22 +--
 front/src/views/admin/users/Base.vue          |   4 +-
 front/src/views/auth/Callback.vue             |   2 +-
 front/src/views/auth/EmailConfirm.vue         |  12 +-
 front/src/views/auth/Login.vue                |   2 +-
 front/src/views/auth/PasswordReset.vue        |  12 +-
 front/src/views/auth/PasswordResetConfirm.vue |  16 +-
 front/src/views/auth/ProfileActivity.vue      |   6 +-
 front/src/views/auth/ProfileBase.vue          |  10 +-
 front/src/views/auth/ProfileOverview.vue      |  43 +++---
 front/src/views/auth/Signup.vue               |   2 +-
 front/src/views/channels/DetailBase.vue       |  62 ++++----
 front/src/views/channels/DetailOverview.vue   |  32 ++--
 .../src/views/channels/SubscriptionsList.vue  |   8 +-
 front/src/views/content/Base.vue              |   4 +-
 front/src/views/content/Home.vue              |  20 +--
 .../src/views/content/channels/CardUpload.vue |   2 +-
 front/src/views/content/libraries/Card.vue    |   6 +-
 .../views/content/libraries/CardUpload.vue    |   4 +-
 .../views/content/libraries/FilesTable.vue    |  46 +++---
 front/src/views/content/libraries/Form.vue    |  24 +--
 front/src/views/content/libraries/Home.vue    |  12 +-
 front/src/views/content/libraries/Quota.vue   |  47 +++---
 front/src/views/content/remote/Card.vue       |  36 ++---
 front/src/views/content/remote/Home.vue       |  14 +-
 front/src/views/content/remote/ScanForm.vue   |   4 +-
 front/src/views/content/upload/Home.vue       |   4 +-
 front/src/views/library/DetailAlbums.vue      |   8 +-
 front/src/views/library/DetailOverview.vue    |  12 +-
 front/src/views/library/DetailTracks.vue      |   4 +-
 front/src/views/library/Edit.vue              |  36 +++--
 front/src/views/library/LibraryBase.vue       |  22 +--
 front/src/views/playlists/Detail.vue          |  28 ++--
 front/src/views/playlists/List.vue            |  31 ++--
 front/src/views/radios/Detail.vue             |  25 ++--
 188 files changed, 2252 insertions(+), 1916 deletions(-)

diff --git a/docs/developer/contribute/copy.md b/docs/developer/contribute/copy.md
index 407ecb21d..c2acba76d 100644
--- a/docs/developer/contribute/copy.md
+++ b/docs/developer/contribute/copy.md
@@ -47,8 +47,8 @@ const labels = computed(() => ({
 :::{tab-item} Template
 
 ```html
-<h2>{{ $t('components.About.header.funkwhale') }}</h2>
-<button>{{ $t('components.About.button.cancel') }}</button>
+<h2>{{ t('components.About.header.funkwhale') }}</h2>
+<button>{{ t('components.About.button.cancel') }}</button>
 ```
 
 :::
@@ -84,11 +84,11 @@ Some strings change depending on whether they are plural or not. You can create
     v-if="object.artist?.content_category === 'podcast'"
     class="meta ellipsis"
   >
-    {{ $t('components.audio.ChannelCard.meta.episodes', {episode_count:
+    {{ t('components.audio.ChannelCard.meta.episodes', {episode_count:
     object.artist.tracks_count}) }}
   </span>
   <span v-else>
-    {{ $t('components.audio.ChannelCard.meta.tracks', {tracks_count:
+    {{ t('components.audio.ChannelCard.meta.tracks', {tracks_count:
     object.artist?.tracks_count}) }}
   </span>
   <tags-list
diff --git a/front/src/LegacyLayout.vue b/front/src/LegacyLayout.vue
index 71cccbebb..88c468137 100644
--- a/front/src/LegacyLayout.vue
+++ b/front/src/LegacyLayout.vue
@@ -4,9 +4,13 @@ import { computed, ref, defineAsyncComponent, nextTick, onMounted } from 'vue'
 
 import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 
+const { t } = useI18n()
+
 const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
 const PlaylistModal = defineAsyncComponent(() => import('~/components/playlists/PlaylistModal.vue'))
 const FilterModal = defineAsyncComponent(() => import('~/components/moderation/FilterModal.vue'))
@@ -85,7 +89,7 @@ const showSetInstanceModal = ref(false)
             <component :is="Component" />
             <template #fallback>
               <!-- TODO (wvffle): Add loader -->
-              {{ $t('App.loading') }}
+              {{ t('App.loading') }}
             </template>
           </Suspense>
         </keep-alive>
diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index a40cf6da2..216099ecf 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -67,10 +67,10 @@ const headerStyle = computed(() => {
                 <div class="column" />
               </div>
               <h2 class="header">
-                {{ $t('components.About.header.funkwhale') }}
+                {{ t('components.About.header.funkwhale') }}
               </h2>
               <p>
-                {{ $t('components.About.description.funkwhale') }}
+                {{ t('components.About.description.funkwhale') }}
               </p>
             </div>
           </div>
@@ -84,14 +84,14 @@ const headerStyle = computed(() => {
                 class="signup-form content"
               >
                 <h3 class="header">
-                  {{ $t('components.About.header.signup') }}
+                  {{ t('components.About.header.signup') }}
                 </h3>
                 <template v-if="openRegistrations">
                   <p>
-                    {{ $t('components.About.description.signup') }}
+                    {{ t('components.About.description.signup') }}
                   </p>
                   <p v-if="defaultUploadQuota">
-                    {{ $t('components.About.description.quota', {quota: defaultUploadQuota}) }}
+                    {{ t('components.About.description.quota', {quota: defaultUploadQuota}) }}
                   </p>
                   <signup-form
                     button-classes="success"
@@ -100,7 +100,7 @@ const headerStyle = computed(() => {
                 </template>
                 <div v-else>
                   <p>
-                    {{ $t('components.About.help.closedRegistrations') }}
+                    {{ t('components.About.help.closedRegistrations') }}
                   </p>
 
                   <a
@@ -108,7 +108,7 @@ const headerStyle = computed(() => {
                     rel="noopener"
                     href="https://funkwhale.audio/#get-started"
                   >
-                    {{ $t('components.About.link.findOtherPod') }}
+                    {{ t('components.About.link.findOtherPod') }}
                     &nbsp;<i class="external alternate icon" />
                   </a>
                 </div>
@@ -118,13 +118,13 @@ const headerStyle = computed(() => {
                 class="signup-form content"
               >
                 <h3 class="header">
-                  {{ $t('components.About.header.signup') }}
+                  {{ t('components.About.header.signup') }}
                   <div class="ui positive message">
                     <div class="header">
-                      {{ $t('components.About.message.loggedIn') }}
+                      {{ t('components.About.message.loggedIn') }}
                     </div>
                     <p>
-                      {{ $t('components.About.message.greeting', {username: $store.state.auth.username}) }}
+                      {{ t('components.About.message.greeting', {username: $store.state.auth.username}) }}
                     </p>
                   </div>
                 </h3>
@@ -145,7 +145,7 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  {{ $t('components.About.header.aboutPod') }}
+                  {{ t('components.About.header.aboutPod') }}
                 </h3>
                 <div
                   v-if="shortDescription"
@@ -154,7 +154,7 @@ const headerStyle = computed(() => {
                   {{ shortDescription }}
                 </div>
                 <p v-else>
-                  {{ $t('components.About.placeholder.noDescription') }}
+                  {{ t('components.About.placeholder.noDescription') }}
                 </p>
 
                 <template v-if="stats">
@@ -164,14 +164,14 @@ const headerStyle = computed(() => {
                         <span class="statistics-figure ui text">
                           <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                           <br>
-                          {{ $t('components.About.stat.activeUsers', stats.users) }}
+                          {{ t('components.About.stat.activeUsers', stats.users) }}
                         </span>
                       </div>
                       <div class="column">
                         <span class="statistics-figure ui text">
                           <span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                           <br>
-                          {{ $t('components.About.stat.hoursOfMusic', stats.hours) }}
+                          {{ t('components.About.stat.hoursOfMusic', stats.hours) }}
                         </span>
                       </div>
                     </div>
@@ -182,7 +182,7 @@ const headerStyle = computed(() => {
                   to="/about/pod"
                   class="ui fluid basic secondary button"
                 >
-                  {{ $t('components.About.link.learnMore') }}
+                  {{ t('components.About.link.learnMore') }}
                 </router-link>
               </div>
             </div>
@@ -201,10 +201,10 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  {{ $t('components.About.header.publicContent') }}
+                  {{ t('components.About.header.publicContent') }}
                 </h3>
                 <p>
-                  {{ $t('components.About.description.publicContent') }}
+                  {{ t('components.About.description.publicContent') }}
                 </p>
               </div>
             </router-link>
@@ -218,11 +218,11 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  {{ $t('components.About.link.findOtherPod') }}
+                  {{ t('components.About.link.findOtherPod') }}
                   &nbsp;<i class="external alternate icon" />
                 </h3>
                 <p>
-                  {{ $t('components.About.description.publicContent') }}
+                  {{ t('components.About.description.publicContent') }}
                 </p>
               </div>
             </a>
@@ -236,11 +236,11 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  {{ $t('components.About.header.findApp') }}
+                  {{ t('components.About.header.findApp') }}
                   &nbsp;<i class="external alternate icon" />
                 </h3>
                 <p>
-                  {{ $t('components.About.description.findApp') }}
+                  {{ t('components.About.description.findApp') }}
                 </p>
               </div>
             </a>
@@ -250,7 +250,7 @@ const headerStyle = computed(() => {
               to="/about/pod"
               class="ui right floated basic secondary button"
             >
-              {{ $t('components.About.header.aboutPod') }}
+              {{ t('components.About.header.aboutPod') }}
               <i class="icon arrow right" />
             </router-link>
           </div>
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index a4bbe09f6..df9ad7281 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -99,32 +99,32 @@ const headerStyle = computed(() => {
                   to="/about/pod"
                   class="item"
                 >
-                  {{ $t('components.AboutPod.link.about') }}
+                  {{ t('components.AboutPod.link.about') }}
                 </router-link>
                 <router-link
                   to="/about/pod#rules"
                   class="item"
                 >
-                  {{ $t('components.AboutPod.link.rules') }}
+                  {{ t('components.AboutPod.link.rules') }}
                 </router-link>
                 <router-link
                   to="/about/pod#terms"
                   class="item"
                 >
-                  {{ $t('components.AboutPod.link.terms') }}
+                  {{ t('components.AboutPod.link.terms') }}
                 </router-link>
                 <router-link
                   to="/about/pod#features"
                   class="item"
                 >
-                  {{ $t('components.AboutPod.link.features') }}
+                  {{ t('components.AboutPod.link.features') }}
                 </router-link>
                 <router-link
                   v-if="stats"
                   to="/about/pod#statistics"
                   class="item"
                 >
-                  {{ $t('components.AboutPod.link.statistics') }}
+                  {{ t('components.AboutPod.link.statistics') }}
                 </router-link>
               </div>
             </div>
@@ -134,49 +134,49 @@ const headerStyle = computed(() => {
                 id="description about-this-pod"
                 class="ui header"
               >
-                {{ $t('components.AboutPod.header.about') }}
+                {{ t('components.AboutPod.header.about') }}
               </h2>
               <sanitized-html
                 v-if="longDescription"
                 :html="longDescription"
               />
               <p v-else>
-                {{ $t('components.AboutPod.placeholder.noDescription') }}
+                {{ t('components.AboutPod.placeholder.noDescription') }}
               </p>
 
               <h3
                 id="rules"
                 class="ui header"
               >
-                {{ $t('components.AboutPod.header.rules') }}
+                {{ t('components.AboutPod.header.rules') }}
               </h3>
               <sanitized-html
                 v-if="rules"
                 :html="rules"
               />
               <p v-else>
-                {{ $t('components.AboutPod.placeholder.noRules') }}
+                {{ t('components.AboutPod.placeholder.noRules') }}
               </p>
 
               <h3
                 id="terms"
                 class="ui header"
               >
-                {{ $t('components.AboutPod.header.terms') }}
+                {{ t('components.AboutPod.header.terms') }}
               </h3>
               <sanitized-html
                 v-if="terms"
                 :html="terms"
               />
               <p v-else>
-                {{ $t('components.AboutPod.placeholder.noTerms') }}
+                {{ t('components.AboutPod.placeholder.noTerms') }}
               </p>
 
               <h3
                 id="features"
                 class="header"
               >
-                {{ $t('components.AboutPod.header.features') }}
+                {{ t('components.AboutPod.header.features') }}
               </h3>
               <div class="features-container ui two column stackable grid">
                 <div class="column">
@@ -184,7 +184,7 @@ const headerStyle = computed(() => {
                     <tbody>
                       <tr>
                         <td>
-                          {{ $t('components.AboutPod.feature.version') }}
+                          {{ t('components.AboutPod.feature.version') }}
                         </td>
                         <td
                           v-if="version"
@@ -199,13 +199,13 @@ const headerStyle = computed(() => {
                           class="right aligned"
                         >
                           <span class="features-status ui text">
-                            {{ $t('components.AboutPod.notApplicable') }}
+                            {{ t('components.AboutPod.notApplicable') }}
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          {{ $t('components.AboutPod.feature.federation') }}
+                          {{ t('components.AboutPod.feature.federation') }}
                         </td>
                         <td
                           v-if="federationEnabled"
@@ -213,7 +213,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            {{ $t('components.AboutPod.feature.status.enabled') }}
+                            {{ t('components.AboutPod.feature.status.enabled') }}
                           </span>
                         </td>
                         <td
@@ -222,13 +222,13 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            {{ $t('components.AboutPod.feature.status.disabled') }}
+                            {{ t('components.AboutPod.feature.status.disabled') }}
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          {{ $t('components.AboutPod.feature.allowList') }}
+                          {{ t('components.AboutPod.feature.allowList') }}
                         </td>
                         <td
                           v-if="allowListEnabled"
@@ -236,7 +236,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            {{ $t('components.AboutPod.feature.status.enabled') }}
+                            {{ t('components.AboutPod.feature.status.enabled') }}
                           </span>
                         </td>
                         <td
@@ -245,7 +245,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            {{ $t('components.AboutPod.feature.status.disabled') }}
+                            {{ t('components.AboutPod.feature.status.disabled') }}
                           </span>
                         </td>
                       </tr>
@@ -257,7 +257,7 @@ const headerStyle = computed(() => {
                     <tbody>
                       <tr>
                         <td>
-                          {{ $t('components.AboutPod.feature.anonymousAccess') }}
+                          {{ t('components.AboutPod.feature.anonymousAccess') }}
                         </td>
                         <td
                           v-if="anonymousCanListen"
@@ -265,7 +265,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            {{ $t('components.AboutPod.feature.status.enabled') }}
+                            {{ t('components.AboutPod.feature.status.enabled') }}
                           </span>
                         </td>
                         <td
@@ -274,13 +274,13 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            {{ $t('components.AboutPod.feature.status.disabled') }}
+                            {{ t('components.AboutPod.feature.status.disabled') }}
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          {{ $t('components.AboutPod.feature.registrations') }}
+                          {{ t('components.AboutPod.feature.registrations') }}
                         </td>
                         <td
                           v-if="openRegistrations"
@@ -288,7 +288,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            {{ $t('components.AboutPod.feature.status.open') }}
+                            {{ t('components.AboutPod.feature.status.open') }}
                           </span>
                         </td>
                         <td
@@ -297,13 +297,13 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            {{ $t('components.AboutPod.feature.status.closed') }}
+                            {{ t('components.AboutPod.feature.status.closed') }}
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          {{ $t('components.AboutPod.feature.quota') }}
+                          {{ t('components.AboutPod.feature.quota') }}
                         </td>
                         <td
                           v-if="defaultUploadQuota"
@@ -318,7 +318,7 @@ const headerStyle = computed(() => {
                           class="right aligned"
                         >
                           <span class="features-status ui text">
-                            {{ $t('components.AboutPod.notApplicable') }}
+                            {{ t('components.AboutPod.notApplicable') }}
                           </span>
                         </td>
                       </tr>
@@ -332,7 +332,7 @@ const headerStyle = computed(() => {
                   id="statistics"
                   class="header"
                 >
-                  {{ $t('components.AboutPod.header.statistics') }}
+                  {{ t('components.AboutPod.header.statistics') }}
                 </h3>
                 <div class="statistics-container">
                   <div
@@ -342,7 +342,7 @@ const headerStyle = computed(() => {
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
-                      {{ $t('components.AboutPod.stat.hoursOfMusic', stats.hours) }}
+                      {{ t('components.AboutPod.stat.hoursOfMusic', stats.hours) }}
                     </span>
                   </div>
                   <div
@@ -352,7 +352,7 @@ const headerStyle = computed(() => {
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
-                      {{ $t('components.AboutPod.stat.artistsCount', stats.artists) }}
+                      {{ t('components.AboutPod.stat.artistsCount', stats.artists) }}
                     </span>
                   </div>
                   <div
@@ -362,7 +362,7 @@ const headerStyle = computed(() => {
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
-                      {{ $t('components.AboutPod.stat.albumsCount', stats.albums) }}
+                      {{ t('components.AboutPod.stat.albumsCount', stats.albums) }}
                     </span>
                   </div>
                   <div
@@ -372,7 +372,7 @@ const headerStyle = computed(() => {
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
-                      {{ $t('components.AboutPod.stat.tracksCount', stats.tracks) }}
+                      {{ t('components.AboutPod.stat.tracksCount', stats.tracks) }}
                     </span>
                   </div>
                   <div
@@ -382,7 +382,7 @@ const headerStyle = computed(() => {
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
-                      {{ $t('components.AboutPod.stat.activeUsers', stats.users) }}
+                      {{ t('components.AboutPod.stat.activeUsers', stats.users) }}
                     </span>
                   </div>
                   <div
@@ -392,7 +392,7 @@ const headerStyle = computed(() => {
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
-                      {{ $t('components.AboutPod.stat.listeningsCount', stats.listenings) }}
+                      {{ t('components.AboutPod.stat.listeningsCount', stats.listenings) }}
                     </span>
                   </div>
                 </div>
@@ -403,13 +403,13 @@ const headerStyle = computed(() => {
                   id="contact"
                   class="ui header"
                 >
-                  {{ $t('components.AboutPod.header.contact') }}
+                  {{ t('components.AboutPod.header.contact') }}
                 </h3>
                 <a
                   v-if="contactEmail"
                   :href="`mailto:${contactEmail}`"
                 >
-                  {{ $t('components.AboutPod.message.contact', { contactEmail }) }}
+                  {{ t('components.AboutPod.message.contact', { contactEmail }) }}
                 </a>
               </template>
 
@@ -420,7 +420,7 @@ const headerStyle = computed(() => {
                   class="ui left floated basic secondary button"
                 >
                   <i class="icon arrow left" />
-                  {{ $t('components.AboutPod.link.introduction') }}
+                  {{ t('components.AboutPod.link.introduction') }}
                 </router-link>
               </div>
             </div>
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index ec7bfe705..e5e5efec3 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -73,7 +73,7 @@ whenever(() => store.state.auth.authenticated, () => {
       <div class="segment-content">
         <h1 class="ui center aligned large header">
           <span>
-            {{ $t('components.Home.header.welcome', {podName: podName}) }}
+            {{ t('components.Home.header.welcome', {podName: podName}) }}
           </span>
           <div
             v-if="shortDescription"
@@ -88,7 +88,7 @@ whenever(() => store.state.auth.authenticated, () => {
       <div class="ui stackable grid">
         <div class="ten wide column">
           <h2 class="header">
-            {{ $t('components.Home.header.about') }}
+            {{ t('components.Home.header.about') }}
           </h2>
           <div
             id="pod"
@@ -97,7 +97,7 @@ whenever(() => store.state.auth.authenticated, () => {
             <div class="ui stackable grid">
               <div class="eight wide column">
                 <p v-if="!longDescription">
-                  {{ $t('components.Home.placeholder.noDescription') }}
+                  {{ t('components.Home.placeholder.noDescription') }}
                 </p>
                 <template v-if="longDescription || rules">
                   <sanitized-html
@@ -120,7 +120,7 @@ whenever(() => store.state.auth.authenticated, () => {
                           class="ui link"
                           :to="{name: 'about'}"
                         >
-                          {{ $t('components.Home.link.learnMore') }}
+                          {{ t('components.Home.link.learnMore') }}
                         </router-link>
                       </div>
                     </div>
@@ -135,7 +135,7 @@ whenever(() => store.state.auth.authenticated, () => {
                           class="ui link"
                           :to="{name: 'about', hash: '#rules'}"
                         >
-                          {{ $t('components.Home.link.rules') }}
+                          {{ t('components.Home.link.rules') }}
                         </router-link>
                       </div>
                     </div>
@@ -145,20 +145,20 @@ whenever(() => store.state.auth.authenticated, () => {
               <div class="eight wide column">
                 <template v-if="stats">
                   <h3 class="sub header">
-                    {{ $t('components.Home.header.statistics') }}
+                    {{ t('components.Home.header.statistics') }}
                   </h3>
                   <p>
                     <i class="user icon" />
-                    {{ $t('components.Home.stat.activeUsers', stats.users) }}
+                    {{ t('components.Home.stat.activeUsers', stats.users) }}
                   </p>
                   <p>
                     <i class="music icon" />
-                    {{ $t('components.Home.stat.hoursOfMusic', stats.hours) }}
+                    {{ t('components.Home.stat.hoursOfMusic', stats.hours) }}
                   </p>
                 </template>
                 <template v-if="contactEmail">
                   <h3 class="sub header">
-                    {{ $t('components.Home.header.contact') }}
+                    {{ t('components.Home.header.contact') }}
                   </h3>
                   <i class="at icon" />
                   <a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
@@ -181,13 +181,13 @@ whenever(() => store.state.auth.authenticated, () => {
       <div class="ui stackable grid">
         <div class="four wide column">
           <h3 class="header">
-            {{ $t('components.Home.header.aboutFunkwhale') }}
+            {{ t('components.Home.header.aboutFunkwhale') }}
           </h3>
           <p>
-            {{ $t('components.Home.description.funkwhale.paragraph1') }}
+            {{ t('components.Home.description.funkwhale.paragraph1') }}
           </p>
           <p>
-            {{ $t('components.Home.description.funkwhale.paragraph2') }}
+            {{ t('components.Home.description.funkwhale.paragraph2') }}
           </p>
           <a
             target="_blank"
@@ -195,12 +195,12 @@ whenever(() => store.state.auth.authenticated, () => {
             href="https://funkwhale.audio"
           >
             <i class="external alternate icon" />
-            {{ $t('components.Home.link.funkwhale') }}
+            {{ t('components.Home.link.funkwhale') }}
           </a>
         </div>
         <div class="four wide column">
           <h3 class="header">
-            {{ $t('components.Home.header.login') }}
+            {{ t('components.Home.header.login') }}
           </h3>
           <login-form
             button-classes="success"
@@ -210,14 +210,14 @@ whenever(() => store.state.auth.authenticated, () => {
         </div>
         <div class="four wide column">
           <h3 class="header">
-            {{ $t('components.Home.header.signup') }}
+            {{ t('components.Home.header.signup') }}
           </h3>
           <template v-if="openRegistrations">
             <p>
-              {{ $t('components.Home.description.signup') }}
+              {{ t('components.Home.description.signup') }}
             </p>
             <p v-if="defaultUploadQuota">
-              {{ $t('components.Home.description.quota', { quota: humanSize(defaultUploadQuota * 1000 * 1000) }) }}
+              {{ t('components.Home.description.quota', { quota: humanSize(defaultUploadQuota * 1000 * 1000) }) }}
             </p>
             <signup-form
               button-classes="success"
@@ -226,7 +226,7 @@ whenever(() => store.state.auth.authenticated, () => {
           </template>
           <div v-else>
             <p>
-              {{ $t('components.Home.help.registrationsClosed') }}
+              {{ t('components.Home.help.registrationsClosed') }}
             </p>
             <a
               target="_blank"
@@ -234,14 +234,14 @@ whenever(() => store.state.auth.authenticated, () => {
               href="https://funkwhale.audio/#get-started"
             >
               <i class="external alternate icon" />
-              {{ $t('components.Home.link.findOtherPod') }}
+              {{ t('components.Home.link.findOtherPod') }}
             </a>
           </div>
         </div>
 
         <div class="four wide column">
           <h3 class="header">
-            {{ $t('components.Home.header.links') }}
+            {{ t('components.Home.header.links') }}
           </h3>
           <div class="ui relaxed list">
             <div class="item">
@@ -252,10 +252,10 @@ whenever(() => store.state.auth.authenticated, () => {
                   class="header"
                   to="/library"
                 >
-                  {{ $t('components.Home.link.publicContent.label') }}
+                  {{ t('components.Home.link.publicContent.label') }}
                 </router-link>
                 <div class="description">
-                  {{ $t('components.Home.link.publicContent.description') }}
+                  {{ t('components.Home.link.publicContent.description') }}
                 </div>
               </div>
             </div>
@@ -268,10 +268,10 @@ whenever(() => store.state.auth.authenticated, () => {
                   target="_blank"
                   rel="noopener"
                 >
-                  {{ $t('components.Home.link.mobileApps.label') }}
+                  {{ t('components.Home.link.mobileApps.label') }}
                 </a>
                 <div class="description">
-                  {{ $t('components.Home.link.mobileApps.description') }}
+                  {{ t('components.Home.link.mobileApps.description') }}
                 </div>
               </div>
             </div>
@@ -284,10 +284,10 @@ whenever(() => store.state.auth.authenticated, () => {
                   target="_blank"
                   rel="noopener"
                 >
-                  {{ $t('components.Home.link.userGuides.label') }}
+                  {{ t('components.Home.link.userGuides.label') }}
                 </a>
                 <div class="description">
-                  {{ $t('components.Home.link.userGuides.description') }}
+                  {{ t('components.Home.link.userGuides.description') }}
                 </div>
               </div>
             </div>
@@ -304,16 +304,16 @@ whenever(() => store.state.auth.authenticated, () => {
         :limit="10"
       >
         <template #title>
-          {{ $t('components.Home.header.newAlbums') }}
+          {{ t('components.Home.header.newAlbums') }}
         </template>
         <router-link to="/library">
-          {{ $t('components.Home.link.viewMore') }}
+          {{ t('components.Home.link.viewMore') }}
           <div class="ui hidden divider" />
         </router-link>
       </album-widget>
       <div class="ui hidden section divider" />
       <h3 class="ui header">
-        {{ $t('components.Home.header.newChannels') }}
+        {{ t('components.Home.header.newChannels') }}
       </h3>
       <channels-widget
         :show-modification-date="true"
diff --git a/front/src/components/PageNotFound.vue b/front/src/components/PageNotFound.vue
index 07d249fec..eb3d1faee 100644
--- a/front/src/components/PageNotFound.vue
+++ b/front/src/components/PageNotFound.vue
@@ -20,11 +20,11 @@ const labels = computed(() => ({
         <h1 class="ui huge header">
           <i class="warning icon" />
           <div class="content">
-            {{ $t('components.PageNotFound.header.pageNotFound') }}
+            {{ t('components.PageNotFound.header.pageNotFound') }}
           </div>
         </h1>
         <p>
-          {{ $t('components.PageNotFound.message.pageNotFound') }}
+          {{ t('components.PageNotFound.message.pageNotFound') }}
         </p>
         <a :href="path">{{ path }}</a>
         <div class="ui hidden divider" />
@@ -32,7 +32,7 @@ const labels = computed(() => ({
           class="ui icon labeled right button"
           to="/"
         >
-          {{ $t('components.PageNotFound.link.home') }}
+          {{ t('components.PageNotFound.link.home') }}
           <i class="right arrow icon" />
         </router-link>
       </div>
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 5e5968cf3..8992e4ba1 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -5,7 +5,6 @@ import { whenever, watchDebounced, useCurrentElement, useScrollLock, useFullscre
 import { nextTick, ref, computed, watchEffect, defineAsyncComponent } from 'vue'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import { usePlayer } from '~/composables/audio/player'
@@ -14,6 +13,8 @@ import { useQueue } from '~/composables/audio/queue'
 
 import time from '~/utils/time'
 
+import { useI18n } from 'vue-i18n'
+
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import PlayerControls from '~/components/audio/PlayerControls.vue'
@@ -21,6 +22,8 @@ import PlayerControls from '~/components/audio/PlayerControls.vue'
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
 
+const { t } = useI18n()
+
 const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
 
 const {
@@ -194,12 +197,12 @@ if (!isWebGLSupported) {
                 <img
                   v-if="fullscreen"
                   class="cover-shadow"
-                  :src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
+                  :src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
                 >
                 <img
                   ref="cover"
                   alt=""
-                  :src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
+                  :src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
                 >
               </template>
               <milk-drop
@@ -212,7 +215,7 @@ if (!isWebGLSupported) {
                   v-if="!fullscreen || !idle"
                   class="cover-buttons"
                 >
-                  <tooltip :content="!isWebGLSupported && $t('components.Queue.message.webglUnsupported')">
+                  <tooltip :content="!isWebGLSupported && t('components.Queue.message.webglUnsupported')">
                     <button
                       v-if="coverType === CoverType.COVER_ART"
                       class="ui secondary button"
@@ -267,11 +270,11 @@ if (!isWebGLSupported) {
                       v-for="ac in currentTrack.artistCredit"
                       :key="ac.artist.id"
                     >
-                      {{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
+                      {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
                       <span>{{ ac.joinphrase }}</span>
                     </div>
                     <span class="symbol hyphen middle" />
-                    {{ currentTrack.albumTitle ?? $t('components.Queue.meta.unknownAlbum') }}
+                    {{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
                   </h2>
                 </div>
               </Transition>
@@ -296,7 +299,7 @@ if (!isWebGLSupported) {
                       :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
                       @click.stop.prevent=""
                     >
-                      {{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
+                      {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
                     </router-link>
                     <span>{{ ac.joinphrase }}</span>
                   </template>
@@ -307,7 +310,7 @@ if (!isWebGLSupported) {
                     class="discrete link album"
                     :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
                   >
-                    {{ currentTrack.albumTitle ?? $t('components.Queue.meta.unknownAlbum') }}
+                    {{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
                   </router-link>
                 </template>
               </div>
@@ -318,14 +321,14 @@ if (!isWebGLSupported) {
             class="ui small warning message"
           >
             <h3 class="header">
-              {{ $t('components.Queue.header.failure') }}
+              {{ t('components.Queue.header.failure') }}
             </h3>
             <p v-if="hasNext && isPlaying">
-              {{ $t('components.Queue.message.automaticPlay') }}
+              {{ t('components.Queue.message.automaticPlay') }}
               <i class="loading spinner icon" />
             </p>
             <p>
-              {{ $t('components.Queue.warning.connectivity') }}
+              {{ t('components.Queue.warning.connectivity') }}
             </p>
           </div>
           <div
@@ -333,24 +336,24 @@ if (!isWebGLSupported) {
             class="ui small warning message"
           >
             <h3 class="header">
-              {{ $t('components.Queue.header.noSources') }}
+              {{ t('components.Queue.header.noSources') }}
             </h3>
             <p v-if="hasNext && isPlaying">
-              {{ $t('components.Queue.message.automaticPlay') }}
+              {{ t('components.Queue.message.automaticPlay') }}
               <i class="loading spinner icon" />
             </p>
           </div>
           <div class="additional-controls desktop-and-below">
             <track-favorite-icon
-              v-if="$store.state.auth.authenticated"
+              v-if="store.state.auth.authenticated"
               :track="currentTrack"
             />
             <track-playlist-icon
-              v-if="$store.state.auth.authenticated"
+              v-if="store.state.auth.authenticated"
               :track="currentTrack"
             />
             <button
-              v-if="$store.state.auth.authenticated"
+              v-if="store.state.auth.authenticated"
               :class="['ui', 'really', 'basic', 'circular', 'icon', 'button']"
               :aria-label="labels.addArtistContentFilter"
               :title="labels.addArtistContentFilter"
@@ -386,8 +389,8 @@ if (!isWebGLSupported) {
                 <span class="right floated timer total">{{ time.parse(Math.round(duration)) }}</span>
               </template>
               <template v-else>
-                <span class="left floated timer">{{ $t('components.Queue.meta.startTime') }}</span>
-                <span class="right floated timer">{{ $t('components.Queue.meta.startTime') }}</span>
+                <span class="left floated timer">{{ t('components.Queue.meta.startTime') }}</span>
+                <span class="right floated timer">{{ t('components.Queue.meta.startTime') }}</span>
               </template>
             </div>
           </div>
@@ -401,7 +404,7 @@ if (!isWebGLSupported) {
               <button
                 v-t="'components.Queue.button.close'"
                 class="ui right floated basic button"
-                @click="$store.commit('ui/queueFocused', null)"
+                @click="store.commit('ui/queueFocused', null)"
               />
               <button
                 v-t="'components.Queue.button.clear'"
@@ -451,29 +454,29 @@ if (!isWebGLSupported) {
           </template>
           <template #footer>
             <div
-              v-if="$store.state.radios.populating"
+              v-if="store.state.radios.populating"
               class="radio-populating"
             >
               <i class="loading spinner icon" />
               {{ labels.populating }}
             </div>
             <div
-              v-if="$store.state.radios.running"
+              v-if="store.state.radios.running"
               class="ui info message radio-message"
             >
               <div class="content">
                 <h3 class="header">
                   <i class="feed icon" />
-                  {{ $t('components.Queue.header.radio') }}
+                  {{ t('components.Queue.header.radio') }}
                 </h3>
                 <p>
-                  {{ $t('components.Queue.message.radio') }}
+                  {{ t('components.Queue.message.radio') }}
                 </p>
                 <button
                   class="ui basic primary button"
-                  @click="$store.dispatch('radios/stop')"
+                  @click="store.dispatch('radios/stop')"
                 >
-                  {{ $t('components.Queue.button.stopRadio') }}
+                  {{ t('components.Queue.button.stopRadio') }}
                 </button>
               </div>
             </div>
diff --git a/front/src/components/QueueItem.vue b/front/src/components/QueueItem.vue
index ce2b384ad..edeac69e2 100644
--- a/front/src/components/QueueItem.vue
+++ b/front/src/components/QueueItem.vue
@@ -3,6 +3,9 @@ import type { QueueItemSource } from '~/types'
 
 import time from '~/utils/time'
 import { generateTrackCreditStringFromQueue } from '~/utils/utils'
+import { useStore } from '~/store'
+
+const store = useStore()
 
 interface Events {
   (e: 'play', index: number): void
@@ -55,14 +58,14 @@ defineProps<Props>()
     </div>
     <div class="controls">
       <button
-        v-if="$store.state.auth.authenticated"
+        v-if="store.state.auth.authenticated"
         :aria-label="source.labels.favorite"
         :title="source.labels.favorite"
         class="ui really basic circular icon button"
-        @click.stop="$store.dispatch('favorites/toggle', source.id)"
+        @click.stop="store.dispatch('favorites/toggle', source.id)"
       >
         <i
-          :class="$store.getters['favorites/isFavorite'](source.id) ? 'pink' : ''"
+          :class="store.getters['favorites/isFavorite'](source.id) ? 'pink' : ''"
           class="heart icon"
         />
       </button>
diff --git a/front/src/components/RemoteSearchForm.vue b/front/src/components/RemoteSearchForm.vue
index 00e0c858b..25d1fb818 100644
--- a/front/src/components/RemoteSearchForm.vue
+++ b/front/src/components/RemoteSearchForm.vue
@@ -174,7 +174,7 @@ watch(() => props.initialId, () => {
       @click.prevent="type = 'rss'"
     >
       <i class="feed icon" />
-      {{ $t('components.RemoteSearchForm.button.rss') }}
+      {{ t('components.RemoteSearchForm.button.rss') }}
     </button>
     <div class="or" />
     <button
@@ -182,7 +182,7 @@ watch(() => props.initialId, () => {
       @click.prevent="type = 'artists'"
     >
       <i class="globe icon" />
-      {{ $t('components.RemoteSearchForm.button.fediverse') }}
+      {{ t('components.RemoteSearchForm.button.fediverse') }}
     </button>
   </div>
   <div v-else>
@@ -197,7 +197,7 @@ watch(() => props.initialId, () => {
         class="ui negative message"
       >
         <h3 class="header">
-          {{ $t('components.RemoteSearchForm.header.fetchFailed') }}
+          {{ t('components.RemoteSearchForm.header.fetchFailed') }}
         </h3>
         <ul class="list">
           <li
@@ -213,10 +213,10 @@ watch(() => props.initialId, () => {
           {{ labels.fieldLabel }}
         </label>
         <p v-if="type === 'rss'">
-          {{ $t('components.RemoteSearchForm.description.rss') }}
+          {{ t('components.RemoteSearchForm.description.rss') }}
         </p>
         <p v-else-if="type === 'artists'">
-          {{ $t('components.RemoteSearchForm.description.fediverse') }}
+          {{ t('components.RemoteSearchForm.description.fediverse') }}
         </p>
         <input
           id="object-id"
@@ -233,7 +233,7 @@ watch(() => props.initialId, () => {
         :class="['ui', 'primary', {loading: isLoading}, 'button']"
         :disabled="isLoading || !id || id.length === 0"
       >
-        {{ $t('components.RemoteSearchForm.button.search') }}
+        {{ t('components.RemoteSearchForm.button.search') }}
       </button>
     </form>
     <div
@@ -242,7 +242,7 @@ watch(() => props.initialId, () => {
       class="ui warning message"
     >
       <p>
-        {{ $t('components.RemoteSearchForm.warning.unsupported') }}
+        {{ t('components.RemoteSearchForm.warning.unsupported') }}
       </p>
     </div>
   </div>
diff --git a/front/src/components/ServiceMessages.vue b/front/src/components/ServiceMessages.vue
index 4f16067ba..df9662033 100644
--- a/front/src/components/ServiceMessages.vue
+++ b/front/src/components/ServiceMessages.vue
@@ -1,7 +1,13 @@
+<script setup lang="ts">
+import { useStore } from '~/store'
+
+const store = useStore()
+</script>
+
 <template>
   <div class="ui toast-container">
     <message
-      v-for="message in $store.state.ui.messages"
+      v-for="message in store.state.ui.messages"
       :key="message.key"
       :message="message"
     />
diff --git a/front/src/components/ShortcutsModal.vue b/front/src/components/ShortcutsModal.vue
index 4de9ff8e4..33b0f05c8 100644
--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@@ -110,7 +110,7 @@ const player = computed(() => [
 <template>
   <semantic-modal v-model:show="showRef">
     <header class="header">
-      {{ $t('components.ShortcutsModal.header.modal') }}
+      {{ t('components.ShortcutsModal.header.modal') }}
     </header>
     <section class="scrolling content">
       <div class="ui stackable two column grid">
@@ -154,7 +154,7 @@ const player = computed(() => [
     </section>
     <footer class="actions">
       <button class="ui basic cancel button">
-        {{ $t('components.ShortcutsModal.button.close') }}
+        {{ t('components.ShortcutsModal.button.close') }}
       </button>
     </footer>
   </semantic-modal>
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 5cace5695..0fd93b46d 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -132,7 +132,7 @@ onMounted(() => {
       >
         <i class="logo bordered inverted vibrant big icon">
           <logo class="logo" />
-          <span class="visually-hidden">{{ $t('components.Sidebar.link.home') }}</span>
+          <span class="visually-hidden">{{ t('components.Sidebar.link.home') }}</span>
         </i>
       </router-link>
       <nav class="top ui compact right aligned inverted text menu">
@@ -152,7 +152,7 @@ onMounted(() => {
               </div>
               <div class="menu">
                 <h3 class="header">
-                  {{ $t('components.Sidebar.header.administration') }}
+                  {{ t('components.Sidebar.header.administration') }}
                 </h3>
                 <div class="divider" />
                 <router-link
@@ -167,7 +167,7 @@ onMounted(() => {
                   >
                     {{ $store.state.ui.notifications.pendingReviewEdits }}
                   </div>
-                  {{ $t('components.Sidebar.link.library') }}
+                  {{ t('components.Sidebar.link.library') }}
                 </router-link>
                 <router-link
                   v-if="$store.state.auth.availablePermissions['moderation']"
@@ -181,21 +181,21 @@ onMounted(() => {
                   >
                     {{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
                   </div>
-                  {{ $t('components.Sidebar.link.moderation') }}
+                  {{ t('components.Sidebar.link.moderation') }}
                 </router-link>
                 <router-link
                   v-if="$store.state.auth.availablePermissions['settings']"
                   class="item"
                   :to="{name: 'manage.users.users.list'}"
                 >
-                  {{ $t('components.Sidebar.link.users') }}
+                  {{ t('components.Sidebar.link.users') }}
                 </router-link>
                 <router-link
                   v-if="$store.state.auth.availablePermissions['settings']"
                   class="item"
                   :to="{path: '/manage/settings'}"
                 >
-                  {{ $t('components.Sidebar.link.settings') }}
+                  {{ t('components.Sidebar.link.settings') }}
                 </router-link>
               </div>
             </div>
@@ -355,14 +355,14 @@ onMounted(() => {
         class="ui fluid tiny primary button"
         :to="{name: 'login'}"
       >
-        {{ $t('components.Sidebar.link.login') }}
+        {{ t('components.Sidebar.link.login') }}
       </router-link>
       <div class="ui small hidden divider" />
       <router-link
         class="ui fluid tiny button"
         :to="{path: '/signup'}"
       >
-        {{ $t('components.Sidebar.link.createAccount') }}
+        {{ t('components.Sidebar.link.createAccount') }}
       </router-link>
     </div>
     <nav
@@ -374,7 +374,7 @@ onMounted(() => {
         id="navigation-label"
         class="visually-hidden"
       >
-        {{ $t('components.Sidebar.header.main') }}
+        {{ t('components.Sidebar.header.main') }}
       </h1>
       <div class="ui small hidden divider" />
       <section
@@ -394,7 +394,7 @@ onMounted(() => {
               @click="expanded = 'explore'"
               @focus="expanded = 'explore'"
             >
-              {{ $t('components.Sidebar.header.explore') }}
+              {{ t('components.Sidebar.header.explore') }}
               <i
                 v-if="expanded !== 'explore'"
                 class="angle right icon"
@@ -406,7 +406,7 @@ onMounted(() => {
                 :to="{name: 'search'}"
               >
                 <i class="search icon" />
-                {{ $t('components.Sidebar.link.search') }}
+                {{ t('components.Sidebar.link.search') }}
               </router-link>
               <router-link
                 class="item"
@@ -414,42 +414,42 @@ onMounted(() => {
                 active-class="_active"
               >
                 <i class="music icon" />
-                {{ $t('components.Sidebar.link.browse') }}
+                {{ t('components.Sidebar.link.browse') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.podcasts.browse'}"
               >
                 <i class="podcast icon" />
-                {{ $t('components.Sidebar.link.podcasts') }}
+                {{ t('components.Sidebar.link.podcasts') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.albums.browse'}"
               >
                 <i class="compact disc icon" />
-                {{ $t('components.Sidebar.link.albums') }}
+                {{ t('components.Sidebar.link.albums') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.artists.browse'}"
               >
                 <i class="user icon" />
-                {{ $t('components.Sidebar.link.artists') }}
+                {{ t('components.Sidebar.link.artists') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.playlists.browse'}"
               >
                 <i class="list icon" />
-                {{ $t('components.Sidebar.link.playlists') }}
+                {{ t('components.Sidebar.link.playlists') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.radios.browse'}"
               >
                 <i class="feed icon" />
-                {{ $t('components.Sidebar.link.radios') }}
+                {{ t('components.Sidebar.link.radios') }}
               </router-link>
             </div>
           </div>
@@ -464,7 +464,7 @@ onMounted(() => {
               @click="expanded = 'myLibrary'"
               @focus="expanded = 'myLibrary'"
             >
-              {{ $t('components.Sidebar.header.library') }}
+              {{ t('components.Sidebar.header.library') }}
               <i
                 v-if="expanded !== 'myLibrary'"
                 class="angle right icon"
@@ -476,42 +476,42 @@ onMounted(() => {
                 :to="{name: 'library.me'}"
               >
                 <i class="music icon" />
-                {{ $t('components.Sidebar.link.browse') }}
+                {{ t('components.Sidebar.link.browse') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.albums.me'}"
               >
                 <i class="compact disc icon" />
-                {{ $t('components.Sidebar.link.albums') }}
+                {{ t('components.Sidebar.link.albums') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.artists.me'}"
               >
                 <i class="user icon" />
-                {{ $t('components.Sidebar.link.artists') }}
+                {{ t('components.Sidebar.link.artists') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.playlists.me'}"
               >
                 <i class="list icon" />
-                {{ $t('components.Sidebar.link.playlists') }}
+                {{ t('components.Sidebar.link.playlists') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'library.radios.me'}"
               >
                 <i class="feed icon" />
-                {{ $t('components.Sidebar.link.radios') }}
+                {{ t('components.Sidebar.link.radios') }}
               </router-link>
               <router-link
                 class="item"
                 :to="{name: 'favorites'}"
               >
                 <i class="heart icon" />
-                {{ $t('components.Sidebar.link.favorites') }}
+                {{ t('components.Sidebar.link.favorites') }}
               </router-link>
             </div>
           </div>
@@ -520,11 +520,11 @@ onMounted(() => {
             class="header item"
             :to="{name: 'subscriptions'}"
           >
-            {{ $t('components.Sidebar.link.channels') }}
+            {{ t('components.Sidebar.link.channels') }}
           </router-link>
           <div class="item">
             <h3 class="header">
-              {{ $t('components.Sidebar.header.more') }}
+              {{ t('components.Sidebar.header.more') }}
             </h3>
             <div class="menu">
               <router-link
@@ -533,7 +533,7 @@ onMounted(() => {
                 active-class="router-link-exact-active active"
               >
                 <i class="info icon" />
-                {{ $t('components.Sidebar.link.about') }}
+                {{ t('components.Sidebar.link.about') }}
               </router-link>
             </div>
           </div>
@@ -545,7 +545,7 @@ onMounted(() => {
               to="/instance-chooser"
               class="link item"
             >
-              {{ $t('components.Sidebar.link.switchInstance') }}
+              {{ t('components.Sidebar.link.switchInstance') }}
             </router-link>
           </div>
         </nav>
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index a2bf872a6..367bff2b0 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -6,6 +6,9 @@ import useFormData from '~/composables/useFormData'
 import { ref, computed, reactive } from 'vue'
 import { useStore } from '~/store'
 import useLogger from '~/composables/useLogger'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 interface Props {
   group: SettingsGroup
@@ -111,7 +114,7 @@ const save = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.admin.SettingsGroup.header.error') }}
+        {{ t('components.admin.SettingsGroup.header.error') }}
       </h4>
       <ul class="list">
         <li
@@ -126,7 +129,7 @@ const save = async () => {
       v-if="result"
       class="ui positive message"
     >
-      {{ $t('components.admin.SettingsGroup.message.success') }}
+      {{ t('components.admin.SettingsGroup.message.success') }}
     </div>
     <div
       v-for="(setting, key) in settings"
@@ -240,13 +243,13 @@ const save = async () => {
         <div v-if="values[setting.identifier]">
           <div class="ui hidden divider" />
           <h3 class="ui header">
-            {{ $t('components.admin.SettingsGroup.header.image') }}
+            {{ t('components.admin.SettingsGroup.header.image') }}
           </h3>
           <img
             v-if="values[setting.identifier]"
             class="ui image"
             alt=""
-            :src="$store.getters['instance/absoluteUrl'](values[setting.identifier])"
+            :src="store.getters['instance/absoluteUrl'](values[setting.identifier])"
           >
         </div>
       </div>
@@ -255,7 +258,7 @@ const save = async () => {
       type="submit"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
     >
-      {{ $t('components.admin.SettingsGroup.button.save') }}
+      {{ t('components.admin.SettingsGroup.button.save') }}
     </button>
   </form>
 </template>
diff --git a/front/src/components/admin/SignupFormBuilder.vue b/front/src/components/admin/SignupFormBuilder.vue
index febddd3ee..ab953a0fc 100644
--- a/front/src/components/admin/SignupFormBuilder.vue
+++ b/front/src/components/admin/SignupFormBuilder.vue
@@ -69,13 +69,13 @@ const move = (idx: number, increment: number) => {
         :class="[{active: !isPreviewing}, 'item']"
         @click.stop.prevent="isPreviewing = false"
       >
-        {{ $t('components.admin.SignupFormBuilder.button.edit') }}
+        {{ t('components.admin.SignupFormBuilder.button.edit') }}
       </button>
       <button
         :class="[{active: isPreviewing}, 'item']"
         @click.stop.prevent="isPreviewing = true"
       >
-        {{ $t('components.admin.SignupFormBuilder.button.preview') }}
+        {{ t('components.admin.SignupFormBuilder.button.preview') }}
       </button>
     </div>
     <div
@@ -95,10 +95,10 @@ const move = (idx: number, increment: number) => {
     >
       <div class="field">
         <label for="help-text">
-          {{ $t('components.admin.SignupFormBuilder.label.helpText') }}
+          {{ t('components.admin.SignupFormBuilder.label.helpText') }}
         </label>
         <p>
-          {{ $t('components.admin.SignupFormBuilder.help.helpText') }}
+          {{ t('components.admin.SignupFormBuilder.help.helpText') }}
         </p>
         <content-form
           v-if="value.help_text"
@@ -109,24 +109,24 @@ const move = (idx: number, increment: number) => {
       </div>
       <div class="field">
         <label>
-          {{ $t('components.admin.SignupFormBuilder.label.additionalFields') }}
+          {{ t('components.admin.SignupFormBuilder.label.additionalFields') }}
         </label>
         <p>
-          {{ $t('components.admin.SignupFormBuilder.help.additionalFields') }}
+          {{ t('components.admin.SignupFormBuilder.help.additionalFields') }}
         </p>
         <table v-if="value.fields?.length > 0">
           <thead>
             <tr>
               <th>
-                {{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.label') }}
+                {{ t('components.admin.SignupFormBuilder.table.additionalFields.header.label') }}
               </th>
               <th>
-                {{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.type') }}
+                {{ t('components.admin.SignupFormBuilder.table.additionalFields.header.type') }}
               </th>
               <th>
-                {{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.required') }}
+                {{ t('components.admin.SignupFormBuilder.table.additionalFields.header.required') }}
               </th>
-              <th><span class="visually-hidden">{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.actions') }}</span></th>
+              <th><span class="visually-hidden">{{ t('components.admin.SignupFormBuilder.table.additionalFields.header.actions') }}</span></th>
             </tr>
           </thead>
           <tbody>
@@ -144,20 +144,20 @@ const move = (idx: number, increment: number) => {
               <td>
                 <select v-model="field.input_type">
                   <option value="short_text">
-                    {{ $t('components.admin.SignupFormBuilder.table.additionalFields.type.short') }}
+                    {{ t('components.admin.SignupFormBuilder.table.additionalFields.type.short') }}
                   </option>
                   <option value="long_text">
-                    {{ $t('components.admin.SignupFormBuilder.table.additionalFields.type.long') }}
+                    {{ t('components.admin.SignupFormBuilder.table.additionalFields.type.long') }}
                   </option>
                 </select>
               </td>
               <td>
                 <select v-model="field.required">
                   <option :value="true">
-                    {{ $t('components.admin.SignupFormBuilder.table.additionalFields.required.true') }}
+                    {{ t('components.admin.SignupFormBuilder.table.additionalFields.required.true') }}
                   </option>
                   <option :value="false">
-                    {{ $t('components.admin.SignupFormBuilder.table.additionalFields.required.false') }}
+                    {{ t('components.admin.SignupFormBuilder.table.additionalFields.required.false') }}
                   </option>
                 </select>
               </td>
@@ -192,7 +192,7 @@ const move = (idx: number, increment: number) => {
           class="ui basic button"
           @click.stop.prevent="addField"
         >
-          {{ $t('components.admin.SignupFormBuilder.button.add') }}
+          {{ t('components.admin.SignupFormBuilder.button.add') }}
         </button>
       </div>
     </div>
diff --git a/front/src/components/album/Card.vue b/front/src/components/album/Card.vue
index 922f2c4ea..042a27445 100644
--- a/front/src/components/album/Card.vue
+++ b/front/src/components/album/Card.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
 
 import type { Album } from '~/types'
 
@@ -9,6 +11,8 @@ interface Props {
   album: Album;
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const { album } = props
@@ -37,7 +41,7 @@ if (import.meta.env.PROD) {
       class="funkwhale link"
       @click.stop="navigate('artist')"
     >
-      {{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
+      {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
       {{ ac.joinphrase }}
     </a>
 
@@ -57,7 +61,7 @@ if (import.meta.env.PROD) {
     </router-link>
 
     <template #footer>
-      {{ $t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
+      {{ t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
       <fw-options-button />
     </template>
   </fw-card>
diff --git a/front/src/components/album/Widget.vue b/front/src/components/album/Widget.vue
index 518aa947a..8431e4f11 100644
--- a/front/src/components/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -3,6 +3,8 @@ import type { Album } from '~/types'
 
 import { reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import axios from 'axios'
 
@@ -10,6 +12,8 @@ import AlbumCard from '~/components/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+const { t } = useI18n()
+
 interface Props {
   filters: Record<string, string | boolean>
   showCount?: boolean
@@ -112,7 +116,7 @@ watch(
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        {{ $t('components.audio.album.Widget.button.more') }}
+        {{ t('components.audio.album.Widget.button.more') }}
       </button>
     </template>
   </div>
diff --git a/front/src/components/artist/Card.vue b/front/src/components/artist/Card.vue
index 9afe5e97f..054ca8f77 100644
--- a/front/src/components/artist/Card.vue
+++ b/front/src/components/artist/Card.vue
@@ -2,6 +2,8 @@
 import { useRouter } from 'vue-router'
 import { computed } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import type { Artist } from '~/types'
 
@@ -11,6 +13,8 @@ interface Props {
   artist: Artist;
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const { artist } = props
@@ -56,10 +60,10 @@ const imageUrl = computed(() => cover.value?.urls.original
 
     <template #footer>
         <span v-if="artist.content_category === 'music'">
-            {{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
+            {{ t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
         </span>
         <span v-else>
-            {{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
+            {{ t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
         </span>
     </template>
 
diff --git a/front/src/components/artist/Widget.vue b/front/src/components/artist/Widget.vue
index 6ee705a60..d98856ff1 100644
--- a/front/src/components/artist/Widget.vue
+++ b/front/src/components/artist/Widget.vue
@@ -3,6 +3,8 @@ import type { Artist } from '~/types'
 
 import { reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import axios from 'axios'
 
@@ -10,6 +12,8 @@ import ArtistCard from '~/components/artist/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+const { t } = useI18n()
+
 interface Props {
   filters: Record<string, string | boolean>
   search?: boolean
@@ -108,7 +112,7 @@ watch(
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        {{ $t('components.audio.artist.Widget.button.more') }}
+        {{ t('components.audio.artist.Widget.button.more') }}
       </button>
     </template>
   </div>
diff --git a/front/src/components/audio/ArtistCreditLabel.vue b/front/src/components/audio/ArtistCreditLabel.vue
index 465572d46..008ff9b47 100644
--- a/front/src/components/audio/ArtistCreditLabel.vue
+++ b/front/src/components/audio/ArtistCreditLabel.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { ArtistCredit } from '~/types'
+import { useStore } from '~/store'
+
+const store = useStore()
 
 interface Props {
   artistCredit: ArtistCredit[]
@@ -28,7 +31,7 @@ const getRoute = (ac: ArtistCredit) => {
       >
         <img
           v-if="ac.index === 0 && ac.artist.cover && ac.artist.cover.urls.original"
-          v-lazy="$store.getters['instance/absoluteUrl'](ac.artist.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](ac.artist.cover.urls.medium_square_crop)"
           alt=""
           :class="[{circular: ac.artist.content_category != 'podcast'}]"
         >
diff --git a/front/src/components/audio/ArtistLabel.vue b/front/src/components/audio/ArtistLabel.vue
index 58e6f7b23..e7244f805 100644
--- a/front/src/components/audio/ArtistLabel.vue
+++ b/front/src/components/audio/ArtistLabel.vue
@@ -2,6 +2,9 @@
 import type { Artist } from '~/types'
 
 import { computed } from 'vue'
+import { useStore } from '~/store'
+
+const store = useStore()
 
 interface Props {
   artist: Artist
@@ -22,7 +25,7 @@ const route = computed(() => props.artist.channel
   >
     <img
       v-if="artist.cover && artist.cover.urls.original"
-      v-lazy="$store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop)"
+      v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop)"
       alt=""
       :class="[{circular: artist.content_category != 'podcast'}]"
     >
diff --git a/front/src/components/audio/ChannelCard.vue b/front/src/components/audio/ChannelCard.vue
index 063d01556..c33dcb85e 100644
--- a/front/src/components/audio/ChannelCard.vue
+++ b/front/src/components/audio/ChannelCard.vue
@@ -5,6 +5,7 @@ import { momentFormat } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 import moment from 'moment'
 
@@ -17,6 +18,7 @@ interface Props {
 
 const props = defineProps<Props>()
 const store = useStore()
+const router = useRouter()
 
 const imageUrl = computed(() => props.object.artist?.cover
   ? store.getters['instance/absoluteUrl'](props.object.artist.cover.urls.medium_square_crop)
@@ -45,7 +47,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
     <div
       v-lazy:background-image="imageUrl"
       :class="['ui', 'head-image', {'circular': object.artist?.content_category != 'podcast'}, {'padded': object.artist?.content_category === 'podcast'}, 'image', {'default-cover': !object.artist?.cover}]"
-      @click="$router.push({name: 'channels.detail', params: {id: urlId}})"
+      @click="router.push({name: 'channels.detail', params: {id: urlId}})"
     >
       <play-button
         :icon-only="true"
@@ -68,10 +70,10 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
           v-if="object.artist?.content_category === 'podcast'"
           class="meta ellipsis"
         >
-          {{ $t('components.audio.ChannelCard.meta.episodes', object.artist.tracks_count) }}
+          {{ t('components.audio.ChannelCard.meta.episodes', object.artist.tracks_count) }}
         </span>
         <span v-else>
-          {{ $t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
+          {{ t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
         </span>
         <tags-list
           label-classes="tiny"
diff --git a/front/src/components/audio/ChannelEntries.vue b/front/src/components/audio/ChannelEntries.vue
index ece0c3440..d82aa972f 100644
--- a/front/src/components/audio/ChannelEntries.vue
+++ b/front/src/components/audio/ChannelEntries.vue
@@ -3,6 +3,7 @@ import type { Cover, Track, BackendResponse, BackendError } from '~/types'
 
 import { clone } from 'lodash-es'
 import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import PodcastTable from '~/components/audio/podcast/Table.vue'
@@ -18,6 +19,7 @@ interface Props {
   defaultCover: Cover | null
   isPodcast: boolean
 }
+const { t } = useI18n()
 
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
@@ -103,7 +105,7 @@ watch(page, fetchData, { immediate: true })
         @refresh="fetchData()"
       >
         <p>
-          {{ $t('components.audio.ChannelEntries.help.subscribe') }}
+          {{ t('components.audio.ChannelEntries.help.subscribe') }}
         </p>
       </empty-state>
     </template>
diff --git a/front/src/components/audio/ChannelEntryCard.vue b/front/src/components/audio/ChannelEntryCard.vue
index 894a7a5b6..4163fa2ee 100644
--- a/front/src/components/audio/ChannelEntryCard.vue
+++ b/front/src/components/audio/ChannelEntryCard.vue
@@ -5,10 +5,16 @@ import { computed } from 'vue'
 
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
+import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
+
 
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 
+const store = useStore()
+const router = useRouter()
+
 interface Props {
   entry: Track
   defaultCover: Cover
@@ -37,30 +43,30 @@ const duration = computed(() => props.entry.uploads.find(upload => upload.durati
     </div>
     <img
       v-if="cover && cover.urls.original"
-      v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
+      v-lazy="store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
       alt=""
       class="channel-image image"
-      @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
+      @click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
     >
     <img
       v-else-if="entry.artist_credit?.[0].artist.content_category === 'podcast' && defaultCover != undefined"
-      v-lazy="$store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
+      v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
       class="channel-image image"
-      @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
+      @click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
     >
     <img
       v-else-if="entry.album && entry.album.cover && entry.album.cover.urls.original"
-      v-lazy="$store.getters['instance/absoluteUrl'](entry.album.cover.urls.medium_square_crop)"
+      v-lazy="store.getters['instance/absoluteUrl'](entry.album.cover.urls.medium_square_crop)"
       alt=""
       class="channel-image image"
-      @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
+      @click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
     >
     <img
       v-else
       alt=""
       class="channel-image image"
       src="../../assets/audio/default-cover.png"
-      @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
+      @click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
     >
     <div class="ellipsis content">
       <strong>
@@ -78,7 +84,7 @@ const duration = computed(() => props.entry.uploads.find(upload => upload.durati
       />
     </div>
     <div class="meta">
-      <template v-if="$store.state.auth.authenticated && $store.getters['favorites/isFavorite'](entry.id)">
+      <template v-if="store.state.auth.authenticated && store.getters['favorites/isFavorite'](entry.id)">
         <track-favorite-icon
           class="tiny"
           :track="entry"
diff --git a/front/src/components/audio/ChannelForm.vue b/front/src/components/audio/ChannelForm.vue
index 3f01b1b25..2fd35dbfa 100644
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@@ -165,7 +165,7 @@ defineExpose({
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.audio.ChannelForm.header.error') }}
+        {{ t('components.audio.ChannelForm.header.error') }}
       </h4>
       <ul class="list">
         <li
@@ -182,7 +182,7 @@ defineExpose({
         class="ui grouped channel-type required field"
       >
         <legend>
-          {{ $t('components.audio.ChannelForm.legend.purpose') }}
+          {{ t('components.audio.ChannelForm.legend.purpose') }}
         </legend>
         <div class="ui hidden divider" />
         <div class="field">
@@ -210,7 +210,7 @@ defineExpose({
       <template v-if="!creating || step === 2">
         <div class="ui required field">
           <label for="channel-name">
-            {{ $t('components.audio.ChannelForm.label.name') }}
+            {{ t('components.audio.ChannelForm.label.name') }}
           </label>
           <input
             v-model="newValues.name"
@@ -221,7 +221,7 @@ defineExpose({
         </div>
         <div class="ui required field">
           <label for="channel-username">
-            {{ $t('components.audio.ChannelForm.label.username') }}
+            {{ t('components.audio.ChannelForm.label.username') }}
           </label>
           <div class="ui left labeled input">
             <div class="ui basic label">
@@ -238,7 +238,7 @@ defineExpose({
           <template v-if="creating">
             <div class="ui small hidden divider" />
             <p>
-              {{ $t('components.audio.ChannelForm.help.username') }}
+              {{ t('components.audio.ChannelForm.help.username') }}
             </p>
           </template>
         </div>
@@ -248,7 +248,7 @@ defineExpose({
             :image-class="newValues.content_category === 'podcast' ? '' : 'circular'"
             @delete="newValues.cover = null"
           >
-            {{ $t('components.audio.ChannelForm.label.image') }}
+            {{ t('components.audio.ChannelForm.label.image') }}
           </attachment-input>
         </div>
         <div class="ui small hidden divider" />
@@ -256,7 +256,7 @@ defineExpose({
           <div class="ten wide column">
             <div class="ui field">
               <label for="channel-tags">
-                {{ $t('components.audio.ChannelForm.label.tags') }}
+                {{ t('components.audio.ChannelForm.label.tags') }}
               </label>
               <tags-selector
                 id="channel-tags"
@@ -271,7 +271,7 @@ defineExpose({
           >
             <div class="ui required field">
               <label for="channel-language">
-                {{ $t('components.audio.ChannelForm.label.language') }}
+                {{ t('components.audio.ChannelForm.label.language') }}
               </label>
               <select
                 id="channel-language"
@@ -294,7 +294,7 @@ defineExpose({
         <div class="ui small hidden divider" />
         <div class="ui field">
           <label for="channel-name">
-            {{ $t('components.audio.ChannelForm.label.description') }}
+            {{ t('components.audio.ChannelForm.label.description') }}
           </label>
           <content-form v-model="newValues.description" />
         </div>
@@ -304,7 +304,7 @@ defineExpose({
         >
           <div class="ui required field">
             <label for="channel-itunes-category">
-              {{ $t('components.audio.ChannelForm.label.category') }}
+              {{ t('components.audio.ChannelForm.label.category') }}
             </label>
             <select
               id="itunes-category"
@@ -324,7 +324,7 @@ defineExpose({
           </div>
           <div class="ui field">
             <label for="channel-itunes-category">
-              {{ $t('components.audio.ChannelForm.label.subcategory') }}
+              {{ t('components.audio.ChannelForm.label.subcategory') }}
             </label>
             <select
               id="itunes-category"
@@ -349,7 +349,7 @@ defineExpose({
         >
           <div class="ui field">
             <label for="channel-itunes-email">
-              {{ $t('components.audio.ChannelForm.label.email') }}
+              {{ t('components.audio.ChannelForm.label.email') }}
             </label>
             <input
               id="channel-itunes-email"
@@ -360,7 +360,7 @@ defineExpose({
           </div>
           <div class="ui field">
             <label for="channel-itunes-name">
-              {{ $t('components.audio.ChannelForm.label.owner') }}
+              {{ t('components.audio.ChannelForm.label.owner') }}
             </label>
             <input
               id="channel-itunes-name"
@@ -371,7 +371,7 @@ defineExpose({
           </div>
         </div>
         <p>
-          {{ $t('components.audio.ChannelForm.help.podcastFields') }}
+          {{ t('components.audio.ChannelForm.help.podcastFields') }}
         </p>
       </template>
     </template>
@@ -380,7 +380,7 @@ defineExpose({
       class="ui active inverted dimmer"
     >
       <div class="ui text loader">
-        {{ $t('components.audio.ChannelForm.loader.loading') }}
+        {{ t('components.audio.ChannelForm.loader.loading') }}
       </div>
     </div>
   </form>
diff --git a/front/src/components/audio/ChannelSerieCard.vue b/front/src/components/audio/ChannelSerieCard.vue
index 60dc4d531..3de332eeb 100644
--- a/front/src/components/audio/ChannelSerieCard.vue
+++ b/front/src/components/audio/ChannelSerieCard.vue
@@ -3,6 +3,13 @@ import type { Album } from '~/types'
 
 import PlayButton from '~/components/audio/PlayButton.vue'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
+
+const { t } = useI18n()
+const store = useStore()
+const router = useRouter()
 
 interface Props {
   serie: Album
@@ -18,31 +25,31 @@ const cover = computed(() => props.serie?.cover ?? null)
     <div class="two-images">
       <img
         v-if="cover && cover.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
         alt=""
         class="channel-image"
-        @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
+        @click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
       >
       <img
         v-else
         alt=""
         class="channel-image"
         src="../../assets/audio/default-cover.png"
-        @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
+        @click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
       >
       <img
         v-if="cover && cover.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
         alt=""
         class="channel-image"
-        @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
+        @click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
       >
       <img
         v-else
         alt=""
         class="channel-image"
         src="../../assets/audio/default-cover.png"
-        @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
+        @click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
       >
     </div>
     <div class="content ellipsis">
@@ -56,7 +63,7 @@ const cover = computed(() => props.serie?.cover ?? null)
       </strong>
       <div class="description">
         <span>
-          {{ $t('components.audio.ChannelSerieCard.meta.episodes', serie.tracks_count) }}
+          {{ t('components.audio.ChannelSerieCard.meta.episodes', serie.tracks_count) }}
         </span>
       </div>
     </div>
diff --git a/front/src/components/audio/ChannelSeries.vue b/front/src/components/audio/ChannelSeries.vue
index da8b8329a..e8c5d1fa2 100644
--- a/front/src/components/audio/ChannelSeries.vue
+++ b/front/src/components/audio/ChannelSeries.vue
@@ -3,6 +3,7 @@ import type { BackendError, Album } from '~/types'
 
 import { clone } from 'lodash-es'
 import { ref, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
@@ -14,6 +15,8 @@ interface Props {
   limit?: number
 }
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<Props>(), {
   isPodcast: true,
   limit: 5
@@ -84,7 +87,7 @@ fetchData()
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        {{ $t('components.audio.ChannelSeries.button.showMore') }}
+        {{ t('components.audio.ChannelSeries.button.showMore') }}
       </button>
     </template>
     <template v-if="!isLoading && albums.length === 0">
@@ -93,7 +96,7 @@ fetchData()
         @refresh="fetchData()"
       >
         <p>
-          {{ $t('components.audio.ChannelSeries.help.subscribe') }}
+          {{ t('components.audio.ChannelSeries.help.subscribe') }}
         </p>
       </empty-state>
     </template>
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index 9f118ba84..d75e96379 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -3,6 +3,7 @@ import type { BackendError, BackendResponse, Channel } from '~/types'
 
 import { ref, reactive } from 'vue'
 import { clone } from 'lodash-es'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -17,6 +18,8 @@ interface Props {
   limit?: number
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   limit: 5
@@ -77,7 +80,7 @@ fetchData()
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        {{ $t('components.audio.ChannelsWidget.button.showMore') }}
+        {{ t('components.audio.ChannelsWidget.button.showMore') }}
       </button>
     </template>
     <template v-if="!isLoading && channels.length === 0">
diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue
index 266ba4c7d..826ffb1ee 100644
--- a/front/src/components/audio/EmbedWizard.vue
+++ b/front/src/components/audio/EmbedWizard.vue
@@ -3,12 +3,15 @@ import { get } from 'lodash-es'
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
 import { useClipboard } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   type: string
   id: number
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 const width = ref(null)
 const height = ref(150)
@@ -51,20 +54,20 @@ const { copy, copied } = useClipboard({ source: embedCode })
     >
       <p>
         <strong>
-          {{ $t('components.audio.EmbedWizard.warning.anonymous') }}
+          {{ t('components.audio.EmbedWizard.warning.anonymous') }}
         </strong>
       </p>
       <p>
-        {{ $t('components.audio.EmbedWizard.help.anonymous') }}
+        {{ t('components.audio.EmbedWizard.help.anonymous') }}
       </p>
     </div>
     <div class="ui form">
       <div class="two fields">
         <div class="field">
           <div class="field">
-            <label for="embed-width">{{ $t('components.audio.EmbedWizard.label.width') }}</label>
+            <label for="embed-width">{{ t('components.audio.EmbedWizard.label.width') }}</label>
             <p>
-              {{ $t('components.audio.EmbedWizard.help.width') }}
+              {{ t('components.audio.EmbedWizard.help.width') }}
             </p>
             <input
               id="embed-width"
@@ -77,7 +80,7 @@ const { copy, copied } = useClipboard({ source: embedCode })
           <template v-if="type != 'track'">
             <br>
             <div class="field">
-              <label for="embed-height">{{ $t('components.audio.EmbedWizard.label.height') }}</label>
+              <label for="embed-height">{{ t('components.audio.EmbedWizard.label.height') }}</label>
               <input
                 id="embed-height"
                 v-model="height"
@@ -95,11 +98,11 @@ const { copy, copied } = useClipboard({ source: embedCode })
             @click="copy()"
           >
             <i class="copy icon" />
-            {{ $t('components.audio.EmbedWizard.button.copy') }}
+            {{ t('components.audio.EmbedWizard.button.copy') }}
           </button>
-          <label for="embed-width">{{ $t('components.audio.EmbedWizard.label.embed') }}</label>
+          <label for="embed-width">{{ t('components.audio.EmbedWizard.label.embed') }}</label>
           <p>
-            {{ $t('components.audio.EmbedWizard.help.embed') }}
+            {{ t('components.audio.EmbedWizard.help.embed') }}
           </p>
           <textarea
             v-model="embedCode"
@@ -111,7 +114,7 @@ const { copy, copied } = useClipboard({ source: embedCode })
               v-if="copied"
               class="message"
             >
-              {{ $t('components.audio.EmbedWizard.message.copy') }}
+              {{ t('components.audio.EmbedWizard.message.copy') }}
             </p>
           </div>
         </div>
@@ -123,7 +126,7 @@ const { copy, copied } = useClipboard({ source: embedCode })
           :href="iframeSrc"
           target="_blank"
         >
-          {{ $t('components.audio.EmbedWizard.header.preview') }}
+          {{ t('components.audio.EmbedWizard.header.preview') }}
         </a>
       </h3>
       <iframe
diff --git a/front/src/components/audio/LibraryFollowButton.vue b/front/src/components/audio/LibraryFollowButton.vue
index f2416b4a3..0043a8270 100644
--- a/front/src/components/audio/LibraryFollowButton.vue
+++ b/front/src/components/audio/LibraryFollowButton.vue
@@ -3,6 +3,7 @@ import type { Library } from '~/types'
 
 import { computed } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'unfollowed'): void
@@ -13,6 +14,7 @@ interface Props {
   library: Library
 }
 
+const { t } = useI18n()
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -39,13 +41,13 @@ const toggle = () => {
   >
     <i class="heart icon" />
     <span v-if="isApproved">
-      {{ $t('components.audio.LibraryFollowButton.button.unfollow') }}
+      {{ t('components.audio.LibraryFollowButton.button.unfollow') }}
     </span>
     <span v-else-if="isPending">
-      {{ $t('components.audio.LibraryFollowButton.button.cancel') }}
+      {{ t('components.audio.LibraryFollowButton.button.cancel') }}
     </span>
     <span v-else>
-      {{ $t('components.audio.LibraryFollowButton.button.follow') }}
+      {{ t('components.audio.LibraryFollowButton.button.follow') }}
     </span>
   </button>
 </template>
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 2d27757d2..af105f4fc 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -8,6 +8,9 @@ import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
 import { useCurrentElement } from '@vueuse/core'
 import { setupDropdown } from '~/utils/fomantic'
+import { useStore } from '~/store'
+import { useRouter, useRoute } from 'vue-router'
+
 
 interface Props extends PlayOptionsProps {
   dropdownIconClasses?: string[]
@@ -64,6 +67,10 @@ const {
 const { report, getReportableObjects } = useReport()
 
 const { t } = useI18n()
+const store = useStore()
+const router = useRouter()
+const route = useRoute()
+
 const labels = computed(() => ({
   playNow: t('components.audio.PlayButton.button.playNow'),
   addToQueue: t('components.audio.PlayButton.button.addToQueue'),
@@ -139,7 +146,7 @@ const openMenu = () => {
         v-else
         :class="[playIconClass, 'icon']"
       />
-      <template v-if="!discrete && !iconOnly">&nbsp;<slot>{{ $t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
+      <template v-if="!discrete && !iconOnly">&nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
     </button>
     <button
       v-if="!discrete && !iconOnly"
@@ -180,7 +187,7 @@ const openMenu = () => {
           class="item basic"
           :disabled="!playable"
           :title="labels.startRadio"
-          @click.stop.prevent="$store.dispatch('radios/start', {type: 'similar', objectId: track?.id})"
+          @click.stop.prevent="store.dispatch('radios/start', {type: 'similar', objectId: track?.id})"
         >
           <i class="feed icon" />{{ labels.startRadio }}
         </button>
@@ -188,22 +195,22 @@ const openMenu = () => {
           v-if="track"
           class="item basic"
           :disabled="!playable"
-          @click.stop="$store.commit('playlists/chooseTrack', track)"
+          @click.stop="store.commit('playlists/chooseTrack', track)"
         >
           <i class="list icon" />
           {{ labels.addToPlaylist }}
         </button>
         <button
-          v-if="track && $route.name !== 'library.tracks.detail'"
+          v-if="track && route.name !== 'library.tracks.detail'"
           class="item basic"
-          @click.stop.prevent="$router.push(`/library/tracks/${track?.id}/`)"
+          @click.stop.prevent="router.push(`/library/tracks/${track?.id}/`)"
         >
           <i class="info icon" />
           <span v-if="track.artist_credit?.some(ac => ac.artist.content_category === 'podcast')">
-            {{ $t('components.audio.PlayButton.button.episodeDetails') }}
+            {{ t('components.audio.PlayButton.button.episodeDetails') }}
           </span>
           <span v-else>
-            {{ $t('components.audio.PlayButton.button.trackDetails') }}
+            {{ t('components.audio.PlayButton.button.trackDetails') }}
           </span>
         </button>
         <div class="divider" />
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 1a8def1ff..1d1f3c45e 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -6,6 +6,7 @@ import { useMouse, useWindowSize } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import time from '~/utils/time'
@@ -43,6 +44,7 @@ const {
 } = useQueue()
 
 const store = useStore()
+const router = useRouter()
 const { t } = useI18n()
 
 const toggleMobilePlayer = () => {
@@ -156,12 +158,12 @@ const hideArtist = () => {
         <div class="controls track-controls queue-not-focused desktop-and-up">
           <div
             class="ui tiny image"
-            @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})"
+            @click.stop.prevent="router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})"
           >
             <img
               ref="cover"
               alt=""
-              :src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
+              :src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
             >
           </div>
           <div
@@ -188,7 +190,7 @@ const hideArtist = () => {
                     :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
                     @click.stop.prevent=""
                   >
-                    {{ ac.credit ?? $t('components.audio.Player.meta.unknownArtist') }}
+                    {{ ac.credit ?? t('components.audio.Player.meta.unknownArtist') }}
                   </router-link>
                   <span>{{ ac.joinphrase }}</span>
                 </template>
@@ -200,7 +202,7 @@ const hideArtist = () => {
                   :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
                   @click.stop.prevent=""
                 >
-                  {{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}
+                  {{ currentTrack.albumTitle ?? t('components.audio.Player.meta.unknownAlbum') }}
                 </router-link>
               </template>
             </div>
@@ -211,7 +213,7 @@ const hideArtist = () => {
             <img
               ref="cover"
               alt=""
-              :src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
+              :src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
             >
           </div>
           <div class="middle aligned content ellipsis">
@@ -223,18 +225,18 @@ const hideArtist = () => {
                 v-for="ac in currentTrack.artistCredit"
                 :key="ac.artist.id"
               >
-                {{ ac.credit ?? $t('components.audio.Player.meta.unknownArtist') }}
+                {{ ac.credit ?? t('components.audio.Player.meta.unknownArtist') }}
                 <span>{{ ac.joinphrase }}</span>
               </div>
               <template v-if="currentTrack.albumId !== -1">
                 <span class="middle slash symbol" />
-                {{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}
+                {{ currentTrack.albumTitle ?? t('components.audio.Player.meta.unknownAlbum') }}
               </template>
             </div>
           </div>
         </div>
         <div
-          v-if="$store.state.auth.authenticated"
+          v-if="store.state.auth.authenticated"
           class="controls desktop-and-up fluid align-right"
         >
           <track-favorite-icon
@@ -340,7 +342,7 @@ const hideArtist = () => {
               </button>
 
               <button
-                v-if="$store.state.ui.queueFocused"
+                v-if="store.state.ui.queueFocused"
                 class="circular control button close-control desktop-and-up"
                 @click.stop="toggleMobilePlayer"
               >
@@ -354,14 +356,14 @@ const hideArtist = () => {
                 <i class="large up angle icon" />
               </button>
               <button
-                v-if="$store.state.ui.queueFocused === 'player'"
+                v-if="store.state.ui.queueFocused === 'player'"
                 class="circular control button close-control desktop-and-below"
                 @click.stop="switchTab"
               >
                 <i class="large up angle icon" />
               </button>
               <button
-                v-if="$store.state.ui.queueFocused === 'queue'"
+                v-if="store.state.ui.queueFocused === 'queue'"
                 class="circular control button desktop-and-below"
                 @click.stop="switchTab"
               >
@@ -370,7 +372,7 @@ const hideArtist = () => {
             </div>
             <button
               class="circular control button close-control desktop-and-below"
-              @click.stop="$store.commit('ui/queueFocused', null)"
+              @click.stop="store.commit('ui/queueFocused', null)"
             >
               <i class="x icon" />
             </button>
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index f34b94343..87660fe11 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -74,7 +74,7 @@ const labels = computed(() => ({
   <div>
   /front/src/components/audio/Search.vue
     <h2>
-      {{ $t('components.audio.Search.header.search') }}
+      {{ t('components.audio.Search.header.search') }}
     </h2>
     <div :class="['ui', {'loading': isLoading }, 'search']">
       <div class="ui icon big input">
@@ -90,7 +90,7 @@ const labels = computed(() => ({
     </div>
     <template v-if="query.length > 0">
       <h3 class="ui title">
-        {{ $t('components.audio.Search.header.artists') }}
+        {{ t('components.audio.Search.header.artists') }}
       </h3>
       <div v-if="results.artists.length > 0">
         <div class="ui cards">
@@ -102,12 +102,12 @@ const labels = computed(() => ({
         </div>
       </div>
       <p v-else>
-        {{ $t('components.audio.Search.empty.noArtists') }}
+        {{ t('components.audio.Search.empty.noArtists') }}
       </p>
     </template>
     <template v-if="query.length > 0">
       <h3 class="ui title">
-        {{ $t('components.audio.Search.header.albums') }}
+        {{ t('components.audio.Search.header.albums') }}
       </h3>
       <div
         v-if="results.albums.length > 0"
@@ -125,7 +125,7 @@ const labels = computed(() => ({
         </div>
       </div>
       <p v-else>
-        {{ $t('components.audio.Search.empty.noAlbums') }}
+        {{ t('components.audio.Search.empty.noAlbums') }}
       </p>
     </template>
   </div>
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index cb5ec705a..f8f312fc5 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -6,11 +6,14 @@ import TagsList from '~/components/tags/List.vue'
 import { computed } from 'vue'
 import { useStore } from '~/store'
 import { truncate } from '~/utils/filters'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   artist: Artist
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const cover = computed(() => !props.artist.cover?.urls.original
@@ -63,10 +66,10 @@ const imageUrl = computed(() => cover.value?.urls.original
     </div>
     <div class="extra content">
       <span v-if="artist.content_category === 'music'">
-        {{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
+        {{ t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
       </span>
       <span v-else>
-        {{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
+        {{ t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
       </span>
       <play-button
         class="right floated basic icon"
diff --git a/front/src/components/audio/podcast/MobileRow.vue b/front/src/components/audio/podcast/MobileRow.vue
index 1a4cd91b5..bde6ad4ec 100644
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@@ -7,6 +7,8 @@ import { useI18n } from 'vue-i18n'
 
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
+import { useStore } from '~/store'
+
 
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 
@@ -54,6 +56,8 @@ const { isPlaying } = usePlayer()
 const { activateTrack } = usePlayOptions(props)
 
 const { t } = useI18n()
+const store = useStore()
+
 const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.button.actions'))
 </script>
 
@@ -71,13 +75,13 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
     >
       <img
         v-if="track.album?.cover?.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.cover"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
@@ -136,7 +140,7 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
       </p>
     </div>
     <div
-      v-if="$store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
+      v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
       :class="[
         'meta',
         'right',
diff --git a/front/src/components/audio/podcast/Modal.vue b/front/src/components/audio/podcast/Modal.vue
index 5afd036f6..c4839480f 100644
--- a/front/src/components/audio/podcast/Modal.vue
+++ b/front/src/components/audio/podcast/Modal.vue
@@ -4,6 +4,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 // import type { Track } from '~/types'
 
 import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref } from 'vue'
@@ -55,11 +56,13 @@ const show = useVModel(props, 'show', emit)
 
 const { report, getReportableObjects } = useReport()
 const { enqueue, enqueueNext } = usePlayOptions(props)
+
 const store = useStore()
+const router = useRouter()
+const { t } = useI18n()
 
 const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
 
-const { t } = useI18n()
 const favoriteButton = computed(() => isFavorite.value
   ? t('components.audio.podcast.Modal.button.removeFromFavorites')
   : t('components.audio.podcast.Modal.button.addToFavorites')
@@ -101,7 +104,7 @@ const labels = computed(() => ({
         <img
           v-if="track.album && track.album.cover && track.album.cover.urls.original"
           v-lazy="
-            $store.getters['instance/absoluteUrl'](
+            store.getters['instance/absoluteUrl'](
               track.album.cover.urls.medium_square_crop
             )
           "
@@ -111,7 +114,7 @@ const labels = computed(() => ({
         <img
           v-else-if="track.cover"
           v-lazy="
-            $store.getters['instance/absoluteUrl'](
+            store.getters['instance/absoluteUrl'](
               track.cover.urls.medium_square_crop
             )
           "
@@ -144,7 +147,7 @@ const labels = computed(() => ({
     <div class="content">
       <div class="ui one column unstackable grid">
         <div
-          v-if="$store.state.auth.authenticated && track.artist_credit?.[0].artist?.content_category !== 'podcast'"
+          v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist?.content_category !== 'podcast'"
           class="row"
         >
           <div
@@ -152,7 +155,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="favoriteButton"
-            @click.stop="$store.dispatch('favorites/toggle', track.id)"
+            @click.stop="store.dispatch('favorites/toggle', track.id)"
           >
             <i
               :class="[
@@ -202,7 +205,7 @@ const labels = computed(() => ({
             role="button"
             :aria-label="labels.startRadio"
             @click.stop.prevent="
-              $store.dispatch('radios/start', {
+              store.dispatch('radios/start', {
                 type: 'similar',
                 objectId: track.id,
               });
@@ -218,7 +221,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.addToPlaylist"
-            @click.stop="$store.commit('playlists/chooseTrack', track)"
+            @click.stop="store.commit('playlists/chooseTrack', track)"
           >
             <i class="list icon track-modal list-icon" />
             <span class="track-modal list-item">{{
@@ -236,7 +239,7 @@ const labels = computed(() => ({
             role="button"
             :aria-label="albumDetailsButton"
             @click.prevent.exact="
-              $router.push({
+              router.push({
                 name: 'library.albums.detail',
                 params: { id: track.album?.id },
               })
@@ -258,7 +261,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="artistDetailsButton"
-            @click.prevent.exact="$router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
+            @click.prevent.exact="router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
           >
             <i class="user icon track-modal list-icon" />
             <span class="track-modal list-item">{{ ac.artist.name }}</span>
@@ -271,7 +274,7 @@ const labels = computed(() => ({
             role="button"
             :aria-label="trackDetailsButton"
             @click.prevent.exact="
-              $router.push({
+              router.push({
                 name: 'library.tracks.detail',
                 params: { id: track.id },
               })
diff --git a/front/src/components/audio/podcast/Row.vue b/front/src/components/audio/podcast/Row.vue
index b9b4ae35e..80f326fc5 100644
--- a/front/src/components/audio/podcast/Row.vue
+++ b/front/src/components/audio/podcast/Row.vue
@@ -5,6 +5,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 import { ref } from 'vue'
 
 import { useQueue } from '~/composables/audio/queue'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -48,6 +49,8 @@ const props = withDefaults(defineProps<Props>(), {
   account: null
 })
 
+const store = useStore()
+
 const description = ref('')
 const renderedDescription = useMarkdown(description)
 
@@ -83,13 +86,13 @@ await fetchData()
     >
       <img
         v-if="track.cover?.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="defaultCover"
-        v-lazy="$store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index 248d95d28..4c7f80ffd 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -7,6 +7,8 @@ import { useI18n } from 'vue-i18n'
 
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
+import { useStore } from '~/store'
+
 
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 
@@ -54,6 +56,8 @@ const { isPlaying } = usePlayer()
 const { activateTrack } = usePlayOptions(props)
 
 const { t } = useI18n()
+const store = useStore()
+
 const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.button.actions'))
 </script>
 
@@ -71,13 +75,13 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
     >
       <img
         v-if="track.album?.cover?.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.cover"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
@@ -119,7 +123,7 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
       </p>
     </div>
     <div
-      v-if="$store.state.auth.authenticated"
+      v-if="store.state.auth.authenticated"
       :class="[
         'meta',
         'right',
diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index f96d3fc7a..6ded87397 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -4,6 +4,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 // import type { Track } from '~/types'
 
 import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref } from 'vue'
@@ -59,6 +60,8 @@ const store = useStore()
 const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
 
 const { t } = useI18n()
+const router = useRouter()
+
 const favoriteButton = computed(() => isFavorite.value
   ? t('components.audio.track.Modal.button.removeFromFavorites')
   : t('components.audio.track.Modal.button.addToFavorites')
@@ -99,13 +102,13 @@ const labels = computed(() => ({
       <div class="ui large centered rounded image">
         <img
           v-if="track.album?.cover?.urls.original"
-          v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
           alt=""
           class="ui centered image"
         >
         <img
           v-else-if="track.cover"
-          v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
           alt=""
           class="ui centered image"
         >
@@ -133,7 +136,7 @@ const labels = computed(() => ({
     <div class="content">
       <div class="ui one column unstackable grid">
         <div
-          v-if="$store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
+          v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
           class="row"
         >
           <div
@@ -141,7 +144,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="favoriteButton"
-            @click.stop="$store.dispatch('favorites/toggle', track.id)"
+            @click.stop="store.dispatch('favorites/toggle', track.id)"
           >
             <i :class="[ 'heart', 'favorite-icon', { favorited: isFavorite, pink: isFavorite }, 'icon', 'track-modal', 'list-icon' ]" />
             <span class="track-modal list-item">{{ favoriteButton }}</span>
@@ -174,7 +177,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.startRadio"
-            @click.stop.prevent="() => { $store.dispatch('radios/start', { type: 'similar', objectId: track.id }); modal.closeModal() }"
+            @click.stop.prevent="() => { store.dispatch('radios/start', { type: 'similar', objectId: track.id }); modal.closeModal() }"
           >
             <i class="rss icon track-modal list-icon" />
             <span class="track-modal list-item">{{ labels.startRadio }}</span>
@@ -185,7 +188,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.addToPlaylist"
-            @click.stop="$store.commit('playlists/chooseTrack', track)"
+            @click.stop="store.commit('playlists/chooseTrack', track)"
           >
             <i class="list icon track-modal list-icon" />
             <span class="track-modal list-item">
@@ -202,7 +205,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="albumDetailsButton"
-            @click.prevent.exact="$router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
+            @click.prevent.exact="router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
           >
             <i class="compact disc icon track-modal list-icon" />
             <span class="track-modal list-item">{{ albumDetailsButton }}</span>
@@ -218,7 +221,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="artistDetailsButton"
-            @click.prevent.exact="$router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
+            @click.prevent.exact="router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
           >
             <i class="user icon track-modal list-icon" />
             <span class="track-modal list-item">{{ ac.credit }}</span>
@@ -230,7 +233,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="trackDetailsButton"
-            @click.prevent.exact="$router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
+            @click.prevent.exact="router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
           >
             <i class="info icon track-modal list-icon" />
             <span class="track-modal list-item">{{ trackDetailsButton }}</span>
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 8957b02c9..49855bacc 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -11,6 +11,10 @@ import PlayIndicator from '~/components/audio/track/PlayIndicator.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
+import { useStore } from '~/store'
+
+
+const store = useStore()
 
 interface Props extends PlayOptionsProps {
   track: Track
@@ -119,19 +123,19 @@ const hover = ref(false)
     >
       <img
         v-if="track.album?.cover?.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.cover?.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.artist_credit?.length && track.artist_credit[0].artist.cover?.urls.original"
-        v-lazy="$store.getters['instance/absoluteUrl'](track.artist_credit[0].artist.cover.urls.medium_square_crop) "
+        v-lazy="store.getters['instance/absoluteUrl'](track.artist_credit[0].artist.cover.urls.medium_square_crop) "
         alt=""
         class="ui artist-track mini image"
       >
@@ -183,7 +187,7 @@ const hover = ref(false)
       </template>
     </div>
     <div
-      v-if="$store.state.auth.authenticated"
+      v-if="store.state.auth.authenticated"
       class="meta right floated column"
     >
       <track-favorite-icon
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 64f5352de..d2b61b350 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -4,6 +4,8 @@ import type { Track } from '~/types'
 import { useI18n } from 'vue-i18n'
 import { clone, uniqBy } from 'lodash-es'
 import { ref, computed } from 'vue'
+import { useStore } from '~/store'
+
 
 import axios from 'axios'
 
@@ -84,6 +86,8 @@ const allTracks = computed(() => {
 })
 
 const { t } = useI18n()
+const store = useStore()
+
 const labels = computed(() => ({
   title: t('components.audio.track.Table.table.header.title'),
   album: t('components.audio.track.Table.table.header.album'),
@@ -202,7 +206,7 @@ const updatePage = (page: number) => {
             <b>{{ labels.artist }}</b>
           </div>
           <div
-            v-if="$store.state.auth.authenticated"
+            v-if="store.state.auth.authenticated"
             class="meta right floated column"
           />
           <div
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index b5e892bce..053c52da7 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -4,6 +4,7 @@ import type { Track, Listening } from '~/types'
 import { ref, reactive, watch } from 'vue'
 import { useStore } from '~/store'
 import { clone } from 'lodash-es'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -39,6 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore()
+const { t } = useI18n()
 
 const objects = reactive([] as Listening[])
 const count = ref(0)
@@ -110,12 +112,12 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         <div class="ui tiny image">
           <img
             v-if="object.track.album && object.track.album.cover"
-            v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
+            v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
             alt=""
           >
           <img
             v-else-if="object.track.cover"
-            v-lazy="$store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
+            v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
             alt=""
           >
           <img
@@ -206,7 +208,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     >
       <div class="ui icon header">
         <i class="music icon" />
-        {{ $t('components.audio.track.Widget.empty.noResults') }}
+        {{ t('components.audio.track.Widget.empty.noResults') }}
       </div>
       <div
         v-if="isLoading"
@@ -221,7 +223,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage as string)"
       >
-        {{ $t('components.audio.track.Widget.button.more') }}
+        {{ t('components.audio.track.Widget.button.more') }}
       </button>
     </template>
   </div>
diff --git a/front/src/components/auth/ApplicationEdit.vue b/front/src/components/auth/ApplicationEdit.vue
index 4c2303042..c58852768 100644
--- a/front/src/components/auth/ApplicationEdit.vue
+++ b/front/src/components/auth/ApplicationEdit.vue
@@ -72,17 +72,17 @@ store.state.auth.applicationSecret = undefined
         </div>
         <template v-else>
           <router-link :to="{name: 'settings'}">
-            {{ $t('components.auth.ApplicationEdit.link.settings') }}
+            {{ t('components.auth.ApplicationEdit.link.settings') }}
           </router-link>
           <h2 class="ui header">
-            {{ $t('components.auth.ApplicationEdit.header.appDetails') }}
+            {{ t('components.auth.ApplicationEdit.header.appDetails') }}
           </h2>
           <div class="ui form">
             <p>
-              {{ $t('components.auth.ApplicationEdit.help.appDetails') }}
+              {{ t('components.auth.ApplicationEdit.help.appDetails') }}
             </p>
             <div class="field">
-              <label for="copy-id">{{ $t('components.auth.ApplicationEdit.label.appId') }}</label>
+              <label for="copy-id">{{ t('components.auth.ApplicationEdit.label.appId') }}</label>
               <copy-input
                 id="copy-id"
                 :value="application.client_id"
@@ -94,14 +94,14 @@ store.state.auth.applicationSecret = undefined
             >
               <div class="ui small warning message">
                 <h3 class="header">
-                  {{ $t('components.auth.ApplicationEdit.header.appSecretWarning') }}
+                  {{ t('components.auth.ApplicationEdit.header.appSecretWarning') }}
                 </h3>
                 <p>
-                  {{ $t('components.auth.ApplicationEdit.message.appSecretWarning') }}
+                  {{ t('components.auth.ApplicationEdit.message.appSecretWarning') }}
                 </p>
               </div>
 
-              <label for="copy-secret">{{ $t('components.auth.ApplicationEdit.label.appSecret') }}</label>
+              <label for="copy-secret">{{ t('components.auth.ApplicationEdit.label.appSecret') }}</label>
               <copy-input
                 id="copy-secret"
                 :value="secret"
@@ -111,7 +111,7 @@ store.state.auth.applicationSecret = undefined
               v-if="application.token != undefined"
               class="field"
             >
-              <label for="copy-secret">{{ $t('components.auth.ApplicationEdit.label.accessToken') }}</label>
+              <label for="copy-secret">{{ t('components.auth.ApplicationEdit.label.accessToken') }}</label>
               <copy-input
                 id="copy-secret"
                 :value="application.token"
@@ -121,12 +121,12 @@ store.state.auth.applicationSecret = undefined
                 @click.prevent="refreshToken"
               >
                 <i class="refresh icon" />
-                {{ $t('components.auth.ApplicationEdit.button.regenerateToken') }}
+                {{ t('components.auth.ApplicationEdit.button.regenerateToken') }}
               </a>
             </div>
           </div>
           <h2 class="ui header">
-            {{ $t('components.auth.ApplicationEdit.header.editApp') }}
+            {{ t('components.auth.ApplicationEdit.header.editApp') }}
           </h2>
           <application-form
             :app="application"
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
index ceb59ab49..5ed9ff249 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -120,7 +120,7 @@ const allScopes = computed(() => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.auth.ApplicationForm.header.failure') }}
+        {{ t('components.auth.ApplicationForm.header.failure') }}
       </h4>
       <ul class="list">
         <li
@@ -132,7 +132,7 @@ const allScopes = computed(() => {
       </ul>
     </div>
     <div class="ui field">
-      <label for="application-name">{{ $t('components.auth.ApplicationForm.label.name') }}</label>
+      <label for="application-name">{{ t('components.auth.ApplicationForm.label.name') }}</label>
       <input
         id="application-name"
         v-model="fields.name"
@@ -142,7 +142,7 @@ const allScopes = computed(() => {
       >
     </div>
     <div class="ui field">
-      <label for="redirect-uris">{{ $t('components.auth.ApplicationForm.label.redirectUri') }}</label>
+      <label for="redirect-uris">{{ t('components.auth.ApplicationForm.label.redirectUri') }}</label>
       <input
         id="redirect-uris"
         v-model="fields.redirect_uris"
@@ -150,13 +150,13 @@ const allScopes = computed(() => {
         type="text"
       >
       <p class="help">
-        {{ $t('components.auth.ApplicationForm.help.redirectUri') }}
+        {{ t('components.auth.ApplicationForm.help.redirectUri') }}
       </p>
     </div>
     <div class="ui field">
-      <label>{{ $t('components.auth.ApplicationForm.label.scopes.label') }}</label>
+      <label>{{ t('components.auth.ApplicationForm.label.scopes.label') }}</label>
       <p>
-        {{ $t('components.auth.ApplicationForm.label.scopes.description') }}
+        {{ t('components.auth.ApplicationForm.label.scopes.description') }}
       </p>
       <div class="ui stackable two column grid">
         <div
@@ -203,10 +203,10 @@ const allScopes = computed(() => {
       type="submit"
     >
       <span v-if="app !== null">
-        {{ $t('components.auth.ApplicationForm.button.update') }}
+        {{ t('components.auth.ApplicationForm.button.update') }}
       </span>
       <span v-else>
-        {{ $t('components.auth.ApplicationForm.button.create') }}
+        {{ t('components.auth.ApplicationForm.button.create') }}
       </span>
     </button>
   </form>
diff --git a/front/src/components/auth/ApplicationNew.vue b/front/src/components/auth/ApplicationNew.vue
index 9cb2ac956..79ac5957c 100644
--- a/front/src/components/auth/ApplicationNew.vue
+++ b/front/src/components/auth/ApplicationNew.vue
@@ -58,7 +58,7 @@ const created = (application: Application) => {
     <div class="ui vertical stripe segment">
       <section class="ui text container">
         <router-link :to="{name: 'settings'}">
-          {{ $t('components.auth.ApplicationNew.link.settings') }}
+          {{ t('components.auth.ApplicationNew.link.settings') }}
         </router-link>
         <h2 class="ui header">
           {{ labels.title }}
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
index f56709640..23ef5d99a 100644
--- a/front/src/components/auth/Authorize.vue
+++ b/front/src/components/auth/Authorize.vue
@@ -119,7 +119,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          <i class="lock open icon" />{{ $t('components.auth.Authorize.header.authorize') }}
+          <i class="lock open icon" />{{ t('components.auth.Authorize.header.authorize') }}
         </h2>
         <div
           v-if="errors.length > 0"
@@ -130,13 +130,13 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
             v-if="application"
             class="header"
           >
-            {{ $t('components.auth.Authorize.header.authorizeFailure') }}
+            {{ t('components.auth.Authorize.header.authorizeFailure') }}
           </h4>
           <h4
             v-else
             class="header"
           >
-            {{ $t('components.auth.Authorize.header.fetchFailure') }}
+            {{ t('components.auth.Authorize.header.fetchFailure') }}
           </h4>
           <ul class="list">
             <li
@@ -159,7 +159,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
           @submit.prevent="submit"
         >
           <h3>
-            {{ $t('components.auth.Authorize.header.access', {app_name: application.name}) }}
+            {{ t('components.auth.Authorize.header.access', {app_name: application.name}) }}
           </h3>
 
           <h4
@@ -172,20 +172,20 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
               <i class="pencil icon" />
-              {{ $t('components.auth.Authorize.header.writeOnly') }}
+              {{ t('components.auth.Authorize.header.writeOnly') }}
             </span>
             <span
               v-else-if="!topic.write && topic.read"
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
-              {{ $t('components.auth.Authorize.header.readOnly') }}
+              {{ t('components.auth.Authorize.header.readOnly') }}
             </span>
             <span
               v-else-if="topic.write && topic.read"
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
               <i class="pencil icon" />
-              {{ $t('components.auth.Authorize.header.allScopes') }}
+              {{ t('components.auth.Authorize.header.allScopes') }}
             </span>
             <i :class="[topic.icon, 'icon']" />
             <div class="content">
@@ -196,7 +196,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
             </div>
           </h4>
           <div v-if="unknownRequestedScopes.length > 0">
-            <p><strong>{{ $t('components.auth.Authorize.message.unknownPermissions') }}</strong></p>
+            <p><strong>{{ t('components.auth.Authorize.message.unknownPermissions') }}</strong></p>
             <ul
               v-for="(unknownscope, key) in unknownRequestedScopes"
               :key="key"
@@ -209,12 +209,12 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
             type="submit"
           >
             <i class="lock open icon" />
-            {{ $t('components.auth.Authorize.button.authorize', { app: application.name }) }}
+            {{ t('components.auth.Authorize.button.authorize', { app: application.name }) }}
           </button>
           <p
             v-if="redirectUri === 'urn:ietf:wg:oauth:2.0:oob'"
           >
-            {{ $t('components.auth.Authorize.help.copyCode') }}
+            {{ t('components.auth.Authorize.help.copyCode') }}
           </p>
           <p
             v-else
@@ -225,7 +225,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
           </p>
         </form>
         <div v-else-if="code">
-          <p><strong>{{ $t('components.auth.Authorize.help.pasteCode') }}</strong></p>
+          <p><strong>{{ t('components.auth.Authorize.help.pasteCode') }}</strong></p>
           <copy-input :value="code" />
         </div>
       </div>
diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index ebdd917c3..72ce25949 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -87,16 +87,16 @@ const submit = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.auth.LoginForm.header.loginFailure') }}
+        {{ t('components.auth.LoginForm.header.loginFailure') }}
       </h4>
       <ul class="list">
         <li
           v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value"
         >
-          {{ $t('components.auth.LoginForm.help.approvalRequired') }}
+          {{ t('components.auth.LoginForm.help.approvalRequired') }}
         </li>
         <li v-else-if="errors[0] == 'invalid_credentials'">
-          {{ $t('components.auth.LoginForm.help.invalidCredentials') }}
+          {{ t('components.auth.LoginForm.help.invalidCredentials') }}
         </li>
         <li v-else>
           {{ errors[0] }}
@@ -106,11 +106,11 @@ const submit = async () => {
     <template v-if="domain === $store.getters['instance/domain']">
       <div class="field">
         <label for="username-field">
-          {{ $t('components.auth.LoginForm.label.username') }}
+          {{ t('components.auth.LoginForm.label.username') }}
           <template v-if="showSignup">
             <span class="middle pipe symbol" />
             <router-link :to="{ path: '/signup' }">
-              {{ $t('components.auth.LoginForm.link.createAccount') }}
+              {{ t('components.auth.LoginForm.link.createAccount') }}
             </router-link>
           </template>
         </label>
@@ -127,13 +127,13 @@ const submit = async () => {
       </div>
       <div class="field">
         <label for="password-field">
-          {{ $t('components.auth.LoginForm.label.password') }}
+          {{ t('components.auth.LoginForm.label.password') }}
           <span class="middle pipe symbol" />
           <router-link
             tabindex="1"
             :to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
           >
-            {{ $t('components.auth.LoginForm.link.resetPassword') }}
+            {{ t('components.auth.LoginForm.link.resetPassword') }}
           </router-link>
         </label>
         <password-input
@@ -145,14 +145,14 @@ const submit = async () => {
     </template>
     <template v-else>
       <p>
-        {{ $t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
+        {{ t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
       </p>
     </template>
     <button
       :class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']"
       type="submit"
     >
-      {{ $t('components.auth.LoginForm.button.login') }}
+      {{ t('components.auth.LoginForm.button.login') }}
     </button>
   </form>
 </template>
diff --git a/front/src/components/auth/Logout.vue b/front/src/components/auth/Logout.vue
index 9bb2cdddd..6f9fade54 100644
--- a/front/src/components/auth/Logout.vue
+++ b/front/src/components/auth/Logout.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
+const store = useStore()
 const { t } = useI18n()
+
 const labels = computed(() => ({
   title: t('components.auth.Logout.title')
 }))
@@ -15,20 +18,20 @@ const labels = computed(() => ({
   >
     <section class="ui vertical stripe segment">
       <div
-        v-if="$store.state.auth.authenticated"
+        v-if="store.state.auth.authenticated"
         class="ui small text container"
       >
         <h2>
-          {{ $t('components.auth.Logout.header.confirm') }}
+          {{ t('components.auth.Logout.header.confirm') }}
         </h2>
         <p>
-          {{ $t('components.auth.Logout.message.loggedIn', { username: $store.state.auth.username }) }}
+          {{ t('components.auth.Logout.message.loggedIn', { username: store.state.auth.username }) }}
         </p>
         <button
           class="ui button"
-          @click="$store.dispatch('auth/logout')"
+          @click="store.dispatch('auth/logout')"
         >
-          {{ $t('components.auth.Logout.button.logout') }}
+          {{ t('components.auth.Logout.button.logout') }}
         </button>
       </div>
       <div
@@ -36,13 +39,13 @@ const labels = computed(() => ({
         class="ui small text container"
       >
         <h2>
-          {{ $t('components.auth.Logout.header.unauthenticated') }}
+          {{ t('components.auth.Logout.header.unauthenticated') }}
         </h2>
         <router-link
           to="/login"
           class="ui button"
         >
-          {{ $t('components.auth.Logout.link.login') }}
+          {{ t('components.auth.Logout.link.login') }}
         </router-link>
       </div>
     </section>
diff --git a/front/src/components/auth/Plugin.vue b/front/src/components/auth/Plugin.vue
index 4a369d1a9..e64d5c2ae 100644
--- a/front/src/components/auth/Plugin.vue
+++ b/front/src/components/auth/Plugin.vue
@@ -5,12 +5,15 @@ import axios from 'axios'
 import { clone } from 'lodash-es'
 import useMarkdown, { useMarkdownRaw } from '~/composables/useMarkdown'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   plugin: Plugin
   libraries: Library[]
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const description = useMarkdown(() => props.plugin.description ?? '')
@@ -69,7 +72,7 @@ const submitAndScan = async () => {
         target="_blank"
       >
         <i class="external icon" />
-        {{ $t('components.auth.Plugin.link.documentation') }}
+        {{ t('components.auth.Plugin.link.documentation') }}
       </a>
     </template>
     <div class="ui clearing hidden divider" />
@@ -79,7 +82,7 @@ const submitAndScan = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.auth.Plugin.header.failure') }}
+        {{ t('components.auth.Plugin.header.failure') }}
       </h4>
       <ul class="list">
         <li
@@ -97,7 +100,7 @@ const submitAndScan = async () => {
           v-model="enabled"
           type="checkbox"
         >
-        <label :for="`${plugin.name}-enabled`">{{ $t('components.auth.Plugin.label.pluginEnabled') }}</label>
+        <label :for="`${plugin.name}-enabled`">{{ t('components.auth.Plugin.label.pluginEnabled') }}</label>
       </div>
     </div>
     <div class="ui clearing hidden divider" />
@@ -105,7 +108,7 @@ const submitAndScan = async () => {
       v-if="plugin.source"
       class="field"
     >
-      <label for="plugin-library">{{ $t('components.auth.Plugin.label.library') }}</label>
+      <label for="plugin-library">{{ t('components.auth.Plugin.label.library') }}</label>
       <select
         id="plugin-library"
         v-model="values['library']"
@@ -119,7 +122,7 @@ const submitAndScan = async () => {
         </option>
       </select>
       <div>
-        {{ $t('components.auth.Plugin.description.library') }}
+        {{ t('components.auth.Plugin.description.library') }}
       </div>
     </div>
     <template v-if="(plugin.conf?.length ?? 0) > 0">
@@ -207,14 +210,14 @@ const submitAndScan = async () => {
       type="submit"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
     >
-      {{ $t('components.auth.Plugin.button.save') }}
+      {{ t('components.auth.Plugin.button.save') }}
     </button>
     <button
       v-if="plugin.source"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
       @click.prevent="submitAndScan"
     >
-      {{ $t('components.auth.Plugin.button.scan') }}
+      {{ t('components.auth.Plugin.button.scan') }}
     </button>
     <div class="ui clearing hidden divider" />
   </form>
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 5bf347638..0be1b4594 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -276,7 +276,7 @@ fetchOwnedApps()
     <div class="ui vertical stripe segment">
       <section class="ui text container">
         <h2 class="ui header">
-          {{ $t('components.auth.Settings.header.accountSettings') }}
+          {{ t('components.auth.Settings.header.accountSettings') }}
         </h2>
         <form
           class="ui form"
@@ -287,7 +287,7 @@ fetchOwnedApps()
             class="ui positive message"
           >
             <h4 class="header">
-              {{ $t('components.auth.Settings.header.settingsUpdated') }}
+              {{ t('components.auth.Settings.header.settingsUpdated') }}
             </h4>
           </div>
           <div
@@ -296,7 +296,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('components.auth.Settings.header.updateFailure') }}
+              {{ t('components.auth.Settings.header.updateFailure') }}
             </h4>
             <ul class="list">
               <li
@@ -340,14 +340,14 @@ fetchOwnedApps()
             :class="['ui', { loading: isLoading }, 'button']"
             type="submit"
           >
-            {{ $t('components.auth.Settings.button.updateSettings') }}
+            {{ t('components.auth.Settings.button.updateSettings') }}
           </button>
         </form>
       </section>
       <section class="ui text container">
         <div class="ui hidden divider" />
         <h2 class="ui header">
-          {{ $t('components.auth.Settings.header.avatar') }}
+          {{ t('components.auth.Settings.header.avatar') }}
         </h2>
         <div class="ui form">
           <div
@@ -356,7 +356,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('components.auth.Settings.header.avatarFailure') }}
+              {{ t('components.auth.Settings.header.avatarFailure') }}
             </h4>
             <ul class="list">
               <li
@@ -373,7 +373,7 @@ fetchOwnedApps()
             @update:model-value="submitAvatar($event)"
             @delete="avatar = {uuid: null}"
           >
-            {{ $t('components.auth.Settings.label.avatar') }}
+            {{ t('components.auth.Settings.label.avatar') }}
           </attachment-input>
         </div>
       </section>
@@ -381,10 +381,10 @@ fetchOwnedApps()
       <section class="ui text container">
         <div class="ui hidden divider" />
         <h2 class="ui header">
-          {{ $t('components.auth.Settings.header.changePassword') }}
+          {{ t('components.auth.Settings.header.changePassword') }}
         </h2>
         <div class="ui message">
-          {{ $t('components.auth.Settings.description.changePassword.paragraph1') }}&nbsp;{{ $t('components.auth.Settings.description.changePassword.paragraph2') }}
+          {{ t('components.auth.Settings.description.changePassword.paragraph1') }}&nbsp;{{ t('components.auth.Settings.description.changePassword.paragraph2') }}
         </div>
         <form
           class="ui form"
@@ -396,16 +396,16 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('components.auth.Settings.header.passwordFailure') }}
+              {{ t('components.auth.Settings.header.passwordFailure') }}
             </h4>
             <ul class="list">
               <li v-if="passwordError == 'invalid_credentials'">
-                {{ $t('components.auth.Settings.help.changePassword') }}
+                {{ t('components.auth.Settings.help.changePassword') }}
               </li>
             </ul>
           </div>
           <div class="field">
-            <label for="old-password-field">{{ $t('components.auth.Settings.label.currentPassword') }}</label>
+            <label for="old-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label>
             <password-input
               v-model="credentials.oldPassword"
               field-id="old-password-field"
@@ -413,7 +413,7 @@ fetchOwnedApps()
             />
           </div>
           <div class="field">
-            <label for="new-password-field">{{ $t('components.auth.Settings.label.newPassword') }}</label>
+            <label for="new-password-field">{{ t('components.auth.Settings.label.newPassword') }}</label>
             <password-input
               v-model="credentials.newPassword"
               field-id="new-password-field"
@@ -424,30 +424,30 @@ fetchOwnedApps()
             :class="['ui', {'loading': isLoadingPassword}, {disabled: !credentials.newPassword || !credentials.oldPassword}, 'warning', 'button']"
             :action="submitPassword"
           >
-            {{ $t('components.auth.Settings.button.password') }}
+            {{ t('components.auth.Settings.button.password') }}
             <template #modal-header>
               <p>
-                {{ $t('components.auth.Settings.modal.changePassword.header') }}
+                {{ t('components.auth.Settings.modal.changePassword.header') }}
               </p>
             </template>
             <template #modal-content>
               <div>
                 <p>
-                  {{ $t('components.auth.Settings.modal.changePassword.content.warning') }}
+                  {{ t('components.auth.Settings.modal.changePassword.content.warning') }}
                 </p>
                 <ul>
                   <li>
-                    {{ $t('components.auth.Settings.modal.changePassword.content.logout') }}
+                    {{ t('components.auth.Settings.modal.changePassword.content.logout') }}
                   </li>
                   <li>
-                    {{ $t('components.auth.Settings.modal.changePassword.content.subsonic') }}
+                    {{ t('components.auth.Settings.modal.changePassword.content.subsonic') }}
                   </li>
                 </ul>
               </div>
             </template>
             <template #modal-confirm>
               <div>
-                {{ $t('components.auth.Settings.button.disableSubsonic') }}
+                {{ t('components.auth.Settings.button.disableSubsonic') }}
               </div>
             </template>
           </dangerous-button>
@@ -464,11 +464,11 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="eye slash outline icon" />
           <div class="content">
-            {{ $t('components.auth.Settings.header.contentFilters') }}
+            {{ t('components.auth.Settings.header.contentFilters') }}
           </div>
         </h2>
         <p>
-          {{ $t('components.auth.Settings.description.contentFilters') }}
+          {{ t('components.auth.Settings.description.contentFilters') }}
         </p>
 
         <button
@@ -476,19 +476,19 @@ fetchOwnedApps()
           @click="$store.dispatch('moderation/fetchContentFilters')"
         >
           <i class="refresh icon" />&nbsp;
-          {{ $t('components.auth.Settings.button.refresh') }}
+          {{ t('components.auth.Settings.button.refresh') }}
         </button>
         <h3 class="ui header">
-          {{ $t('components.auth.Settings.header.hiddenArtists') }}
+          {{ t('components.auth.Settings.header.hiddenArtists') }}
         </h3>
         <table class="ui compact very basic unstackable table">
           <thead>
             <tr>
               <th>
-                {{ $t('components.auth.Settings.table.artists.header.name') }}
+                {{ t('components.auth.Settings.table.artists.header.name') }}
               </th>
               <th>
-                {{ $t('components.auth.Settings.table.artists.header.creationDate') }}
+                {{ t('components.auth.Settings.table.artists.header.creationDate') }}
               </th>
               <th />
             </tr>
@@ -511,7 +511,7 @@ fetchOwnedApps()
                   class="ui basic tiny button"
                   @click="$store.dispatch('moderation/deleteContentFilter', filter.uuid)"
                 >
-                  {{ $t('components.auth.Settings.button.delete') }}
+                  {{ t('components.auth.Settings.button.delete') }}
                 </button>
               </td>
             </tr>
@@ -526,18 +526,18 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="open lock icon" />
           <div class="content">
-            {{ $t('components.auth.Settings.header.authorizedApps') }}
+            {{ t('components.auth.Settings.header.authorizedApps') }}
           </div>
         </h2>
         <p>
-          {{ $t('components.auth.Settings.description.authorizedApps') }}
+          {{ t('components.auth.Settings.description.authorizedApps') }}
         </p>
         <button
           :class="['ui', 'icon', { loading: isLoadingApps }, 'button']"
           @click="fetchApps()"
         >
           <i class="refresh icon" />&nbsp;
-          {{ $t('components.auth.Settings.button.refresh') }}
+          {{ t('components.auth.Settings.button.refresh') }}
         </button>
         <table
           v-if="apps.length > 0"
@@ -546,10 +546,10 @@ fetchOwnedApps()
           <thead>
             <tr>
               <th>
-                {{ $t('components.auth.Settings.table.authorizedApps.header.application') }}
+                {{ t('components.auth.Settings.table.authorizedApps.header.application') }}
               </th>
               <th>
-                {{ $t('components.auth.Settings.table.authorizedApps.header.permissions') }}
+                {{ t('components.auth.Settings.table.authorizedApps.header.permissions') }}
               </th>
               <th />
             </tr>
@@ -570,20 +570,20 @@ fetchOwnedApps()
                   :class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']"
                   @confirm="revokeApp(app.client_id)"
                 >
-                  {{ $t('components.auth.Settings.button.revoke') }}
+                  {{ t('components.auth.Settings.button.revoke') }}
                   <template #modal-header>
                     <p>
-                      {{ $t('components.auth.Settings.modal.revokeApp.header', {app: app.name}) }}
+                      {{ t('components.auth.Settings.modal.revokeApp.header', {app: app.name}) }}
                     </p>
                   </template>
                   <template #modal-content>
                     <p>
-                      {{ $t('components.auth.Settings.modal.revokeApp.content.warning') }}
+                      {{ t('components.auth.Settings.modal.revokeApp.content.warning') }}
                     </p>
                   </template>
                   <template #modal-confirm>
                     <div>
-                      {{ $t('components.auth.Settings.button.revokeAccess') }}
+                      {{ t('components.auth.Settings.button.revokeAccess') }}
                     </div>
                   </template>
                 </dangerous-button>
@@ -593,9 +593,9 @@ fetchOwnedApps()
         </table>
         <empty-state v-else>
           <template #title>
-            {{ $t('components.auth.Settings.header.noApps') }}
+            {{ t('components.auth.Settings.header.noApps') }}
           </template>
-          {{ $t('components.auth.Settings.help.noApps') }}
+          {{ t('components.auth.Settings.help.noApps') }}
         </empty-state>
       </section>
       <section
@@ -606,17 +606,17 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="code icon" />
           <div class="content">
-            {{ $t('components.auth.Settings.header.yourApps') }}
+            {{ t('components.auth.Settings.header.yourApps') }}
           </div>
         </h2>
         <p>
-          {{ $t('components.auth.Settings.description.yourApps') }}
+          {{ t('components.auth.Settings.description.yourApps') }}
         </p>
         <router-link
           class="ui success button"
           :to="{name: 'settings.applications.new'}"
         >
-          {{ $t('components.auth.Settings.link.newApp') }}
+          {{ t('components.auth.Settings.link.newApp') }}
         </router-link>
         <table
           v-if="ownedApps.length > 0"
@@ -625,13 +625,13 @@ fetchOwnedApps()
           <thead>
             <tr>
               <th>
-                {{ $t('components.auth.Settings.table.yourApps.header.application') }}
+                {{ t('components.auth.Settings.table.yourApps.header.application') }}
               </th>
               <th>
-                {{ $t('components.auth.Settings.table.yourApps.header.scopes') }}
+                {{ t('components.auth.Settings.table.yourApps.header.scopes') }}
               </th>
               <th>
-                {{ $t('components.auth.Settings.table.yourApps.header.creationDate') }}
+                {{ t('components.auth.Settings.table.yourApps.header.creationDate') }}
               </th>
               <th />
             </tr>
@@ -657,26 +657,26 @@ fetchOwnedApps()
                   class="ui tiny success button"
                   :to="{name: 'settings.applications.edit', params: {id: app.client_id}}"
                 >
-                  {{ $t('components.auth.Settings.button.edit') }}
+                  {{ t('components.auth.Settings.button.edit') }}
                 </router-link>
                 <dangerous-button
                   :class="['ui', 'tiny', 'danger', { loading: isDeleting.has(app.client_id) }, 'button']"
                   @confirm="deleteApp(app.client_id)"
                 >
-                  {{ $t('components.auth.Settings.button.remove') }}
+                  {{ t('components.auth.Settings.button.remove') }}
                   <template #modal-header>
                     <p>
-                      {{ $t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
+                      {{ t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
                     </p>
                   </template>
                   <template #modal-content>
                     <p>
-                      {{ $t('components.auth.Settings.modal.deleteApp.content.warning') }}
+                      {{ t('components.auth.Settings.modal.deleteApp.content.warning') }}
                     </p>
                   </template>
                   <template #modal-confirm>
                     <div>
-                      {{ $t('components.auth.Settings.button.removeApp') }}
+                      {{ t('components.auth.Settings.button.removeApp') }}
                     </div>
                   </template>
                 </dangerous-button>
@@ -686,9 +686,9 @@ fetchOwnedApps()
         </table>
         <empty-state v-else>
           <template #title>
-            {{ $t('components.auth.Settings.header.noPersonalApps') }}
+            {{ t('components.auth.Settings.header.noPersonalApps') }}
           </template>
-          {{ $t('components.auth.Settings.help.noPersonalApps') }}
+          {{ t('components.auth.Settings.help.noPersonalApps') }}
         </empty-state>
       </section>
 
@@ -700,17 +700,17 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="code icon" />
           <div class="content">
-            {{ $t('components.auth.Settings.header.plugins') }}
+            {{ t('components.auth.Settings.header.plugins') }}
           </div>
         </h2>
         <p>
-          {{ $t('components.auth.Settings.description.plugins') }}
+          {{ t('components.auth.Settings.description.plugins') }}
         </p>
         <router-link
           class="ui success button"
           :to="{name: 'settings.plugins'}"
         >
-          {{ $t('components.auth.Settings.link.managePlugins') }}
+          {{ t('components.auth.Settings.link.managePlugins') }}
         </router-link>
       </section>
       <section class="ui text container">
@@ -718,14 +718,14 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="comment icon" />
           <div class="content">
-            {{ $t('components.auth.Settings.header.changeEmail') }}
+            {{ t('components.auth.Settings.header.changeEmail') }}
           </div>
         </h2>
         <p>
-          {{ $t('components.auth.Settings.description.changeEmail') }}
+          {{ t('components.auth.Settings.description.changeEmail') }}
         </p>
         <p>
-          {{ $t('components.auth.Settings.message.currentEmail', { email: $store.state.auth.profile?.email }) }}
+          {{ t('components.auth.Settings.message.currentEmail', { email: $store.state.auth.profile?.email }) }}
         </p>
         <form
           class="ui form"
@@ -737,7 +737,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('components.auth.Settings.header.emailFailure') }}
+              {{ t('components.auth.Settings.header.emailFailure') }}
             </h4>
             <ul class="list">
               <li
@@ -749,7 +749,7 @@ fetchOwnedApps()
             </ul>
           </div>
           <div class="field">
-            <label for="new-email">{{ $t('components.auth.Settings.label.newEmail') }}</label>
+            <label for="new-email">{{ t('components.auth.Settings.label.newEmail') }}</label>
             <input
               id="new-email"
               v-model="newEmail"
@@ -758,7 +758,7 @@ fetchOwnedApps()
             >
           </div>
           <div class="field">
-            <label for="current-password-field-email">{{ $t('components.auth.Settings.label.password') }}</label>
+            <label for="current-password-field-email">{{ t('components.auth.Settings.label.password') }}</label>
             <password-input
               v-model="emailPassword"
               field-id="current-password-field-email"
@@ -769,7 +769,7 @@ fetchOwnedApps()
             type="submit"
             class="ui button"
           >
-            {{ $t('components.auth.Settings.button.update') }}
+            {{ t('components.auth.Settings.button.update') }}
           </button>
         </form>
       </section>
@@ -778,17 +778,17 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="trash icon" />
           <div class="content">
-            {{ $t('components.auth.Settings.header.deleteAccount') }}
+            {{ t('components.auth.Settings.header.deleteAccount') }}
           </div>
         </h2>
         <p>
-          {{ $t('components.auth.Settings.description.deleteAccount') }}
+          {{ t('components.auth.Settings.description.deleteAccount') }}
         </p>
         <div
           role="alert"
           class="ui warning message"
         >
-          {{ $t('components.auth.Settings.warning.deleteAccount') }}
+          {{ t('components.auth.Settings.warning.deleteAccount') }}
         </div>
         <div class="ui form">
           <div
@@ -797,7 +797,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('components.auth.Settings.header.accountFailure') }}
+              {{ t('components.auth.Settings.header.accountFailure') }}
             </h4>
             <ul class="list">
               <li
@@ -809,7 +809,7 @@ fetchOwnedApps()
             </ul>
           </div>
           <div class="field">
-            <label for="current-password-field">{{ $t('components.auth.Settings.label.currentPassword') }}</label>
+            <label for="current-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label>
             <password-input
               v-model="deleteAccountPassword"
               field-id="current-password-field"
@@ -820,22 +820,22 @@ fetchOwnedApps()
             :class="['ui', {'loading': isDeletingAccount}, {disabled: !deleteAccountPassword}, {danger: deleteAccountPassword}, 'button']"
             :action="deleteAccount"
           >
-            {{ $t('components.auth.Settings.button.deleteAccount') }}
+            {{ t('components.auth.Settings.button.deleteAccount') }}
             <template #modal-header>
               <p>
-                {{ $t('components.auth.Settings.modal.deleteAccount.header') }}
+                {{ t('components.auth.Settings.modal.deleteAccount.header') }}
               </p>
             </template>
             <template #modal-content>
               <div>
                 <p>
-                  {{ $t('components.auth.Settings.modal.deleteAccount.content.warning') }}
+                  {{ t('components.auth.Settings.modal.deleteAccount.content.warning') }}
                 </p>
               </div>
             </template>
             <template #modal-confirm>
               <div>
-                {{ $t('components.auth.Settings.button.deleteAccountConfirm') }}
+                {{ t('components.auth.Settings.button.deleteAccountConfirm') }}
               </div>
             </template>
           </dangerous-button>
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index 71c37543c..8cceed992 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -88,14 +88,14 @@ fetchInstanceSettings()
   <div v-if="submitted">
     <div class="ui success message">
       <p v-if="signupRequiresApproval">
-        {{ $t('components.auth.SignupForm.message.awaitingReview') }}
+        {{ t('components.auth.SignupForm.message.awaitingReview') }}
       </p>
       <p v-else>
-        {{ $t('components.auth.SignupForm.message.accountCreated') }}
+        {{ t('components.auth.SignupForm.message.accountCreated') }}
       </p>
     </div>
     <h2>
-      {{ $t('components.auth.SignupForm.header.login') }}
+      {{ t('components.auth.SignupForm.header.login') }}
     </h2>
     <login-form
       button-classes="basic success"
@@ -111,13 +111,13 @@ fetchInstanceSettings()
       v-if="!$store.state.instance.settings.users.registration_enabled.value"
       class="ui message"
     >
-      {{ $t('components.auth.SignupForm.message.registrationClosed') }}
+      {{ t('components.auth.SignupForm.message.registrationClosed') }}
     </p>
     <p
       v-else-if="signupRequiresApproval"
       class="ui message"
     >
-      {{ $t('components.auth.SignupForm.message.requiresReview') }}
+      {{ t('components.auth.SignupForm.message.requiresReview') }}
     </p>
     <template v-if="formCustomization?.help_text">
       <rendered-description
@@ -133,7 +133,7 @@ fetchInstanceSettings()
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.auth.SignupForm.header.signupFailure') }}
+        {{ t('components.auth.SignupForm.header.signupFailure') }}
       </h4>
       <ul class="list">
         <li
@@ -145,7 +145,7 @@ fetchInstanceSettings()
       </ul>
     </div>
     <div class="required field">
-      <label for="username-field">{{ $t('components.auth.SignupForm.label.username') }}</label>
+      <label for="username-field">{{ t('components.auth.SignupForm.label.username') }}</label>
       <input
         id="username-field"
         ref="username"
@@ -158,7 +158,7 @@ fetchInstanceSettings()
       >
     </div>
     <div class="required field">
-      <label for="email-field">{{ $t('components.auth.SignupForm.label.email') }}</label>
+      <label for="email-field">{{ t('components.auth.SignupForm.label.email') }}</label>
       <input
         id="email-field"
         ref="email"
@@ -170,7 +170,7 @@ fetchInstanceSettings()
       >
     </div>
     <div class="required field">
-      <label for="password-field">{{ $t('components.auth.SignupForm.label.password') }}</label>
+      <label for="password-field">{{ t('components.auth.SignupForm.label.password') }}</label>
       <password-input
         v-model="payload.password1"
         field-id="password-field"
@@ -180,7 +180,7 @@ fetchInstanceSettings()
       v-if="!$store.state.instance.settings.users.registration_enabled.value"
       class="required field"
     >
-      <label for="invitation-code">{{ $t('components.auth.SignupForm.label.invitation') }}</label>
+      <label for="invitation-code">{{ t('components.auth.SignupForm.label.invitation') }}</label>
       <input
         id="invitation-code"
         v-model="payload.invitation"
@@ -217,7 +217,7 @@ fetchInstanceSettings()
       :class="['ui', buttonClasses, {'loading': isLoading}, ' right floated button']"
       type="submit"
     >
-      {{ $t('components.auth.SignupForm.button.create') }}
+      {{ t('components.auth.SignupForm.button.create') }}
     </button>
   </form>
 </template>
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index b3bdb7145..0825628b4 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -82,26 +82,26 @@ fetchToken()
     @submit.prevent="requestNewToken()"
   >
     <h2>
-      {{ $t('components.auth.SubsonicTokenForm.header.subsonic') }}
+      {{ t('components.auth.SubsonicTokenForm.header.subsonic') }}
     </h2>
     <p
       v-if="!subsonicEnabled"
       class="ui message"
     >
-      {{ $t('components.auth.SubsonicTokenForm.message.unavailable') }}
+      {{ t('components.auth.SubsonicTokenForm.message.unavailable') }}
     </p>
     <p>
-      {{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph1') }}&nbsp;{{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph2') }}
+      {{ t('components.auth.SubsonicTokenForm.description.subsonic.paragraph1') }}&nbsp;{{ t('components.auth.SubsonicTokenForm.description.subsonic.paragraph2') }}
     </p>
     <p>
-      {{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph3') }}
+      {{ t('components.auth.SubsonicTokenForm.description.subsonic.paragraph3') }}
     </p>
     <p>
       <a
         href="https://docs.funkwhale.audio/users/apps.html#subsonic-compatible-clients"
         target="_blank"
       >
-        {{ $t('components.auth.SubsonicTokenForm.link.apps') }}
+        {{ t('components.auth.SubsonicTokenForm.link.apps') }}
       </a>
     </p>
     <div
@@ -118,7 +118,7 @@ fetchToken()
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.auth.SubsonicTokenForm.header.error') }}
+        {{ t('components.auth.SubsonicTokenForm.header.error') }}
       </h4>
       <ul class="list">
         <li
@@ -152,20 +152,20 @@ fetchToken()
         :class="['ui', {'loading': isLoading}, 'button']"
         :action="requestNewToken"
       >
-        {{ $t('components.auth.SubsonicTokenForm.button.newPassword') }}
+        {{ t('components.auth.SubsonicTokenForm.button.newPassword') }}
         <template #modal-header>
           <p>
-            {{ $t('components.auth.SubsonicTokenForm.modal.newPassword.header') }}
+            {{ t('components.auth.SubsonicTokenForm.modal.newPassword.header') }}
           </p>
         </template>
         <template #modal-content>
           <p>
-            {{ $t('components.auth.SubsonicTokenForm.modal.newPassword.content.warning') }}
+            {{ t('components.auth.SubsonicTokenForm.modal.newPassword.content.warning') }}
           </p>
         </template>
         <template #modal-confirm>
           <div>
-            {{ $t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
+            {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
           </div>
         </template>
       </dangerous-button>
@@ -175,27 +175,27 @@ fetchToken()
         :class="['ui', {'loading': isLoading}, 'button']"
         @click="requestNewToken"
       >
-        {{ $t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
+        {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
       </button>
       <dangerous-button
         v-if="token"
         :class="['ui', {'loading': isLoading}, 'warning', 'button']"
         :action="disable"
       >
-        {{ $t('components.auth.SubsonicTokenForm.button.disable') }}
+        {{ t('components.auth.SubsonicTokenForm.button.disable') }}
         <template #modal-header>
           <p>
-            {{ $t('components.auth.SubsonicTokenForm.modal.disableSubsonic.header') }}
+            {{ t('components.auth.SubsonicTokenForm.modal.disableSubsonic.header') }}
           </p>
         </template>
         <template #modal-content>
           <p>
-            {{ $t('components.auth.SubsonicTokenForm.modal.disableSubsonic.content.warning') }}
+            {{ t('components.auth.SubsonicTokenForm.modal.disableSubsonic.content.warning') }}
           </p>
         </template>
         <template #modal-confirm>
           <div>
-            {{ $t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
+            {{ t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
           </div>
         </template>
       </dangerous-button>
diff --git a/front/src/components/channels/AlbumForm.vue b/front/src/components/channels/AlbumForm.vue
index 6f14bf4f1..a3b94ad63 100644
--- a/front/src/components/channels/AlbumForm.vue
+++ b/front/src/components/channels/AlbumForm.vue
@@ -2,6 +2,7 @@
 import type { BackendError, Channel } from '~/types'
 
 import { computed, watch, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 interface Events {
@@ -14,6 +15,8 @@ interface Props {
   channel: Channel
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -59,7 +62,7 @@ defineExpose({
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.channels.AlbumForm.header.error') }}
+        {{ t('components.channels.AlbumForm.header.error') }}
       </h4>
       <ul class="list">
         <li
@@ -72,7 +75,7 @@ defineExpose({
     </div>
     <div class="ui required field">
       <label for="album-title">
-        {{ $t('components.channels.AlbumForm.label.albumTitle') }}
+        {{ t('components.channels.AlbumForm.label.albumTitle') }}
       </label>
       <input
         v-model="title"
diff --git a/front/src/components/channels/AlbumModal.vue b/front/src/components/channels/AlbumModal.vue
index cc7687f74..a9dfe1df6 100644
--- a/front/src/components/channels/AlbumModal.vue
+++ b/front/src/components/channels/AlbumModal.vue
@@ -3,6 +3,7 @@ import type { Channel } from '~/types'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import ChannelAlbumForm from '~/components/channels/AlbumForm.vue'
 import { watch, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'created'): void
@@ -12,6 +13,8 @@ interface Props {
   channel: Channel
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 defineProps<Props>()
 
@@ -37,10 +40,10 @@ defineExpose({
   >
     <h4 class="header">
       <span v-if="channel.content_category === 'podcast'">
-        {{ $t('components.channels.AlbumModal.header.newSeries') }}
+        {{ t('components.channels.AlbumModal.header.newSeries') }}
       </span>
       <span v-else>
-        {{ $t('components.channels.AlbumModal.header.newAlbum') }}
+        {{ t('components.channels.AlbumModal.header.newAlbum') }}
       </span>
     </h4>
     <div class="scrolling content">
@@ -54,14 +57,14 @@ defineExpose({
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        {{ $t('components.channels.AlbumModal.button.cancel') }}
+        {{ t('components.channels.AlbumModal.button.cancel') }}
       </button>
       <button
         :class="['ui', 'primary', {loading: isLoading}, 'button']"
         :disabled="!submittable"
         @click.stop.prevent="albumForm.submit()"
       >
-        {{ $t('components.channels.AlbumModal.button.create') }}
+        {{ t('components.channels.AlbumModal.button.create') }}
       </button>
     </div>
   </semantic-modal>
diff --git a/front/src/components/channels/AlbumSelect.vue b/front/src/components/channels/AlbumSelect.vue
index 8b486ff40..2d7b4ac75 100644
--- a/front/src/components/channels/AlbumSelect.vue
+++ b/front/src/components/channels/AlbumSelect.vue
@@ -4,6 +4,7 @@ import type { Album, Channel } from '~/types'
 import axios from 'axios'
 import { useVModel } from '@vueuse/core'
 import { reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'update:modelValue', value: string): void
@@ -14,6 +15,8 @@ interface Props {
   channel: Channel | null
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
@@ -48,10 +51,10 @@ watch(() => props.channel, fetchData, { immediate: true })
   <div>
     <label for="album-dropdown">
       <span v-if="channel && channel.artist && channel.artist.content_category === 'podcast'">
-        {{ $t('components.channels.AlbumSelect.label.series') }}
+        {{ t('components.channels.AlbumSelect.label.series') }}
       </span>
       <span v-else>
-        {{ $t('components.channels.AlbumSelect.label.album') }}
+        {{ t('components.channels.AlbumSelect.label.album') }}
       </span>
     </label>
     <select
@@ -60,7 +63,7 @@ watch(() => props.channel, fetchData, { immediate: true })
       class="ui search normal dropdown"
     >
       <option value="">
-        {{ $t('components.channels.AlbumSelect.option.none') }}
+        {{ t('components.channels.AlbumSelect.option.none') }}
       </option>
       <option
         v-for="album in albums"
@@ -69,7 +72,7 @@ watch(() => props.channel, fetchData, { immediate: true })
       >
         {{ album.title }}
         <span>
-          {{ $t('components.channels.AlbumSelect.meta.tracks', album.tracks_count) }}
+          {{ t('components.channels.AlbumSelect.meta.tracks', album.tracks_count) }}
         </span>
       </option>
     </select>
diff --git a/front/src/components/channels/LicenseSelect.vue b/front/src/components/channels/LicenseSelect.vue
index 9fb0d75b4..26508f7e1 100644
--- a/front/src/components/channels/LicenseSelect.vue
+++ b/front/src/components/channels/LicenseSelect.vue
@@ -4,6 +4,7 @@ import type { License } from '~/types'
 import { computed, reactive, ref } from 'vue'
 import axios from 'axios'
 import { useVModel } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'update:modelValue', value: string): void
@@ -13,6 +14,8 @@ interface Props {
   modelValue: string | null
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   modelValue: null
@@ -55,7 +58,7 @@ fetchLicenses()
 <template>
   <div>
     <label for="license-dropdown">
-      {{ $t('components.channels.LicenseSelect.label.license') }}
+      {{ t('components.channels.LicenseSelect.label.license') }}
     </label>
     <select
       id="license-dropdown"
@@ -63,7 +66,7 @@ fetchLicenses()
       class="ui search normal dropdown"
     >
       <option value="">
-        {{ $t('components.channels.LicenseSelect.option.none') }}
+        {{ t('components.channels.LicenseSelect.option.none') }}
       </option>
       <option
         v-for="l in featuredLicenses"
@@ -84,7 +87,7 @@ fetchLicenses()
         target="_blank"
         rel="noreferrer noopener"
       >
-        {{ $t('components.channels.LicenseSelect.link.license') }}
+        {{ t('components.channels.LicenseSelect.link.license') }}
       </a>
     </p>
   </div>
diff --git a/front/src/components/channels/SubscribeButton.vue b/front/src/components/channels/SubscribeButton.vue
index 8c05ded2f..436e6930f 100644
--- a/front/src/components/channels/SubscribeButton.vue
+++ b/front/src/components/channels/SubscribeButton.vue
@@ -4,6 +4,9 @@ import type { Channel } from '~/types'
 import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 import LoginModal from '~/components/common/LoginModal.vue'
 
@@ -44,7 +47,7 @@ const loginModal = ref()
 
 <template>
   <button
-    v-if="$store.state.auth.authenticated"
+    v-if="store.state.auth.authenticated"
     :class="['ui', 'pink', {'inverted': isSubscribed}, {'favorited': isSubscribed}, 'icon', 'labeled', 'button']"
     @click.stop="toggle"
   >
@@ -61,7 +64,7 @@ const loginModal = ref()
     <login-modal
       ref="loginModal"
       class="small"
-      :next-route="$route.fullPath"
+      :next-route="route.fullPath"
       :message="message.authMessage"
       :cover="channel.artist?.cover!"
       @created="loginModal.show = false"
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index e849282da..e2f11a0ca 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -440,7 +440,7 @@ defineExpose({
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.channels.UploadForm.header.error') }}
+        {{ t('components.channels.UploadForm.header.error') }}
       </h4>
       <ul class="list">
         <li
@@ -453,7 +453,7 @@ defineExpose({
     </div>
     <div :class="['ui', 'required', {hidden: step > 1}, 'field']">
       <label for="channel-dropdown">
-        {{ $t('components.channels.UploadForm.label.channel') }}
+        {{ t('components.channels.UploadForm.label.channel') }}
       </label>
       <div
         id="channel-dropdown"
@@ -476,7 +476,7 @@ defineExpose({
       <div class="content">
         <p>
           <i class="copyright icon" />
-          {{ $t('components.channels.UploadForm.help.license') }}
+          {{ t('components.channels.UploadForm.help.license') }}
         </p>
       </div>
     </div>
@@ -489,7 +489,7 @@ defineExpose({
         <div class="content">
           <p>
             <i class="warning icon" />
-            {{ $t('components.channels.UploadForm.warning.quota') }}
+            {{ t('components.channels.UploadForm.warning.quota') }}
           </p>
         </div>
       </div>
@@ -500,19 +500,19 @@ defineExpose({
         >
           <p>
             <i class="redo icon" />
-            {{ $t('components.channels.UploadForm.message.pending') }}
+            {{ t('components.channels.UploadForm.message.pending') }}
           </p>
           <button
             class="ui basic button"
             @click.stop.prevent="includeDraftUploads = false"
           >
-            {{ $t('components.channels.UploadForm.button.ignore') }}
+            {{ t('components.channels.UploadForm.button.ignore') }}
           </button>
           <button
             class="ui basic button"
             @click.stop.prevent="includeDraftUploads = true"
           >
-            {{ $t('components.channels.UploadForm.button.resume') }}
+            {{ t('components.channels.UploadForm.button.resume') }}
           </button>
         </div>
         <div
@@ -564,13 +564,13 @@ defineExpose({
                 </template>
                 <template v-else>
                   <span v-if="file.active">
-                    {{ $t('components.channels.UploadForm.status.uploading') }}
+                    {{ t('components.channels.UploadForm.status.uploading') }}
                   </span>
                   <span v-else-if="file.error">
-                    {{ $t('components.channels.UploadForm.status.errored') }}
+                    {{ t('components.channels.UploadForm.status.errored') }}
                   </span>
                   <span v-else>
-                    {{ $t('components.channels.UploadForm.status.pending') }}
+                    {{ t('components.channels.UploadForm.status.pending') }}
                   </span>
                   <span class="middle middledot symbol" />
                   {{ humanSize(file.size ?? 0) }}
@@ -580,12 +580,12 @@ defineExpose({
                 </template>
                 <span class="middle middledot symbol" />
                 <a @click.stop.prevent="remove(file)">
-                  {{ $t('components.channels.UploadForm.button.remove') }}
+                  {{ t('components.channels.UploadForm.button.remove') }}
                 </a>
                 <template v-if="file.error">
                   <span class="middle middledot symbol" />
                   <a @click.stop.prevent="retry(file)">
-                    {{ $t('components.channels.UploadForm.button.retry') }}
+                    {{ t('components.channels.UploadForm.button.retry') }}
                   </a>
                 </template>
               </div>
@@ -604,7 +604,7 @@ defineExpose({
           <div class="content">
             <p>
               <i class="info icon" />
-              {{ $t('components.channels.UploadForm.description.extensions', {extensions: $store.state.ui.supportedExtensions.join(', ')}) }}
+              {{ t('components.channels.UploadForm.description.extensions', {extensions: $store.state.ui.supportedExtensions.join(', ')}) }}
             </p>
           </div>
         </div>
@@ -617,11 +617,11 @@ defineExpose({
         >
           <div>
             <i class="upload icon" />&nbsp;
-            {{ $t('components.channels.UploadForm.message.dragAndDrop') }}
+            {{ t('components.channels.UploadForm.message.dragAndDrop') }}
           </div>
           <div class="ui very small divider" />
           <div>
-            {{ $t('components.channels.UploadForm.label.openBrowser') }}
+            {{ t('components.channels.UploadForm.label.openBrowser') }}
           </div>
         </file-upload-widget>
         <div class="ui hidden divider" />
diff --git a/front/src/components/channels/UploadMetadataForm.vue b/front/src/components/channels/UploadMetadataForm.vue
index 589cf1495..6d146e8f4 100644
--- a/front/src/components/channels/UploadMetadataForm.vue
+++ b/front/src/components/channels/UploadMetadataForm.vue
@@ -2,6 +2,7 @@
 import type { Upload, Track } from '~/types'
 
 import { reactive, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
@@ -16,6 +17,8 @@ interface Props {
   values: Partial<Values> | null
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   values: null
@@ -37,7 +40,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
   <div :class="['ui', {loading: isLoading}, 'form']">
     <div class="ui required field">
       <label for="upload-title">
-        {{ $t('components.channels.UploadMetadataForm.label.title') }}
+        {{ t('components.channels.UploadMetadataForm.label.title') }}
       </label>
       <input
         v-model="newValues.title"
@@ -48,13 +51,13 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
       v-model="newValues.cover"
       @delete="newValues.cover = ''"
     >
-      {{ $t('components.channels.UploadMetadataForm.label.image') }}
+      {{ t('components.channels.UploadMetadataForm.label.image') }}
     </attachment-input>
     <div class="ui small hidden divider" />
     <div class="ui two fields">
       <div class="ui field">
         <label for="upload-tags">
-          {{ $t('components.channels.UploadMetadataForm.label.tags') }}
+          {{ t('components.channels.UploadMetadataForm.label.tags') }}
         </label>
         <tags-selector
           id="upload-tags"
@@ -64,7 +67,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
       </div>
       <div class="ui field">
         <label for="upload-position">
-          {{ $t('components.channels.UploadMetadataForm.label.position') }}
+          {{ t('components.channels.UploadMetadataForm.label.position') }}
         </label>
         <input
           v-model="newValues.position"
@@ -76,7 +79,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
     </div>
     <div class="ui field">
       <label for="upload-description">
-        {{ $t('components.channels.UploadMetadataForm.label.description') }}
+        {{ t('components.channels.UploadMetadataForm.label.description') }}
       </label>
       <content-form
         v-model="newValues.description"
diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index a53aeaf75..cbb391a52 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -49,7 +49,7 @@ const statusInfo = computed(() => {
 const step = ref(1)
 const isLoading = ref(false)
 
-const dropdownOpen = ref(false)
+const open = ref(false)
 </script>
 
 <template>
@@ -59,16 +59,16 @@ const dropdownOpen = ref(false)
   >
     <h4 class="header">
       <span v-if="step === 1">
-        {{ $t('components.channels.UploadModal.header.publish') }}
+        {{ t('components.channels.UploadModal.header.publish') }}
       </span>
       <span v-else-if="step === 2">
-        {{ $t('components.channels.UploadModal.header.uploadFiles') }}
+        {{ t('components.channels.UploadModal.header.uploadFiles') }}
       </span>
       <span v-else-if="step === 3">
-        {{ $t('components.channels.UploadModal.header.uploadDetails') }}
+        {{ t('components.channels.UploadModal.header.uploadDetails') }}
       </span>
       <span v-else-if="step === 4">
-        {{ $t('components.channels.UploadModal.header.processing') }}
+        {{ t('components.channels.UploadModal.header.processing') }}
       </span>
     </h4>
     <div class="scrolling content">
@@ -87,7 +87,7 @@ const dropdownOpen = ref(false)
         </template>
         <div class="ui very small hidden divider" />
         <template v-if="statusData && statusData.quotaStatus">
-          {{ $t('components.channels.UploadModal.meta.quota', humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000)) }}
+          {{ t('components.channels.UploadModal.meta.quota', humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000)) }}
         </template>
       </div>
       <div class="ui hidden clearing divider mobile-only" />
@@ -97,7 +97,7 @@ const dropdownOpen = ref(false)
         variant="outline"
         @click="update(false)"
       >
-        {{ $t('components.channels.UploadModal.button.cancel') }}
+        {{ t('components.channels.UploadModal.button.cancel') }}
       </Button>
       <Button
         v-else-if="step < 3"
@@ -105,21 +105,21 @@ const dropdownOpen = ref(false)
         variant="outline"
         @click.stop.prevent="uploadForm.step -= 1"
       >
-        {{ $t('components.channels.UploadModal.button.previous') }}
+        {{ t('components.channels.UploadModal.button.previous') }}
       </Button>
       <Button
         v-else-if="step === 3"
         color="secondary"
         @click.stop.prevent="uploadForm.step -= 1"
       >
-        {{ $t('components.channels.UploadModal.button.update') }}
+        {{ t('components.channels.UploadModal.button.update') }}
       </Button>
       <Button
         v-if="step === 1"
         color="secondary"
         @click.stop.prevent="uploadForm.step += 1"
       >
-        {{ $t('components.channels.UploadModal.button.next') }}
+        {{ t('components.channels.UploadModal.button.next') }}
       </Button>
       <div class="ui primary buttons">
         <Button
@@ -128,10 +128,10 @@ const dropdownOpen = ref(false)
           :disabled="!statusData?.canSubmit"
           @click.prevent.stop="uploadForm.publish"
         >
-          {{ $t('components.channels.UploadModal.button.publish') }}
+          {{ t('components.channels.UploadModal.button.publish') }}
         </Button>
 
-        <Popover v-model:open="dropdownOpen">
+        <Popover v-model:open="open">
           <template #default="{ toggleOpen }">
             <Button
               color="primary"
@@ -142,7 +142,7 @@ const dropdownOpen = ref(false)
           </template>
           <template #items>
             <PopoverItem @click="update(false)">
-              {{ $t('components.channels.UploadModal.button.finishLater') }}
+              {{ t('components.channels.UploadModal.button.finishLater') }}
             </PopoverItem>
           </template>
         </Popover>
@@ -153,7 +153,7 @@ const dropdownOpen = ref(false)
         color="secondary"
         @click="update(false)"
       >
-        {{ $t('components.channels.UploadModal.button.close') }}
+        {{ t('components.channels.UploadModal.button.close') }}
       </Button>
     </div>
   </semantic-modal>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index ac791e7d6..8ae5a5138 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -167,7 +167,7 @@ const launchAction = async () => {
               class="right floated"
             >
               <span v-if="needsRefresh">
-                {{ $t('components.common.ActionTable.message.needsRefresh') }}
+                {{ t('components.common.ActionTable.message.needsRefresh') }}
               </span>
               <button
                 class="ui basic icon button"
@@ -185,7 +185,7 @@ const launchAction = async () => {
             >
               <div class="ui inline fields">
                 <div class="field">
-                  <label for="actions-select">{{ $t('components.common.ActionTable.label.actions') }}</label>
+                  <label for="actions-select">{{ t('components.common.ActionTable.label.actions') }}</label>
                   <select
                     id="actions-select"
                     v-model="currentActionName"
@@ -208,11 +208,11 @@ const launchAction = async () => {
                     :aria-label="labels.performAction"
                     @confirm="launchAction"
                   >
-                    {{ $t('components.common.ActionTable.button.go') }}
+                    {{ t('components.common.ActionTable.button.go') }}
                     <template #modal-header>
                       <p>
                         <span key="1">
-                          {{ $t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount) }}
+                          {{ t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount) }}
                         </span>
                       </p>
                     </template>
@@ -222,13 +222,13 @@ const launchAction = async () => {
                           {{ currentAction?.confirmationMessage }}
                         </template>
                         <span v-else>
-                          {{ $t('components.common.ActionTable.modal.performAction.content.warning') }}
+                          {{ t('components.common.ActionTable.modal.performAction.content.warning') }}
                         </span>
                       </p>
                     </template>
                     <template #modal-confirm>
                       <div :aria-label="labels.performAction">
-                        {{ $t('components.common.ActionTable.button.launch') }}
+                        {{ t('components.common.ActionTable.button.launch') }}
                       </div>
                     </template>
                   </dangerous-button>
@@ -239,15 +239,15 @@ const launchAction = async () => {
                     :class="['ui', {disabled: checked.length === 0}, {'loading': isLoading}, 'button']"
                     @click="launchAction"
                   >
-                    {{ $t('components.common.ActionTable.button.go') }}
+                    {{ t('components.common.ActionTable.button.go') }}
                   </button>
                 </div>
                 <div class="count field">
                   <span v-if="selectAll">
-                    {{ $t('components.common.ActionTable.button.allSelected', objectsData.count) }}
+                    {{ t('components.common.ActionTable.button.allSelected', objectsData.count) }}
                   </span>
                   <span v-else>
-                    {{ $t('components.common.ActionTable.button.selected', { total: objectsData.count }, checked.length) }}
+                    {{ t('components.common.ActionTable.button.selected', { total: objectsData.count }, checked.length) }}
                   </span>
                   <template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length">
                     <a
@@ -256,7 +256,7 @@ const launchAction = async () => {
                       @click.prevent="selectAll = true"
                     >
                       <span key="3">
-                        {{ $t('components.common.ActionTable.button.selectElement', objectsData.count) }}
+                        {{ t('components.common.ActionTable.button.selectElement', objectsData.count) }}
                       </span>
                     </a>
                     <a
@@ -265,7 +265,7 @@ const launchAction = async () => {
                       @click.prevent="selectAll = false"
                     >
                       <span key="4">
-                        {{ $t('components.common.ActionTable.button.selectCurrentPage') }}
+                        {{ t('components.common.ActionTable.button.selectCurrentPage') }}
                       </span>
                     </a>
                   </template>
@@ -277,7 +277,7 @@ const launchAction = async () => {
                 class="ui negative message"
               >
                 <h4 class="header">
-                  {{ $t('components.common.ActionTable.header.error') }}
+                  {{ t('components.common.ActionTable.header.error') }}
                 </h4>
                 <ul class="list">
                   <li
@@ -294,7 +294,7 @@ const launchAction = async () => {
               >
                 <p>
                   <span>
-                    {{ $t('components.common.ActionTable.message.success', { action: result.action }, result.updated) }}
+                    {{ t('components.common.ActionTable.message.success', { action: result.action }, result.updated) }}
                   </span>
                 </p>
 
diff --git a/front/src/components/common/AttachmentInput.vue b/front/src/components/common/AttachmentInput.vue
index 613621040..2836bfaa7 100644
--- a/front/src/components/common/AttachmentInput.vue
+++ b/front/src/components/common/AttachmentInput.vue
@@ -5,6 +5,7 @@ import axios from 'axios'
 import { useVModel } from '@vueuse/core'
 import { reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 import useFormData from '~/composables/useFormData'
 
 interface Events {
@@ -20,6 +21,8 @@ interface Props {
   initialValue?: string | undefined
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   imageClass: '',
@@ -107,7 +110,7 @@ const getAttachmentUrl = (uuid: string) => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.common.AttachmentInput.header.failure') }}
+        {{ t('components.common.AttachmentInput.header.failure') }}
       </h4>
       <ul class="list">
         <li
@@ -144,7 +147,7 @@ const getAttachmentUrl = (uuid: string) => {
         <div class="eleven wide column">
           <div class="file-input">
             <label :for="attachmentId">
-              {{ $t('components.common.AttachmentInput.label.upload') }}
+              {{ t('components.common.AttachmentInput.label.upload') }}
             </label>
             <input
               :id="attachmentId"
@@ -159,21 +162,21 @@ const getAttachmentUrl = (uuid: string) => {
           </div>
           <div class="ui very small hidden divider" />
           <p>
-            {{ $t('components.common.AttachmentInput.help.upload') }}
+            {{ t('components.common.AttachmentInput.help.upload') }}
           </p>
           <button
             v-if="value"
             class="ui basic tiny button"
             @click.stop.prevent="remove(value as string)"
           >
-            {{ $t('components.common.AttachmentInput.button.remove') }}
+            {{ t('components.common.AttachmentInput.button.remove') }}
           </button>
           <div
             v-if="isLoading"
             class="ui active inverted dimmer"
           >
             <div class="ui indeterminate text loader">
-              {{ $t('components.common.AttachmentInput.loader.uploading') }}
+              {{ t('components.common.AttachmentInput.loader.uploading') }}
             </div>
           </div>
         </div>
diff --git a/front/src/components/common/CollapseLink.vue b/front/src/components/common/CollapseLink.vue
index 2c42bf16f..c0819097a 100644
--- a/front/src/components/common/CollapseLink.vue
+++ b/front/src/components/common/CollapseLink.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'update:modelValue', value: boolean): void
@@ -9,6 +10,8 @@ interface Props {
   modelValue: boolean
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 const value = useVModel(props, 'modelValue', emit)
@@ -21,10 +24,10 @@ const value = useVModel(props, 'modelValue', emit)
     @click.prevent="value = !value"
   >
     <span v-if="value">
-      {{ $t('components.common.CollapseLink.button.expand') }}
+      {{ t('components.common.CollapseLink.button.expand') }}
     </span>
     <span v-else>
-      {{ $t('components.common.CollapseLink.button.collapse') }}
+      {{ t('components.common.CollapseLink.button.collapse') }}
     </span>
     <i :class="[{ down: !value, right: value }, 'angle', 'icon']" />
   </a>
diff --git a/front/src/components/common/ContentForm.vue b/front/src/components/common/ContentForm.vue
index afa02f994..f67bdda1d 100644
--- a/front/src/components/common/ContentForm.vue
+++ b/front/src/components/common/ContentForm.vue
@@ -90,13 +90,13 @@ onMounted(async () => {
           :class="[{active: !isPreviewing}, 'item']"
           @click.prevent="isPreviewing = false"
         >
-          {{ $t('components.common.ContentForm.button.write') }}
+          {{ t('components.common.ContentForm.button.write') }}
         </button>
         <button
           :class="[{active: isPreviewing}, 'item']"
           @click.prevent="isPreviewing = true"
         >
-          {{ $t('components.common.ContentForm.button.preview') }}
+          {{ t('components.common.ContentForm.button.preview') }}
         </button>
       </div>
       <template v-if="isPreviewing">
@@ -112,7 +112,7 @@ onMounted(async () => {
           </div>
         </div>
         <p v-else-if="!preview">
-          {{ $t('components.common.ContentForm.empty.noContent') }}
+          {{ t('components.common.ContentForm.empty.noContent') }}
         </p>
         <sanitized-html
           v-else
@@ -139,7 +139,7 @@ onMounted(async () => {
         {{ remainingChars }}
       </span>
       <p>
-        {{ $t('components.common.ContentForm.help.markdown') }}
+        {{ t('components.common.ContentForm.help.markdown') }}
       </p>
     </div>
   </div>
diff --git a/front/src/components/common/CopyInput.vue b/front/src/components/common/CopyInput.vue
index 3db76f031..3268c5fb0 100644
--- a/front/src/components/common/CopyInput.vue
+++ b/front/src/components/common/CopyInput.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { toRefs, useClipboard } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   value: string
@@ -12,6 +13,8 @@ const props = withDefaults(defineProps<Props>(), {
   id: 'copy-input'
 })
 
+const { t } = useI18n()
+
 const { value } = toRefs(props)
 const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, copiedDuring: 5000 })
 </script>
@@ -22,7 +25,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
       v-if="copied"
       class="message"
     >
-      {{ $t('components.common.CopyInput.message.success') }}
+      {{ t('components.common.CopyInput.message.success') }}
     </p>
     <input
       :id="id"
@@ -37,7 +40,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
       @click="copy()"
     >
       <i class="copy icon" />
-      {{ $t('components.common.CopyInput.button.copy') }}
+      {{ t('components.common.CopyInput.button.copy') }}
     </button>
   </div>
 </template>
diff --git a/front/src/components/common/DangerousButton.vue b/front/src/components/common/DangerousButton.vue
index 56ebaa25b..8af74f769 100644
--- a/front/src/components/common/DangerousButton.vue
+++ b/front/src/components/common/DangerousButton.vue
@@ -2,6 +2,7 @@
 import SemanticModal from '~/components/semantic/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'confirm'): void
@@ -13,6 +14,8 @@ interface Props {
   confirmColor?: 'destructive' | 'primary'
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   action: () => undefined,
@@ -44,7 +47,7 @@ const confirm = () => {
     >
       <h4 class="header">
         <slot name="modal-header">
-          {{ $t('components.common.DangerousButton.header.confirm') }}
+          {{ t('components.common.DangerousButton.header.confirm') }}
         </slot>
       </h4>
       <div class="scrolling content">
@@ -58,17 +61,17 @@ const confirm = () => {
           variant="outline"
           @click="showModal = false"
         >
-          {{ $t('components.common.DangerousButton.button.cancel') }}
+          {{ t('components.common.DangerousButton.button.cancel') }}
         </Button>
         <Button
           :color="confirmColor"
           @click="confirm"
         >
           <slot name="modal-confirm">
-            {{ $t('components.common.DangerousButton.button.confirm') }}
+            {{ t('components.common.DangerousButton.button.confirm') }}
           </slot>
         </Button>
       </div>
     </semantic-modal>
   </button>
-</template>
\ No newline at end of file
+</template>
diff --git a/front/src/components/common/Duration.vue b/front/src/components/common/Duration.vue
index 943d21e87..c250a98f6 100644
--- a/front/src/components/common/Duration.vue
+++ b/front/src/components/common/Duration.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import moment from 'moment'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   seconds?: number
 }
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<Props>(), {
   seconds: 0
 })
@@ -19,10 +22,10 @@ const duration = computed(() => {
 <template>
   <span>
     <span v-if="duration.hours > 0">
-      {{ $t('components.common.Duration.meta.hours', duration) }}
+      {{ t('components.common.Duration.meta.hours', duration) }}
     </span>
     <span v-else>
-      {{ $t('components.common.Duration.meta.minutes', duration) }}
+      {{ t('components.common.Duration.meta.minutes', duration) }}
     </span>
   </span>
 </template>
diff --git a/front/src/components/common/EmptyState.vue b/front/src/components/common/EmptyState.vue
index 0dfa822cc..48e3de59c 100644
--- a/front/src/components/common/EmptyState.vue
+++ b/front/src/components/common/EmptyState.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+
 interface Events {
   (e: 'refresh'): void
 }
@@ -7,6 +10,8 @@ interface Props {
   refresh?: boolean
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 withDefaults(defineProps<Props>(), {
   refresh: false
@@ -19,7 +24,7 @@ withDefaults(defineProps<Props>(), {
       <div class="content">
         <slot name="title">
           <i class="search icon" />
-          {{ $t('components.common.EmptyState.header.noResults') }}
+          {{ t('components.common.EmptyState.header.noResults') }}
         </slot>
       </div>
     </h4>
@@ -30,7 +35,7 @@ withDefaults(defineProps<Props>(), {
         class="ui button"
         @click="emit('refresh')"
       >
-        {{ $t('components.common.EmptyState.button.refresh') }}
+        {{ t('components.common.EmptyState.button.refresh') }}
       </button>
     </div>
   </div>
diff --git a/front/src/components/common/ExpandableDiv.vue b/front/src/components/common/ExpandableDiv.vue
index a47b8db69..a63dea7a7 100644
--- a/front/src/components/common/ExpandableDiv.vue
+++ b/front/src/components/common/ExpandableDiv.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useToggle } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   content: string
@@ -11,6 +12,8 @@ const props = withDefaults(defineProps<Props>(), {
   length: 150
 })
 
+const { t } = useI18n()
+
 const [expanded, toggleExpanded] = useToggle(false)
 const truncated = computed(() => props.content.slice(0, props.length))
 </script>
@@ -27,10 +30,10 @@ const truncated = computed(() => props.content.slice(0, props.length))
     >
       <br>
       <span v-if="expanded">
-        {{ $t('components.common.ExpandableDiv.button.less') }}
+        {{ t('components.common.ExpandableDiv.button.less') }}
       </span>
       <span v-else>
-        {{ $t('components.common.ExpandableDiv.button.more') }}
+        {{ t('components.common.ExpandableDiv.button.more') }}
       </span>
     </a>
   </div>
diff --git a/front/src/components/common/InlineSearchBar.vue b/front/src/components/common/InlineSearchBar.vue
index c5e314180..aba4e0fc2 100644
--- a/front/src/components/common/InlineSearchBar.vue
+++ b/front/src/components/common/InlineSearchBar.vue
@@ -42,7 +42,7 @@ const search = () => {
         for="search-query"
         class="hidden"
       >
-        {{ $t('components.common.InlineSearchBar.label.search') }}
+        {{ t('components.common.InlineSearchBar.label.search') }}
       </label>
       <input
         id="search-query"
diff --git a/front/src/components/common/LoginModal.vue b/front/src/components/common/LoginModal.vue
index b6212d870..438c71a4e 100644
--- a/front/src/components/common/LoginModal.vue
+++ b/front/src/components/common/LoginModal.vue
@@ -5,6 +5,7 @@ import type { Cover } from '~/types'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 interface Props {
   nextRoute: RouteLocationRaw
@@ -14,6 +15,8 @@ interface Props {
 
 defineProps<Props>()
 
+const store = useStore()
+
 const show = ref(false)
 
 const { t } = useI18n()
@@ -66,7 +69,7 @@ const labels = computed(() => ({
         {{ labels.login }}
       </router-link>
       <router-link
-        v-if="$store.state.instance.settings.users.registration_enabled.value"
+        v-if="store.state.instance.settings.users.registration_enabled.value"
         :to="{path: '/signup'}"
         class="ui labeled icon button"
       >
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index 164051a31..acdc03ce3 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -3,6 +3,7 @@ import type { BackendError } from '~/types'
 
 import { ref, computed } from 'vue'
 import { whenever } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import clip from 'text-clipper'
@@ -21,6 +22,8 @@ interface Props {
   truncateLength?: number
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   content: null,
@@ -91,19 +94,19 @@ const submit = async () => {
           href=""
           @click.stop.prevent="showMore = true"
         >
-          {{ $t('components.common.RenderedDescription.button.more') }}
+          {{ t('components.common.RenderedDescription.button.more') }}
         </a>
         <a
           v-else
           href=""
           @click.stop.prevent="showMore = false"
         >
-          {{ $t('components.common.RenderedDescription.button.less') }}
+          {{ t('components.common.RenderedDescription.button.less') }}
         </a>
       </template>
     </template>
     <p v-else-if="!isUpdating">
-      {{ $t('components.common.RenderedDescription.empty.noDescription') }}
+      {{ t('components.common.RenderedDescription.empty.noDescription') }}
     </p>
     <template v-if="!isUpdating && canUpdate && updateUrl">
       <div class="ui hidden divider" />
@@ -112,7 +115,7 @@ const submit = async () => {
         @click="isUpdating = true"
       >
         <i class="pencil icon" />
-        {{ $t('components.common.RenderedDescription.button.edit') }}
+        {{ t('components.common.RenderedDescription.button.edit') }}
       </span>
     </template>
     <form
@@ -126,7 +129,7 @@ const submit = async () => {
         class="ui negative message"
       >
         <h4 class="header">
-          {{ $t('components.common.RenderedDescription.header.failure') }}
+          {{ t('components.common.RenderedDescription.header.failure') }}
         </h4>
         <ul class="list">
           <li
@@ -145,14 +148,14 @@ const submit = async () => {
         class="left floated"
         @click.prevent="isUpdating = false"
       >
-        {{ $t('components.common.RenderedDescription.button.cancel') }}
+        {{ t('components.common.RenderedDescription.button.cancel') }}
       </a>
       <button
         :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
         type="submit"
         :disabled="isLoading"
       >
-        {{ $t('components.common.RenderedDescription.button.update') }}
+        {{ t('components.common.RenderedDescription.button.update') }}
       </button>
       <div class="ui clearing hidden divider" />
     </form>
diff --git a/front/src/components/common/UserLink.vue b/front/src/components/common/UserLink.vue
index 4c4d9f0d2..2a833b7ba 100644
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@@ -3,12 +3,17 @@ import type { User } from '~/types'
 
 import { hashCode, intToRGB } from '~/utils/color'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 interface Props {
   user: User
   avatar?: boolean
 }
 
+const store = useStore()
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<Props>(), {
   avatar: true
 })
@@ -22,7 +27,7 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
     <template v-if="avatar">
       <img
         v-if="user.avatar && user.avatar.urls.medium_square_crop"
-        v-lazy="$store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
         class="ui tiny circular avatar"
         alt=""
       >
@@ -33,6 +38,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
       >{{ user.username[0] }}</span>
       &nbsp;
     </template>
-    {{ $t('components.common.UserLink.link.username', {username: user.username}) }}
+    {{ t('components.common.UserLink.link.username', {username: user.username}) }}
   </span>
 </template>
diff --git a/front/src/components/common/UserMenu.vue b/front/src/components/common/UserMenu.vue
index 218898c87..56895e44b 100644
--- a/front/src/components/common/UserMenu.vue
+++ b/front/src/components/common/UserMenu.vue
@@ -2,6 +2,8 @@
 import { SUPPORTED_LOCALES, setI18nLanguage } from '~/init/locale'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
+import { useStore } from '~/store'
+import { useRoute } from 'vue-router'
 
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
@@ -10,9 +12,13 @@ interface Events {
   (e: 'show:shortcuts-modal'): void
 }
 
+const route = useRoute()
+const store = useStore()
+
 const emit = defineEmits<Events>()
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
+
 const themes = useThemeList()
 const { theme } = useTheme()
 
@@ -48,7 +54,7 @@ const labels = computed(() => ({
         <a
           v-for="(language, key) in SUPPORTED_LOCALES"
           :key="key"
-          :class="[{'active': $i18n.locale === key},'item']"
+          :class="[{'active': locale === key},'item']"
           :value="key"
           @click="setI18nLanguage(key)"
         >{{ language }}</a>
@@ -74,27 +80,27 @@ const labels = computed(() => ({
         </a>
       </div>
     </div>
-    <template v-if="$store.state.auth.authenticated">
+    <template v-if="store.state.auth.authenticated">
       <div class="divider" />
       <router-link
         class="item"
-        :to="{name: 'profile.overview', params: { username: $store.state.auth.username },}"
+        :to="{name: 'profile.overview', params: { username: store.state.auth.username },}"
       >
         <i class="user icon" />
         {{ labels.profile }}
       </router-link>
       <router-link
-        v-if="$store.state.auth.authenticated"
+        v-if="store.state.auth.authenticated"
         class="item"
         :to="{name: 'notifications'}"
       >
         <i class="bell icon" />
         <div
-          v-if="$store.state.ui.notifications.inbox > 0"
+          v-if="store.state.ui.notifications.inbox > 0"
           :title="labels.notifications"
           :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
         >
-          {{ $store.state.ui.notifications.inbox }}
+          {{ store.state.ui.notifications.inbox }}
         </div>
         {{ labels.notifications }}
       </router-link>
@@ -155,14 +161,14 @@ const labels = computed(() => ({
       {{ labels.shortcuts }}
     </a>
     <router-link
-      v-if="$route.path != '/about'"
+      v-if="route.path != '/about'"
       class="item"
       :to="{ name: 'about' }"
     >
       <i class="question circle outline icon" />
       {{ labels.about }}
     </router-link>
-    <template v-if="$store.state.auth.authenticated && $route.path != '/logout'">
+    <template v-if="store.state.auth.authenticated && route.path != '/logout'">
       <div class="divider" />
       <router-link
         class="item"
@@ -173,7 +179,7 @@ const labels = computed(() => ({
         {{ labels.logout }}
       </router-link>
     </template>
-    <template v-if="!$store.state.auth.authenticated">
+    <template v-if="!store.state.auth.authenticated">
       <div class="divider" />
       <router-link
         class="item"
@@ -183,7 +189,7 @@ const labels = computed(() => ({
         {{ labels.login }}
       </router-link>
     </template>
-    <template v-if="!$store.state.auth.authenticated && $store.state.instance.settings.users.registration_enabled.value">
+    <template v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value">
       <router-link
         class="item"
         :to="{ name: 'signup' }"
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index 700a10d3b..c44eb3db4 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -8,6 +8,8 @@ import useTheme from '~/composables/useTheme'
 import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
 
 import { SUPPORTED_LOCALES } from '~/init/locale'
 
@@ -21,6 +23,9 @@ interface Props {
   show: boolean
 }
 
+const router = useRouter()
+const store = useStore()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -62,18 +67,18 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
     :fullscreen="false"
   >
     <div
-      v-if="$store.state.auth.authenticated"
+      v-if="store.state.auth.authenticated"
       class="header"
     >
       <img
-        v-if="$store.state.auth.profile?.avatar && $store.state.auth.profile?.avatar.urls.medium_square_crop"
-        v-lazy="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
+        v-if="store.state.auth.profile?.avatar && store.state.auth.profile?.avatar.urls.medium_square_crop"
+        v-lazy="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
         alt=""
         class="ui centered small circular image"
       >
       <actor-avatar
         v-else
-        :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
+        :actor="{preferred_username: store.state.auth.username, full_username: store.state.auth.username,}"
       />
       <h3 class="user-modal title">
         {{ labels.header }}
@@ -124,12 +129,12 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
           </div>
         </div>
         <div class="ui divider" />
-        <template v-if="$store.state.auth.authenticated">
+        <template v-if="store.state.auth.authenticated">
           <div class="row">
             <div
               class="column"
               role="button"
-              @click.prevent.exact="$router.push({name: 'profile.overview', params: { username: $store.state.auth.username }})"
+              @click.prevent.exact="router.push({name: 'profile.overview', params: { username: store.state.auth.username }})"
             >
               <i class="user icon user-modal list-icon" />
               <span class="user-modal list-item">{{ labels.profile }}</span>
@@ -137,7 +142,7 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
           </div>
           <div class="row">
             <router-link
-              v-if="$store.state.auth.authenticated"
+              v-if="store.state.auth.authenticated"
               v-slot="{ navigate }"
               custom
               :to="{ name: 'notifications' }"
@@ -212,7 +217,7 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
         <div class="ui divider" />
 
         <router-link
-          v-if="$store.state.auth.authenticated"
+          v-if="store.state.auth.authenticated"
           v-slot="{ navigate }"
           custom
           :to="{ name: 'logout' }"
@@ -244,7 +249,7 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
           </div>
         </router-link>
         <router-link
-          v-if="!$store.state.auth.authenticated && $store.state.instance.settings.users.registration_enabled.value"
+          v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value"
           v-slot="{ navigate }"
           custom
           :to="{ name: 'signup' }"
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index c14d2b0e5..4c62d8396 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -112,7 +112,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
     <section class="ui vertical center aligned stripe segment">
       <div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']">
         <div class="ui text loader">
-          {{ $t('components.favorites.List.loader.loading') }}
+          {{ t('components.favorites.List.loader.loading') }}
         </div>
       </div>
       <h2
@@ -120,7 +120,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         class="ui center aligned icon header"
       >
         <i class="circular inverted heart pink icon" />
-        {{ $t('components.favorites.List.header.favorites', $store.state.favorites.count) }}
+        {{ t('components.favorites.List.header.favorites', $store.state.favorites.count) }}
       </h2>
       <radio-button
         v-if="$store.state.favorites.count > 0"
@@ -135,7 +135,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="favorites-ordering">
-              {{ $t('components.favorites.List.ordering.label') }}
+              {{ t('components.favorites.List.ordering.label') }}
             </label>
             <select
               id="favorites-ordering"
@@ -153,7 +153,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </div>
           <div class="field">
             <label for="favorites-ordering-direction">
-              {{ $t('components.favorites.List.ordering.direction.label') }}
+              {{ t('components.favorites.List.ordering.direction.label') }}
             </label>
             <select
               id="favorites-ordering-direction"
@@ -161,16 +161,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('components.favorites.List.ordering.direction.ascending') }}
+                {{ t('components.favorites.List.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('components.favorites.List.ordering.direction.descending') }}
+                {{ t('components.favorites.List.ordering.direction.descending') }}
               </option>
             </select>
           </div>
           <div class="field">
             <label for="favorites-results">
-              {{ $t('components.favorites.List.pagination.results') }}
+              {{ t('components.favorites.List.pagination.results') }}
             </label>
             <select
               id="favorites-results"
@@ -209,14 +209,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
     >
       <div class="ui icon header">
         <i class="broken heart icon" />
-        {{ $t('components.favorites.List.empty.noFavorites') }}
+        {{ t('components.favorites.List.empty.noFavorites') }}
       </div>
       <router-link
         :to="'/library'"
         class="ui success labeled icon button"
       >
         <i class="headphones icon" />
-        {{ $t('components.favorites.List.link.library') }}
+        {{ t('components.favorites.List.link.library') }}
       </router-link>
     </div>
   </main>
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 3116f9ee4..abfd0af37 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -36,10 +36,10 @@ const title = computed(() => isFavorite.value
   >
     <i class="heart icon" />
     <span v-if="isFavorite">
-      {{ $t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
+      {{ t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
     </span>
     <span v-else>
-      {{ $t('components.favorites.TrackFavoriteIcon.button.add') }}
+      {{ t('components.favorites.TrackFavoriteIcon.button.add') }}
     </span>
   </button>
   <button
diff --git a/front/src/components/federation/FetchButton.vue b/front/src/components/federation/FetchButton.vue
index 401b6f455..79fb32147 100644
--- a/front/src/components/federation/FetchButton.vue
+++ b/front/src/components/federation/FetchButton.vue
@@ -6,6 +6,10 @@ import SemanticModal from '~/components/semantic/Modal.vue'
 import { useTimeoutFn } from '@vueuse/core'
 import { ref } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
 interface Events {
   (e: 'refresh'): void
 }
@@ -80,7 +84,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
       class="small"
     >
       <h3 class="header">
-        {{ $t('components.federation.FetchButton.header.refresh') }}
+        {{ t('components.federation.FetchButton.header.refresh') }}
       </h3>
       <div class="scrolling content">
         <template v-if="data && data.status != 'pending'">
@@ -89,10 +93,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
             class="ui message"
           >
             <h4 class="header">
-              {{ $t('components.federation.FetchButton.header.skipped') }}
+              {{ t('components.federation.FetchButton.header.skipped') }}
             </h4>
             <p>
-              {{ $t('components.federation.FetchButton.description.skipped') }}
+              {{ t('components.federation.FetchButton.description.skipped') }}
             </p>
           </div>
           <div
@@ -100,10 +104,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
             class="ui success message"
           >
             <h4 class="header">
-              {{ $t('components.federation.FetchButton.header.success') }}
+              {{ t('components.federation.FetchButton.header.success') }}
             </h4>
             <p>
-              {{ $t('components.federation.FetchButton.description.success') }}
+              {{ t('components.federation.FetchButton.description.success') }}
             </p>
           </div>
           <div
@@ -111,16 +115,16 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
             class="ui error message"
           >
             <h4 class="header">
-              {{ $t('components.federation.FetchButton.header.failure') }}
+              {{ t('components.federation.FetchButton.header.failure') }}
             </h4>
             <p>
-              {{ $t('components.federation.FetchButton.description.failure') }}
+              {{ t('components.federation.FetchButton.description.failure') }}
             </p>
             <table class="ui very basic collapsing celled table">
               <tbody>
                 <tr>
                   <td>
-                    {{ $t('components.federation.FetchButton.table.error.label.type') }}
+                    {{ t('components.federation.FetchButton.table.error.label.type') }}
                   </td>
                   <td>
                     {{ data.detail.error_code }}
@@ -128,32 +132,32 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.federation.FetchButton.table.error.label.detail') }}
+                    {{ t('components.federation.FetchButton.table.error.label.detail') }}
                   </td>
                   <td>
                     <span v-if="data.detail.error_code === 'http' && data.detail.status_code">
-                      {{ $t('components.federation.FetchButton.table.error.value.httpStatus', {status: data.detail.status_code}) }}
+                      {{ t('components.federation.FetchButton.table.error.value.httpStatus', {status: data.detail.status_code}) }}
                     </span>
                     <span v-else-if="['http', 'request'].includes(data.detail.error_code)">
-                      {{ $t('components.federation.FetchButton.table.error.value.httpError') }}
+                      {{ t('components.federation.FetchButton.table.error.value.httpError') }}
                     </span>
                     <span v-else-if="data.detail.error_code === 'timeout'">
-                      {{ $t('components.federation.FetchButton.table.error.value.timeoutError') }}
+                      {{ t('components.federation.FetchButton.table.error.value.timeoutError') }}
                     </span>
                     <span v-else-if="data.detail.error_code === 'connection'">
-                      {{ $t('components.federation.FetchButton.table.error.value.connectionError') }}
+                      {{ t('components.federation.FetchButton.table.error.value.connectionError') }}
                     </span>
                     <span v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].includes(data.detail.error_code)">
-                      {{ $t('components.federation.FetchButton.table.error.value.invalidJsonError') }}
+                      {{ t('components.federation.FetchButton.table.error.value.invalidJsonError') }}
                     </span>
                     <span v-else-if="data.detail.error_code === 'validation'">
-                      {{ $t('components.federation.FetchButton.table.error.value.invalidAttributesError') }}
+                      {{ t('components.federation.FetchButton.table.error.value.invalidAttributesError') }}
                     </span>
                     <span v-else-if="data.detail.error_code === 'unhandled'">
-                      {{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
+                      {{ t('components.federation.FetchButton.table.error.value.unknownError') }}
                     </span>
                     <span v-else>
-                      {{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
+                      {{ t('components.federation.FetchButton.table.error.value.unknownError') }}
                     </span>
                   </td>
                 </tr>
@@ -166,7 +170,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui active inverted dimmer"
         >
           <div class="ui text loader">
-            {{ $t('components.federation.FetchButton.loader.fetchRequest') }}
+            {{ t('components.federation.FetchButton.loader.fetchRequest') }}
           </div>
         </div>
         <div
@@ -174,7 +178,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui active inverted dimmer"
         >
           <div class="ui text loader">
-            {{ $t('components.federation.FetchButton.loader.awaitingResult') }}
+            {{ t('components.federation.FetchButton.loader.awaitingResult') }}
           </div>
         </div>
         <div
@@ -183,7 +187,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui negative message"
         >
           <h4 class="header">
-            {{ $t('components.federation.FetchButton.header.saveFailure') }}
+            {{ t('components.federation.FetchButton.header.saveFailure') }}
           </h4>
           <ul class="list">
             <li
@@ -200,23 +204,23 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui warning message"
         >
           <h4 class="header">
-            {{ $t('components.federation.FetchButton.header.pending') }}
+            {{ t('components.federation.FetchButton.header.pending') }}
           </h4>
           <p>
-            {{ $t('components.federation.FetchButton.description.pending') }}
+            {{ t('components.federation.FetchButton.description.pending') }}
           </p>
         </div>
       </div>
       <div class="actions">
         <button class="ui basic cancel button">
-          {{ $t('components.federation.FetchButton.button.close') }}
+          {{ t('components.federation.FetchButton.button.close') }}
         </button>
         <button
           v-if="data && data.status === 'finished'"
           class="ui confirm success button"
           @click.prevent="showModal = false; emit('refresh')"
         >
-          {{ $t('components.federation.FetchButton.button.reload') }}
+          {{ t('components.federation.FetchButton.button.reload') }}
         </button>
       </div>
     </semantic-modal>
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index ffe34a217..ed44f8c15 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -2,6 +2,8 @@
 import type { Library } from '~/types'
 
 import { ref, reactive } from 'vue'
+import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -17,6 +19,9 @@ interface Props {
   url: string
 }
 
+const { t } = useI18n()
+const store = useStore()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -64,7 +69,7 @@ fetchData()
       v-if="!isLoading && libraries.length === 0"
       class="ui subtitle"
     >
-      {{ $t('components.federation.LibraryWidget.empty.noMatch') }}
+      {{ t('components.federation.LibraryWidget.empty.noMatch') }}
     </p>
     <div class="ui hidden divider" />
     <div class="ui cards">
@@ -78,7 +83,7 @@ fetchData()
         v-for="library in libraries"
         :key="library.uuid"
         :display-scan="false"
-        :display-follow="$store.state.auth.authenticated && library.actor.full_username != $store.state.auth.fullUsername"
+        :display-follow="store.state.auth.authenticated && library.actor.full_username != store.state.auth.fullUsername"
         :initial-library="library"
         :display-copy-fid="true"
       />
@@ -90,7 +95,7 @@ fetchData()
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        {{ $t('components.federation.LibraryWidget.button.showMore') }}
+        {{ t('components.federation.LibraryWidget.button.showMore') }}
       </button>
     </template>
   </div>
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 69efaab32..ba63bfb8b 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -4,8 +4,9 @@ import type { Track, Album, Artist, Library, ArtistCredit } from '~/types'
 import { momentFormat } from '~/utils/filters'
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { sum } from 'lodash-es'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -25,6 +26,8 @@ interface Props {
   id: number
 }
 
+const store = useStore()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -116,6 +119,8 @@ const fetchTracks = async () => {
 watch(() => props.id, fetchData, { immediate: true })
 
 const router = useRouter()
+const route = useRoute()
+
 const remove = async () => {
   isLoading.value = true
   try {
@@ -156,7 +161,7 @@ const remove = async () => {
                   <div class="large two-images">
                     <img
                       v-if="object.cover && object.cover.urls.original"
-                      v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+                      v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
                       alt=""
                       class="channel-image"
                     >
@@ -168,7 +173,7 @@ const remove = async () => {
                     >
                     <img
                       v-if="object.cover && object.cover.urls.original"
-                      v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+                      v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
                       alt=""
                       class="channel-image"
                     >
@@ -193,10 +198,10 @@ const remove = async () => {
                   <template v-if="totalTracks > 0">
                     <div class="ui hidden very small divider" />
                     <span v-if="isSerie">
-                      {{ $t('components.library.AlbumBase.meta.episodes', totalTracks) }}
+                      {{ t('components.library.AlbumBase.meta.episodes', totalTracks) }}
                     </span>
                     <span v-else>
-                      {{ $t('components.library.AlbumBase.meta.tracks', totalTracks) }}
+                      {{ t('components.library.AlbumBase.meta.tracks', totalTracks) }}
                     </span>
                   </template>
                   <div class="ui small hidden divider" />
@@ -238,7 +243,7 @@ const remove = async () => {
             >
               <img
                 v-if="object.cover && object.cover.urls.original"
-                v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+                v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
                 alt=""
                 class="channel-image"
               >
@@ -271,10 +276,10 @@ const remove = async () => {
               </template>
               <template v-if="totalTracks > 0">
                 <span v-if="isSerie">
-                  {{ $t('components.library.AlbumBase.meta.episodes', totalTracks) }}
+                  {{ t('components.library.AlbumBase.meta.episodes', totalTracks) }}
                 </span>
                 <span v-else>
-                  {{ $t('components.library.AlbumBase.meta.tracks', totalTracks) }}
+                  {{ t('components.library.AlbumBase.meta.tracks', totalTracks) }}
                 </span>
                 <span class="middle middledot symbol" />
               </template>
@@ -299,7 +304,7 @@ const remove = async () => {
                 :artist-credit="artistCredit"
                 @remove="remove"
               />
-              <div v-if="(object.tags && object.tags.length > 0) || object.description || $store.state.auth.authenticated && object.is_local">
+              <div v-if="(object.tags && object.tags.length > 0) || object.description || store.state.auth.authenticated && object.is_local">
                 <div class="ui small hidden divider" />
                 <div class="ui divider" />
                 <div class="ui small hidden divider" />
@@ -313,11 +318,11 @@ const remove = async () => {
                   :can-update="false"
                 />
                 <router-link
-                  v-else-if="$store.state.auth.authenticated && object.is_local"
+                  v-else-if="store.state.auth.authenticated && object.is_local"
                   :to="{name: 'library.albums.edit', params: {id: object.id }}"
                 >
                   <i class="pencil icon" />
-                  {{ $t('components.library.AlbumBase.link.addDescription') }}
+                  {{ t('components.library.AlbumBase.link.addDescription') }}
                 </router-link>
               </div>
             </div>
@@ -329,18 +334,18 @@ const remove = async () => {
                 :can-update="false"
               />
               <router-link
-                v-else-if="$store.state.auth.authenticated && object.is_local"
+                v-else-if="store.state.auth.authenticated && object.is_local"
                 :to="{name: 'library.albums.edit', params: {id: object.id }}"
               >
                 <i class="pencil icon" />
-                {{ $t('components.library.AlbumBase.link.addDescription') }}
+                {{ t('components.library.AlbumBase.link.addDescription') }}
               </router-link>
             </template>
           </div>
           <div class="nine wide column">
             <router-view
               v-if="object"
-              :key="$route.fullPath"
+              :key="route.fullPath"
               :paginate-by="paginateBy"
               :total-tracks="totalTracks"
               :is-serie="isSerie"
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index af42d9543..a33569f55 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -7,6 +7,7 @@ import TrackTable from '~/components/audio/track/Table.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'libraries-loaded', libraries: Library[]): void
@@ -24,6 +25,7 @@ interface Props {
 
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
+const { t } = useI18n()
 
 const getDiscKey = (disc: Track[]) => disc?.map(track => track.id).join('|') ?? ''
 const page = ref(1)
@@ -58,10 +60,10 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
   >
     <h2 class="ui header">
       <span v-if="isSerie">
-        {{ $t('components.library.AlbumDetail.header.episodes') }}
+        {{ t('components.library.AlbumDetail.header.episodes') }}
       </span>
       <span v-else>
-        {{ $t('components.library.AlbumDetail.header.tracks') }}
+        {{ t('components.library.AlbumDetail.header.tracks') }}
       </span>
     </h2>
 
@@ -85,7 +87,7 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
               :tracks="discs[index]"
             />
             <h3>
-              {{ $t('components.library.AlbumDetail.meta.volume', {number: tracks[0].disc_number}) }}
+              {{ t('components.library.AlbumDetail.meta.volume', {number: tracks[0].disc_number}) }}
             </h3>
             <track-table
               :is-album="true"
@@ -125,13 +127,13 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
 
     <template v-if="artistCredit && !artistCredit[0]?.artist.channel && !isSerie">
       <h2>
-        {{ $t('components.library.AlbumDetail.header.libraries') }}
+        {{ t('components.library.AlbumDetail.header.libraries') }}
       </h2>
       <library-widget
         :url="'albums/' + object.id + '/libraries/'"
         @loaded="emit('libraries-loaded', $event)"
       >
-        {{ $t('components.library.AlbumDetail.description.libraries') }}
+        {{ t('components.library.AlbumDetail.description.libraries') }}
       </library-widget>
     </template>
   </div>
diff --git a/front/src/components/library/AlbumDropdown.vue b/front/src/components/library/AlbumDropdown.vue
index 6dcb1b49a..d7fc1cd78 100644
--- a/front/src/components/library/AlbumDropdown.vue
+++ b/front/src/components/library/AlbumDropdown.vue
@@ -3,6 +3,7 @@ import type { Album, ArtistCredit, Library } from '~/types'
 
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 import { getDomain } from '~/utils'
 
@@ -29,6 +30,7 @@ interface Props {
   isSerie: boolean
 }
 
+const store = useStore()
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 const { report, getReportableObjects } = useReport()
@@ -59,7 +61,7 @@ const open = ref(false)
       v-model:show="showEmbedModal"
     >
       <h4 class="header">
-        {{ $t('components.library.AlbumDropdown.modal.embed.header') }}
+        {{ t('components.library.AlbumDropdown.modal.embed.header') }}
       </h4>
       <div class="scrolling content">
         <div class="description">
@@ -76,7 +78,7 @@ const open = ref(false)
           variant="outline"
           @click="showEmbedModal = false"
         >
-          {{ $t('components.library.AlbumDropdown.button.cancel') }}
+          {{ t('components.library.AlbumDropdown.button.cancel') }}
         </Button>
       </div>
     </semantic-modal>
@@ -94,12 +96,12 @@ const open = ref(false)
 
       <template #items>
         <PopoverItem
-          v-if="domain != $store.getters['instance/domain']"
+          v-if="domain != store.getters['instance/domain']"
           :href="object.fid"
           target="_blank"
         >
           <i class="bi bi-box-arrow-up-right" />
-          {{ $t('components.library.AlbumDropdown.link.domain') }}
+          {{ t('components.library.AlbumDropdown.link.domain') }}
         </PopoverItem>
 
         <PopoverItem
@@ -107,7 +109,7 @@ const open = ref(false)
           @click="showEmbedModal = !showEmbedModal"
         >
           <i class="bi bi-code" />
-          {{ $t('components.library.AlbumDropdown.button.embed') }}
+          {{ t('components.library.AlbumDropdown.button.embed') }}
         </PopoverItem>
 
         <PopoverItem
@@ -117,7 +119,7 @@ const open = ref(false)
           rel="noreferrer noopener"
         >
           <i class="bi bi-box-arrow-up-right" />
-          {{ $t('components.library.AlbumDropdown.link.musicbrainz') }}
+          {{ t('components.library.AlbumDropdown.link.musicbrainz') }}
         </PopoverItem>
 
         <PopoverItem
@@ -127,7 +129,7 @@ const open = ref(false)
           rel="noreferrer noopener"
         >
           <i class="bi bi-box-arrow-up-right" />
-          {{ $t('components.library.AlbumDropdown.link.discogs') }}
+          {{ t('components.library.AlbumDropdown.link.discogs') }}
         </PopoverItem>
 
         <PopoverItem
@@ -135,18 +137,18 @@ const open = ref(false)
           :to="{name: 'library.albums.edit', params: {id: object.id }}"
         >
           <i class="bi bi-pencil" />
-          {{ $t('components.library.AlbumDropdown.button.edit') }}
+          {{ t('components.library.AlbumDropdown.button.edit') }}
         </PopoverItem>
 
         <PopoverItem
-          v-if="artistCredit[0] && $store.state.auth.authenticated && artistCredit[0].artist.channel && artistCredit[0].artist.attributed_to?.full_username === $store.state.auth.fullUsername"
+          v-if="artistCredit[0] && store.state.auth.authenticated && artistCredit[0].artist.channel && artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
         >
           <DangerousButton
             :is-loading="isLoading"
             @confirm="remove()"
           >
             <i class="bi bi-trash" />
-            {{ $t('components.library.AlbumDropdown.button.delete') }}
+            {{ t('components.library.AlbumDropdown.button.delete') }}
           </DangerousButton>
         </PopoverItem>
 
@@ -164,21 +166,21 @@ const open = ref(false)
         <hr>
 
         <PopoverItem
-          v-if="$store.state.auth.availablePermissions['library']"
+          v-if="store.state.auth.availablePermissions['library']"
           :to="{name: 'manage.library.albums.detail', params: {id: object.id}}"
         >
           <i class="bi bi-wrench" />
-          {{ $t('components.library.AlbumDropdown.link.moderation') }}
+          {{ t('components.library.AlbumDropdown.link.moderation') }}
         </PopoverItem>
 
         <PopoverItem
-          v-if="$store.state.auth.profile && $store.state.auth.profile?.is_superuser"
-          :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
+          v-if="store.state.auth.profile && store.state.auth.profile?.is_superuser"
+          :href="store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
           target="_blank"
           rel="noopener noreferrer"
         >
           <i class="bi bi-wrench" />
-          {{ $t('components.library.AlbumDropdown.link.django') }}
+          {{ t('components.library.AlbumDropdown.link.django') }}
         </PopoverItem>
       </template>
     </Popover>
diff --git a/front/src/components/library/AlbumEdit.vue b/front/src/components/library/AlbumEdit.vue
index 0d27fd3c8..a9acace7d 100644
--- a/front/src/components/library/AlbumEdit.vue
+++ b/front/src/components/library/AlbumEdit.vue
@@ -3,6 +3,7 @@ import type { EditObjectType } from '~/composables/moderation/useEditConfigs'
 import type { Album, Library, Actor } from '~/types'
 
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 
 import EditForm from '~/components/library/EditForm.vue'
 
@@ -14,6 +15,7 @@ interface Props {
 
 defineProps<Props>()
 
+const { t } = useI18n()
 const store = useStore()
 const canEdit = store.state.auth.availablePermissions.library
 </script>
@@ -23,17 +25,17 @@ const canEdit = store.state.auth.availablePermissions.library
     <div class="ui text container">
       <h2>
         <span v-if="canEdit">
-          {{ $t('components.library.AlbumEdit.header.edit') }}
+          {{ t('components.library.AlbumEdit.header.edit') }}
         </span>
         <span v-else>
-          {{ $t('components.library.AlbumEdit.header.suggest') }}
+          {{ t('components.library.AlbumEdit.header.suggest') }}
         </span>
       </h2>
       <div
         v-if="!object.is_local"
         class="ui message"
       >
-        {{ $t('components.library.AlbumEdit.message.remote') }}
+        {{ t('components.library.AlbumEdit.message.remote') }}
       </div>
       <edit-form
         v-else
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index fa0b51e3e..47b064624 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -122,7 +122,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
     <section class="ui vertical stripe segment">
     /front/src/components/library/Albums.vue
       <h2 class="ui header">
-        {{ $t('components.library.Albums.header.browse') }}
+        {{ t('components.library.Albums.header.browse') }}
       </h2>
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
@@ -131,7 +131,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="albums-search">
-              {{ $t('components.library.Albums.label.search') }}
+              {{ t('components.library.Albums.label.search') }}
             </label>
             <div class="ui action input">
               <input
@@ -151,11 +151,11 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </div>
           </div>
           <div class="field">
-            <label for="tags-search">{{ $t('components.library.Albums.label.tags') }}</label>
+            <label for="tags-search">{{ t('components.library.Albums.label.tags') }}</label>
             <tags-selector v-model="tags" />
           </div>
           <div class="field">
-            <label for="album-ordering">{{ $t('components.library.Albums.ordering.label') }}</label>
+            <label for="album-ordering">{{ t('components.library.Albums.ordering.label') }}</label>
             <select
               id="album-ordering"
               v-model="ordering"
@@ -171,22 +171,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="album-ordering-direction">{{ $t('components.library.Albums.ordering.direction.label') }}</label>
+            <label for="album-ordering-direction">{{ t('components.library.Albums.ordering.direction.label') }}</label>
             <select
               id="album-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('components.library.Albums.ordering.direction.ascending') }}
+                {{ t('components.library.Albums.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('components.library.Albums.ordering.direction.descending') }}
+                {{ t('components.library.Albums.ordering.direction.descending') }}
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="album-results">{{ $t('components.library.Albums.pagination.results') }}</label>
+            <label for="album-results">{{ t('components.library.Albums.pagination.results') }}</label>
             <select
               id="album-results"
               v-model="paginateBy"
@@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         >
           <div class="ui icon header">
             <i class="compact disc icon" />
-            {{ $t('components.library.Albums.empty.noResults') }}
+            {{ t('components.library.Albums.empty.noResults') }}
           </div>
           <router-link
             v-if="$store.state.auth.authenticated"
@@ -236,7 +236,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             class="ui success button labeled icon"
           >
             <i class="upload icon" />
-            {{ $t('components.library.Albums.link.addMusic') }}
+            {{ t('components.library.Albums.link.addMusic') }}
           </router-link>
         </div>
       </div>
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index e478d58eb..e06698f9a 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -3,7 +3,7 @@ import type { Track, Album, Artist, Library } from '~/types'
 
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { getDomain } from '~/utils'
 import { useStore } from '~/store'
 
@@ -41,6 +41,7 @@ const totalTracks = ref(0)
 const logger = useLogger()
 const store = useStore()
 const router = useRouter()
+const route = useRoute()
 
 const domain = computed(() => getDomain(object.value?.fid ?? ''))
 const isPlayable = computed(() => !!object.value?.albums.some(album => album.is_playable))
@@ -117,8 +118,8 @@ watch(() => props.id, fetchData, { immediate: true })
                 v-if="albums"
                 class="sub header"
               >
-                {{ $t('components.library.ArtistBase.meta.tracks', totalTracks) }}
-                {{ $t('components.library.ArtistBase.meta.albums', totalAlbums) }}
+                {{ t('components.library.ArtistBase.meta.tracks', totalTracks) }}
+                {{ t('components.library.ArtistBase.meta.albums', totalAlbums) }}
               </div>
             </div>
           </h2>
@@ -140,7 +141,7 @@ watch(() => props.id, fetchData, { immediate: true })
                 class="vibrant"
                 :artist="object"
               >
-                {{ $t('components.library.ArtistBase.button.play') }}
+                {{ t('components.library.ArtistBase.button.play') }}
               </play-button>
             </div>
 
@@ -149,7 +150,7 @@ watch(() => props.id, fetchData, { immediate: true })
               v-model:show="showEmbedModal"
             >
               <h4 class="header">
-                {{ $t('components.library.ArtistBase.modal.embed.header') }}
+                {{ t('components.library.ArtistBase.modal.embed.header') }}
               </h4>
               <div class="scrolling content">
                 <div class="description">
@@ -161,7 +162,7 @@ watch(() => props.id, fetchData, { immediate: true })
               </div>
               <div class="actions">
                 <button class="ui deny button">
-                  {{ $t('components.library.ArtistBase.button.cancel') }}
+                  {{ t('components.library.ArtistBase.button.cancel') }}
                 </button>
               </div>
             </semantic-modal>
@@ -172,20 +173,20 @@ watch(() => props.id, fetchData, { immediate: true })
                   class="ui button"
                   @click="toggleOpen"
                 >
-                  {{ $t('components.library.ArtistBase.button.more') }}
+                  {{ t('components.library.ArtistBase.button.more') }}
                   <i class="dropdown icon" />
                 </button>
               </template>
 
               <template #items>
                 <PopoverItem
-                  v-if="domain != $store.getters['instance/domain']"
+                  v-if="domain != store.getters['instance/domain']"
                   :href="object.fid"
                   target="_blank"
                   class="funkwhale item"
                 >
                   <i class="external icon" />
-                  {{ $t('components.library.ArtistBase.link.domain', {domain: domain}) }}
+                  {{ t('components.library.ArtistBase.link.domain', {domain: domain}) }}
                 </PopoverItem>
 
                 <PopoverItem
@@ -193,7 +194,7 @@ watch(() => props.id, fetchData, { immediate: true })
                   @click="showEmbedModal = !showEmbedModal"
                 >
                   <i class="code icon" />
-                  {{ $t('components.library.ArtistBase.button.embed') }}
+                  {{ t('components.library.ArtistBase.button.embed') }}
                 </PopoverItem>
 
                 <PopoverItem
@@ -202,7 +203,7 @@ watch(() => props.id, fetchData, { immediate: true })
                   rel="noreferrer noopener"
                 >
                   <i class="wikipedia w icon" />
-                  {{ $t('components.library.ArtistBase.link.wikipedia') }}
+                  {{ t('components.library.ArtistBase.link.wikipedia') }}
                 </PopoverItem>
 
                 <PopoverItem
@@ -212,7 +213,7 @@ watch(() => props.id, fetchData, { immediate: true })
                   rel="noreferrer noopener"
                 >
                   <i class="external icon" />
-                  {{ $t('components.library.ArtistBase.link.musicbrainz') }}
+                  {{ t('components.library.ArtistBase.link.musicbrainz') }}
                 </PopoverItem>
 
                 <PopoverItem
@@ -221,7 +222,7 @@ watch(() => props.id, fetchData, { immediate: true })
                   rel="noreferrer noopener"
                 >
                   <i class="external icon" />
-                  {{ $t('components.library.ArtistBase.link.discogs') }}
+                  {{ t('components.library.ArtistBase.link.discogs') }}
                 </PopoverItem>
 
                 <PopoverItem
@@ -229,7 +230,7 @@ watch(() => props.id, fetchData, { immediate: true })
                   :to="{name: 'library.artists.edit', params: {id: object.id }}"
                 >
                   <i class="edit icon" />
-                  {{ $t('components.library.ArtistBase.button.edit') }}
+                  {{ t('components.library.ArtistBase.button.edit') }}
                 </PopoverItem>
 
                 <hr>
@@ -245,21 +246,21 @@ watch(() => props.id, fetchData, { immediate: true })
                 <hr>
 
                 <PopoverItem
-                  v-if="$store.state.auth.availablePermissions['library']"
+                  v-if="store.state.auth.availablePermissions['library']"
                   :to="{name: 'manage.library.artists.detail', params: {id: object.id}}"
                 >
                   <i class="wrench icon" />
-                  {{ $t('components.library.ArtistBase.link.moderation') }}
+                  {{ t('components.library.ArtistBase.link.moderation') }}
                 </PopoverItem>
 
                 <PopoverItem
-                  v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
-                  :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/artist/${object.id}`)"
+                  v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
+                  :href="store.getters['instance/absoluteUrl'](`/api/admin/music/artist/${object.id}`)"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
                   <i class="wrench icon" />
-                  {{ $t('components.library.ArtistBase.link.django') }}
+                  {{ t('components.library.ArtistBase.link.django') }}
                 </PopoverItem>
               </template>
             </Popover>
@@ -267,7 +268,7 @@ watch(() => props.id, fetchData, { immediate: true })
         </div>
       </section>
       <router-view
-        :key="$route.fullPath"
+        :key="route.fullPath"
         :tracks="tracks"
         :next-tracks-url="nextTracksUrl"
         :next-albums-url="nextAlbumsUrl"
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index 065e25b33..b3fd731d0 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -4,6 +4,8 @@ import type { ContentFilter } from '~/store/moderation'
 
 import { ref, computed, reactive } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import axios from 'axios'
 
@@ -26,6 +28,8 @@ interface Props {
   nextAlbumsUrl?: string | null
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   nextTracksUrl: null,
@@ -65,19 +69,19 @@ const loadMoreAlbums = async () => {
       <div class="ui hidden divider" />
       <div class="ui message">
         <p>
-          {{ $t('components.library.ArtistDetail.message.filter') }}
+          {{ t('components.library.ArtistDetail.message.filter') }}
         </p>
         <router-link
           class="right floated"
           :to="{name: 'settings'}"
         >
-          {{ $t('components.library.ArtistDetail.link.filter') }}
+          {{ t('components.library.ArtistDetail.link.filter') }}
         </router-link>
         <button
           class="ui basic tiny button"
-          @click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
+          @click="store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
         >
-          {{ $t('components.library.ArtistDetail.button.filter') }}
+          {{ t('components.library.ArtistDetail.button.filter') }}
         </button>
       </div>
     </div>
@@ -92,7 +96,7 @@ const loadMoreAlbums = async () => {
       class="ui vertical stripe segment"
     >
       <h2>
-        {{ $t('components.library.ArtistDetail.header.album') }}
+        {{ t('components.library.ArtistDetail.header.album') }}
       </h2>
       <div class="ui cards app-cards">
         <album-card
@@ -107,7 +111,7 @@ const loadMoreAlbums = async () => {
         :class="['ui', {loading: isLoadingMoreAlbums}, 'button']"
         @click="loadMoreAlbums()"
       >
-        {{ $t('components.library.ArtistDetail.button.more') }}
+        {{ t('components.library.ArtistDetail.button.more') }}
       </button>
     </section>
     <section
@@ -122,7 +126,7 @@ const loadMoreAlbums = async () => {
       >
         <template #header>
           <h2>
-            {{ $t('components.library.ArtistDetail.header.track') }}
+            {{ t('components.library.ArtistDetail.header.track') }}
           </h2>
           <div class="ui hidden divider" />
         </template>
@@ -130,13 +134,13 @@ const loadMoreAlbums = async () => {
     </section>
     <section class="ui vertical stripe segment">
       <h2>
-        {{ $t('components.library.ArtistDetail.header.library') }}
+        {{ t('components.library.ArtistDetail.header.library') }}
       </h2>
       <library-widget
         :url="'artists/' + object.id + '/libraries/'"
         @loaded="emit('libraries-loaded', $event)"
       >
-        {{ $t('components.library.ArtistDetail.description.library') }}
+        {{ t('components.library.ArtistDetail.description.library') }}
       </library-widget>
     </section>
   </div>
diff --git a/front/src/components/library/ArtistEdit.vue b/front/src/components/library/ArtistEdit.vue
index 83acc7983..441a39238 100644
--- a/front/src/components/library/ArtistEdit.vue
+++ b/front/src/components/library/ArtistEdit.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { EditObjectType } from '~/composables/moderation/useEditConfigs'
 import type { Artist, Library } from '~/types'
+import { useI18n } from 'vue-i18n'
+
 
 import { useStore } from '~/store'
 
@@ -14,7 +16,9 @@ interface Props {
 
 defineProps<Props>()
 
+const { t } = useI18n()
 const store = useStore()
+
 const canEdit = store.state.auth.availablePermissions.library
 </script>
 
@@ -23,17 +27,17 @@ const canEdit = store.state.auth.availablePermissions.library
     <div class="ui text container">
       <h2>
         <span v-if="canEdit">
-          {{ $t('components.library.ArtistEdit.header.edit') }}
+          {{ t('components.library.ArtistEdit.header.edit') }}
         </span>
         <span v-else>
-          {{ $t('components.library.ArtistEdit.header.suggest') }}
+          {{ t('components.library.ArtistEdit.header.suggest') }}
         </span>
       </h2>
       <div
         v-if="!object.is_local"
         class="ui message"
       >
-        {{ $t('components.library.ArtistEdit.message.remote') }}
+        {{ t('components.library.ArtistEdit.message.remote') }}
       </div>
       <edit-form
         v-else
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index e1202017b..d84ca5b24 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -123,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
     <section class="ui vertical stripe segment">
     /front/src/components/library/Artists.vue
       <h2 class="ui header">
-        {{ $t('components.library.Artists.header.browse') }}
+        {{ t('components.library.Artists.header.browse') }}
       </h2>
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
@@ -132,7 +132,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="artist-search">
-              {{ $t('components.library.Artists.label.search') }}
+              {{ t('components.library.Artists.label.search') }}
             </label>
             <div class="ui action input">
               <input
@@ -152,11 +152,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             </div>
           </div>
           <div class="field">
-            <label for="tags-search">{{ $t('components.library.Artists.label.tags') }}</label>
+            <label for="tags-search">{{ t('components.library.Artists.label.tags') }}</label>
             <tags-selector v-model="tags" />
           </div>
           <div class="field">
-            <label for="artist-ordering">{{ $t('components.library.Artists.ordering.label') }}</label>
+            <label for="artist-ordering">{{ t('components.library.Artists.ordering.label') }}</label>
             <select
               id="artist-ordering"
               v-model="ordering"
@@ -172,22 +172,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="artist-ordering-direction">{{ $t('components.library.Artists.ordering.direction.label') }}</label>
+            <label for="artist-ordering-direction">{{ t('components.library.Artists.ordering.direction.label') }}</label>
             <select
               id="artist-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('components.library.Artists.ordering.direction.ascending') }}
+                {{ t('components.library.Artists.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('components.library.Artists.ordering.direction.descending') }}
+                {{ t('components.library.Artists.ordering.direction.descending') }}
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="artist-results">{{ $t('components.library.Artists.pagination.results') }}</label>
+            <label for="artist-results">{{ t('components.library.Artists.pagination.results') }}</label>
             <select
               id="artist-results"
               v-model="paginateBy"
@@ -203,7 +203,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <span id="excludeHeader">{{ $t('components.library.Artists.label.excludeCompilation') }}</span>
+            <span id="excludeHeader">{{ t('components.library.Artists.label.excludeCompilation') }}</span>
             <div
               id="excludeCompilation"
               class="ui toggle checkbox"
@@ -218,7 +218,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
               <label
                 for="exclude-compilation"
                 class="visually-hidden"
-              >{{ $t('components.library.Artists.label.excludeCompilation') }}</label>
+              >{{ t('components.library.Artists.label.excludeCompilation') }}</label>
             </div>
           </div>
         </div>
@@ -247,7 +247,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="compact disc icon" />
-          {{ $t('components.library.Artists.empty.noResults') }}
+          {{ t('components.library.Artists.empty.noResults') }}
         </div>
         <router-link
           v-if="$store.state.auth.authenticated"
@@ -255,7 +255,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           class="ui success button labeled icon"
         >
           <i class="upload icon" />
-          {{ $t('components.library.Artists.button.upload') }}
+          {{ t('components.library.Artists.button.upload') }}
         </router-link>
       </div>
       <div class="ui center aligned basic segment">
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index e1ab77c1f..b579c4961 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -7,6 +7,8 @@ import { diffWordsWithSpace } from 'diff'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import axios from 'axios'
 
@@ -23,6 +25,8 @@ interface Props {
   currentState?: ReviewState
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   currentState: () => ({})
@@ -155,7 +159,7 @@ const approve = async (approved: boolean) => {
     <div class="content">
       <h4 class="header">
         <router-link :to="detailUrl">
-          {{ $t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)}) }}
+          {{ t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)}) }}
         </router-link>
       </h4>
       <div class="meta">
@@ -164,7 +168,7 @@ const approve = async (approved: boolean) => {
           :to="{name: 'library.tracks.detail', params: {id: obj.target.id }}"
         >
           <i class="music icon" />
-          {{ $t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
+          {{ t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
         </router-link>
         <br>
         <human-date
@@ -175,19 +179,19 @@ const approve = async (approved: boolean) => {
         <span class="right floated">
           <span v-if="obj.is_approved && obj.is_applied">
             <i class="success check icon" />
-            {{ $t('components.library.EditCard.status.applied') }}
+            {{ t('components.library.EditCard.status.applied') }}
           </span>
           <span v-else-if="obj.is_approved">
             <i class="success check icon" />
-            {{ $t('components.library.EditCard.status.approved') }}
+            {{ t('components.library.EditCard.status.approved') }}
           </span>
           <span v-else-if="obj.is_approved === null">
             <i class="warning hourglass icon" />
-            {{ $t('components.library.EditCard.status.pending') }}
+            {{ t('components.library.EditCard.status.pending') }}
           </span>
           <span v-else-if="obj.is_approved === false">
             <i class="danger x icon" />
-            {{ $t('components.library.EditCard.status.rejected') }}
+            {{ t('components.library.EditCard.status.rejected') }}
           </span>
         </span>
       </div>
@@ -206,13 +210,13 @@ const approve = async (approved: boolean) => {
         <thead>
           <tr>
             <th>
-              {{ $t('components.library.EditCard.table.update.header.field') }}
+              {{ t('components.library.EditCard.table.update.header.field') }}
             </th>
             <th>
-              {{ $t('components.library.EditCard.table.update.header.oldValue') }}
+              {{ t('components.library.EditCard.table.update.header.oldValue') }}
             </th>
             <th>
-              {{ $t('components.library.EditCard.table.update.header.newValue') }}
+              {{ t('components.library.EditCard.table.update.header.newValue') }}
             </th>
           </tr>
         </thead>
@@ -228,7 +232,7 @@ const approve = async (approved: boolean) => {
                 <img
                   class="ui image"
                   alt=""
-                  :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)"
+                  :src="store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)"
                 >
               </template>
               <template v-else>
@@ -242,7 +246,7 @@ const approve = async (approved: boolean) => {
               </template>
             </td>
             <td v-else>
-              {{ $t('components.library.EditCard.table.update.notApplicable') }}
+              {{ t('components.library.EditCard.table.update.notApplicable') }}
             </td>
 
             <td
@@ -253,7 +257,7 @@ const approve = async (approved: boolean) => {
                 <img
                   class="ui image"
                   alt=""
-                  :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
+                  :src="store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
                 >
               </template>
               <template v-else>
@@ -274,7 +278,7 @@ const approve = async (approved: boolean) => {
                 <img
                   class="ui image"
                   alt=""
-                  :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
+                  :src="store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
                 >
               </template>
               <template v-else>
@@ -300,36 +304,36 @@ const approve = async (approved: boolean) => {
         :class="['ui', {loading: isLoading}, 'success', 'basic', 'button']"
         @click="approve(true)"
       >
-        {{ $t('components.library.EditCard.button.approve') }}
+        {{ t('components.library.EditCard.button.approve') }}
       </button>
       <button
         v-if="canApprove && obj.is_approved === null"
         :class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']"
         @click="approve(false)"
       >
-        {{ $t('components.library.EditCard.button.reject') }}
+        {{ t('components.library.EditCard.button.reject') }}
       </button>
       <dangerous-button
         v-if="canDelete"
         :class="['ui', {loading: isLoading}, 'basic danger button']"
         :action="remove"
       >
-        {{ $t('components.library.EditCard.button.delete') }}
+        {{ t('components.library.EditCard.button.delete') }}
         <template #modal-header>
           <p>
-            {{ $t('components.library.EditCard.modal.delete.header') }}
+            {{ t('components.library.EditCard.modal.delete.header') }}
           </p>
         </template>
         <template #modal-content>
           <div>
             <p>
-              {{ $t('components.library.EditCard.modal.content.warning') }}
+              {{ t('components.library.EditCard.modal.content.warning') }}
             </p>
           </div>
         </template>
         <template #modal-confirm>
           <p>
-            {{ $t('components.library.EditCard.button.delete') }}
+            {{ t('components.library.EditCard.button.delete') }}
           </p>
         </template>
       </dangerous-button>
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index 3312ac176..b3103b9dd 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -148,7 +148,7 @@ const resetField = (fieldId: string) => {
   <div v-if="submittedMutation">
     <div class="ui positive message">
       <h4 class="header">
-        {{ $t('components.library.EditForm.header.success') }}
+        {{ t('components.library.EditForm.header.success') }}
       </h4>
     </div>
     <edit-card
@@ -159,7 +159,7 @@ const resetField = (fieldId: string) => {
       class="ui button"
       @click.prevent="submittedMutation = null"
     >
-      {{ $t('components.library.EditForm.button.new') }}
+      {{ t('components.library.EditForm.button.new') }}
     </button>
   </div>
   <div v-else>
@@ -171,27 +171,27 @@ const resetField = (fieldId: string) => {
     >
       <div>
         <template v-if="showPendingReview">
-          {{ $t('components.library.EditForm.header.unreviewed') }}
+          {{ t('components.library.EditForm.header.unreviewed') }}
           <button
             class="ui tiny basic right floated button"
             @click.prevent="showPendingReview = false"
           >
-            {{ $t('components.library.EditForm.button.showAll') }}
+            {{ t('components.library.EditForm.button.showAll') }}
           </button>
         </template>
         <template v-else>
-          {{ $t('components.library.EditForm.header.recentEdits') }}
+          {{ t('components.library.EditForm.header.recentEdits') }}
           <button
             class="ui tiny basic right floated button"
             @click.prevent="showPendingReview = true"
           >
-            {{ $t('components.library.EditForm.button.showUnreviewed') }}
+            {{ t('components.library.EditForm.button.showUnreviewed') }}
           </button>
         </template>
       </div>
       <template #empty-state>
         <empty-state>
-          {{ $t('components.library.EditForm.empty.suggestEdit') }}
+          {{ t('components.library.EditForm.empty.suggestEdit') }}
         </empty-state>
       </template>
     </edit-list>
@@ -206,7 +206,7 @@ const resetField = (fieldId: string) => {
         class="ui negative message"
       >
         <h4 class="header">
-          {{ $t('components.library.EditForm.header.failure') }}
+          {{ t('components.library.EditForm.header.failure') }}
         </h4>
         <ul class="list">
           <li
@@ -221,7 +221,7 @@ const resetField = (fieldId: string) => {
         v-if="!canEdit"
         class="ui message"
       >
-        {{ $t('components.library.EditForm.message.noPermission') }}
+        {{ t('components.library.EditForm.message.noPermission') }}
       </div>
       <template v-if="values">
         <div
@@ -250,7 +250,7 @@ const resetField = (fieldId: string) => {
               class="ui fluid search dropdown"
             >
               <option :value="null">
-                {{ $t('components.library.EditForm.notApplicable') }}
+                {{ t('components.library.EditForm.notApplicable') }}
               </option>
               <option
                 v-for="{ code, name } in licenses"
@@ -266,7 +266,7 @@ const resetField = (fieldId: string) => {
               @click.prevent="values[fieldConfig.id] = null"
             >
               <i class="x icon" />
-              {{ $t('components.library.EditForm.button.clear') }}
+              {{ t('components.library.EditForm.button.clear') }}
             </button>
           </template>
           <template v-else-if="fieldConfig.type === 'content'">
@@ -303,7 +303,7 @@ const resetField = (fieldId: string) => {
               @click.prevent="values[fieldConfig.id] = []"
             >
               <i class="x icon" />
-              {{ $t('components.library.EditForm.button.clear') }}
+              {{ t('components.library.EditForm.button.clear') }}
             </button>
           </template>
           <div v-if="fieldValuesChanged(fieldConfig.id)">
@@ -313,13 +313,13 @@ const resetField = (fieldId: string) => {
               @click.prevent="resetField(fieldConfig.id)"
             >
               <i class="undo icon" />
-              {{ $t('components.library.EditForm.button.reset') }}
+              {{ t('components.library.EditForm.button.reset') }}
             </button>
           </div>
         </div>
       </template>
       <div class="field">
-        <label for="summary">{{ $t('components.library.EditForm.label.summary') }}</label>
+        <label for="summary">{{ t('components.library.EditForm.label.summary') }}</label>
         <textarea
           id="change-summary"
           v-model="summary"
@@ -333,7 +333,7 @@ const resetField = (fieldId: string) => {
         class="ui left floated button"
         :to="{name: 'library.tracks.detail', params: {id: object.id }}"
       >
-        {{ $t('components.library.EditForm.button.cancel') }}
+        {{ t('components.library.EditForm.button.cancel') }}
       </router-link>
       <button
         :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
@@ -341,10 +341,10 @@ const resetField = (fieldId: string) => {
         :disabled="isLoading || !mutationPayload"
       >
         <span v-if="canEdit">
-          {{ $t('components.library.EditForm.button.submit') }}
+          {{ t('components.library.EditForm.button.submit') }}
         </span>
         <span v-else>
-          {{ $t('components.library.EditForm.button.suggest') }}
+          {{ t('components.library.EditForm.button.suggest') }}
         </span>
       </button>
     </form>
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 914db4845..d52aff93a 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -303,12 +303,12 @@ useEventListener(window, 'beforeunload', (event) => {
         :class="['item', {active: currentTab === 'uploads'}]"
         @click.prevent="currentTab = 'uploads'"
       >
-        {{ $t('components.library.FileUpload.link.uploading') }}
+        {{ t('components.library.FileUpload.link.uploading') }}
         <div
           v-if="files.length === 0"
           class="ui label"
         >
-          {{ $t('components.library.FileUpload.empty.noFiles') }}
+          {{ t('components.library.FileUpload.empty.noFiles') }}
         </div>
         <div
           v-else-if="files.length > uploadedFilesCount + erroredFilesCount"
@@ -332,12 +332,12 @@ useEventListener(window, 'beforeunload', (event) => {
         :class="['item', {active: currentTab === 'processing'}]"
         @click.prevent="currentTab = 'processing'"
       >
-        {{ $t('components.library.FileUpload.link.processing') }}
+        {{ t('components.library.FileUpload.link.processing') }}
         <div
           v-if="processableFiles === 0"
           class="ui label"
         >
-          {{ $t('components.library.FileUpload.empty.noFiles') }}
+          {{ t('components.library.FileUpload.empty.noFiles') }}
         </div>
         <div
           v-else-if="processableFiles > processedFilesCount"
@@ -361,7 +361,7 @@ useEventListener(window, 'beforeunload', (event) => {
       <div :class="['ui', {loading: isLoadingQuota}, 'container']">
         <div :class="['ui', {red: remainingSpace === 0}, {warning: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']">
           <div class="label">
-            {{ $t('components.library.FileUpload.label.remainingSpace') }}
+            {{ t('components.library.FileUpload.label.remainingSpace') }}
           </div>
           <div class="value">
             {{ humanSize(remainingSpace * 1000 * 1000) }}
@@ -369,25 +369,25 @@ useEventListener(window, 'beforeunload', (event) => {
         </div>
         <div class="ui divider" />
         <h2 class="ui header">
-          {{ $t('components.library.FileUpload.header.local') }}
+          {{ t('components.library.FileUpload.header.local') }}
         </h2>
         <div class="ui message">
           <p>
-            {{ $t('components.library.FileUpload.message.local.message') }}
+            {{ t('components.library.FileUpload.message.local.message') }}
           </p>
           <ul>
             <li v-if="library.privacy_level != 'me'">
-              {{ $t('components.library.FileUpload.message.local.copyright') }}
+              {{ t('components.library.FileUpload.message.local.copyright') }}
             </li>
             <li>
-              {{ $t('components.library.FileUpload.message.local.tag') }}&nbsp;
+              {{ t('components.library.FileUpload.message.local.tag') }}&nbsp;
               <a
                 href="http://picard.musicbrainz.org/"
                 target="_blank"
-              >{{ $t('components.library.FileUpload.link.picard') }}</a>
+              >{{ t('components.library.FileUpload.link.picard') }}</a>
             </li>
             <li>
-              {{ $t('components.library.FileUpload.message.local.format') }}
+              {{ t('components.library.FileUpload.message.local.format') }}
             </li>
           </ul>
         </div>
@@ -399,11 +399,11 @@ useEventListener(window, 'beforeunload', (event) => {
           @input-file="inputFile"
         >
           <i class="upload icon" />&nbsp;
-          {{ $t('components.library.FileUpload.label.uploadWidget') }}
+          {{ t('components.library.FileUpload.label.uploadWidget') }}
           <br>
           <br>
           <i>
-            {{ $t('components.library.FileUpload.label.extensions', {extensions: supportedExtensions.join(', ')}) }}
+            {{ t('components.library.FileUpload.label.extensions', {extensions: supportedExtensions.join(', ')}) }}
           </i>
         </file-upload-widget>
       </div>
@@ -416,16 +416,16 @@ useEventListener(window, 'beforeunload', (event) => {
           <thead>
             <tr>
               <th class="ten wide">
-                {{ $t('components.library.FileUpload.table.upload.header.filename') }}
+                {{ t('components.library.FileUpload.table.upload.header.filename') }}
               </th>
               <th>
-                {{ $t('components.library.FileUpload.table.upload.header.size') }}
+                {{ t('components.library.FileUpload.table.upload.header.size') }}
               </th>
               <th>
-                {{ $t('components.library.FileUpload.table.upload.header.status') }}
+                {{ t('components.library.FileUpload.table.upload.header.status') }}
               </th>
               <th>
-                {{ $t('components.library.FileUpload.table.upload.header.actions') }}
+                {{ t('components.library.FileUpload.table.upload.header.actions') }}
               </th>
             </tr>
             <tr v-if="retryableFiles.length > 1">
@@ -437,7 +437,7 @@ useEventListener(window, 'beforeunload', (event) => {
                   class="ui right floated small basic button"
                   @click.prevent="retry(retryableFiles)"
                 >
-                  {{ $t('components.library.FileUpload.button.retry') }}
+                  {{ t('components.library.FileUpload.button.retry') }}
                 </button>
               </th>
             </tr>
@@ -466,7 +466,7 @@ useEventListener(window, 'beforeunload', (event) => {
                   class="ui success label"
                 >
                   <span key="1">
-                    {{ $t('components.library.FileUpload.table.upload.status.uploaded') }}
+                    {{ t('components.library.FileUpload.table.upload.status.uploaded') }}
                   </span>
                 </span>
                 <span
@@ -474,17 +474,17 @@ useEventListener(window, 'beforeunload', (event) => {
                   class="ui warning label"
                 >
                   <span key="2">
-                    {{ $t('components.library.FileUpload.table.upload.status.uploading') }}
+                    {{ t('components.library.FileUpload.table.upload.status.uploading') }}
                   </span>
 
-                  {{ $t('components.library.FileUpload.table.upload.progress', {percent: parseFloat(file.progress ?? '0.00')}) }}
+                  {{ t('components.library.FileUpload.table.upload.progress', {percent: parseFloat(file.progress ?? '0.00')}) }}
                 </span>
                 <span
                   v-else
                   class="ui label"
                 >
                   <span key="3">
-                    {{ $t('components.library.FileUpload.table.upload.status.pending') }}
+                    {{ t('components.library.FileUpload.table.upload.status.pending') }}
                   </span>
                 </span>
               </td>
@@ -514,7 +514,7 @@ useEventListener(window, 'beforeunload', (event) => {
       </div>
       <div class="ui divider" />
       <h2 class="ui header">
-        {{ $t('components.library.FileUpload.header.server') }}
+        {{ t('components.library.FileUpload.header.server') }}
       </h2>
       <div
         v-if="fsErrors.length > 0"
@@ -522,7 +522,7 @@ useEventListener(window, 'beforeunload', (event) => {
         class="ui negative message"
       >
         <h3 class="header">
-          {{ $t('components.library.FileUpload.header.failure') }}
+          {{ t('components.library.FileUpload.header.failure') }}
         </h3>
         <ul class="list">
           <li
@@ -541,13 +541,13 @@ useEventListener(window, 'beforeunload', (event) => {
       />
       <template v-if="fsStatus && fsStatus.import">
         <h3 class="ui header">
-          {{ $t('components.library.FileUpload.header.status') }}
+          {{ t('components.library.FileUpload.header.status') }}
         </h3>
         <p v-if="fsStatus.import.reference !== importReference">
-          {{ $t('components.library.FileUpload.description.previousImport') }}
+          {{ t('components.library.FileUpload.description.previousImport') }}
         </p>
         <p v-else>
-          {{ $t('components.library.FileUpload.description.import') }}
+          {{ t('components.library.FileUpload.description.import') }}
         </p>
 
         <button
@@ -555,7 +555,7 @@ useEventListener(window, 'beforeunload', (event) => {
           class="ui button"
           @click="cancelFsScan"
         >
-          {{ $t('components.library.FileUpload.button.cancel') }}
+          {{ t('components.library.FileUpload.button.cancel') }}
         </button>
         <fs-logs :data="fsStatus.import" />
       </template>
diff --git a/front/src/components/library/FsBrowser.vue b/front/src/components/library/FsBrowser.vue
index a6aa99d0b..ef7f2f411 100644
--- a/front/src/components/library/FsBrowser.vue
+++ b/front/src/components/library/FsBrowser.vue
@@ -2,6 +2,8 @@
 import type { FileSystem, FSEntry } from '~/types'
 
 import { useVModel } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
 
 interface Events {
   (e: 'update:modelValue', value: string[]): void
@@ -14,6 +16,8 @@ interface Props {
   modelValue: string[]
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -42,7 +46,7 @@ const handleClick = (entry: FSEntry) => {
         class="ui button"
         @click.prevent="emit('import')"
       >
-        {{ $t('components.library.FsBrowser.button.import') }}
+        {{ t('components.library.FsBrowser.button.import') }}
       </button>
     </div>
     <div class="ui list component-fs-browser">
diff --git a/front/src/components/library/FsLogs.vue b/front/src/components/library/FsLogs.vue
index ebcb93e80..9c98c0c17 100644
--- a/front/src/components/library/FsLogs.vue
+++ b/front/src/components/library/FsLogs.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import type { FSLogs } from '~/types'
+import { useI18n } from 'vue-i18n'
+
 
 interface Props {
   data: FSLogs
 }
 
 defineProps<Props>()
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -15,7 +19,7 @@ defineProps<Props>()
       class="ui active dimmer"
     >
       <div class="ui text loader">
-        {{ $t('components.library.FsLogs.empty.notStarted') }}
+        {{ t('components.library.FsLogs.empty.notStarted') }}
       </div>
     </div>
     <template v-else>
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 810d0b738..dc31fcdc5 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
+import { useRoute } from 'vue-router'
 
 import axios from 'axios'
 
@@ -22,6 +23,7 @@ withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore()
+const route = useRoute()
 const qualityFilters = computed(() => store.getters['instance/qualityFilters'])
 
 const artists = ref([])
@@ -59,7 +61,7 @@ fetchData()
 
 <template>
   <main
-    :key="$route?.name ?? undefined"
+    :key="route?.name ?? undefined"
     v-title="labels.title"
   >
     <section class="ui vertical stripe segment">
@@ -71,7 +73,7 @@ fetchData()
             :websocket-handlers="['Listen']"
           >
             <template #title>
-              {{ $t('components.library.Home.header.recentlyListened') }}
+              {{ t('components.library.Home.header.recentlyListened') }}
             </template>
           </track-widget>
         </div>
@@ -81,7 +83,7 @@ fetchData()
             :filters="{scope: scope, ordering: '-creation_date'}"
           >
             <template #title>
-              {{ $t('components.library.Home.header.recentlyFavorited') }}
+              {{ t('components.library.Home.header.recentlyFavorited') }}
             </template>
           </track-widget>
         </div>
@@ -92,7 +94,7 @@ fetchData()
             :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
           >
             <template #title>
-              {{ $t('components.library.Home.header.playlists') }}
+              {{ t('components.library.Home.header.playlists') }}
             </template>
           </playlist-widget>
         </div>
@@ -102,14 +104,14 @@ fetchData()
         <div class="column">
           <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
             <template #title>
-              {{ $t('components.library.Home.header.recentlyAdded') }}
+              {{ t('components.library.Home.header.recentlyAdded') }}
             </template>
           </album-widget>
         </div>
       </div>
       <template v-if="scope === 'all'">
         <h3 class="ui header">
-          {{ $t('components.library.Home.header.newChannels') }}
+          {{ t('components.library.Home.header.newChannels') }}
         </h3>
         <channels-widget
           :show-modification-date="true"
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
index b83937e3b..27acc6561 100644
--- a/front/src/components/library/ImportStatusModal.vue
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -77,7 +77,7 @@ const getErrorData = (upload: Upload) => {
 <template>
   <semantic-modal v-model:show="show">
     <h4 class="header">
-      {{ $t('components.library.ImportStatusModal.header.importDetail') }}
+      {{ t('components.library.ImportStatusModal.header.importDetail') }}
     </h4>
     <div
       v-if="Object.keys(upload).length > 0"
@@ -88,33 +88,33 @@ const getErrorData = (upload: Upload) => {
           v-if="upload.import_status === 'pending'"
           class="ui message"
         >
-          {{ $t('components.library.ImportStatusModal.message.importDetail') }}
+          {{ t('components.library.ImportStatusModal.message.importDetail') }}
         </div>
         <div
           v-if="upload.import_status === 'finished'"
           class="ui success message"
         >
-          {{ $t('components.library.ImportStatusModal.message.importSuccess') }}
+          {{ t('components.library.ImportStatusModal.message.importSuccess') }}
         </div>
         <div
           v-if="upload.import_status === 'skipped'"
           role="alert"
           class="ui warning message"
         >
-          {{ $t('components.library.ImportStatusModal.warning.importSkipped') }}
+          {{ t('components.library.ImportStatusModal.warning.importSkipped') }}
         </div>
         <div
           v-if="upload.import_status === 'errored'"
           class="ui error message"
         >
-          {{ $t('components.library.ImportStatusModal.error.importFailure') }}
+          {{ t('components.library.ImportStatusModal.error.importFailure') }}
         </div>
         <template v-if="upload.import_status === 'errored'">
           <table class="ui very basic collapsing celled table">
             <tbody>
               <tr>
                 <td>
-                  {{ $t('components.library.ImportStatusModal.table.error.errorType') }}
+                  {{ t('components.library.ImportStatusModal.table.error.errorType') }}
                 </td>
                 <td>
                   {{ getErrorData(upload).label }}
@@ -122,7 +122,7 @@ const getErrorData = (upload: Upload) => {
               </tr>
               <tr>
                 <td>
-                  {{ $t('components.library.ImportStatusModal.table.error.errorDetail') }}
+                  {{ t('components.library.ImportStatusModal.table.error.errorDetail') }}
                 </td>
                 <td>
                   {{ getErrorData(upload).detail }}
@@ -140,7 +140,7 @@ const getErrorData = (upload: Upload) => {
               </tr>
               <tr>
                 <td>
-                  {{ $t('components.library.ImportStatusModal.table.error.help') }}
+                  {{ t('components.library.ImportStatusModal.table.error.help') }}
                 </td>
                 <td>
                   <ul>
@@ -149,7 +149,7 @@ const getErrorData = (upload: Upload) => {
                         :href="getErrorData(upload).documentationUrl"
                         target="_blank"
                       >
-                        {{ $t('components.library.ImportStatusModal.link.documentation') }}
+                        {{ t('components.library.ImportStatusModal.link.documentation') }}
                       </a>
                     </li>
                     <li>
@@ -157,7 +157,7 @@ const getErrorData = (upload: Upload) => {
                         :href="getErrorData(upload).supportUrl"
                         target="_blank"
                       >
-                        {{ $t('components.library.ImportStatusModal.link.support') }}
+                        {{ t('components.library.ImportStatusModal.link.support') }}
                       </a>
                     </li>
                   </ul>
@@ -165,7 +165,7 @@ const getErrorData = (upload: Upload) => {
               </tr>
               <tr>
                 <td>
-                  {{ $t('components.library.ImportStatusModal.table.error.debug') }}
+                  {{ t('components.library.ImportStatusModal.table.error.debug') }}
                 </td>
                 <td>
                   <div class="ui form">
@@ -184,7 +184,7 @@ const getErrorData = (upload: Upload) => {
     </div>
     <div class="actions">
       <button class="ui deny button">
-        {{ $t('components.library.ImportStatusModal.button.close') }}
+        {{ t('components.library.ImportStatusModal.button.close') }}
       </button>
     </div>
   </semantic-modal>
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index f3cd9e7cb..e620add3d 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -123,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        {{ $t('components.library.Podcasts.header.browse') }}
+        {{ t('components.library.Podcasts.header.browse') }}
       </h2>
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
@@ -132,7 +132,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="artist-search">
-              {{ $t('components.library.Podcasts.label.search') }}
+              {{ t('components.library.Podcasts.label.search') }}
             </label>
             <div class="ui action input">
               <input
@@ -152,11 +152,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             </div>
           </div>
           <div class="field">
-            <label for="tags-search">{{ $t('components.library.Podcasts.label.tags') }}</label>
+            <label for="tags-search">{{ t('components.library.Podcasts.label.tags') }}</label>
             <tags-selector v-model="tags" />
           </div>
           <div class="field">
-            <label for="artist-ordering">{{ $t('components.library.Podcasts.ordering.label') }}</label>
+            <label for="artist-ordering">{{ t('components.library.Podcasts.ordering.label') }}</label>
             <select
               id="artist-ordering"
               v-model="ordering"
@@ -172,22 +172,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="artist-ordering-direction">{{ $t('components.library.Podcasts.ordering.direction.label') }}</label>
+            <label for="artist-ordering-direction">{{ t('components.library.Podcasts.ordering.direction.label') }}</label>
             <select
               id="artist-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('components.library.Podcasts.ordering.direction.ascending') }}
+                {{ t('components.library.Podcasts.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('components.library.Podcasts.ordering.direction.descending') }}
+                {{ t('components.library.Podcasts.ordering.direction.descending') }}
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="artist-results">{{ $t('components.library.Podcasts.pagination.results') }}</label>
+            <label for="artist-results">{{ t('components.library.Podcasts.pagination.results') }}</label>
             <select
               id="artist-results"
               v-model="paginateBy"
@@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="podcast icon" />
-          {{ $t('components.library.Podcasts.empty.noResults') }}
+          {{ t('components.library.Podcasts.empty.noResults') }}
         </div>
         <router-link
           v-if="$store.state.auth.authenticated"
@@ -236,7 +236,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           class="ui success button labeled icon"
         >
           <i class="upload icon" />
-          {{ $t('components.library.Podcasts.button.channel') }}
+          {{ t('components.library.Podcasts.button.channel') }}
         </router-link>
         <h1
           v-if="$store.state.auth.authenticated"
@@ -245,7 +245,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           <div class="actions">
             <a @click.stop.prevent="showSubscribeModal = true">
               <i class="plus icon" />
-              {{ $t('components.library.Podcasts.button.feed') }}
+              {{ t('components.library.Podcasts.button.feed') }}
             </a>
           </div>
         </h1>
@@ -265,7 +265,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       :fullscreen="false"
     >
       <h2 class="header">
-        {{ $t('components.library.Podcasts.modal.subscription.header') }}
+        {{ t('components.library.Podcasts.modal.subscription.header') }}
       </h2>
       <div
         ref="modalContent"
@@ -281,7 +281,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       </div>
       <div class="actions">
         <button class="ui basic deny button">
-          {{ $t('components.library.Podcasts.button.cancel') }}
+          {{ t('components.library.Podcasts.button.cancel') }}
         </button>
         <button
           form="remote-search"
@@ -289,7 +289,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           class="ui primary button"
         >
           <i class="bookmark icon" />
-          {{ $t('components.library.Podcasts.button.subscribe') }}
+          {{ t('components.library.Podcasts.button.subscribe') }}
         </button>
       </div>
     </semantic-modal>
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index f12b41b39..499094d2f 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -112,12 +112,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        {{ $t('components.library.Radios.header.browse') }}
+        {{ t('components.library.Radios.header.browse') }}
       </h2>
       <div class="ui hidden divider" />
       <div class="ui row">
         <h3 class="ui header">
-          {{ $t('components.library.Radios.header.instance') }}
+          {{ t('components.library.Radios.header.instance') }}
         </h3>
         <div class="ui cards">
           <radio-card
@@ -151,14 +151,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 
       <div class="ui hidden divider" />
       <h3 class="ui header">
-        {{ $t('components.library.Radios.header.user') }}
+        {{ t('components.library.Radios.header.user') }}
       </h3>
       <router-link
         v-if="isAuthenticated"
         class="ui success button"
         to="/library/radios/build"
       >
-        {{ $t('components.library.Radios.button.create') }}
+        {{ t('components.library.Radios.button.create') }}
       </router-link>
       <div class="ui hidden divider" />
       <form
@@ -167,7 +167,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="fields">
           <div class="field">
-            <label for="radios-search">{{ $t('components.library.Radios.label.search') }}</label>
+            <label for="radios-search">{{ t('components.library.Radios.label.search') }}</label>
             <div class="ui action input">
               <input
                 id="radios-search"
@@ -186,7 +186,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </div>
           </div>
           <div class="field">
-            <label for="radios-ordering">{{ $t('components.library.Radios.ordering.label') }}</label>
+            <label for="radios-ordering">{{ t('components.library.Radios.ordering.label') }}</label>
             <select
               id="radios-ordering"
               v-model="ordering"
@@ -202,22 +202,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="radios-ordering-direction">{{ $t('components.library.Radios.ordering.direction.label') }}</label>
+            <label for="radios-ordering-direction">{{ t('components.library.Radios.ordering.direction.label') }}</label>
             <select
               id="radios-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('components.library.Radios.ordering.direction.ascending') }}
+                {{ t('components.library.Radios.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('components.library.Radios.ordering.direction.descending') }}
+                {{ t('components.library.Radios.ordering.direction.descending') }}
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="radios-results">{{ $t('components.library.Radios.pagination.results') }}</label>
+            <label for="radios-results">{{ t('components.library.Radios.pagination.results') }}</label>
             <select
               id="radios-results"
               v-model="paginateBy"
@@ -241,7 +241,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="feed icon" />
-          {{ $t('components.library.Radios.empty.noResults') }}
+          {{ t('components.library.Radios.empty.noResults') }}
         </div>
         <router-link
           v-if="$store.state.auth.authenticated"
@@ -249,7 +249,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           class="ui success button labeled icon"
         >
           <i class="rss icon" />
-          {{ $t('components.library.Radios.button.add') }}
+          {{ t('components.library.Radios.button.add') }}
         </router-link>
       </div>
       <div
diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 74f4933f4..1e7823a00 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
@@ -11,6 +13,9 @@ interface Props {
   id: string
 }
 
+const store = useStore()
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const labels = computed(() => ({
@@ -31,12 +36,12 @@ const labels = computed(() => ({
         :object-id="id"
       />
       <router-link
-        v-if="$store.state.auth.availablePermissions['library']"
+        v-if="store.state.auth.availablePermissions['library']"
         class="ui right floated button"
         :to="{name: 'manage.library.tags.detail', params: {id: id}}"
       >
         <i class="wrench icon" />
-        {{ $t('components.library.TagDetail.link.moderation') }}
+        {{ t('components.library.TagDetail.link.moderation') }}
       </router-link>
 
       <div class="ui hidden divider" />
@@ -48,14 +53,14 @@ const labels = computed(() => ({
         >
           <template #title>
             <router-link :to="{name: 'library.artists.browse', query: {tag: id}}">
-              {{ $t('components.library.TagDetail.link.artists') }}
+              {{ t('components.library.TagDetail.link.artists') }}
             </router-link>
           </template>
         </artist-widget>
         <div class="ui hidden divider" />
         <div class="ui hidden divider" />
         <h3 class="ui header">
-          {{ $t('components.library.TagDetail.header.channels') }}
+          {{ t('components.library.TagDetail.header.channels') }}
         </h3>
         <channels-widget
           :key="'channels' + id"
@@ -73,7 +78,7 @@ const labels = computed(() => ({
         >
           <template #title>
             <router-link :to="{name: 'library.albums.browse', query: {tag: id}}">
-              {{ $t('components.library.TagDetail.link.albums') }}
+              {{ t('components.library.TagDetail.link.albums') }}
             </router-link>
           </template>
         </album-widget>
@@ -89,7 +94,7 @@ const labels = computed(() => ({
           :filters="{playable: true, ordering: '-creation_date', tag: id}"
         >
           <template #title>
-            {{ $t('components.library.TagDetail.header.tracks') }}
+            {{ t('components.library.TagDetail.header.tracks') }}
           </template>
         </track-widget>
         <div class="ui clearing hidden divider" />
diff --git a/front/src/components/library/TagsSelector.vue b/front/src/components/library/TagsSelector.vue
index 312ccf918..4a21533dd 100644
--- a/front/src/components/library/TagsSelector.vue
+++ b/front/src/components/library/TagsSelector.vue
@@ -4,6 +4,8 @@ import type { Tag } from '~/types'
 import { ref, watch, onMounted, nextTick } from 'vue'
 import { isEqual } from 'lodash-es'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import $ from 'jquery'
 
@@ -15,6 +17,8 @@ interface Props {
   modelValue: string[]
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -99,7 +103,7 @@ onMounted(async () => {
       class="search"
     >
     <div class="default text">
-      {{ $t('components.library.TagSelector.placeholder.search') }}
+      {{ t('components.library.TagSelector.placeholder.search') }}
     </div>
   </div>
 </template>
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index e5543fa8a..263b42934 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -4,7 +4,7 @@ import type { Track, Artist, Library } from '~/types'
 import { momentFormat } from '~/utils/filters'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { getDomain } from '~/utils'
 import { useStore } from '~/store'
 
@@ -15,6 +15,10 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
+import Button from '~/components/ui/Button.vue'
+import Popover from '~/components/ui/Popover.vue'
+import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
+import DangerousButton from '~/components/common/DangerousButton.vue'
 
 import updateQueryString from '~/composables/updateQueryString'
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -41,6 +45,7 @@ const libraries = ref([] as Library[])
 
 const logger = useLogger()
 const router = useRouter()
+const route = useRoute()
 const store = useStore()
 
 const domain = computed(() => getDomain(track.value?.fid ?? ''))
@@ -100,6 +105,8 @@ const remove = async () => {
 
   isLoading.value = false
 }
+
+const open = ref(false)
 </script>
 
 <template>
@@ -158,16 +165,16 @@ const remove = async () => {
                 class="vibrant"
                 :track="track"
               >
-                {{ $t('components.library.TrackBase.button.play') }}
+                {{ t('components.library.TrackBase.button.play') }}
               </play-button>
               &nbsp;
               <track-favorite-icon
-                v-if="$store.state.auth.authenticated"
+                v-if="store.state.auth.authenticated"
                 :border="true"
                 :track="track"
               />
               <track-playlist-icon
-                v-if="$store.state.auth.authenticated"
+                v-if="store.state.auth.authenticated"
                 class="circular"
                 :border="true"
                 :track="track"
@@ -188,7 +195,7 @@ const remove = async () => {
                 v-model:show="showEmbedModal"
               >
                 <h4 class="header">
-                  {{ $t('components.library.TrackBase.modal.embed.header') }}
+                  {{ t('components.library.TrackBase.modal.embed.header') }}
                 </h4>
                 <div class="scrolling content">
                   <div class="description">
@@ -200,7 +207,7 @@ const remove = async () => {
                 </div>
                 <div class="actions">
                   <button class="ui basic deny button">
-                    {{ $t('components.library.TrackBase.button.cancel') }}
+                    {{ t('components.library.TrackBase.button.cancel') }}
                   </button>
                 </div>
               </semantic-modal>
@@ -215,13 +222,13 @@ const remove = async () => {
                   style="right: 0; left: auto"
                 >
                   <a
-                    v-if="domain != $store.getters['instance/domain']"
+                    v-if="domain != store.getters['instance/domain']"
                     :href="track.fid"
                     target="_blank"
                     class="basic item"
                   >
                     <i class="external icon" />
-                    {{ $t('components.library.TrackBase.link.domain', {domain: domain}) }}
+                    {{ t('components.library.TrackBase.link.domain', {domain: domain}) }}
                   </a>
                   <div
                     v-if="isEmbedable"
@@ -230,7 +237,7 @@ const remove = async () => {
                     @click="showEmbedModal = !showEmbedModal"
                   >
                     <i class="code icon" />
-                    {{ $t('components.library.TrackBase.button.embed') }}
+                    {{ t('components.library.TrackBase.button.embed') }}
                   </div>
                   <a
                     :href="wikipediaUrl"
@@ -239,7 +246,7 @@ const remove = async () => {
                     class="basic item"
                   >
                     <i class="wikipedia w icon" />
-                    {{ $t('components.library.TrackBase.link.wikipedia') }}
+                    {{ t('components.library.TrackBase.link.wikipedia') }}
                   </a>
                   <a
                     v-if="discogsUrl"
@@ -249,7 +256,7 @@ const remove = async () => {
                     class="basic item"
                   >
                     <i class="external icon" />
-                    {{ $t('components.library.TrackBase.link.discogs') }}
+                    {{ t('components.library.TrackBase.link.discogs') }}
                   </a>
                   <router-link
                     v-if="track.is_local"
@@ -257,30 +264,30 @@ const remove = async () => {
                     class="basic item"
                   >
                     <i class="edit icon" />
-                    {{ $t('components.library.TrackBase.button.edit') }}
+                    {{ t('components.library.TrackBase.button.edit') }}
                   </router-link>
                   <dangerous-button
-                    v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername"
+                    v-if="artist && store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === store.state.auth.fullUsername"
                     :class="['ui', {loading: isLoading}, 'item']"
                     @confirm="remove()"
                   >
                     <i class="ui trash icon" />
-                    {{ $t('components.library.TrackBase.button.delete') }}
+                    {{ t('components.library.TrackBase.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('components.library.TrackBase.modal.delete.header') }}
+                        {{ t('components.library.TrackBase.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('components.library.TrackBase.modal.delete.content.warning') }}
+                          {{ t('components.library.TrackBase.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('components.library.TrackBase.button.delete') }}
+                        {{ t('components.library.TrackBase.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -296,22 +303,22 @@ const remove = async () => {
                   </div>
                   <div class="divider" />
                   <router-link
-                    v-if="$store.state.auth.availablePermissions['library']"
+                    v-if="store.state.auth.availablePermissions['library']"
                     class="basic item"
                     :to="{name: 'manage.library.tracks.detail', params: {id: track.id}}"
                   >
                     <i class="wrench icon" />
-                    {{ $t('components.library.TrackBase.link.moderation') }}
+                    {{ t('components.library.TrackBase.link.moderation') }}
                   </router-link>
                   <a
-                    v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                    v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                     class="basic item"
-                    :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
+                    :href="store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    {{ $t('components.library.TrackBase.link.django') }}
+                    {{ t('components.library.TrackBase.link.django') }}
                   </a>
                 </div>
               </button>
@@ -321,7 +328,7 @@ const remove = async () => {
       </section>
       <router-view
         v-if="track"
-        :key="$route.fullPath"
+        :key="route.fullPath"
         :track="track"
         :object="track"
         object-type="track"
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 93de94107..c4e619f00 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -3,6 +3,8 @@ import type { Track, Library } from '~/types'
 
 import { humanSize, momentFormat, truncate } from '~/utils/filters'
 import { computed, ref, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 import time from '~/utils/time'
 import axios from 'axios'
@@ -21,6 +23,9 @@ interface Props {
   track: Track
 }
 
+const store = useStore()
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -59,13 +64,13 @@ watchEffect(() => {
           <template v-if="upload">
             <img
               v-if="track.cover && track.cover.urls.large_square_crop"
-              v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
+              v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
               alt="Cover Image"
               class="ui fluid image track-cover-image"
             >
             <img
               v-else-if="track.album && track.album.cover && track.album.cover.urls.large_square_crop"
-              v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
+              v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
               alt="Cover Image"
               class="ui fluid image track-cover-image"
             >
@@ -77,69 +82,69 @@ watchEffect(() => {
             >
             <h3 class="ui header">
               <span v-if="track.artist_credit?.[0].artist?.content_category === 'music'">
-                {{ $t('components.library.TrackDetail.header.track') }}
+                {{ t('components.library.TrackDetail.header.track') }}
               </span>
               <span v-else>
-                {{ $t('components.library.TrackDetail.header.episode') }}
+                {{ t('components.library.TrackDetail.header.episode') }}
               </span>
             </h3>
             <table class="ui basic table">
               <tbody>
                 <tr>
                   <td>
-                    {{ $t('components.library.TrackDetail.table.track.duration') }}
+                    {{ t('components.library.TrackDetail.table.track.duration') }}
                   </td>
                   <td class="right aligned">
                     <template v-if="upload.duration">
                       {{ time.parse(upload.duration) }}
                     </template>
                     <span v-else>
-                      {{ $t('components.library.TrackDetail.notApplicable') }}
+                      {{ t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.library.TrackDetail.table.track.size') }}
+                    {{ t('components.library.TrackDetail.table.track.size') }}
                   </td>
                   <td class="right aligned">
                     <template v-if="upload.size">
                       {{ humanSize(upload.size) }}
                     </template>
                     <span v-else>
-                      {{ $t('components.library.TrackDetail.notApplicable') }}
+                      {{ t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.library.TrackDetail.table.track.codec') }}
+                    {{ t('components.library.TrackDetail.table.track.codec') }}
                   </td>
                   <td class="right aligned">
                     <template v-if="upload.extension">
                       {{ upload.extension }}
                     </template>
                     <span v-else>
-                      {{ $t('components.library.TrackDetail.notApplicable') }}
+                      {{ t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.library.TrackDetail.table.track.bitrate.label') }}
+                    {{ t('components.library.TrackDetail.table.track.bitrate.label') }}
                   </td>
                   <td class="right aligned">
                     <template v-if="upload.bitrate">
-                      {{ $t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
+                      {{ t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
                     </template>
                     <span v-else>
-                      {{ $t('components.library.TrackDetail.notApplicable') }}
+                      {{ t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.library.TrackDetail.table.track.downloads') }}
+                    {{ t('components.library.TrackDetail.table.track.downloads') }}
                   </td>
                   <td class="right aligned">
                     {{ track.downloads_count }}
@@ -160,13 +165,13 @@ watchEffect(() => {
             :can-update="false"
           />
           <h2 class="ui header">
-            {{ $t('components.library.TrackDetail.header.release') }}
+            {{ t('components.library.TrackDetail.header.release') }}
           </h2>
           <table class="ui basic table ellipsis-rows">
             <tbody>
               <tr>
                 <td>
-                  {{ $t('components.library.TrackDetail.table.release.artist') }}
+                  {{ t('components.library.TrackDetail.table.release.artist') }}
                 </td>
                 <td class="right aligned">
                   <template
@@ -187,10 +192,10 @@ watchEffect(() => {
               <tr v-if="track.album">
                 <td>
                   <span v-if="track.album.artist_credit?.[0].artist.content_category === 'music'">
-                    {{ $t('components.library.TrackDetail.table.release.album') }}
+                    {{ t('components.library.TrackDetail.table.release.album') }}
                   </span>
                   <span v-else>
-                    {{ $t('components.library.TrackDetail.table.release.series') }}
+                    {{ t('components.library.TrackDetail.table.release.series') }}
                   </span>
                 </td>
                 <td class="right aligned">
@@ -201,20 +206,20 @@ watchEffect(() => {
               </tr>
               <tr>
                 <td>
-                  {{ $t('components.library.TrackDetail.table.release.year') }}
+                  {{ t('components.library.TrackDetail.table.release.year') }}
                 </td>
                 <td class="right aligned">
                   <template v-if="track.album && track.album.release_date">
                     {{ momentFormat(new Date(track.album.release_date), 'Y') }}
                   </template>
                   <template v-else>
-                    {{ $t('components.library.TrackDetail.notApplicable') }}
+                    {{ t('components.library.TrackDetail.notApplicable') }}
                   </template>
                 </td>
               </tr>
               <tr>
                 <td>
-                  {{ $t('components.library.TrackDetail.table.release.copyright') }}
+                  {{ t('components.library.TrackDetail.table.release.copyright') }}
                 </td>
                 <td class="right aligned">
                   <span
@@ -222,13 +227,13 @@ watchEffect(() => {
                     :title="track.copyright"
                   >{{ truncate(track.copyright, 50) }}</span>
                   <template v-else>
-                    {{ $t('components.library.TrackDetail.notApplicable') }}
+                    {{ t('components.library.TrackDetail.notApplicable') }}
                   </template>
                 </td>
               </tr>
               <tr>
                 <td>
-                  {{ $t('components.library.TrackDetail.table.release.license') }}
+                  {{ t('components.library.TrackDetail.table.release.license') }}
                 </td>
                 <td class="right aligned">
                   <a
@@ -238,13 +243,13 @@ watchEffect(() => {
                     rel="noopener noreferrer"
                   >{{ license.name }}</a>
                   <span v-else>
-                    {{ $t('components.library.TrackDetail.notApplicable') }}
+                    {{ t('components.library.TrackDetail.notApplicable') }}
                   </span>
                 </td>
               </tr>
               <tr v-if="!track.is_local">
                 <td>
-                  {{ $t('components.library.TrackDetail.table.release.url') }}
+                  {{ t('components.library.TrackDetail.table.release.url') }}
                 </td>
                 <td :title="track.fid">
                   <a
@@ -265,10 +270,10 @@ watchEffect(() => {
             rel="noreferrer noopener"
           >
             <i class="external icon" />
-            {{ $t('components.library.TrackDetail.link.musicbrainz') }}
+            {{ t('components.library.TrackDetail.link.musicbrainz') }}
           </a>
           <h2 class="ui header">
-            {{ $t('components.library.TrackDetail.header.playlists') }}
+            {{ t('components.library.TrackDetail.header.playlists') }}
           </h2>
           <playlist-widget
             :url="'playlists/'"
@@ -276,13 +281,13 @@ watchEffect(() => {
           />
 
           <h2 class="ui header">
-            {{ $t('components.library.TrackDetail.header.library') }}
+            {{ t('components.library.TrackDetail.header.library') }}
           </h2>
           <library-widget
             :url="`tracks/${track.id}/libraries/`"
             @loaded="emit('libraries-loaded', $event)"
           >
-            {{ $t('components.library.TrackDetail.description.library') }}
+            {{ t('components.library.TrackDetail.description.library') }}
           </library-widget>
         </div>
       </div>
diff --git a/front/src/components/library/TrackEdit.vue b/front/src/components/library/TrackEdit.vue
index d8fa7b59c..378d8cb5d 100644
--- a/front/src/components/library/TrackEdit.vue
+++ b/front/src/components/library/TrackEdit.vue
@@ -3,6 +3,8 @@ import type { EditObject, EditObjectType } from '~/composables/moderation/useEdi
 import type { Library } from '~/types'
 
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 
 import store from '~/store'
 import axios from 'axios'
@@ -20,6 +22,8 @@ withDefaults(defineProps<Props>(), {
   libraries: null
 })
 
+const { t } = useI18n()
+
 const canEdit = store.state.auth.availablePermissions.library
 
 const isLoadingLicenses = ref(false)
@@ -45,17 +49,17 @@ fetchLicenses()
     <div class="ui text container">
       <h2>
         <span v-if="canEdit">
-          {{ $t('components.library.TrackEdit.header.edit') }}
+          {{ t('components.library.TrackEdit.header.edit') }}
         </span>
         <span key="2">
-          {{ $t('components.library.TrackEdit.header.suggest') }}
+          {{ t('components.library.TrackEdit.header.suggest') }}
         </span>
       </h2>
       <div
         v-if="!object.is_local"
         class="ui message"
       >
-        {{ $t('components.library.TrackEdit.message.remote') }}
+        {{ t('components.library.TrackEdit.message.remote') }}
       </div>
       <edit-form
         v-else-if="!isLoadingLicenses"
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index a7b298a76..16e06be66 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -199,10 +199,10 @@ onMounted(() => {
     <div>
       <section>
         <h2 class="ui header">
-          {{ $t('components.library.radios.Builder.header.builder') }}
+          {{ t('components.library.radios.Builder.header.builder') }}
         </h2>
         <p>
-          {{ $t('components.library.radios.Builder.description.builder') }}
+          {{ t('components.library.radios.Builder.description.builder') }}
         </p>
         <div class="ui form">
           <div
@@ -211,16 +211,16 @@ onMounted(() => {
           >
             <h4 class="header">
               <template v-if="radioName">
-                {{ $t('components.library.radios.Builder.header.updated') }}
+                {{ t('components.library.radios.Builder.header.updated') }}
               </template>
               <template v-else>
-                {{ $t('components.library.radios.Builder.header.created') }}
+                {{ t('components.library.radios.Builder.header.created') }}
               </template>
             </h4>
           </div>
           <div class="">
             <div class="field">
-              <label for="name">{{ $t('components.library.radios.Builder.label.name') }}</label>
+              <label for="name">{{ t('components.library.radios.Builder.label.name') }}</label>
               <input
                 id="name"
                 v-model="radioName"
@@ -230,7 +230,7 @@ onMounted(() => {
               >
             </div>
             <div class="field">
-              <label for="description">{{ $t('components.library.radios.Builder.label.description') }}</label>
+              <label for="description">{{ t('components.library.radios.Builder.label.description') }}</label>
               <textarea
                 id="description"
                 v-model="radioDesc"
@@ -245,7 +245,7 @@ onMounted(() => {
                 v-model="isPublic"
                 type="checkbox"
               >
-              <label for="public">{{ $t('components.library.radios.Builder.label.public') }}</label>
+              <label for="public">{{ t('components.library.radios.Builder.label.public') }}</label>
             </div>
             <div class="ui hidden divider" />
             <button
@@ -253,7 +253,7 @@ onMounted(() => {
               :class="['ui', 'success', {loading: isLoading}, 'button']"
               @click="save"
             >
-              {{ $t('components.library.radios.Builder.button.save') }}
+              {{ t('components.library.radios.Builder.button.save') }}
             </button>
             <radio-button
               v-if="id"
@@ -267,14 +267,14 @@ onMounted(() => {
             <label
               id="radioFilterLabel"
               for="radio-filters"
-            >{{ $t('components.library.radios.Builder.label.filter') }}</label>
+            >{{ t('components.library.radios.Builder.label.filter') }}</label>
             <select
               id="radio-filters"
               v-model="currentFilterType"
               class="ui dropdown"
             >
               <option value="">
-                {{ $t('components.library.radios.Builder.option.filter') }}
+                {{ t('components.library.radios.Builder.option.filter') }}
               </option>
               <option
                 v-for="f in availableFilters"
@@ -290,7 +290,7 @@ onMounted(() => {
               class="ui button"
               @click="add"
             >
-              {{ $t('components.library.radios.Builder.button.filter') }}
+              {{ t('components.library.radios.Builder.button.filter') }}
             </button>
           </div>
           <p v-if="currentFilter">
@@ -301,19 +301,19 @@ onMounted(() => {
           <thead>
             <tr>
               <th class="two wide">
-                {{ $t('components.library.radios.Builder.table.filter.header.name') }}
+                {{ t('components.library.radios.Builder.table.filter.header.name') }}
               </th>
               <th class="one wide">
-                {{ $t('components.library.radios.Builder.table.filter.header.exclude') }}
+                {{ t('components.library.radios.Builder.table.filter.header.exclude') }}
               </th>
               <th class="six wide">
-                {{ $t('components.library.radios.Builder.table.filter.header.config') }}
+                {{ t('components.library.radios.Builder.table.filter.header.config') }}
               </th>
               <th class="five wide">
-                {{ $t('components.library.radios.Builder.table.filter.header.candidates') }}
+                {{ t('components.library.radios.Builder.table.filter.header.candidates') }}
               </th>
               <th class="two wide">
-                {{ $t('components.library.radios.Builder.table.filter.header.actions') }}
+                {{ t('components.library.radios.Builder.table.filter.header.actions') }}
               </th>
             </tr>
           </thead>
@@ -328,7 +328,7 @@ onMounted(() => {
         </table>
         <template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
           <h3 class="ui header">
-            {{ $t('components.library.radios.Builder.header.matches', checkResult.candidates.count) }}
+            {{ t('components.library.radios.Builder.header.matches', checkResult.candidates.count) }}
           </h3>
           <track-table
             v-if="checkResult.candidates.sample"
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index 358a5cdf2..546d86906 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/front/src/components/library/radios/Filter.vue
@@ -2,6 +2,7 @@
 // TODO (wvffle): SORT IMPORTS LIKE SO EVERYWHERE
 import type { BuilderFilter, FilterConfig } from './Builder.vue'
 import type { Track } from '~/types'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import $ from 'jquery'
@@ -31,6 +32,8 @@ interface Props {
   }
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 const data = useVModel(props, 'data', emit)
@@ -126,7 +129,7 @@ fetchCandidates()
           for="exclude-filter"
           class="visually-hidden"
         >
-          {{ $t('components.library.radios.Filter.excludeLabel') }}
+          {{ t('components.library.radios.Filter.excludeLabel') }}
         </label>
       </div>
     </td>
@@ -176,14 +179,14 @@ fetchCandidates()
         :class="['ui', { success: checkResult.candidates.count > 10 }, 'label']"
         @click.prevent="showCandidadesModal = !showCandidadesModal"
       >
-        {{ $t('components.library.radios.Filter.matchingTracks', checkResult.candidates.count) }}
+        {{ t('components.library.radios.Filter.matchingTracks', checkResult.candidates.count) }}
       </a>
       <semantic-modal
         v-if="checkResult"
         v-model:show="showCandidadesModal"
       >
         <h4 class="header">
-          {{ $t('components.library.radios.Filter.matchingTracksModalHeader') }}
+          {{ t('components.library.radios.Filter.matchingTracksModalHeader') }}
         </h4>
         <div class="content">
           <div class="description">
@@ -195,7 +198,7 @@ fetchCandidates()
         </div>
         <div class="actions">
           <button class="ui deny button">
-            {{ $t('components.library.radios.Filter.cancelButton') }}
+            {{ t('components.library.radios.Filter.cancelButton') }}
           </button>
         </div>
       </semantic-modal>
@@ -205,7 +208,7 @@ fetchCandidates()
         class="ui danger button"
         @click="emit('delete')"
       >
-        {{ $t('components.library.radios.Filter.removeButton') }}
+        {{ t('components.library.radios.Filter.removeButton') }}
       </button>
     </td>
   </tr>
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 3f99b1bc3..f7cf842fc 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -92,7 +92,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="channel-search">{{ $t('components.manage.ChannelsTable.label.search') }}</label>
+          <label for="channel-search">{{ t('components.manage.ChannelsTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="channel-search"
@@ -105,7 +105,7 @@ const labels = computed(() => ({
           </form>
         </div>
         <div class="field">
-          <label for="channel-category">{{ $t('components.manage.ChannelsTable.label.category') }}</label>
+          <label for="channel-category">{{ t('components.manage.ChannelsTable.label.category') }}</label>
           <select
             id="channel-category"
             class="ui dropdown"
@@ -113,7 +113,7 @@ const labels = computed(() => ({
             @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              {{ $t('components.manage.ChannelsTable.option.all') }}
+              {{ t('components.manage.ChannelsTable.option.all') }}
             </option>
             <option value="podcast">
               {{ sharedLabels.fields.content_category.choices.podcast }}
@@ -127,7 +127,7 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="channel-ordering">{{ $t('components.manage.ChannelsTable.ordering.label') }}</label>
+          <label for="channel-ordering">{{ t('components.manage.ChannelsTable.ordering.label') }}</label>
           <select
             id="channel-ordering"
             v-model="ordering"
@@ -143,17 +143,17 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="channel-ordering-direction">{{ $t('components.manage.ChannelsTable.ordering.direction.label') }}</label>
+          <label for="channel-ordering-direction">{{ t('components.manage.ChannelsTable.ordering.direction.label') }}</label>
           <select
             id="channel-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.ChannelsTable.ordering.direction.ascending') }}
+              {{ t('components.manage.ChannelsTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.ChannelsTable.ordering.direction.descending') }}
+              {{ t('components.manage.ChannelsTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -176,22 +176,22 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.ChannelsTable.table.channel.header.name') }}
+            {{ t('components.manage.ChannelsTable.table.channel.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.ChannelsTable.table.channel.header.account') }}
+            {{ t('components.manage.ChannelsTable.table.channel.header.account') }}
           </th>
           <th>
-            {{ $t('components.manage.ChannelsTable.table.channel.header.domain') }}
+            {{ t('components.manage.ChannelsTable.table.channel.header.domain') }}
           </th>
           <th>
-            {{ $t('components.manage.ChannelsTable.table.channel.header.albums') }}
+            {{ t('components.manage.ChannelsTable.table.channel.header.albums') }}
           </th>
           <th>
-            {{ $t('components.manage.ChannelsTable.table.channel.header.tracks') }}
+            {{ t('components.manage.ChannelsTable.table.channel.header.tracks') }}
           </th>
           <th>
-            {{ $t('components.manage.ChannelsTable.table.channel.header.creationDate') }}
+            {{ t('components.manage.ChannelsTable.table.channel.header.creationDate') }}
           </th>
         </template>
         <template
@@ -232,7 +232,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
             >
               <i class="home icon" />
-              {{ $t('components.manage.ChannelsTable.link.local') }}
+              {{ t('components.manage.ChannelsTable.link.local') }}
             </a>
           </td>
           <td>
@@ -257,7 +257,7 @@ const labels = computed(() => ({
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.ChannelsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.ChannelsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 69f71229f..e5fe68c29 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -105,7 +105,7 @@ const labels = computed(() => ({
     /front/src/components/manage/library/AlbumsTable.vue
       <div class="fields">
         <div class="ui six wide field">
-          <label for="albums-search">{{ $t('components.manage.library.AlbumsTable.label.search') }}</label>
+          <label for="albums-search">{{ t('components.manage.library.AlbumsTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="albums-search"
@@ -118,7 +118,7 @@ const labels = computed(() => ({
           </form>
         </div>
         <div class="field">
-          <label for="albums-ordering">{{ $t('components.manage.library.AlbumsTable.ordering.label') }}</label>
+          <label for="albums-ordering">{{ t('components.manage.library.AlbumsTable.ordering.label') }}</label>
           <select
             id="albums-ordering"
             v-model="ordering"
@@ -134,16 +134,16 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="albums-ordering-direction">{{ $t('components.manage.library.AlbumsTable.ordering.direction.label') }}</label>
+          <label for="albums-ordering-direction">{{ t('components.manage.library.AlbumsTable.ordering.direction.label') }}</label>
           <select
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.library.AlbumsTable.ordering.direction.ascending') }}
+              {{ t('components.manage.library.AlbumsTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.library.AlbumsTable.ordering.direction.descending') }}
+              {{ t('components.manage.library.AlbumsTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -166,22 +166,22 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.library.AlbumsTable.table.album.header.name') }}
+            {{ t('components.manage.library.AlbumsTable.table.album.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.library.AlbumsTable.table.album.header.artist') }}
+            {{ t('components.manage.library.AlbumsTable.table.album.header.artist') }}
           </th>
           <th>
-            {{ $t('components.manage.library.AlbumsTable.table.album.header.domain') }}
+            {{ t('components.manage.library.AlbumsTable.table.album.header.domain') }}
           </th>
           <th>
-            {{ $t('components.manage.library.AlbumsTable.table.album.header.tracks') }}
+            {{ t('components.manage.library.AlbumsTable.table.album.header.tracks') }}
           </th>
           <th>
-            {{ $t('components.manage.library.AlbumsTable.table.album.header.releaseDate') }}
+            {{ t('components.manage.library.AlbumsTable.table.album.header.releaseDate') }}
           </th>
           <th>
-            {{ $t('components.manage.library.AlbumsTable.table.album.header.creationDate') }}
+            {{ t('components.manage.library.AlbumsTable.table.album.header.creationDate') }}
           </th>
         </template>
         <template
@@ -223,7 +223,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              {{ $t('components.manage.library.AlbumsTable.link.local') }}
+              {{ t('components.manage.library.AlbumsTable.link.local') }}
             </a>
           </td>
           <td>
@@ -235,7 +235,7 @@ const labels = computed(() => ({
               :date="scope.obj.release_date"
             />
             <span v-else>
-              {{ $t('components.manage.library.AlbumsTable.notApplicable') }}
+              {{ t('components.manage.library.AlbumsTable.notApplicable') }}
             </span>
           </td>
           <td>
@@ -254,7 +254,7 @@ const labels = computed(() => ({
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.library.AlbumsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.library.AlbumsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index 151cf41ca..b569649f4 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -108,7 +108,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="artists-serarch">{{ $t('components.manage.library.ArtistsTable.label.search') }}</label>
+          <label for="artists-serarch">{{ t('components.manage.library.ArtistsTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="artists-search"
@@ -121,7 +121,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
           </form>
         </div>
         <div class="field">
-          <label for="artists-category">{{ $t('components.manage.library.ArtistsTable.label.category') }}</label>
+          <label for="artists-category">{{ t('components.manage.library.ArtistsTable.label.category') }}</label>
           <select
             id="artists-category"
             class="ui dropdown"
@@ -129,7 +129,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
             @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              {{ $t('components.manage.library.ArtistsTable.option.all') }}
+              {{ t('components.manage.library.ArtistsTable.option.all') }}
             </option>
             <option value="podcast">
               {{ sharedLabels.fields.content_category.choices.podcast }}
@@ -143,7 +143,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
           </select>
         </div>
         <div class="field">
-          <label for="artists-ordering">{{ $t('components.manage.library.ArtistsTable.ordering.label') }}</label>
+          <label for="artists-ordering">{{ t('components.manage.library.ArtistsTable.ordering.label') }}</label>
           <select
             id="artists-ordering"
             v-model="ordering"
@@ -159,17 +159,17 @@ const getUrl = (artist: { channel?: number; id: number }) => {
           </select>
         </div>
         <div class="field">
-          <label for="artists-ordering-direction">{{ $t('components.manage.library.ArtistsTable.ordering.direction.label') }}</label>
+          <label for="artists-ordering-direction">{{ t('components.manage.library.ArtistsTable.ordering.direction.label') }}</label>
           <select
             id="artists-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.library.ArtistsTable.ordering.direction.ascending') }}
+              {{ t('components.manage.library.ArtistsTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.library.ArtistsTable.ordering.direction.descending') }}
+              {{ t('components.manage.library.ArtistsTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -192,19 +192,19 @@ const getUrl = (artist: { channel?: number; id: number }) => {
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.library.ArtistsTable.table.artist.header.name') }}
+            {{ t('components.manage.library.ArtistsTable.table.artist.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.library.ArtistsTable.table.artist.header.domain') }}
+            {{ t('components.manage.library.ArtistsTable.table.artist.header.domain') }}
           </th>
           <th>
-            {{ $t('components.manage.library.ArtistsTable.table.artist.header.albums') }}
+            {{ t('components.manage.library.ArtistsTable.table.artist.header.albums') }}
           </th>
           <th>
-            {{ $t('components.manage.library.ArtistsTable.table.artist.header.tracks') }}
+            {{ t('components.manage.library.ArtistsTable.table.artist.header.tracks') }}
           </th>
           <th>
-            {{ $t('components.manage.library.ArtistsTable.table.artist.header.creationDate') }}
+            {{ t('components.manage.library.ArtistsTable.table.artist.header.creationDate') }}
           </th>
         </template>
         <template
@@ -234,7 +234,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              {{ $t('components.manage.library.ArtistsTable.link.local') }}
+              {{ t('components.manage.library.ArtistsTable.link.local') }}
             </a>
           </td>
           <td>
@@ -259,7 +259,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.library.ArtistsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.library.ArtistsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index d6a56ad2a..58d190ce8 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -164,7 +164,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="search-edits">{{ $t('components.manage.library.EditsCardList.label.search') }}</label>
+          <label for="search-edits">{{ t('components.manage.library.EditsCardList.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="search-edits"
@@ -177,7 +177,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
           </form>
         </div>
         <div class="field">
-          <label for="edit-status">{{ $t('components.manage.library.EditsCardList.label.status') }}</label>
+          <label for="edit-status">{{ t('components.manage.library.EditsCardList.label.status') }}</label>
           <select
             id="edit-status"
             class="ui dropdown"
@@ -185,21 +185,21 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
             @change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              {{ $t('components.manage.library.EditsCardList.option.all') }}
+              {{ t('components.manage.library.EditsCardList.option.all') }}
             </option>
             <option value="null">
-              {{ $t('components.manage.library.EditsCardList.option.pending') }}
+              {{ t('components.manage.library.EditsCardList.option.pending') }}
             </option>
             <option value="yes">
-              {{ $t('components.manage.library.EditsCardList.option.approved') }}
+              {{ t('components.manage.library.EditsCardList.option.approved') }}
             </option>
             <option value="no">
-              {{ $t('components.manage.library.EditsCardList.option.rejected') }}
+              {{ t('components.manage.library.EditsCardList.option.rejected') }}
             </option>
           </select>
         </div>
         <div class="field">
-          <label for="edit-ordering">{{ $t('components.manage.library.EditsCardList.ordering.label') }}</label>
+          <label for="edit-ordering">{{ t('components.manage.library.EditsCardList.ordering.label') }}</label>
           <select
             id="edit-ordering"
             v-model="ordering"
@@ -215,17 +215,17 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
           </select>
         </div>
         <div class="field">
-          <label for="edit-ordering-direction">{{ $t('components.manage.library.EditsCardList.ordering.direction.label') }}</label>
+          <label for="edit-ordering-direction">{{ t('components.manage.library.EditsCardList.ordering.direction.label') }}</label>
           <select
             id="edit-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.library.EditsCardList.ordering.direction.ascending') }}
+              {{ t('components.manage.library.EditsCardList.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.library.EditsCardList.ordering.direction.descending') }}
+              {{ t('components.manage.library.EditsCardList.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -265,7 +265,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.library.EditsCardList.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.library.EditsCardList.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index 5c12e61c4..1bc5314dc 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -107,7 +107,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="libraries-search">{{ $t('components.manage.library.LibrariesTable.label.search') }}</label>
+          <label for="libraries-search">{{ t('components.manage.library.LibrariesTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="libraries-search"
@@ -120,7 +120,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </form>
         </div>
         <div class="field">
-          <label for="libraries-visibility">{{ $t('components.manage.library.LibrariesTable.label.visibility') }}</label>
+          <label for="libraries-visibility">{{ t('components.manage.library.LibrariesTable.label.visibility') }}</label>
           <select
             id="libraries-visibility"
             class="ui dropdown"
@@ -128,7 +128,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             @change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              {{ $t('components.manage.library.LibrariesTable.option.all') }}
+              {{ t('components.manage.library.LibrariesTable.option.all') }}
             </option>
             <option value="me">
               {{ sharedLabels.fields.privacy_level.shortChoices.me }}
@@ -142,7 +142,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="libraries-ordering">{{ $t('components.manage.library.LibrariesTable.ordering.label') }}</label>
+          <label for="libraries-ordering">{{ t('components.manage.library.LibrariesTable.ordering.label') }}</label>
           <select
             id="libraries-ordering"
             v-model="ordering"
@@ -158,17 +158,17 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="libraries-ordering-direction">{{ $t('components.manage.library.LibrariesTable.ordering.direction.label') }}</label>
+          <label for="libraries-ordering-direction">{{ t('components.manage.library.LibrariesTable.ordering.direction.label') }}</label>
           <select
             id="libraries-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.library.LibrariesTable.ordering.direction.ascending') }}
+              {{ t('components.manage.library.LibrariesTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.library.LibrariesTable.ordering.direction.descending') }}
+              {{ t('components.manage.library.LibrariesTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -191,25 +191,25 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.library.LibrariesTable.table.library.header.name') }}
+            {{ t('components.manage.library.LibrariesTable.table.library.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.library.LibrariesTable.table.library.header.account') }}
+            {{ t('components.manage.library.LibrariesTable.table.library.header.account') }}
           </th>
           <th>
-            {{ $t('components.manage.library.LibrariesTable.table.library.header.domain') }}
+            {{ t('components.manage.library.LibrariesTable.table.library.header.domain') }}
           </th>
           <th>
-            {{ $t('components.manage.library.LibrariesTable.table.library.header.visibility') }}
+            {{ t('components.manage.library.LibrariesTable.table.library.header.visibility') }}
           </th>
           <th>
-            {{ $t('components.manage.library.LibrariesTable.table.library.header.uploads') }}
+            {{ t('components.manage.library.LibrariesTable.table.library.header.uploads') }}
           </th>
           <th>
-            {{ $t('components.manage.library.LibrariesTable.table.library.header.followers') }}
+            {{ t('components.manage.library.LibrariesTable.table.library.header.followers') }}
           </th>
           <th>
-            {{ $t('components.manage.library.LibrariesTable.table.library.header.creationDate') }}
+            {{ t('components.manage.library.LibrariesTable.table.library.header.creationDate') }}
           </th>
         </template>
         <template #row-cells="scope">
@@ -248,7 +248,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              {{ $t('components.manage.library.LibrariesTable.link.local') }}
+              {{ t('components.manage.library.LibrariesTable.link.local') }}
             </a>
           </td>
           <td>
@@ -283,7 +283,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.library.LibrariesTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.library.LibrariesTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 5ccbcdcf4..062c4721e 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -109,7 +109,7 @@ const showUploadDetailModal = ref(false)
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="tags-search">{{ $t('components.manage.library.TagsTable.label.search') }}</label>
+          <label for="tags-search">{{ t('components.manage.library.TagsTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="tags-search"
@@ -122,7 +122,7 @@ const showUploadDetailModal = ref(false)
           </form>
         </div>
         <div class="field">
-          <label for="tags-ordering">{{ $t('components.manage.library.TagsTable.ordering.label') }}</label>
+          <label for="tags-ordering">{{ t('components.manage.library.TagsTable.ordering.label') }}</label>
           <select
             id="tags-ordering"
             v-model="ordering"
@@ -138,17 +138,17 @@ const showUploadDetailModal = ref(false)
           </select>
         </div>
         <div class="field">
-          <label for="tags-ordering-direction">{{ $t('components.manage.library.TagsTable.ordering.direction.label') }}</label>
+          <label for="tags-ordering-direction">{{ t('components.manage.library.TagsTable.ordering.direction.label') }}</label>
           <select
             id="tags-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.library.TagsTable.ordering.direction.ascending') }}
+              {{ t('components.manage.library.TagsTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.library.TagsTable.ordering.direction.descending') }}
+              {{ t('components.manage.library.TagsTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -177,19 +177,19 @@ const showUploadDetailModal = ref(false)
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.library.TagsTable.table.tag.header.name') }}
+            {{ t('components.manage.library.TagsTable.table.tag.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TagsTable.table.tag.header.artists') }}
+            {{ t('components.manage.library.TagsTable.table.tag.header.artists') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TagsTable.table.tag.header.albums') }}
+            {{ t('components.manage.library.TagsTable.table.tag.header.albums') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TagsTable.table.tag.header.tracks') }}
+            {{ t('components.manage.library.TagsTable.table.tag.header.tracks') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TagsTable.table.tag.header.creationDate') }}
+            {{ t('components.manage.library.TagsTable.table.tag.header.creationDate') }}
           </th>
         </template>
         <template
@@ -225,7 +225,7 @@ const showUploadDetailModal = ref(false)
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.library.TagsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.library.TagsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 45b413a7b..38e590cb7 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -101,7 +101,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="tracks-search">{{ $t('components.manage.library.TracksTable.label.search') }}</label>
+          <label for="tracks-search">{{ t('components.manage.library.TracksTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="tracks-search"
@@ -114,7 +114,7 @@ const labels = computed(() => ({
           </form>
         </div>
         <div class="field">
-          <label for="tracks-ordering">{{ $t('components.manage.library.TracksTable.ordering.label') }}</label>
+          <label for="tracks-ordering">{{ t('components.manage.library.TracksTable.ordering.label') }}</label>
           <select
             id="tracks-ordering"
             v-model="ordering"
@@ -130,17 +130,17 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="tracks-ordering-direction">{{ $t('components.manage.library.TracksTable.ordering.direction.label') }}</label>
+          <label for="tracks-ordering-direction">{{ t('components.manage.library.TracksTable.ordering.direction.label') }}</label>
           <select
             id="tracks-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.library.TracksTable.ordering.direction.ascending') }}
+              {{ t('components.manage.library.TracksTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.library.TracksTable.ordering.direction.descending') }}
+              {{ t('components.manage.library.TracksTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -163,22 +163,22 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.library.TracksTable.table.track.header.title') }}
+            {{ t('components.manage.library.TracksTable.table.track.header.title') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TracksTable.table.track.header.album') }}
+            {{ t('components.manage.library.TracksTable.table.track.header.album') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TracksTable.table.track.header.artist') }}
+            {{ t('components.manage.library.TracksTable.table.track.header.artist') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TracksTable.table.track.header.domain') }}
+            {{ t('components.manage.library.TracksTable.table.track.header.domain') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TracksTable.table.track.header.license') }}
+            {{ t('components.manage.library.TracksTable.table.track.header.license') }}
           </th>
           <th>
-            {{ $t('components.manage.library.TracksTable.table.track.header.creationDate') }}
+            {{ t('components.manage.library.TracksTable.table.track.header.creationDate') }}
           </th>
         </template>
         <template
@@ -232,7 +232,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              {{ $t('components.manage.library.TracksTable.link.local') }}
+              {{ t('components.manage.library.TracksTable.link.local') }}
             </a>
           </td>
           <td>
@@ -244,7 +244,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('license', scope.obj.license)"
             >{{ scope.obj.license }}</a>
             <span v-else>
-              {{ $t('components.manage.library.TracksTable.notApplicable') }}
+              {{ t('components.manage.library.TracksTable.notApplicable') }}
             </span>
           </td>
           <td>
@@ -263,7 +263,7 @@ const labels = computed(() => ({
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.library.TracksTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.library.TracksTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 5908d7cca..27e18a35b 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -123,7 +123,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="uploads-search">{{ $t('components.manage.library.UploadsTable.label.search') }}</label>
+          <label for="uploads-search">{{ t('components.manage.library.UploadsTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="uploads-search"
@@ -136,7 +136,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </form>
         </div>
         <div class="field">
-          <label for="uploads-visibility">{{ $t('components.manage.library.UploadsTable.label.visibility') }}</label>
+          <label for="uploads-visibility">{{ t('components.manage.library.UploadsTable.label.visibility') }}</label>
           <select
             id="uploads-visibility"
             class="ui dropdown"
@@ -144,7 +144,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             @change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              {{ $t('components.manage.library.UploadsTable.option.all') }}
+              {{ t('components.manage.library.UploadsTable.option.all') }}
             </option>
             <option value="me">
               {{ sharedLabels.fields.privacy_level.shortChoices.me }}
@@ -158,7 +158,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="uploads-status">{{ $t('components.manage.library.UploadsTable.label.status') }}</label>
+          <label for="uploads-status">{{ t('components.manage.library.UploadsTable.label.status') }}</label>
           <select
             id="uploads-status"
             class="ui dropdown"
@@ -166,24 +166,24 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              {{ $t('components.manage.library.UploadsTable.option.all') }}
+              {{ t('components.manage.library.UploadsTable.option.all') }}
             </option>
             <option value="pending">
-              {{ $t('components.manage.library.UploadsTable.option.pending') }}
+              {{ t('components.manage.library.UploadsTable.option.pending') }}
             </option>
             <option value="skipped">
-              {{ $t('components.manage.library.UploadsTable.option.skipped') }}
+              {{ t('components.manage.library.UploadsTable.option.skipped') }}
             </option>
             <option value="errored">
-              {{ $t('components.manage.library.UploadsTable.option.failed') }}
+              {{ t('components.manage.library.UploadsTable.option.failed') }}
             </option>
             <option value="finished">
-              {{ $t('components.manage.library.UploadsTable.option.finished') }}
+              {{ t('components.manage.library.UploadsTable.option.finished') }}
             </option>
           </select>
         </div>
         <div class="field">
-          <label for="uploads-ordering">{{ $t('components.manage.library.UploadsTable.ordering.label') }}</label>
+          <label for="uploads-ordering">{{ t('components.manage.library.UploadsTable.ordering.label') }}</label>
           <select
             id="uploads-ordering"
             v-model="ordering"
@@ -199,17 +199,17 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="uploads-ordering-direction">{{ $t('components.manage.library.UploadsTable.ordering.direction.label') }}</label>
+          <label for="uploads-ordering-direction">{{ t('components.manage.library.UploadsTable.ordering.direction.label') }}</label>
           <select
             id="uploads-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.library.UploadsTable.ordering.direction.ascending') }}
+              {{ t('components.manage.library.UploadsTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.library.UploadsTable.ordering.direction.descending') }}
+              {{ t('components.manage.library.UploadsTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -238,31 +238,31 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.name') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.library') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.library') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.account') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.account') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.domain') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.domain') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.visibility') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.visibility') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.importStatus') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.importStatus') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.size') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.size') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.creationDate') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.creationDate') }}
           </th>
           <th>
-            {{ $t('components.manage.library.UploadsTable.table.upload.header.accessedDate') }}
+            {{ t('components.manage.library.UploadsTable.table.upload.header.accessedDate') }}
           </th>
         </template>
         <template #row-cells="scope">
@@ -312,7 +312,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              {{ $t('components.manage.library.UploadsTable.link.local') }}
+              {{ t('components.manage.library.UploadsTable.link.local') }}
             </a>
           </td>
           <td>
@@ -345,7 +345,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           <td>
             <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>
             <span v-else>
-              {{ $t('components.manage.library.UploadsTable.notApplicable') }}
+              {{ t('components.manage.library.UploadsTable.notApplicable') }}
             </span>
           </td>
           <td>
@@ -357,7 +357,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
               :date="scope.obj.accessed_date"
             />
             <span v-else>
-              {{ $t('components.manage.library.UploadsTable.notApplicable') }}
+              {{ t('components.manage.library.UploadsTable.notApplicable') }}
             </span>
           </td>
         </template>
@@ -373,7 +373,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.library.UploadsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.library.UploadsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 69904b2af..64c7cb7f3 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -102,7 +102,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="accounts-search">{{ $t('components.manage.moderation.AccountsTable.label.search') }}</label>
+          <label for="accounts-search">{{ t('components.manage.moderation.AccountsTable.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="accounts-search"
@@ -115,7 +115,7 @@ const labels = computed(() => ({
           </form>
         </div>
         <div class="field">
-          <label for="accounts-ordering">{{ $t('components.manage.moderation.AccountsTable.ordering.label') }}</label>
+          <label for="accounts-ordering">{{ t('components.manage.moderation.AccountsTable.ordering.label') }}</label>
           <select
             id="accounts-ordering"
             v-model="ordering"
@@ -131,17 +131,17 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="accounts-ordering-direction">{{ $t('components.manage.moderation.AccountsTable.ordering.direction.label') }}</label>
+          <label for="accounts-ordering-direction">{{ t('components.manage.moderation.AccountsTable.ordering.direction.label') }}</label>
           <select
             id="accounts-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.moderation.AccountsTable.ordering.direction.ascending') }}
+              {{ t('components.manage.moderation.AccountsTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.moderation.AccountsTable.ordering.direction.descending') }}
+              {{ t('components.manage.moderation.AccountsTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -164,22 +164,22 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.moderation.AccountsTable.table.account.header.name') }}
+            {{ t('components.manage.moderation.AccountsTable.table.account.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.AccountsTable.table.account.header.domain') }}
+            {{ t('components.manage.moderation.AccountsTable.table.account.header.domain') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.AccountsTable.table.account.header.uploads') }}
+            {{ t('components.manage.moderation.AccountsTable.table.account.header.uploads') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.AccountsTable.table.account.header.firstSeen') }}
+            {{ t('components.manage.moderation.AccountsTable.table.account.header.firstSeen') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.AccountsTable.table.account.header.lastSeen') }}
+            {{ t('components.manage.moderation.AccountsTable.table.account.header.lastSeen') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.AccountsTable.table.account.header.moderationRule') }}
+            {{ t('components.manage.moderation.AccountsTable.table.account.header.moderationRule') }}
           </th>
         </template>
         <template
@@ -209,7 +209,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              {{ $t('components.manage.moderation.AccountsTable.link.local') }}
+              {{ t('components.manage.moderation.AccountsTable.link.local') }}
             </a>
           </td>
           <td>
@@ -225,7 +225,7 @@ const labels = computed(() => ({
             />
           </td>
           <td>
-            <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.AccountsTable.table.account.moderationRule') }}</span>
+            <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ t('components.manage.moderation.AccountsTable.table.account.moderationRule') }}</span>
           </td>
         </template>
       </action-table>
@@ -240,7 +240,7 @@ const labels = computed(() => ({
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.moderation.AccountsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.moderation.AccountsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index 4d5506066..cda9095b7 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -124,7 +124,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="domains-search">{{ $t('components.manage.moderation.DomainsTable.label.search') }}</label>
+          <label for="domains-search">{{ t('components.manage.moderation.DomainsTable.label.search') }}</label>
           <input
             id="domains-search"
             v-model="query"
@@ -137,25 +137,25 @@ const labels = computed(() => ({
           v-if="allowListEnabled"
           class="field"
         >
-          <label for="domains-allow-list">{{ $t('components.manage.moderation.DomainsTable.label.inList') }}</label>
+          <label for="domains-allow-list">{{ t('components.manage.moderation.DomainsTable.label.inList') }}</label>
           <select
             id="domains-allow-list"
             v-model="allowed"
             class="ui dropdown"
           >
             <option :value="null">
-              {{ $t('components.manage.moderation.DomainsTable.option.all') }}
+              {{ t('components.manage.moderation.DomainsTable.option.all') }}
             </option>
             <option :value="true">
-              {{ $t('components.manage.moderation.DomainsTable.option.yes') }}
+              {{ t('components.manage.moderation.DomainsTable.option.yes') }}
             </option>
             <option :value="false">
-              {{ $t('components.manage.moderation.DomainsTable.option.no') }}
+              {{ t('components.manage.moderation.DomainsTable.option.no') }}
             </option>
           </select>
         </div>
         <div class="field">
-          <label for="domains-ordering">{{ $t('components.manage.moderation.DomainsTable.ordering.label') }}</label>
+          <label for="domains-ordering">{{ t('components.manage.moderation.DomainsTable.ordering.label') }}</label>
           <select
             id="domains-ordering"
             v-model="ordering"
@@ -171,17 +171,17 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="domains-ordering-direction">{{ $t('components.manage.moderation.DomainsTable.ordering.direction.label') }}</label>
+          <label for="domains-ordering-direction">{{ t('components.manage.moderation.DomainsTable.ordering.direction.label') }}</label>
           <select
             id="domains-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.moderation.DomainsTable.ordering.direction.ascending') }}
+              {{ t('components.manage.moderation.DomainsTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.moderation.DomainsTable.ordering.direction.descending') }}
+              {{ t('components.manage.moderation.DomainsTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -205,19 +205,19 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.moderation.DomainsTable.table.domain.header.name') }}
+            {{ t('components.manage.moderation.DomainsTable.table.domain.header.name') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.DomainsTable.table.domain.header.users') }}
+            {{ t('components.manage.moderation.DomainsTable.table.domain.header.users') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.DomainsTable.table.domain.header.receivedMessages') }}
+            {{ t('components.manage.moderation.DomainsTable.table.domain.header.receivedMessages') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.DomainsTable.table.domain.header.firstSeen') }}
+            {{ t('components.manage.moderation.DomainsTable.table.domain.header.firstSeen') }}
           </th>
           <th>
-            {{ $t('components.manage.moderation.DomainsTable.table.domain.header.moderationRule') }}
+            {{ t('components.manage.moderation.DomainsTable.table.domain.header.moderationRule') }}
           </th>
         </template>
         <template
@@ -243,7 +243,7 @@ const labels = computed(() => ({
             <human-date :date="scope.obj.creation_date" />
           </td>
           <td>
-            <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.DomainsTable.table.domain.moderationRule') }}</span>
+            <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ t('components.manage.moderation.DomainsTable.table.domain.moderationRule') }}</span>
           </td>
         </template>
       </action-table>
@@ -253,7 +253,7 @@ const labels = computed(() => ({
       >
         <div class="ui icon header">
           <i class="server icon" />
-          {{ $t('components.manage.moderation.DomainsTable.empty.noPods') }}
+          {{ t('components.manage.moderation.DomainsTable.empty.noPods') }}
         </div>
       </div>
     </div>
@@ -267,7 +267,7 @@ const labels = computed(() => ({
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.moderation.DomainsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('components.manage.moderation.DomainsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/moderation/InstancePolicyCard.vue b/front/src/components/manage/moderation/InstancePolicyCard.vue
index ac5fd7277..cd19d334b 100644
--- a/front/src/components/manage/moderation/InstancePolicyCard.vue
+++ b/front/src/components/manage/moderation/InstancePolicyCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { InstancePolicy } from '~/types'
+import { useI18n } from 'vue-i18n'
 
 import useMarkdown from '~/composables/useMarkdown'
 
@@ -11,6 +12,8 @@ interface Props {
   object: InstancePolicy
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -25,18 +28,18 @@ const summary = useMarkdown(() => props.object.summary)
       <i class="user icon" />{{ object.actor }}  &nbsp;
       <template v-if="object.is_active">
         <i class="play icon" />
-        {{ $t('components.manage.moderation.InstancePolicyCard.status.enabled') }}
+        {{ t('components.manage.moderation.InstancePolicyCard.status.enabled') }}
       </template>
       <template v-if="!object.is_active">
         <i class="pause icon" />
-        {{ $t('components.manage.moderation.InstancePolicyCard.status.paused') }}
+        {{ t('components.manage.moderation.InstancePolicyCard.status.paused') }}
       </template>
     </p>
     <div>
-      <p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.header.rule') }}</strong></p>
+      <p><strong>{{ t('components.manage.moderation.InstancePolicyCard.header.rule') }}</strong></p>
       <p v-if="object.block_all">
         <i class="ban icon" />
-        {{ $t('components.manage.moderation.InstancePolicyCard.label.blockAll') }}
+        {{ t('components.manage.moderation.InstancePolicyCard.label.blockAll') }}
       </p>
       <div
         v-else
@@ -48,7 +51,7 @@ const summary = useMarkdown(() => props.object.summary)
         >
           <i class="feed icon" />
           <div class="content">
-            {{ $t('components.manage.moderation.InstancePolicyCard.label.muteActivity') }}
+            {{ t('components.manage.moderation.InstancePolicyCard.label.muteActivity') }}
           </div>
         </div>
         <div
@@ -57,7 +60,7 @@ const summary = useMarkdown(() => props.object.summary)
         >
           <i class="bell icon" />
           <div class="content">
-            {{ $t('components.manage.moderation.InstancePolicyCard.label.muteNotifications') }}
+            {{ t('components.manage.moderation.InstancePolicyCard.label.muteNotifications') }}
           </div>
         </div>
         <div
@@ -66,14 +69,14 @@ const summary = useMarkdown(() => props.object.summary)
         >
           <i class="file icon" />
           <div class="content">
-            {{ $t('components.manage.moderation.InstancePolicyCard.label.rejectMedia') }}
+            {{ t('components.manage.moderation.InstancePolicyCard.label.rejectMedia') }}
           </div>
         </div>
       </div>
     </div>
     <div v-if="summary">
       <div class="ui hidden divider" />
-      <p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.label.reason') }}</strong></p>
+      <p><strong>{{ t('components.manage.moderation.InstancePolicyCard.label.reason') }}</strong></p>
       <sanitized-html :html="summary" />
     </div>
     <div class="ui hidden divider" />
@@ -82,7 +85,7 @@ const summary = useMarkdown(() => props.object.summary)
       @click="emit('update')"
     >
       <i class="edit icon" />
-      {{ $t('components.manage.moderation.InstancePolicyCard.button.edit') }}
+      {{ t('components.manage.moderation.InstancePolicyCard.button.edit') }}
     </button>
   </div>
 </template>
diff --git a/front/src/components/manage/moderation/InstancePolicyForm.vue b/front/src/components/manage/moderation/InstancePolicyForm.vue
index fd4294673..b4dae5ddb 100644
--- a/front/src/components/manage/moderation/InstancePolicyForm.vue
+++ b/front/src/components/manage/moderation/InstancePolicyForm.vue
@@ -125,12 +125,12 @@ const remove = async () => {
       <span
         v-if="object"
       >
-        {{ $t('components.manage.moderation.InstancePolicyForm.header.editRule') }}
+        {{ t('components.manage.moderation.InstancePolicyForm.header.editRule') }}
       </span>
       <span
         v-else
       >
-        {{ $t('components.manage.moderation.InstancePolicyForm.header.addRule') }}
+        {{ t('components.manage.moderation.InstancePolicyForm.header.addRule') }}
       </span>
     </h3>
     <div
@@ -139,7 +139,7 @@ const remove = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.manage.moderation.InstancePolicyForm.header.failure') }}
+        {{ t('components.manage.moderation.InstancePolicyForm.header.failure') }}
       </h4>
       <ul class="list">
         <li
@@ -163,10 +163,10 @@ const remove = async () => {
         >
         <label for="policy-is-active">
           <span v-if="current.isActive">
-            {{ $t('components.manage.moderation.InstancePolicyForm.label.policyEnabled') }}
+            {{ t('components.manage.moderation.InstancePolicyForm.label.policyEnabled') }}
           </span>
           <span v-else>
-            {{ $t('components.manage.moderation.InstancePolicyForm.label.policyDisabled') }}
+            {{ t('components.manage.moderation.InstancePolicyForm.label.policyDisabled') }}
           </span>
           <tooltip :content="labels.isActiveHelp" />
         </label>
@@ -174,7 +174,7 @@ const remove = async () => {
     </div>
     <div class="field">
       <label for="policy-summary">
-        {{ $t('components.manage.moderation.InstancePolicyForm.label.policyReason') }}
+        {{ t('components.manage.moderation.InstancePolicyForm.label.policyReason') }}
         <tooltip :content="labels.summaryHelp" />
       </label>
       <textarea
@@ -192,13 +192,13 @@ const remove = async () => {
           type="checkbox"
         >
         <label for="policy-is-active">
-          {{ $t('components.manage.moderation.InstancePolicyForm.label.blockAll') }}
+          {{ t('components.manage.moderation.InstancePolicyForm.label.blockAll') }}
           <tooltip :content="labels.blockAllHelp" />
         </label>
       </div>
     </div>
     <div class="ui horizontal divider">
-      {{ $t('components.manage.moderation.InstancePolicyForm.label.customizeRule') }}
+      {{ t('components.manage.moderation.InstancePolicyForm.label.customizeRule') }}
     </div>
     <div
       v-for="(config, key) in fieldConfig"
@@ -223,17 +223,17 @@ const remove = async () => {
       class="ui basic left floated button"
       @click.prevent="emit('cancel')"
     >
-      {{ $t('components.manage.moderation.InstancePolicyForm.button.cancel') }}
+      {{ t('components.manage.moderation.InstancePolicyForm.button.cancel') }}
     </button>
     <button
       :class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
       :disabled="isLoading"
     >
       <span v-if="object">
-        {{ $t('components.manage.moderation.InstancePolicyForm.button.update') }}
+        {{ t('components.manage.moderation.InstancePolicyForm.button.update') }}
       </span>
       <span v-else>
-        {{ $t('components.manage.moderation.InstancePolicyForm.button.create') }}
+        {{ t('components.manage.moderation.InstancePolicyForm.button.create') }}
       </span>
     </button>
     <dangerous-button
@@ -241,20 +241,20 @@ const remove = async () => {
       class="ui right floated basic danger button"
       @confirm="remove"
     >
-      {{ $t('components.manage.moderation.InstancePolicyForm.button.delete') }}
+      {{ t('components.manage.moderation.InstancePolicyForm.button.delete') }}
       <template #modal-header>
         <p>
-          {{ $t('components.manage.moderation.InstancePolicyForm.modal.delete.header') }}
+          {{ t('components.manage.moderation.InstancePolicyForm.modal.delete.header') }}
         </p>
       </template>
       <template #modal-content>
         <p>
-          {{ $t('components.manage.moderation.InstancePolicyForm.modal.delete.content.warning') }}
+          {{ t('components.manage.moderation.InstancePolicyForm.modal.delete.content.warning') }}
         </p>
       </template>
       <template #modal-confirm>
         <div>
-          {{ $t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
+          {{ t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
         </div>
       </template>
     </dangerous-button>
diff --git a/front/src/components/manage/moderation/InstancePolicyModal.vue b/front/src/components/manage/moderation/InstancePolicyModal.vue
index c950ea424..4a0431641 100644
--- a/front/src/components/manage/moderation/InstancePolicyModal.vue
+++ b/front/src/components/manage/moderation/InstancePolicyModal.vue
@@ -4,6 +4,7 @@ import type { BackendError } from '~/types'
 import axios from 'axios'
 
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
@@ -14,6 +15,8 @@ interface Props {
   type: 'domain' | 'actor'
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const show = ref(false)
@@ -62,14 +65,14 @@ const fetchData = async () => {
   >
     <i class="shield icon" />&nbsp;
     <slot>
-      {{ $t('components.manage.moderation.InstancePolicyModal.button.show') }}
+      {{ t('components.manage.moderation.InstancePolicyModal.button.show') }}
     </slot>
     <semantic-modal
       v-model:show="show"
       @show="fetchData"
     >
       <h4 class="header">
-        {{ $t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target}) }}
+        {{ t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target}) }}
       </h4>
       <div class="content">
         <div class="description">
@@ -84,7 +87,7 @@ const fetchData = async () => {
           >
             <header class="ui header">
               <h3>
-                {{ $t('components.manage.moderation.InstancePolicyModal.modal.manage.content.warning', {obj: target}) }}
+                {{ t('components.manage.moderation.InstancePolicyModal.modal.manage.content.warning', {obj: target}) }}
               </h3>
             </header>
           </instance-policy-card>
@@ -103,7 +106,7 @@ const fetchData = async () => {
       </div>
       <div class="actions">
         <button class="ui deny button">
-          {{ $t('components.manage.moderation.InstancePolicyModal.button.close') }}
+          {{ t('components.manage.moderation.InstancePolicyModal.button.close') }}
         </button>
       </div>
     </semantic-modal>
diff --git a/front/src/components/manage/moderation/NoteForm.vue b/front/src/components/manage/moderation/NoteForm.vue
index 3b4469dba..53a832dd1 100644
--- a/front/src/components/manage/moderation/NoteForm.vue
+++ b/front/src/components/manage/moderation/NoteForm.vue
@@ -56,7 +56,7 @@ const submit = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.manage.moderation.NoteForm.header.failure') }}
+        {{ t('components.manage.moderation.NoteForm.header.failure') }}
       </h4>
       <ul class="list">
         <li
@@ -81,7 +81,7 @@ const submit = async () => {
       type="submit"
       :disabled="isLoading"
     >
-      {{ $t('components.manage.moderation.NoteForm.button.add') }}
+      {{ t('components.manage.moderation.NoteForm.button.add') }}
     </button>
   </form>
 </template>
diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
index 780c085e9..9f02b4603 100644
--- a/front/src/components/manage/moderation/NotesThread.vue
+++ b/front/src/components/manage/moderation/NotesThread.vue
@@ -3,6 +3,8 @@ import type { Note } from '~/types'
 
 import { useMarkdownRaw } from '~/composables/useMarkdown'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 
 import axios from 'axios'
 
@@ -15,6 +17,8 @@ interface Props {
   notes: Note[]
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 defineProps<Props>()
 
@@ -64,22 +68,22 @@ const remove = async (note: Note) => {
             @confirm="remove(note)"
           >
             <i class="trash icon" />
-            {{ $t('components.manage.moderation.NotesThread.button.delete') }}
+            {{ t('components.manage.moderation.NotesThread.button.delete') }}
             <template #modal-header>
               <p>
-                {{ $t('components.manage.moderation.NotesThread.modal.delete.header') }}
+                {{ t('components.manage.moderation.NotesThread.modal.delete.header') }}
               </p>
             </template>
             <template #modal-content>
               <div>
                 <p>
-                  {{ $t('components.manage.moderation.NotesThread.modal.delete.content.warning') }}
+                  {{ t('components.manage.moderation.NotesThread.modal.delete.content.warning') }}
                 </p>
               </div>
             </template>
             <template #modal-confirm>
               <p>
-                {{ $t('components.manage.moderation.NotesThread.button.delete') }}
+                {{ t('components.manage.moderation.NotesThread.button.delete') }}
               </p>
             </template>
           </dangerous-button>
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index c68989b40..3c3c64858 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -143,7 +143,7 @@ const handleRemovedNote = (uuid: string) => {
     <div class="content">
       <h4 class="header">
         <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
-          {{ $t('components.manage.moderation.ReportCard.link.report', {id: obj.uuid.substring(0, 8)}) }}
+          {{ t('components.manage.moderation.ReportCard.link.report', {id: obj.uuid.substring(0, 8)}) }}
         </router-link>
         <collapse-link
           v-model="isCollapsed"
@@ -158,7 +158,7 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.ReportCard.table.report.submittedBy') }}
+                    {{ t('components.manage.moderation.ReportCard.table.report.submittedBy') }}
                   </td>
                   <td>
                     <div v-if="obj.submitter">
@@ -174,7 +174,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.ReportCard.table.report.category') }}
+                    {{ t('components.manage.moderation.ReportCard.table.report.category') }}
                   </td>
                   <td>
                     <report-category-dropdown
@@ -188,7 +188,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.ReportCard.table.report.creationDate') }}
+                    {{ t('components.manage.moderation.ReportCard.table.report.creationDate') }}
                   </td>
                   <td>
                     <human-date
@@ -205,22 +205,22 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.ReportCard.table.status.status') }}
+                    {{ t('components.manage.moderation.ReportCard.table.status.status') }}
                   </td>
                   <td v-if="obj.is_handled">
                     <span v-if="obj.is_handled">
                       <i class="success check icon" />
-                      {{ $t('components.manage.moderation.ReportCard.table.status.resolved') }}
+                      {{ t('components.manage.moderation.ReportCard.table.status.resolved') }}
                     </span>
                   </td>
                   <td v-else>
                     <i class="danger x icon" />
-                    {{ $t('components.manage.moderation.ReportCard.table.status.unresolved') }}
+                    {{ t('components.manage.moderation.ReportCard.table.status.unresolved') }}
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.ReportCard.table.status.assignedTo') }}
+                    {{ t('components.manage.moderation.ReportCard.table.status.assignedTo') }}
                   </td>
                   <td>
                     <div v-if="obj.assigned_to">
@@ -230,13 +230,13 @@ const handleRemovedNote = (uuid: string) => {
                       />
                     </div>
                     <span v-else>
-                      {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
+                      {{ t('components.manage.moderation.ReportCard.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.ReportCard.table.status.resolutionDate') }}
+                    {{ t('components.manage.moderation.ReportCard.table.status.resolutionDate') }}
                   </td>
                   <td>
                     <human-date
@@ -245,13 +245,13 @@ const handleRemovedNote = (uuid: string) => {
                       :icon="true"
                     />
                     <span v-else>
-                      {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
+                      {{ t('components.manage.moderation.ReportCard.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.ReportCard.table.status.internalNotes') }}
+                    {{ t('components.manage.moderation.ReportCard.table.status.internalNotes') }}
                   </td>
                   <td>
                     <i class="comment icon" />
@@ -271,7 +271,7 @@ const handleRemovedNote = (uuid: string) => {
       <div class="ui stackable two column grid">
         <div class="column">
           <h3>
-            {{ $t('components.manage.moderation.ReportCard.header.message') }}
+            {{ t('components.manage.moderation.ReportCard.header.message') }}
           </h3>
           <expandable-div
             v-if="summary"
@@ -283,14 +283,14 @@ const handleRemovedNote = (uuid: string) => {
         </div>
         <aside class="column">
           <h3>
-            {{ $t('components.manage.moderation.ReportCard.header.reportedObject') }}
+            {{ t('components.manage.moderation.ReportCard.header.reportedObject') }}
           </h3>
           <div
             v-if="!obj.target"
             role="alert"
             class="ui warning message"
           >
-            {{ $t('components.manage.moderation.ReportCard.warning.objectDeleted') }}
+            {{ t('components.manage.moderation.ReportCard.warning.objectDeleted') }}
           </div>
           <router-link
             v-if="target && configs[target.type].urls.getDetail"
@@ -298,7 +298,7 @@ const handleRemovedNote = (uuid: string) => {
             :to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
           >
             <i class="eye icon" />
-            {{ $t('components.manage.moderation.ReportCard.link.publicPage') }}
+            {{ t('components.manage.moderation.ReportCard.link.publicPage') }}
           </router-link>
           <router-link
             v-if="target && configs[target.type].urls.getAdminDetail"
@@ -306,13 +306,13 @@ const handleRemovedNote = (uuid: string) => {
             :to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
           >
             <i class="wrench icon" />
-            {{ $t('components.manage.moderation.ReportCard.link.moderation') }}
+            {{ t('components.manage.moderation.ReportCard.link.moderation') }}
           </router-link>
           <table class="ui very basic unstackable table">
             <tbody>
               <tr v-if="target">
                 <td>
-                  {{ $t('components.manage.moderation.ReportCard.table.object.type') }}
+                  {{ t('components.manage.moderation.ReportCard.table.object.type') }}
                 </td>
                 <td colspan="2">
                   <i :class="[configs[target.type].icon, 'icon']" />
@@ -321,7 +321,7 @@ const handleRemovedNote = (uuid: string) => {
               </tr>
               <tr v-if="obj.target_owner && (!target || target.type !== 'account')">
                 <td>
-                  {{ $t('components.manage.moderation.ReportCard.table.object.owner') }}
+                  {{ t('components.manage.moderation.ReportCard.table.object.owner') }}
                 </td>
                 <td>
                   <actor-link
@@ -340,7 +340,7 @@ const handleRemovedNote = (uuid: string) => {
               </tr>
               <tr v-if="target && target.type === 'account'">
                 <td>
-                  {{ $t('components.manage.moderation.ReportCard.table.object.account') }}
+                  {{ t('components.manage.moderation.ReportCard.table.object.account') }}
                 </td>
                 <td>
                   <actor-link
@@ -359,17 +359,17 @@ const handleRemovedNote = (uuid: string) => {
               </tr>
               <tr v-if="obj.target_state.is_local">
                 <td>
-                  {{ $t('components.manage.moderation.ReportCard.table.object.domain') }}
+                  {{ t('components.manage.moderation.ReportCard.table.object.domain') }}
                 </td>
                 <td colspan="2">
                   <i class="home icon" />
-                  {{ $t('components.manage.moderation.ReportCard.table.object.local') }}
+                  {{ t('components.manage.moderation.ReportCard.table.object.local') }}
                 </td>
               </tr>
               <tr v-else-if="obj.target_state.domain">
                 <td>
                   <router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
-                    {{ $t('components.manage.moderation.ReportCard.table.object.domain') }}
+                    {{ t('components.manage.moderation.ReportCard.table.object.domain') }}
                   </router-link>
                 </td>
                 <td>
@@ -398,7 +398,7 @@ const handleRemovedNote = (uuid: string) => {
                   v-else
                   colspan="2"
                 >
-                  {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
+                  {{ t('components.manage.moderation.ReportCard.notApplicable') }}
                 </td>
               </tr>
             </tbody>
@@ -408,7 +408,7 @@ const handleRemovedNote = (uuid: string) => {
       <div class="ui stackable two column grid">
         <div class="column">
           <h3>
-            {{ $t('components.manage.moderation.ReportCard.header.notes') }}
+            {{ t('components.manage.moderation.ReportCard.header.notes') }}
           </h3>
           <notes-thread
             :notes="obj.notes"
@@ -421,7 +421,7 @@ const handleRemovedNote = (uuid: string) => {
         </div>
         <div class="column">
           <h3>
-            {{ $t('components.manage.moderation.ReportCard.header.actions') }}
+            {{ t('components.manage.moderation.ReportCard.header.actions') }}
           </h3>
           <div class="ui labelled icon basic buttons">
             <button
@@ -430,7 +430,7 @@ const handleRemovedNote = (uuid: string) => {
               @click="resolveReport(true)"
             >
               <i class="success check icon" />&nbsp;
-              {{ $t('components.manage.moderation.ReportCard.button.resolve') }}
+              {{ t('components.manage.moderation.ReportCard.button.resolve') }}
             </button>
             <button
               v-if="obj.is_handled === true"
@@ -438,7 +438,7 @@ const handleRemovedNote = (uuid: string) => {
               @click="resolveReport(false)"
             >
               <i class="warning redo icon" />&nbsp;
-              {{ $t('components.manage.moderation.ReportCard.button.unresolve') }}
+              {{ t('components.manage.moderation.ReportCard.button.unresolve') }}
             </button>
             <template
               v-for="action in actions"
diff --git a/front/src/components/manage/moderation/UserRequestCard.vue b/front/src/components/manage/moderation/UserRequestCard.vue
index 996000619..b88f62b16 100644
--- a/front/src/components/manage/moderation/UserRequestCard.vue
+++ b/front/src/components/manage/moderation/UserRequestCard.vue
@@ -3,6 +3,8 @@ import type { UserRequest, UserRequestStatus } from '~/types'
 
 import { useStore } from '~/store'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 
 import axios from 'axios'
 
@@ -19,6 +21,8 @@ interface Props {
   initObj: UserRequest
 }
 
+const { t } = useI18n()
+
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
@@ -67,7 +71,7 @@ const handleRemovedNote = (uuid: string) => {
     <div class="content">
       <h4 class="header">
         <router-link :to="{name: 'manage.moderation.requests.detail', params: {id: obj.uuid}}">
-          {{ $t('components.manage.moderation.UserRequestCard.link.request', {id: obj.uuid.substring(0, 8)}) }}
+          {{ t('components.manage.moderation.UserRequestCard.link.request', {id: obj.uuid.substring(0, 8)}) }}
         </router-link>
         <collapse-link
           v-model="isCollapsed"
@@ -82,7 +86,7 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.UserRequestCard.table.request.submittedBy') }}
+                    {{ t('components.manage.moderation.UserRequestCard.table.request.submittedBy') }}
                   </td>
                   <td>
                     <actor-link
@@ -93,7 +97,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.UserRequestCard.table.request.creationDate') }}
+                    {{ t('components.manage.moderation.UserRequestCard.table.request.creationDate') }}
                   </td>
                   <td>
                     <human-date
@@ -110,26 +114,26 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.UserRequestCard.table.status.status') }}
+                    {{ t('components.manage.moderation.UserRequestCard.table.status.status') }}
                   </td>
                   <td>
                     <template v-if="obj.status === 'pending'">
                       <i class="warning hourglass icon" />
-                      {{ $t('components.manage.moderation.UserRequestCard.table.status.pending') }}
+                      {{ t('components.manage.moderation.UserRequestCard.table.status.pending') }}
                     </template>
                     <template v-else-if="obj.status === 'refused'">
                       <i class="danger x icon" />
-                      {{ $t('components.manage.moderation.UserRequestCard.table.status.refused') }}
+                      {{ t('components.manage.moderation.UserRequestCard.table.status.refused') }}
                     </template>
                     <template v-else-if="obj.status === 'approved'">
                       <i class="success check icon" />
-                      {{ $t('components.manage.moderation.UserRequestCard.table.status.approved') }}
+                      {{ t('components.manage.moderation.UserRequestCard.table.status.approved') }}
                     </template>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.UserRequestCard.table.status.assignedTo') }}
+                    {{ t('components.manage.moderation.UserRequestCard.table.status.assignedTo') }}
                   </td>
                   <td>
                     <div v-if="obj.assigned_to">
@@ -141,13 +145,13 @@ const handleRemovedNote = (uuid: string) => {
                     <span
                       v-else
                     >
-                      {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
+                      {{ t('components.manage.moderation.UserRequestCard.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.UserRequestCard.table.status.resolutionDate') }}
+                    {{ t('components.manage.moderation.UserRequestCard.table.status.resolutionDate') }}
                   </td>
                   <td>
                     <human-date
@@ -156,13 +160,13 @@ const handleRemovedNote = (uuid: string) => {
                       :icon="true"
                     />
                     <span v-else>
-                      {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
+                      {{ t('components.manage.moderation.UserRequestCard.notApplicable') }}
                     </span>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    {{ $t('components.manage.moderation.UserRequestCard.table.status.internalNotes') }}
+                    {{ t('components.manage.moderation.UserRequestCard.table.status.internalNotes') }}
                   </td>
                   <td>
                     <i class="comment icon" />
@@ -182,10 +186,10 @@ const handleRemovedNote = (uuid: string) => {
       <div class="ui stackable two column grid">
         <div class="column">
           <h3>
-            {{ $t('components.manage.moderation.UserRequestCard.header.signup') }}
+            {{ t('components.manage.moderation.UserRequestCard.header.signup') }}
           </h3>
           <p>
-            {{ $t('components.manage.moderation.UserRequestCard.message.signup') }}
+            {{ t('components.manage.moderation.UserRequestCard.message.signup') }}
           </p>
           <template v-if="obj.metadata">
             <div class="ui hidden divider" />
@@ -198,7 +202,7 @@ const handleRemovedNote = (uuid: string) => {
                 {{ value }}
               </p>
               <span v-else>
-                {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
+                {{ t('components.manage.moderation.UserRequestCard.notApplicable') }}
               </span>
               <div class="ui hidden divider" />
             </div>
@@ -207,7 +211,7 @@ const handleRemovedNote = (uuid: string) => {
         <aside class="column">
           <div v-if="obj.status != 'approved'">
             <h3>
-              {{ $t('components.manage.moderation.UserRequestCard.header.actions') }}
+              {{ t('components.manage.moderation.UserRequestCard.header.actions') }}
             </h3>
             <div class="ui labelled icon basic buttons">
               <button
@@ -216,7 +220,7 @@ const handleRemovedNote = (uuid: string) => {
                 @click="approve(true)"
               >
                 <i class="success check icon" />&nbsp;
-                {{ $t('components.manage.moderation.UserRequestCard.button.approve') }}
+                {{ t('components.manage.moderation.UserRequestCard.button.approve') }}
               </button>
               <button
                 v-if="obj.status === 'pending'"
@@ -224,12 +228,12 @@ const handleRemovedNote = (uuid: string) => {
                 @click="approve(false)"
               >
                 <i class="danger x icon" />&nbsp;
-                {{ $t('components.manage.moderation.UserRequestCard.button.reject') }}
+                {{ t('components.manage.moderation.UserRequestCard.button.reject') }}
               </button>
             </div>
           </div>
           <h3>
-            {{ $t('components.manage.moderation.UserRequestCard.header.notes') }}
+            {{ t('components.manage.moderation.UserRequestCard.header.notes') }}
           </h3>
           <notes-thread
             :notes="obj.notes"
diff --git a/front/src/components/manage/users/InvitationForm.vue b/front/src/components/manage/users/InvitationForm.vue
index 8dec2e3fe..fd92e2233 100644
--- a/front/src/components/manage/users/InvitationForm.vue
+++ b/front/src/components/manage/users/InvitationForm.vue
@@ -57,7 +57,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
         class="ui negative message"
       >
         <h4 class="header">
-          {{ $t('components.manage.users.InvitationForm.header.failure') }}
+          {{ t('components.manage.users.InvitationForm.header.failure') }}
         </h4>
         <ul class="list">
           <li
@@ -70,7 +70,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
       </div>
       <div class="inline fields">
         <div class="ui field">
-          <label for="invitation-code">{{ $t('components.manage.users.InvitationForm.label.invite') }}</label>
+          <label for="invitation-code">{{ t('components.manage.users.InvitationForm.label.invite') }}</label>
           <input
             v-model="code"
             for="invitation-code"
@@ -85,7 +85,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
             :disabled="isLoading"
             type="submit"
           >
-            {{ $t('components.manage.users.InvitationForm.button.new') }}
+            {{ t('components.manage.users.InvitationForm.button.new') }}
           </button>
         </div>
       </div>
@@ -96,10 +96,10 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
         <thead>
           <tr>
             <th>
-              {{ $t('components.manage.users.InvitationForm.table.invitation.header.code') }}
+              {{ t('components.manage.users.InvitationForm.table.invitation.header.code') }}
             </th>
             <th>
-              {{ $t('components.manage.users.InvitationForm.table.invitation.header.link') }}
+              {{ t('components.manage.users.InvitationForm.table.invitation.header.link') }}
             </th>
           </tr>
         </thead>
@@ -122,7 +122,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
         class="ui basic button"
         @click="invitations.length = 0"
       >
-        {{ $t('components.manage.users.InvitationForm.button.clear') }}
+        {{ t('components.manage.users.InvitationForm.button.clear') }}
       </button>
     </div>
   </div>
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index 86e820b90..bd8f9d5a5 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/front/src/components/manage/users/InvitationsTable.vue
@@ -104,7 +104,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="invitations-search">{{ $t('components.manage.users.InvitationsTable.label.search') }}</label>
+          <label for="invitations-search">{{ t('components.manage.users.InvitationsTable.label.search') }}</label>
           <input
             id="invitations-search"
             v-model="query"
@@ -114,7 +114,7 @@ const labels = computed(() => ({
           >
         </div>
         <div class="field">
-          <label for="invitations-ordering">{{ $t('components.manage.users.InvitationsTable.ordering.label') }}</label>
+          <label for="invitations-ordering">{{ t('components.manage.users.InvitationsTable.ordering.label') }}</label>
           <select
             id="invitations-ordering"
             v-model="ordering"
@@ -130,20 +130,20 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="invitations-status">{{ $t('components.manage.users.InvitationsTable.label.status') }}</label>
+          <label for="invitations-status">{{ t('components.manage.users.InvitationsTable.label.status') }}</label>
           <select
             id="invitations-status"
             v-model="isOpen"
             class="ui dropdown"
           >
             <option :value="null">
-              {{ $t('components.manage.users.InvitationsTable.option.all') }}
+              {{ t('components.manage.users.InvitationsTable.option.all') }}
             </option>
             <option :value="true">
-              {{ $t('components.manage.users.InvitationsTable.option.open') }}
+              {{ t('components.manage.users.InvitationsTable.option.open') }}
             </option>
             <option :value="false">
-              {{ $t('components.manage.users.InvitationsTable.option.expired') }}
+              {{ t('components.manage.users.InvitationsTable.option.expired') }}
             </option>
           </select>
         </div>
@@ -166,22 +166,22 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.users.InvitationsTable.table.invitation.header.owner') }}
+            {{ t('components.manage.users.InvitationsTable.table.invitation.header.owner') }}
           </th>
           <th>
-            {{ $t('components.manage.users.InvitationsTable.table.invitation.header.user') }}
+            {{ t('components.manage.users.InvitationsTable.table.invitation.header.user') }}
           </th>
           <th>
-            {{ $t('components.manage.users.InvitationsTable.table.invitation.header.status') }}
+            {{ t('components.manage.users.InvitationsTable.table.invitation.header.status') }}
           </th>
           <th>
-            {{ $t('components.manage.users.InvitationsTable.table.invitation.header.creationDate') }}
+            {{ t('components.manage.users.InvitationsTable.table.invitation.header.creationDate') }}
           </th>
           <th>
-            {{ $t('components.manage.users.InvitationsTable.table.invitation.header.expirationDate') }}
+            {{ t('components.manage.users.InvitationsTable.table.invitation.header.expirationDate') }}
           </th>
           <th>
-            {{ $t('components.manage.users.InvitationsTable.table.invitation.header.code') }}
+            {{ t('components.manage.users.InvitationsTable.table.invitation.header.code') }}
           </th>
         </template>
         <template
@@ -201,15 +201,15 @@ const labels = computed(() => ({
             <span
               v-if="scope.obj.users.length > 0"
               class="ui success basic label"
-            >{{ $t('components.manage.users.InvitationsTable.label.used') }}</span>
+            >{{ t('components.manage.users.InvitationsTable.label.used') }}</span>
             <span
               v-else-if="moment().isAfter(scope.obj.expiration_date)"
               class="ui danger basic label"
-            >{{ $t('components.manage.users.InvitationsTable.label.expired') }}</span>
+            >{{ t('components.manage.users.InvitationsTable.label.expired') }}</span>
             <span
               v-else
               class="ui basic label"
-            >{{ $t('components.manage.users.InvitationsTable.label.unused') }}</span>
+            >{{ t('components.manage.users.InvitationsTable.label.unused') }}</span>
           </td>
           <td>
             <human-date :date="scope.obj.creation_date" />
@@ -233,7 +233,7 @@ const labels = computed(() => ({
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.users.InvitationsTable.pagination.results', { start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count }, result.results.length) }}
+        {{ t('components.manage.users.InvitationsTable.pagination.results', { start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count }, result.results.length) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index ca228f914..5d4fa1a41 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/front/src/components/manage/users/UsersTable.vue
@@ -106,7 +106,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="users-search">{{ $t('components.manage.users.UsersTable.label.search') }}</label>
+          <label for="users-search">{{ t('components.manage.users.UsersTable.label.search') }}</label>
           <input
             id="users-search"
             v-model="query"
@@ -116,7 +116,7 @@ const labels = computed(() => ({
           >
         </div>
         <div class="field">
-          <label for="users-ordering">{{ $t('components.manage.users.UsersTable.ordering.label') }}</label>
+          <label for="users-ordering">{{ t('components.manage.users.UsersTable.ordering.label') }}</label>
           <select
             id="users-ordering"
             v-model="ordering"
@@ -132,17 +132,17 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="users-ordering-direction">{{ $t('components.manage.users.UsersTable.ordering.direction.label') }}</label>
+          <label for="users-ordering-direction">{{ t('components.manage.users.UsersTable.ordering.direction.label') }}</label>
           <select
             id="users-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('components.manage.users.UsersTable.ordering.direction.ascending') }}
+              {{ t('components.manage.users.UsersTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('components.manage.users.UsersTable.ordering.direction.descending') }}
+              {{ t('components.manage.users.UsersTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -165,25 +165,25 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            {{ $t('components.manage.users.UsersTable.table.user.header.username') }}
+            {{ t('components.manage.users.UsersTable.table.user.header.username') }}
           </th>
           <th>
-            {{ $t('components.manage.users.UsersTable.table.user.header.email') }}
+            {{ t('components.manage.users.UsersTable.table.user.header.email') }}
           </th>
           <th>
-            {{ $t('components.manage.users.UsersTable.table.user.header.accountStatus') }}
+            {{ t('components.manage.users.UsersTable.table.user.header.accountStatus') }}
           </th>
           <th>
-            {{ $t('components.manage.users.UsersTable.table.user.header.signup') }}
+            {{ t('components.manage.users.UsersTable.table.user.header.signup') }}
           </th>
           <th>
-            {{ $t('components.manage.users.UsersTable.table.user.header.lastActivity') }}
+            {{ t('components.manage.users.UsersTable.table.user.header.lastActivity') }}
           </th>
           <th>
-            {{ $t('components.manage.users.UsersTable.table.user.header.permissions') }}
+            {{ t('components.manage.users.UsersTable.table.user.header.permissions') }}
           </th>
           <th>
-            {{ $t('components.manage.users.UsersTable.table.user.header.status') }}
+            {{ t('components.manage.users.UsersTable.table.user.header.status') }}
           </th>
         </template>
         <template
@@ -210,11 +210,11 @@ const labels = computed(() => ({
             <span
               v-if="scope.obj.is_active"
               class="ui basic success label"
-            >{{ $t('components.manage.users.UsersTable.table.user.accountStatus.active') }}</span>
+            >{{ t('components.manage.users.UsersTable.table.user.accountStatus.active') }}</span>
             <span
               v-else
               class="ui basic label"
-            >{{ $t('components.manage.users.UsersTable.table.user.accountStatus.inactive') }}</span>
+            >{{ t('components.manage.users.UsersTable.table.user.accountStatus.inactive') }}</span>
           </td>
           <td>
             <human-date :date="scope.obj.date_joined" />
@@ -225,7 +225,7 @@ const labels = computed(() => ({
               :date="scope.obj.last_activity"
             />
             <template v-else>
-              {{ $t('components.manage.users.UsersTable.notApplicable') }}
+              {{ t('components.manage.users.UsersTable.notApplicable') }}
             </template>
           </td>
           <td>
@@ -243,15 +243,15 @@ const labels = computed(() => ({
             <span
               v-if="scope.obj.is_superuser"
               class="ui pink label"
-            >{{ $t('components.manage.users.UsersTable.table.user.status.admin') }}</span>
+            >{{ t('components.manage.users.UsersTable.table.user.status.admin') }}</span>
             <span
               v-else-if="scope.obj.is_staff"
               class="ui purple label"
-            >{{ $t('components.manage.users.UsersTable.table.user.status.staff') }}</span>
+            >{{ t('components.manage.users.UsersTable.table.user.status.staff') }}</span>
             <span
               v-else
               class="ui basic label"
-            >{{ $t('components.manage.users.UsersTable.table.user.status.regular') }}</span>
+            >{{ t('components.manage.users.UsersTable.table.user.status.regular') }}</span>
           </td>
         </template>
       </action-table>
@@ -266,7 +266,7 @@ const labels = computed(() => ({
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('components.manage.users.UsersTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}, result.results.length) }}
+        {{ t('components.manage.users.UsersTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}, result.results.length) }}
       </span>
     </div>
   </div>
diff --git a/front/src/components/moderation/FilterModal.vue b/front/src/components/moderation/FilterModal.vue
index b79d398d4..f4e36acd6 100644
--- a/front/src/components/moderation/FilterModal.vue
+++ b/front/src/components/moderation/FilterModal.vue
@@ -63,7 +63,7 @@ const hide = async () => {
       v-if="type === 'artist'"
       class="header"
     >
-      {{ $t('components.moderation.FilterModal.header.modal', {name: target?.name}) }}
+      {{ t('components.moderation.FilterModal.header.modal', {name: target?.name}) }}
     </h4>
     <div class="scrolling content">
       <div class="description">
@@ -73,7 +73,7 @@ const hide = async () => {
           class="ui negative message"
         >
           <h4 class="header">
-            {{ $t('components.moderation.FilterModal.header.failure') }}
+            {{ t('components.moderation.FilterModal.header.failure') }}
           </h4>
           <ul class="list">
             <li
@@ -86,37 +86,37 @@ const hide = async () => {
         </div>
         <template v-if="type === 'artist'">
           <p>
-            {{ $t('components.moderation.FilterModal.warning.createFilter.listIntro') }}
+            {{ t('components.moderation.FilterModal.warning.createFilter.listIntro') }}
           </p>
           <ul>
             <li>
-              {{ $t('components.moderation.FilterModal.warning.createFilter.listItem1') }}
+              {{ t('components.moderation.FilterModal.warning.createFilter.listItem1') }}
             </li>
             <li>
-              {{ $t('components.moderation.FilterModal.warning.createFilter.listItem2') }}
+              {{ t('components.moderation.FilterModal.warning.createFilter.listItem2') }}
             </li>
             <li>
-              {{ $t('components.moderation.FilterModal.warning.createFilter.listItem3') }}
+              {{ t('components.moderation.FilterModal.warning.createFilter.listItem3') }}
             </li>
             <li>
-              {{ $t('components.moderation.FilterModal.warning.createFilter.listItem4') }}
+              {{ t('components.moderation.FilterModal.warning.createFilter.listItem4') }}
             </li>
           </ul>
           <p>
-            {{ $t('components.moderation.FilterModal.help.createFilter') }}
+            {{ t('components.moderation.FilterModal.help.createFilter') }}
           </p>
         </template>
       </div>
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        {{ $t('components.moderation.FilterModal.button.cancel') }}
+        {{ t('components.moderation.FilterModal.button.cancel') }}
       </button>
       <button
         :class="['ui', 'success', {loading: isLoading}, 'button']"
         @click="hide"
       >
-        {{ $t('components.moderation.FilterModal.button.hide') }}
+        {{ t('components.moderation.FilterModal.button.hide') }}
       </button>
     </div>
   </semantic-modal>
diff --git a/front/src/components/moderation/ReportCategoryDropdown.vue b/front/src/components/moderation/ReportCategoryDropdown.vue
index b36a8aa1d..1041d1549 100644
--- a/front/src/components/moderation/ReportCategoryDropdown.vue
+++ b/front/src/components/moderation/ReportCategoryDropdown.vue
@@ -59,7 +59,7 @@ const allCategories = computed(() => {
 
 <template>
   <div>
-    <label v-if="label">{{ $t('components.moderation.ReportCategoryDropdown.label.category') }}</label>
+    <label v-if="label">{{ t('components.moderation.ReportCategoryDropdown.label.category') }}</label>
     <select
       v-model="value"
       class="ui dropdown"
diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index bd0496341..68ae98769 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -125,7 +125,7 @@ watchEffect(async () => {
       v-if="target"
       class="ui header"
     >
-      {{ $t('components.moderation.ReportModal.header.modal') }}
+      {{ t('components.moderation.ReportModal.header.modal') }}
       <div class="ui sub header">
         {{ target.typeLabel }}
         <span class="middle hyphen symbol" />
@@ -140,7 +140,7 @@ watchEffect(async () => {
           class="ui negative message"
         >
           <h4 class="header">
-            {{ $t('components.moderation.ReportModal.header.submissionFailure') }}
+            {{ t('components.moderation.ReportModal.header.submissionFailure') }}
           </h4>
           <ul class="list">
             <li
@@ -153,7 +153,7 @@ watchEffect(async () => {
         </div>
       </div>
       <p>
-        {{ $t('components.moderation.ReportModal.description.modal') }}
+        {{ t('components.moderation.ReportModal.description.modal') }}
       </p>
       <form
         v-if="canSubmit"
@@ -175,7 +175,7 @@ watchEffect(async () => {
             class="ui eight wide required field"
           >
             <label for="report-submitter-email">
-              {{ $t('components.moderation.ReportModal.label.email') }}
+              {{ t('components.moderation.ReportModal.label.email') }}
             </label>
             <input
               id="report-submitter-email"
@@ -185,16 +185,16 @@ watchEffect(async () => {
               required
             >
             <p>
-              {{ $t('components.moderation.ReportModal.description.email') }}
+              {{ t('components.moderation.ReportModal.description.email') }}
             </p>
           </div>
         </div>
         <div class="ui field">
           <label for="report-summary">
-            {{ $t('components.moderation.ReportModal.label.message') }}
+            {{ t('components.moderation.ReportModal.label.message') }}
           </label>
           <p>
-            {{ $t('components.moderation.ReportModal.description.message') }}
+            {{ t('components.moderation.ReportModal.description.message') }}
           </p>
           <content-form
             v-model="summary"
@@ -214,10 +214,10 @@ watchEffect(async () => {
             >
             <label for="report-forward">
               <strong>
-                {{ $t('components.moderation.ReportModal.label.forwardToDomain', {domain: targetDomain}) }}
+                {{ t('components.moderation.ReportModal.label.forwardToDomain', {domain: targetDomain}) }}
               </strong>
               <p>
-                {{ $t('components.moderation.ReportModal.description.forwardToDomain') }}
+                {{ t('components.moderation.ReportModal.description.forwardToDomain') }}
               </p>
             </label>
           </div>
@@ -234,13 +234,13 @@ watchEffect(async () => {
         class="ui warning message"
       >
         <h4 class="header">
-          {{ $t('components.moderation.ReportModal.header.disabled') }}
+          {{ t('components.moderation.ReportModal.header.disabled') }}
         </h4>
       </div>
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        {{ $t('components.moderation.ReportModal.button.cancel') }}
+        {{ t('components.moderation.ReportModal.button.cancel') }}
       </button>
       <button
         v-if="canSubmit"
@@ -248,7 +248,7 @@ watchEffect(async () => {
         type="submit"
         form="report-form"
       >
-        {{ $t('components.moderation.ReportModal.button.submit') }}
+        {{ t('components.moderation.ReportModal.button.submit') }}
       </button>
     </div>
   </semantic-modal>
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index a9483a462..82c592693 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -5,6 +5,8 @@ import PlayButton from '~/components/audio/PlayButton.vue'
 import defaultCover from '~/assets/audio/default-cover.png'
 import { computed } from 'vue'
 import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   playlist: Playlist
@@ -12,6 +14,8 @@ interface Props {
 
 const props = defineProps<Props>()
 const store = useStore()
+const router = useRouter()
+const { t } = useI18n()
 
 const images = computed(() => {
   const urls = props.playlist.album_covers.slice(0, 4).map(url => store.getters['instance/absoluteUrl'](url))
@@ -28,7 +32,7 @@ const images = computed(() => {
   <div class="ui app-card card">
     <div
       :class="['ui', 'head-image', 'squares']"
-      @click="$router.push({name: 'library.playlists.detail', params: {id: playlist.id }})"
+      @click="router.push({name: 'library.playlists.detail', params: {id: playlist.id }})"
     >
       <img
         v-for="(url, idx) in images"
@@ -61,7 +65,7 @@ const images = computed(() => {
       </div>
     </div>
     <div class="extra content">
-      {{ $t('components.playlists.Card.meta.tracks', playlist.tracks_count) }}
+      {{ t('components.playlists.Card.meta.tracks', playlist.tracks_count) }}
       <play-button
         class="right floated basic icon"
         :dropdown-only="true"
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index cb8f12ac0..a518750dc 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -169,16 +169,16 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       :title="undefined"
     />
     <h3 class="ui top attached header">
-      {{ $t('components.playlists.Editor.header.editor') }}
+      {{ t('components.playlists.Editor.header.editor') }}
     </h3>
     <div class="ui attached segment">
       <template v-if="status === 'loading'">
         <div class="ui active tiny inline loader" />
-        {{ $t('components.playlists.Editor.loading.sync') }}
+        {{ t('components.playlists.Editor.loading.sync') }}
       </template>
       <template v-else-if="status === 'errored'">
         <i class="dangerclose icon" />
-        {{ $t('components.playlists.Editor.error.sync') }}
+        {{ t('components.playlists.Editor.error.sync') }}
         <div
           v-if="errors.length > 0"
           role="alert"
@@ -200,7 +200,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
         class="ui warning message"
       >
         <p>
-          {{ $t('components.playlists.Editor.warning.duplicate') }}
+          {{ t('components.playlists.Editor.warning.duplicate') }}
         </p>
         <ul class="ui relaxed divided list duplicate-tracks-list">
           <li
@@ -215,12 +215,12 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
           class="ui small success button"
           @click="insertMany(queueTracks, true)"
         >
-          {{ $t('components.playlists.Editor.button.addDuplicate') }}
+          {{ t('components.playlists.Editor.button.addDuplicate') }}
         </button>
       </div>
       <template v-else-if="status === 'saved'">
         <i class="success check icon" />
-        {{ $t('components.playlists.Editor.message.sync') }}
+        {{ t('components.playlists.Editor.message.sync') }}
       </template>
     </div>
     <div class="ui bottom attached segment">
@@ -231,7 +231,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
         @click="insertMany(queueTracks, false)"
       >
         <i class="plus icon" />
-        {{ $t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
+        {{ t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
       </button>
 
       <dangerous-button
@@ -240,27 +240,27 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
         :action="clearPlaylist"
       >
         <i class="eraser icon" />
-        {{ $t('components.playlists.Editor.button.clear') }}
+        {{ t('components.playlists.Editor.button.clear') }}
         <template #modal-header>
           <p>
-            {{ $t('components.playlists.Editor.modal.clearPlaylist.header', {playlist: playlist?.name}) }}
+            {{ t('components.playlists.Editor.modal.clearPlaylist.header', {playlist: playlist?.name}) }}
           </p>
         </template>
         <template #modal-content>
           <p>
-            {{ $t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
+            {{ t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
           </p>
         </template>
         <template #modal-confirm>
           <div>
-            {{ $t('components.playlists.Editor.button.clear') }}
+            {{ t('components.playlists.Editor.button.clear') }}
           </div>
         </template>
       </dangerous-button>
       <div class="ui hidden divider" />
       <template v-if="tracks.length > 0">
         <p>
-          {{ $t('components.playlists.Editor.help.reorder') }}
+          {{ t('components.playlists.Editor.help.reorder') }}
         </p>
         <div class="table-wrapper">
           <table class="ui compact very basic unstackable table">
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index b935b8a28..9dd0605d0 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -111,7 +111,7 @@ const submit = async () => {
       v-if="title"
       class="ui header"
     >
-      {{ $t('components.playlists.Form.header.createPlaylist') }}
+      {{ t('components.playlists.Form.header.createPlaylist') }}
     </h4>
     <div
       v-if="success"
@@ -119,10 +119,10 @@ const submit = async () => {
     >
       <h4 class="header">
         <template v-if="playlist">
-          {{ $t('components.playlists.Form.header.updateSuccess') }}
+          {{ t('components.playlists.Form.header.updateSuccess') }}
         </template>
         <template v-else>
-          {{ $t('components.playlists.Form.header.createSuccess') }}
+          {{ t('components.playlists.Form.header.createSuccess') }}
         </template>
       </h4>
     </div>
@@ -132,7 +132,7 @@ const submit = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('components.playlists.Form.header.createFailure') }}
+        {{ t('components.playlists.Form.header.createFailure') }}
       </h4>
       <ul class="list">
         <li
@@ -145,7 +145,7 @@ const submit = async () => {
     </div>
     <div class="three fields">
       <div class="field">
-        <label for="playlist-name">{{ $t('components.playlists.Form.label.name') }}</label>
+        <label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
         <input
           id="playlist-name"
           v-model="name"
@@ -156,7 +156,7 @@ const submit = async () => {
         >
       </div>
       <div class="field">
-        <label for="playlist-visibility">{{ $t('components.playlists.Form.label.visibility') }}</label>
+        <label for="playlist-visibility">{{ t('components.playlists.Form.label.visibility') }}</label>
         <select
           id="playlist-visibility"
           v-model="privacyLevel"
@@ -178,10 +178,10 @@ const submit = async () => {
           type="submit"
         >
           <template v-if="playlist">
-            {{ $t('components.playlists.Form.button.update') }}
+            {{ t('components.playlists.Form.button.update') }}
           </template>
           <template v-else>
-            {{ $t('components.playlists.Form.button.create') }}
+            {{ t('components.playlists.Form.button.create') }}
           </template>
         </button>
       </div>
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index e151de6ac..41341eaaf 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -87,14 +87,14 @@ store.dispatch('playlists/fetchOwn')
     <h4 class="header">
       <template v-if="track">
         <h2 class="ui header">
-          {{ $t('components.playlists.PlaylistModal.header.addToPlaylist') }}
+          {{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
           <div class="ui sub header">
-            {{ $t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
+            {{ t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
           </div>
         </h2>
       </template>
       <span v-else>
-        {{ $t('components.playlists.PlaylistModal.header.manage') }}
+        {{ t('components.playlists.PlaylistModal.header.manage') }}
       </span>
     </h4>
     <div class="scrolling content">
@@ -119,13 +119,13 @@ store.dispatch('playlists/fetchOwn')
             class="ui small basic cancel button"
             @click="showDuplicateTrackAddConfirmation = false"
           >
-            {{ $t('components.playlists.PlaylistModal.button.cancel') }}
+            {{ t('components.playlists.PlaylistModal.button.cancel') }}
           </button>
           <button
             class="ui small success button"
             @click="addToPlaylist(lastSelectedPlaylist, true)"
           >
-            {{ $t('components.playlists.PlaylistModal.button.addDuplicate') }}
+            {{ t('components.playlists.PlaylistModal.button.addDuplicate') }}
           </button>
         </div>
         <div
@@ -134,7 +134,7 @@ store.dispatch('playlists/fetchOwn')
           class="ui negative message"
         >
           <h4 class="header">
-            {{ $t('components.playlists.PlaylistModal.header.addFailure') }}
+            {{ t('components.playlists.PlaylistModal.header.addFailure') }}
           </h4>
           <ul class="list">
             <li
@@ -146,12 +146,12 @@ store.dispatch('playlists/fetchOwn')
           </ul>
         </div>
         <h4 class="ui header">
-          {{ $t('components.playlists.PlaylistModal.header.available') }}
+          {{ t('components.playlists.PlaylistModal.header.available') }}
         </h4>
         <div class="ui form">
           <div class="fields">
             <div class="field">
-              <label for="playlist-name-filter">{{ $t('components.playlists.PlaylistModal.label.filter') }}</label>
+              <label for="playlist-name-filter">{{ t('components.playlists.PlaylistModal.label.filter') }}</label>
               <input
                 id="playlist-name-filter"
                 v-model="playlistNameFilter"
@@ -168,15 +168,15 @@ store.dispatch('playlists/fetchOwn')
         >
           <thead>
             <tr>
-              <th><span class="visually-hidden">{{ $t('components.playlists.PlaylistModal.table.edit.header.edit') }}</span></th>
+              <th><span class="visually-hidden">{{ t('components.playlists.PlaylistModal.table.edit.header.edit') }}</span></th>
               <th>
-                {{ $t('components.playlists.PlaylistModal.table.edit.header.name') }}
+                {{ t('components.playlists.PlaylistModal.table.edit.header.name') }}
               </th>
               <th class="sorted descending">
-                {{ $t('components.playlists.PlaylistModal.table.edit.header.lastModification') }}
+                {{ t('components.playlists.PlaylistModal.table.edit.header.lastModification') }}
               </th>
               <th>
-                {{ $t('components.playlists.PlaylistModal.table.edit.header.tracks') }}
+                {{ t('components.playlists.PlaylistModal.table.edit.header.tracks') }}
               </th>
             </tr>
           </thead>
@@ -191,7 +191,7 @@ store.dispatch('playlists/fetchOwn')
                   :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
                 >
                   <i class="ui pencil icon" />
-                  <span class="visually-hidden">{{ $t('components.playlists.PlaylistModal.button.edit') }}</span>
+                  <span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
                 </router-link>
               </td>
               <td>
@@ -212,7 +212,7 @@ store.dispatch('playlists/fetchOwn')
                   @click.prevent="addToPlaylist(playlist.id, false)"
                 >
                   <i class="plus icon" />
-                  {{ $t('components.playlists.PlaylistModal.button.addTrack') }}
+                  {{ t('components.playlists.PlaylistModal.button.addTrack') }}
                 </button>
               </td>
             </tr>
@@ -221,7 +221,7 @@ store.dispatch('playlists/fetchOwn')
         <template v-else>
           <div class="ui small placeholder segment component-placeholder">
             <h4 class="ui header">
-              {{ $t('components.playlists.PlaylistModal.header.noResults') }}
+              {{ t('components.playlists.PlaylistModal.header.noResults') }}
             </h4>
           </div>
         </template>
@@ -232,13 +232,13 @@ store.dispatch('playlists/fetchOwn')
       >
         <div class="ui icon header">
           <i class="list icon" />
-          {{ $t('components.playlists.PlaylistModal.empty.noPlaylists') }}
+          {{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
         </div>
       </div>
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        {{ $t('components.playlists.PlaylistModal.button.cancel') }}
+        {{ t('components.playlists.PlaylistModal.button.cancel') }}
       </button>
     </div>
   </semantic-modal>
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index 374af2aa8..62dd273b6 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/front/src/components/playlists/TrackPlaylistIcon.vue
@@ -4,6 +4,7 @@ import type { Track } from '~/types'
 
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
+import { useStore } from '~/store'
 
 interface Props {
   track?: Track | QueueTrack
@@ -17,6 +18,7 @@ withDefaults(defineProps<Props>(), {
   border: false
 })
 
+const store = useStore()
 const { t } = useI18n()
 
 const labels = computed(() => ({
@@ -28,17 +30,17 @@ const labels = computed(() => ({
   <button
     v-if="button"
     :class="['ui', 'icon', 'labeled', 'button']"
-    @click.stop="$store.commit('playlists/chooseTrack', track)"
+    @click.stop="store.commit('playlists/chooseTrack', track)"
   >
     <i class="list icon" />
-    {{ $t('components.playlists.TrackPlaylistIcon.button.add') }}
+    {{ t('components.playlists.TrackPlaylistIcon.button.add') }}
   </button>
   <button
     v-else
     :class="['ui', 'basic', 'circular', 'icon', {'really': !border}, 'button']"
     :aria-label="labels.addToPlaylist"
     :title="labels.addToPlaylist"
-    @click.stop="$store.commit('playlists/chooseTrack', track)"
+    @click.stop="store.commit('playlists/chooseTrack', track)"
   >
     <i :class="['list', 'basic', 'icon']" />
   </button>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index 46b69f5e5..bd39d8d38 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -3,6 +3,8 @@ import type { Playlist } from '~/types'
 
 import { ref, reactive, watch } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
 
 import axios from 'axios'
 
@@ -15,6 +17,8 @@ interface Props {
   url: string
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const store = useStore()
@@ -78,15 +82,15 @@ watch(
     >
       <div class="ui icon header">
         <i class="list icon" />
-        {{ $t('components.playlists.Widget.placeholder.noPlaylists') }}
+        {{ t('components.playlists.Widget.placeholder.noPlaylists') }}
       </div>
       <button
-        v-if="$store.state.auth.authenticated"
+        v-if="store.state.auth.authenticated"
         class="ui success icon labeled button"
-        @click="$store.commit('playlists/chooseTrack', null)"
+        @click="store.commit('playlists/chooseTrack', null)"
       >
         <i class="list icon" />
-        {{ $t('components.playlists.Widget.button.create') }}
+        {{ t('components.playlists.Widget.button.create') }}
       </button>
     </div>
     <template v-if="nextPage">
@@ -96,7 +100,7 @@ watch(
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        {{ $t('components.playlists.Widget.button.more') }}
+        {{ t('components.playlists.Widget.button.more') }}
       </button>
     </template>
   </div>
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index 7fb9aa068..3e645b564 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -3,6 +3,7 @@ import type { Radio } from '~/types'
 
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 
 import RadioButton from './Button.vue'
 
@@ -12,6 +13,8 @@ interface Props {
   objectId?: string | null
 }
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<Props>(), {
   customRadio: null,
   objectId: null
@@ -66,11 +69,11 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
         :object-id="objectId"
       />
       <router-link
-        v-if="$store.state.auth.authenticated && type === 'custom' && radio.user.id === $store.state.auth.profile?.id"
+        v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
         class="ui success button right floated"
         :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
       >
-        {{ $t('components.radios.Card.button.edit') }}
+        {{ t('components.radios.Card.button.edit') }}
       </router-link>
     </div>
   </div>
diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index 9110b17c4..56c4e363e 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { truncate } from '~/utils/filters'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   tags: string[]
@@ -19,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   detailRoute: 'library.tags.detail'
 })
 
+const { t } = useI18n()
 const honorLimit = ref(true)
 
 const tags = computed(() => {
@@ -47,7 +49,7 @@ const tags = computed(() => {
       class="ui circular inverted accent label"
       @click.prevent="honorLimit = false"
     >
-      {{ $t('components.tags.List.button.more', props.tags.length - tags.length) }}
+      {{ t('components.tags.List.button.more', props.tags.length - tags.length) }}
     </div>
   </div>
 </template>
diff --git a/front/src/components/ui/alert.scss b/front/src/components/ui/alert.scss
index 6fe9883b4..30edc2556 100644
--- a/front/src/components/ui/alert.scss
+++ b/front/src/components/ui/alert.scss
@@ -41,25 +41,4 @@
   > .actions {
     margin-left: auto;
   }
-
-  // Add styles for when alert is used as a notification
-  &.is-notification {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-    z-index: 1000;
-    min-width: 200px;
-    max-width: 400px;
-
-    &.fade-enter-active,
-    &.fade-leave-active {
-      transition: all 0.3s ease;
-    }
-
-    &.fade-enter-from,
-    &.fade-leave-to {
-      opacity: 0;
-      transform: translateY(1rem);
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 56c07b2a2..325a41989 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
 import { useUploadsStore } from '../stores/upload'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 const searchQuery = ref('')
 
@@ -10,7 +11,9 @@ onMounted(() => {
   document.getElementById('fake-app')?.remove()
 })
 
-const route = useRoute()
+const { t } = useI18n()
+
+const store = useStore()
 const uploads = useUploadsStore()
 </script>
 
@@ -67,13 +70,13 @@ const uploads = useUploadsStore()
           @click.prevent
         >
           <img
-            v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar?.urls.medium_square_crop"
+            v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
             alt=""
-            :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
+            :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
           >
           <!--ActorAvatar
-            v-else-if="$store.state.auth.authenticated"
-            :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
+            v-else-if="store.state.auth.authenticated"
+            :actor="{preferred_username: store.state.auth.username, full_username: store.state.auth.username,}"
           /-->
           <i
             v-else
@@ -86,7 +89,7 @@ const uploads = useUploadsStore()
         <FwInput
           v-model="searchQuery"
           icon="bi-search"
-          :placeholder="$t('components.audio.SearchBar.placeholder.search')"
+          :placeholder="t('components.audio.SearchBar.placeholder.search')"
         />
       </div>
 
diff --git a/front/src/views/Notifications.vue b/front/src/views/Notifications.vue
index 0b5a9694e..b255254e3 100644
--- a/front/src/views/Notifications.vue
+++ b/front/src/views/Notifications.vue
@@ -101,7 +101,7 @@ const markAllAsRead = async () => {
           class="ui container"
         >
           <h1 class="ui header">
-            {{ $t('views.Notifications.header.messages') }}
+            {{ t('views.Notifications.header.messages') }}
           </h1>
           <div class="ui two column stackable grid">
             <div
@@ -110,7 +110,7 @@ const markAllAsRead = async () => {
             >
               <div class="ui attached info message">
                 <h4 class="header">
-                  {{ $t('views.Notifications.header.instanceSupport') }}
+                  {{ t('views.Notifications.header.instanceSupport') }}
                 </h4>
                 <sanitized-html :html="supportMessage" />
               </div>
@@ -121,31 +121,31 @@ const markAllAsRead = async () => {
                 >
                   <div class="inline field">
                     <label for="instance-reminder-delay">
-                      {{ $t('views.Notifications.label.reminder') }}
+                      {{ t('views.Notifications.label.reminder') }}
                     </label>
                     <select
                       id="instance-reminder-delay"
                       v-model="instanceSupportMessageDelay"
                     >
                       <option :value="30">
-                        {{ $t('views.Notifications.option.delay.30') }}
+                        {{ t('views.Notifications.option.delay.30') }}
                       </option>
                       <option :value="60">
-                        {{ $t('views.Notifications.option.delay.60') }}
+                        {{ t('views.Notifications.option.delay.60') }}
                       </option>
                       <option :value="90">
-                        {{ $t('views.Notifications.option.delay.90') }}
+                        {{ t('views.Notifications.option.delay.90') }}
                       </option>
                       <!-- NOTE: Postpone notification 100 years, so that the user never sees it -->
                       <option :value="36500">
-                        {{ $t('views.Notifications.option.delay.never') }}
+                        {{ t('views.Notifications.option.delay.never') }}
                       </option>
                     </select>
                     <button
                       type="submit"
                       class="ui right floated basic button"
                     >
-                      {{ $t('views.Notifications.button.submit') }}
+                      {{ t('views.Notifications.button.submit') }}
                     </button>
                   </div>
                 </form>
@@ -157,10 +157,10 @@ const markAllAsRead = async () => {
             >
               <div class="ui info attached message">
                 <h4 class="header">
-                  {{ $t('views.Notifications.header.funkwhaleSupport') }}
+                  {{ t('views.Notifications.header.funkwhaleSupport') }}
                 </h4>
                 <p>
-                  {{ $t('views.Notifications.message.funkwhaleSupport') }}
+                  {{ t('views.Notifications.message.funkwhaleSupport') }}
                 </p>
                 <a
                   href="https://funkwhale.audio/donate"
@@ -168,7 +168,7 @@ const markAllAsRead = async () => {
                   rel="noopener"
                   class="ui primary inverted button"
                 >
-                  {{ $t('views.Notifications.link.donate') }}
+                  {{ t('views.Notifications.link.donate') }}
                 </a>
                 <a
                   href="https://contribute.funkwhale.audio"
@@ -176,7 +176,7 @@ const markAllAsRead = async () => {
                   rel="noopener"
                   class="ui secondary inverted button"
                 >
-                  {{ $t('views.Notifications.link.help') }}
+                  {{ t('views.Notifications.link.help') }}
                 </a>
               </div>
               <div class="ui bottom attached segment">
@@ -186,31 +186,31 @@ const markAllAsRead = async () => {
                 >
                   <div class="inline field">
                     <label for="funkwhale-reminder-delay">
-                      {{ $t('views.Notifications.label.reminder') }}
+                      {{ t('views.Notifications.label.reminder') }}
                     </label>
                     <select
                       id="funkwhale-reminder-delay"
                       v-model="funkwhaleSupportMessageDelay"
                     >
                       <option :value="30">
-                        {{ $t('views.Notifications.option.delay.30') }}
+                        {{ t('views.Notifications.option.delay.30') }}
                       </option>
                       <option :value="60">
-                        {{ $t('views.Notifications.option.delay.60') }}
+                        {{ t('views.Notifications.option.delay.60') }}
                       </option>
                       <option :value="90">
-                        {{ $t('views.Notifications.option.delay.90') }}
+                        {{ t('views.Notifications.option.delay.90') }}
                       </option>
                       <!-- NOTE: Postpone notification 100 years, so that the user never sees it -->
                       <option :value="36500">
-                        {{ $t('views.Notifications.option.delay.never') }}
+                        {{ t('views.Notifications.option.delay.never') }}
                       </option>
                     </select>
                     <button
                       type="submit"
                       class="ui right floated basic button"
                     >
-                      {{ $t('views.Notifications.button.submit') }}
+                      {{ t('views.Notifications.button.submit') }}
                     </button>
                   </div>
                 </form>
@@ -219,7 +219,7 @@ const markAllAsRead = async () => {
           </div>
         </div>
         <h1 class="ui header">
-          {{ $t('views.Notifications.header.notifications') }}
+          {{ t('views.Notifications.header.notifications') }}
         </h1>
         <div class="ui toggle checkbox">
           <input
@@ -227,7 +227,7 @@ const markAllAsRead = async () => {
             v-model="filters.is_read"
             type="checkbox"
           >
-          <label for="show-read-notifications">{{ $t('views.Notifications.label.showRead') }}</label>
+          <label for="show-read-notifications">{{ t('views.Notifications.label.showRead') }}</label>
         </div>
         <button
           v-if="filters.is_read === false && notifications.count > 0"
@@ -235,7 +235,7 @@ const markAllAsRead = async () => {
           @click.prevent="markAllAsRead"
         >
           <i class="ui check icon" />
-          {{ $t('views.Notifications.button.read') }}
+          {{ t('views.Notifications.button.read') }}
         </button>
         <div class="ui hidden divider" />
 
@@ -244,7 +244,7 @@ const markAllAsRead = async () => {
           :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
         >
           <div class="ui text loader">
-            {{ $t('views.Notifications.loading.notifications') }}
+            {{ t('views.Notifications.loading.notifications') }}
           </div>
         </div>
 
@@ -261,7 +261,7 @@ const markAllAsRead = async () => {
           </tbody>
         </table>
         <p v-else-if="additionalNotifications === 0">
-          {{ $t('views.Notifications.empty.notifications') }}
+          {{ t('views.Notifications.empty.notifications') }}
         </p>
       </div>
     </section>
diff --git a/front/src/views/Search.vue b/front/src/views/Search.vue
index 66817fa80..d1c5d2b84 100644
--- a/front/src/views/Search.vue
+++ b/front/src/views/Search.vue
@@ -242,7 +242,7 @@ const radioConfig = computed(() => {
       >
         <h2>
           <label for="query">
-            {{ $t('views.Search.header.search') }}
+            {{ t('views.Search.header.search') }}
           </label>
         </h2>
         <div class="ui two column doubling stackable grid container">
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index bf48c8415..416e5d5ab 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -3,6 +3,7 @@ import { humanSize, truncate } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -17,6 +18,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const store = useStore()
 const { t } = useI18n()
 const router = useRouter()
 
@@ -92,7 +94,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h2 class="ui header">
                 <img
                   v-if="object.artist.cover && object.artist.cover.urls.medium_square_crop"
-                  v-lazy="$store.getters['instance/absoluteUrl'](object.artist.cover.urls.medium_square_crop)"
+                  v-lazy="store.getters['instance/absoluteUrl'](object.artist.cover.urls.medium_square_crop)"
                   alt=""
                 >
                 <img
@@ -106,7 +108,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template v-if="object.artist.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        {{ $t('views.admin.ChannelDetail.label.local') }}
+                        {{ t('views.admin.ChannelDetail.label.local') }}
                       </span>
                       &nbsp;
                     </template>
@@ -129,7 +131,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'channels.detail', params: {id: object.uuid }}"
                   >
                     <i class="info icon" />
-                    {{ $t('views.admin.ChannelDetail.link.localProfile') }}
+                    {{ t('views.admin.ChannelDetail.link.localProfile') }}
                   </router-link>
                   <button
                     v-dropdown
@@ -138,14 +140,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <i class="dropdown icon" />
                     <div class="menu">
                       <a
-                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                         class="basic item"
-                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/audio/channel/${object.id}`)"
+                        :href="store.getters['instance/absoluteUrl'](`/api/admin/audio/channel/${object.id}`)"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.admin.ChannelDetail.link.django') }}
+                        {{ t('views.admin.ChannelDetail.link.django') }}
                       </a>
                       <fetch-button
                         v-if="!object.actor.is_local"
@@ -154,7 +156,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        {{ $t('views.admin.ChannelDetail.button.refresh') }}
+                        {{ t('views.admin.ChannelDetail.button.refresh') }}
                       </fetch-button>
                       <a
                         class="basic item"
@@ -163,7 +165,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.ChannelDetail.button.openRemote') }}
+                        {{ t('views.admin.ChannelDetail.button.openRemote') }}
                       </a>
                     </div>
                   </button>
@@ -173,22 +175,22 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    {{ $t('views.admin.ChannelDetail.button.delete') }}
+                    {{ t('views.admin.ChannelDetail.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('views.admin.ChannelDetail.modal.delete.header') }}
+                        {{ t('views.admin.ChannelDetail.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('views.admin.ChannelDetail.modal.delete.content.warning') }}
+                          {{ t('views.admin.ChannelDetail.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('views.admin.ChannelDetail.button.delete') }}
+                        {{ t('views.admin.ChannelDetail.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -205,14 +207,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.ChannelDetail.header.channelData') }}
+                  {{ t('views.admin.ChannelDetail.header.channelData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.channelData.name') }}
+                      {{ t('views.admin.ChannelDetail.table.channelData.name') }}
                     </td>
                     <td>
                       {{ object.artist.name }}
@@ -221,7 +223,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.channels', query: {q: getQuery('category', object.artist.content_category) }}">
-                        {{ $t('views.admin.ChannelDetail.table.channelData.category') }}
+                        {{ t('views.admin.ChannelDetail.table.channelData.category') }}
                       </router-link>
                     </td>
                     <td>
@@ -231,7 +233,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: object.attributed_to.full_username }}">
-                        {{ $t('views.admin.ChannelDetail.table.channelData.account') }}
+                        {{ t('views.admin.ChannelDetail.table.channelData.account') }}
                       </router-link>
                     </td>
                     <td>
@@ -241,7 +243,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr v-if="!object.actor.is_local">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.actor.domain }}">
-                        {{ $t('views.admin.ChannelDetail.table.channelData.domain') }}
+                        {{ t('views.admin.ChannelDetail.table.channelData.domain') }}
                       </router-link>
                     </td>
                     <td>
@@ -250,7 +252,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.artist.description">
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.channelData.description') }}
+                      {{ t('views.admin.ChannelDetail.table.channelData.description') }}
                     </td>
                     <sanitized-html
                       tag="td"
@@ -259,7 +261,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.actor.url">
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.channelData.url') }}
+                      {{ t('views.admin.ChannelDetail.table.channelData.url') }}
                     </td>
                     <td>
                       <a
@@ -271,7 +273,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.rss_url">
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.channelData.rss') }}
+                      {{ t('views.admin.ChannelDetail.table.channelData.rss') }}
                     </td>
                     <td>
                       <a
@@ -290,7 +292,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.ChannelDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.ChannelDetail.header.activity') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -310,7 +312,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.ChannelDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -318,7 +320,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.activity.listenings') }}
+                      {{ t('views.admin.ChannelDetail.table.activity.listenings') }}
                     </td>
                     <td>
                       {{ stats.listenings }}
@@ -326,7 +328,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.activity.favorited') }}
+                      {{ t('views.admin.ChannelDetail.table.activity.favorited') }}
                     </td>
                     <td>
                       {{ stats.track_favorites }}
@@ -334,7 +336,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.activity.playlists') }}
+                      {{ t('views.admin.ChannelDetail.table.activity.playlists') }}
                     </td>
                     <td>
                       {{ stats.playlists }}
@@ -343,7 +345,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `channel:${object.uuid}`) }}">
-                        {{ $t('views.admin.ChannelDetail.table.activity.linkedReports') }}
+                        {{ t('views.admin.ChannelDetail.table.activity.linkedReports') }}
                       </router-link>
                     </td>
                     <td>
@@ -353,7 +355,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.edits', query: {q: getQuery('target', 'artist ' + object.artist.id)}}">
-                        {{ $t('views.admin.ChannelDetail.table.activity.edits') }}
+                        {{ t('views.admin.ChannelDetail.table.activity.edits') }}
                       </router-link>
                     </td>
                     <td>
@@ -369,7 +371,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.ChannelDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.ChannelDetail.header.audioContent') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -389,7 +391,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.audioContent.cachedSize') }}
+                      {{ t('views.admin.ChannelDetail.table.audioContent.cachedSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_downloaded_size) }}
@@ -397,7 +399,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.ChannelDetail.table.audioContent.totalSize') }}
+                      {{ t('views.admin.ChannelDetail.table.audioContent.totalSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_total_size) }}
@@ -406,7 +408,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('channel_id', object.uuid) }}">
-                        {{ $t('views.admin.ChannelDetail.table.audioContent.uploads') }}
+                        {{ t('views.admin.ChannelDetail.table.audioContent.uploads') }}
                       </router-link>
                     </td>
                     <td>
@@ -416,7 +418,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('channel_id', object.uuid) }}">
-                        {{ $t('views.admin.ChannelDetail.table.audioContent.albums') }}
+                        {{ t('views.admin.ChannelDetail.table.audioContent.albums') }}
                       </router-link>
                     </td>
                     <td>
@@ -426,7 +428,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('channel_id', object.uuid) }}">
-                        {{ $t('views.admin.ChannelDetail.table.audioContent.tracks') }}
+                        {{ t('views.admin.ChannelDetail.table.audioContent.tracks') }}
                       </router-link>
                     </td>
                     <td>
diff --git a/front/src/views/admin/Settings.vue b/front/src/views/admin/Settings.vue
index 899d9d0e4..bd634c2ea 100644
--- a/front/src/views/admin/Settings.vue
+++ b/front/src/views/admin/Settings.vue
@@ -205,7 +205,7 @@ await nextTick()
           <div class="four wide column">
             <div class="ui sticky vertical secondary menu">
               <div class="header item">
-                {{ $t('views.admin.Settings.header.sections') }}
+                {{ t('views.admin.Settings.header.sections') }}
               </div>
               <a
                 v-for="(group, key) in groups"
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index 8204620cf..d501db554 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -3,6 +3,7 @@ import { humanSize, truncate } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -17,6 +18,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const store = useStore()
 const { t } = useI18n()
 const router = useRouter()
 
@@ -92,7 +94,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h2 class="ui header">
                 <img
                   v-if="object.cover?.urls.original"
-                  v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+                  v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
                   alt=""
                 >
                 <img
@@ -106,7 +108,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        {{ $t('views.admin.library.AlbumDetail.header.local') }}
+                        {{ t('views.admin.library.AlbumDetail.header.local') }}
                       </span>
                       &nbsp;
                     </template>
@@ -130,7 +132,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.albums.detail', params: {id: object.id }}"
                   >
                     <i class="info icon" />
-                    {{ $t('views.admin.library.AlbumDetail.link.localProfile') }}
+                    {{ t('views.admin.library.AlbumDetail.link.localProfile') }}
                   </router-link>
                   <button
                     v-dropdown
@@ -139,14 +141,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <i class="dropdown icon" />
                     <div class="menu">
                       <a
-                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                         class="basic item"
-                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
+                        :href="store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.admin.library.AlbumDetail.link.django') }}
+                        {{ t('views.admin.library.AlbumDetail.link.django') }}
                       </a>
                       <a
                         v-if="object.mbid"
@@ -156,7 +158,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.AlbumDetail.link.musicbrainz') }}
+                        {{ t('views.admin.library.AlbumDetail.link.musicbrainz') }}
                       </a>
                       <fetch-button
                         v-if="!object.is_local"
@@ -165,7 +167,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        {{ $t('views.admin.library.AlbumDetail.button.remoteRefresh') }}
+                        {{ t('views.admin.library.AlbumDetail.button.remoteRefresh') }}
                       </fetch-button>
                       <a
                         class="basic item"
@@ -174,7 +176,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.AlbumDetail.link.remoteProfile') }}
+                        {{ t('views.admin.library.AlbumDetail.link.remoteProfile') }}
                       </a>
                     </div>
                   </button>
@@ -186,7 +188,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     class="ui labeled icon button"
                   >
                     <i class="edit icon" />
-                    {{ $t('views.admin.library.AlbumDetail.button.edit') }}
+                    {{ t('views.admin.library.AlbumDetail.button.edit') }}
                   </router-link>
                 </div>
                 <div class="ui buttons">
@@ -194,22 +196,22 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    {{ $t('views.admin.library.AlbumDetail.button.delete') }}
+                    {{ t('views.admin.library.AlbumDetail.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('views.admin.library.AlbumDetail.modal.delete.header') }}
+                        {{ t('views.admin.library.AlbumDetail.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('views.admin.library.AlbumDetail.modal.delete.content.warning') }}
+                          {{ t('views.admin.library.AlbumDetail.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('views.admin.library.AlbumDetail.button.delete') }}
+                        {{ t('views.admin.library.AlbumDetail.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -226,14 +228,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.AlbumDetail.header.albumData') }}
+                  {{ t('views.admin.library.AlbumDetail.header.albumData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.album.title') }}
+                      {{ t('views.admin.library.AlbumDetail.table.album.title') }}
                     </td>
                     <td>
                       {{ object.title }}
@@ -242,7 +244,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists.detail', params: {id: object.artist.id }}">
-                        {{ $t('views.admin.library.AlbumDetail.link.artist') }}
+                        {{ t('views.admin.library.AlbumDetail.link.artist') }}
                       </router-link>
                     </td>
                     <td>
@@ -252,7 +254,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr v-if="!object.is_local">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        {{ $t('views.admin.library.AlbumDetail.link.domain') }}
+                        {{ t('views.admin.library.AlbumDetail.link.domain') }}
                       </router-link>
                     </td>
                     <td>
@@ -261,7 +263,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.description">
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.album.description') }}
+                      {{ t('views.admin.library.AlbumDetail.table.album.description') }}
                     </td>
                     <sanitized-html
                       tag="td"
@@ -277,7 +279,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.AlbumDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.library.AlbumDetail.header.activity') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -297,7 +299,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.library.AlbumDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -305,7 +307,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.activity.listenings') }}
+                      {{ t('views.admin.library.AlbumDetail.table.activity.listenings') }}
                     </td>
                     <td>
                       {{ stats.listenings }}
@@ -313,7 +315,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.activity.favorited') }}
+                      {{ t('views.admin.library.AlbumDetail.table.activity.favorited') }}
                     </td>
                     <td>
                       {{ stats.track_favorites }}
@@ -321,7 +323,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.activity.playlists') }}
+                      {{ t('views.admin.library.AlbumDetail.table.activity.playlists') }}
                     </td>
                     <td>
                       {{ stats.playlists }}
@@ -330,7 +332,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `album:${object.id}`) }}">
-                        {{ $t('views.admin.library.AlbumDetail.link.reports') }}
+                        {{ t('views.admin.library.AlbumDetail.link.reports') }}
                       </router-link>
                     </td>
                     <td>
@@ -340,7 +342,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.edits', query: {q: getQuery('target', 'album ' + object.id)}}">
-                        {{ $t('views.admin.library.AlbumDetail.link.edits') }}
+                        {{ t('views.admin.library.AlbumDetail.link.edits') }}
                       </router-link>
                     </td>
                     <td>
@@ -356,7 +358,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.AlbumDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.library.AlbumDetail.header.audioContent') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -376,7 +378,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.audioContent.cachedSize') }}
+                      {{ t('views.admin.library.AlbumDetail.table.audioContent.cachedSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_downloaded_size) }}
@@ -384,7 +386,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.AlbumDetail.table.audioContent.totalSize') }}
+                      {{ t('views.admin.library.AlbumDetail.table.audioContent.totalSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_total_size) }}
@@ -394,7 +396,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('album_id', object.id) }}">
-                        {{ $t('views.admin.library.AlbumDetail.link.libraries') }}
+                        {{ t('views.admin.library.AlbumDetail.link.libraries') }}
                       </router-link>
                     </td>
                     <td>
@@ -404,7 +406,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('album_id', object.id) }}">
-                        {{ $t('views.admin.library.AlbumDetail.link.uploads') }}
+                        {{ t('views.admin.library.AlbumDetail.link.uploads') }}
                       </router-link>
                     </td>
                     <td>
@@ -414,7 +416,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('album_id', object.id) }}">
-                        {{ $t('views.admin.library.AlbumDetail.link.tracks') }}
+                        {{ t('views.admin.library.AlbumDetail.link.tracks') }}
                       </router-link>
                     </td>
                     <td>
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 6cf6391d7..7e44f3444 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -3,6 +3,7 @@ import { humanSize, truncate } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -17,6 +18,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const store = useStore()
 const { t } = useI18n()
 const router = useRouter()
 
@@ -92,7 +94,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h2 class="ui header">
                 <img
                   v-if="object.cover && object.cover.urls.medium_square_crop"
-                  v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+                  v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
                   alt=""
                 >
                 <img
@@ -106,7 +108,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        {{ $t('views.admin.library.ArtistDetail.header.local') }}
+                        {{ t('views.admin.library.ArtistDetail.header.local') }}
                       </span>
                       &nbsp;
                     </template>
@@ -129,7 +131,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.artists.detail', params: {id: object.id }}"
                   >
                     <i class="info icon" />
-                    {{ $t('views.admin.library.ArtistDetail.link.localProfile') }}
+                    {{ t('views.admin.library.ArtistDetail.link.localProfile') }}
                   </router-link>
                   <button
                     v-dropdown
@@ -138,14 +140,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <i class="dropdown icon" />
                     <div class="menu">
                       <a
-                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                         class="basic item"
-                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/artist/${object.id}`)"
+                        :href="store.getters['instance/absoluteUrl'](`/api/admin/music/artist/${object.id}`)"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.admin.library.ArtistDetail.link.django') }}
+                        {{ t('views.admin.library.ArtistDetail.link.django') }}
                       </a>
                       <a
                         v-if="object.mbid"
@@ -155,7 +157,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.ArtistDetail.link.musicbrainz') }}
+                        {{ t('views.admin.library.ArtistDetail.link.musicbrainz') }}
                       </a>
                       <fetch-button
                         v-if="!object.is_local"
@@ -164,7 +166,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        {{ $t('views.admin.library.ArtistDetail.button.remoteRefresh') }}
+                        {{ t('views.admin.library.ArtistDetail.button.remoteRefresh') }}
                       </fetch-button>
                       <a
                         class="basic item"
@@ -173,7 +175,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.ArtistDetail.link.remoteProfile') }}
+                        {{ t('views.admin.library.ArtistDetail.link.remoteProfile') }}
                       </a>
                     </div>
                   </button>
@@ -185,7 +187,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     class="ui labeled icon button"
                   >
                     <i class="edit icon" />
-                    {{ $t('views.admin.library.ArtistDetail.button.edit') }}
+                    {{ t('views.admin.library.ArtistDetail.button.edit') }}
                   </router-link>
                 </div>
                 <div class="ui buttons">
@@ -193,22 +195,22 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    {{ $t('views.admin.library.ArtistDetail.button.delete') }}
+                    {{ t('views.admin.library.ArtistDetail.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('views.admin.library.ArtistDetail.modal.delete.header') }}
+                        {{ t('views.admin.library.ArtistDetail.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('views.admin.library.ArtistDetail.modal.delete.content.warning') }}
+                          {{ t('views.admin.library.ArtistDetail.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('views.admin.library.ArtistDetail.button.delete') }}
+                        {{ t('views.admin.library.ArtistDetail.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -225,14 +227,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.ArtistDetail.header.artistData') }}
+                  {{ t('views.admin.library.ArtistDetail.header.artistData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.artist.name') }}
+                      {{ t('views.admin.library.ArtistDetail.table.artist.name') }}
                     </td>
                     <td>
                       {{ object.name }}
@@ -241,7 +243,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('category', object.content_category) }}">
-                        {{ $t('views.admin.library.ArtistDetail.link.category') }}
+                        {{ t('views.admin.library.ArtistDetail.link.category') }}
                       </router-link>
                     </td>
                     <td>
@@ -251,7 +253,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr v-if="!object.is_local">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        {{ $t('views.admin.library.ArtistDetail.link.domain') }}
+                        {{ t('views.admin.library.ArtistDetail.link.domain') }}
                       </router-link>
                     </td>
                     <td>
@@ -260,7 +262,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.description">
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.artist.description') }}
+                      {{ t('views.admin.library.ArtistDetail.table.artist.description') }}
                     </td>
                     <sanitized-html
                       tag="td"
@@ -276,7 +278,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.ArtistDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.library.ArtistDetail.header.activity') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -296,7 +298,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.library.ArtistDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -304,7 +306,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.activity.listenings') }}
+                      {{ t('views.admin.library.ArtistDetail.table.activity.listenings') }}
                     </td>
                     <td>
                       {{ stats.listenings }}
@@ -312,7 +314,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.activity.favorited') }}
+                      {{ t('views.admin.library.ArtistDetail.table.activity.favorited') }}
                     </td>
                     <td>
                       {{ stats.track_favorites }}
@@ -320,7 +322,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.activity.playlists') }}
+                      {{ t('views.admin.library.ArtistDetail.table.activity.playlists') }}
                     </td>
                     <td>
                       {{ stats.playlists }}
@@ -329,7 +331,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `artist:${object.id}`) }}">
-                        {{ $t('views.admin.library.ArtistDetail.link.reports') }}
+                        {{ t('views.admin.library.ArtistDetail.link.reports') }}
                       </router-link>
                     </td>
                     <td>
@@ -339,7 +341,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.edits', query: {q: getQuery('target', 'artist ' + object.id)}}">
-                        {{ $t('views.admin.library.ArtistDetail.link.edits') }}
+                        {{ t('views.admin.library.ArtistDetail.link.edits') }}
                       </router-link>
                     </td>
                     <td>
@@ -355,7 +357,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.ArtistDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.library.ArtistDetail.header.audioContent') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -375,7 +377,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.audioContent.cachedSize') }}
+                      {{ t('views.admin.library.ArtistDetail.table.audioContent.cachedSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_downloaded_size) }}
@@ -383,7 +385,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.ArtistDetail.table.audioContent.totalSize') }}
+                      {{ t('views.admin.library.ArtistDetail.table.audioContent.totalSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_total_size) }}
@@ -393,7 +395,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('artist_id', object.id) }}">
-                        {{ $t('views.admin.library.ArtistDetail.link.libraries') }}
+                        {{ t('views.admin.library.ArtistDetail.link.libraries') }}
                       </router-link>
                     </td>
                     <td>
@@ -403,7 +405,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('artist_id', object.id) }}">
-                        {{ $t('views.admin.library.ArtistDetail.link.uploads') }}
+                        {{ t('views.admin.library.ArtistDetail.link.uploads') }}
                       </router-link>
                     </td>
                     <td>
@@ -413,7 +415,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('artist_id', object.id) }}">
-                        {{ $t('views.admin.library.ArtistDetail.link.albums') }}
+                        {{ t('views.admin.library.ArtistDetail.link.albums') }}
                       </router-link>
                     </td>
                     <td>
@@ -423,7 +425,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('artist_id', object.id) }}">
-                        {{ $t('views.admin.library.ArtistDetail.link.tracks') }}
+                        {{ t('views.admin.library.ArtistDetail.link.tracks') }}
                       </router-link>
                     </td>
                     <td>
diff --git a/front/src/views/admin/library/Base.vue b/front/src/views/admin/library/Base.vue
index 36c566860..63db1091a 100644
--- a/front/src/views/admin/library/Base.vue
+++ b/front/src/views/admin/library/Base.vue
@@ -23,49 +23,49 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.edits'}"
       >
-        {{ $t('views.admin.library.Base.link.edits') }}
+        {{ t('views.admin.library.Base.link.edits') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.channels'}"
       >
-        {{ $t('views.admin.library.Base.link.channels') }}
+        {{ t('views.admin.library.Base.link.channels') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.library.artists'}"
       >
-        {{ $t('views.admin.library.Base.link.artists') }}
+        {{ t('views.admin.library.Base.link.artists') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.library.albums'}"
       >
-        {{ $t('views.admin.library.Base.link.albums') }}
+        {{ t('views.admin.library.Base.link.albums') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.library.tracks'}"
       >
-        {{ $t('views.admin.library.Base.link.tracks') }}
+        {{ t('views.admin.library.Base.link.tracks') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.library.libraries'}"
       >
-        {{ $t('views.admin.library.Base.link.libraries') }}
+        {{ t('views.admin.library.Base.link.libraries') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.library.uploads'}"
       >
-        {{ $t('views.admin.library.Base.link.uploads') }}
+        {{ t('views.admin.library.Base.link.uploads') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.library.tags'}"
       >
-        {{ $t('views.admin.library.Base.link.tags') }}
+        {{ t('views.admin.library.Base.link.tags') }}
       </router-link>
     </nav>
     <router-view :key="$route.fullPath" />
diff --git a/front/src/views/admin/library/EditsList.vue b/front/src/views/admin/library/EditsList.vue
index 4c289e0df..d5600bc11 100644
--- a/front/src/views/admin/library/EditsList.vue
+++ b/front/src/views/admin/library/EditsList.vue
@@ -26,7 +26,7 @@ const labels = computed(() => ({
         :default-query="defaultQuery"
       >
         <h2 class="ui header">
-          {{ $t('views.admin.library.EditsList.header.edits') }}
+          {{ t('views.admin.library.EditsList.header.edits') }}
         </h2>
       </edits-card-list>
     </section>
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index 23f8168ca..261348fa6 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -5,6 +5,7 @@ import { humanSize, truncate } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -21,9 +22,10 @@ interface Props {
 const props = defineProps<Props>()
 
 const { t } = useI18n()
+const store = useStore()
+const router = useRouter()
 
 const sharedLabels = useSharedLabels()
-const router = useRouter()
 const logger = useLogger()
 
 const labels = computed(() => ({
@@ -117,7 +119,7 @@ const updateObj = async (attr: string) => {
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        {{ $t('views.admin.library.LibraryDetail.header.local') }}
+                        {{ t('views.admin.library.LibraryDetail.header.local') }}
                       </span>
                       &nbsp;
                     </template>
@@ -127,14 +129,14 @@ const updateObj = async (attr: string) => {
               <div class="header-buttons">
                 <div class="ui icon buttons">
                   <a
-                    v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                    v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                     class="ui labeled icon button"
-                    :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/library/${object.id}`)"
+                    :href="store.getters['instance/absoluteUrl'](`/api/admin/music/library/${object.id}`)"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    {{ $t('views.admin.library.LibraryDetail.link.django') }}
+                    {{ t('views.admin.library.LibraryDetail.link.django') }}
                   </a>
                   <button
                     v-dropdown
@@ -143,14 +145,14 @@ const updateObj = async (attr: string) => {
                     <i class="dropdown icon" />
                     <div class="menu">
                       <a
-                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                         class="basic item"
-                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/library/${object.id}`)"
+                        :href="store.getters['instance/absoluteUrl'](`/api/admin/music/library/${object.id}`)"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.admin.library.LibraryDetail.link.django') }}
+                        {{ t('views.admin.library.LibraryDetail.link.django') }}
                       </a>
                       <a
                         class="basic item"
@@ -159,7 +161,7 @@ const updateObj = async (attr: string) => {
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.LibraryDetail.link.remoteProfile') }}
+                        {{ t('views.admin.library.LibraryDetail.link.remoteProfile') }}
                       </a>
                     </div>
                   </button>
@@ -169,22 +171,22 @@ const updateObj = async (attr: string) => {
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    {{ $t('views.admin.library.LibraryDetail.button.delete') }}
+                    {{ t('views.admin.library.LibraryDetail.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('views.admin.library.LibraryDetail.modal.delete.header') }}
+                        {{ t('views.admin.library.LibraryDetail.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('views.admin.library.LibraryDetail.modal.delete.content.warning') }}
+                          {{ t('views.admin.library.LibraryDetail.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('views.admin.library.LibraryDetail.button.delete') }}
+                        {{ t('views.admin.library.LibraryDetail.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -201,14 +203,14 @@ const updateObj = async (attr: string) => {
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.LibraryDetail.header.libraryData') }}
+                  {{ t('views.admin.library.LibraryDetail.header.libraryData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.LibraryDetail.table.library.name') }}
+                      {{ t('views.admin.library.LibraryDetail.table.library.name') }}
                     </td>
                     <td>
                       {{ object.name }}
@@ -217,7 +219,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('privacy_level', object.privacy_level) }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.visibility') }}
+                        {{ t('views.admin.library.LibraryDetail.link.visibility') }}
                       </router-link>
                     </td>
                     <td>
@@ -244,7 +246,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: object.actor.full_username }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.account') }}
+                        {{ t('views.admin.library.LibraryDetail.link.account') }}
                       </router-link>
                     </td>
                     <td>
@@ -254,7 +256,7 @@ const updateObj = async (attr: string) => {
                   <tr v-if="!object.is_local">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.domain') }}
+                        {{ t('views.admin.library.LibraryDetail.link.domain') }}
                       </router-link>
                     </td>
                     <td>
@@ -263,7 +265,7 @@ const updateObj = async (attr: string) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.LibraryDetail.table.library.description') }}
+                      {{ t('views.admin.library.LibraryDetail.table.library.description') }}
                     </td>
                     <td>
                       {{ object.description }}
@@ -278,7 +280,7 @@ const updateObj = async (attr: string) => {
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.LibraryDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.library.LibraryDetail.header.activity') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -298,7 +300,7 @@ const updateObj = async (attr: string) => {
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.LibraryDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.library.LibraryDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -306,7 +308,7 @@ const updateObj = async (attr: string) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.LibraryDetail.table.activity.followers') }}
+                      {{ t('views.admin.library.LibraryDetail.table.activity.followers') }}
                     </td>
                     <td>
                       {{ stats.followers }}
@@ -315,7 +317,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `library:${object.uuid}`) }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.reports') }}
+                        {{ t('views.admin.library.LibraryDetail.link.reports') }}
                       </router-link>
                     </td>
                     <td>
@@ -331,7 +333,7 @@ const updateObj = async (attr: string) => {
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.LibraryDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.library.LibraryDetail.header.audioContent') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -351,7 +353,7 @@ const updateObj = async (attr: string) => {
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.LibraryDetail.table.audioContent.cachedSize') }}
+                      {{ t('views.admin.library.LibraryDetail.table.audioContent.cachedSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_downloaded_size) }}
@@ -359,7 +361,7 @@ const updateObj = async (attr: string) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.LibraryDetail.table.audioContent.totalSize') }}
+                      {{ t('views.admin.library.LibraryDetail.table.audioContent.totalSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_total_size) }}
@@ -368,7 +370,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('library_id', object.id) }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.artists') }}
+                        {{ t('views.admin.library.LibraryDetail.link.artists') }}
                       </router-link>
                     </td>
                     <td>
@@ -378,7 +380,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('library_id', object.id) }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.albums') }}
+                        {{ t('views.admin.library.LibraryDetail.link.albums') }}
                       </router-link>
                     </td>
                     <td>
@@ -388,7 +390,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('library_id', object.id) }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.tracks') }}
+                        {{ t('views.admin.library.LibraryDetail.link.tracks') }}
                       </router-link>
                     </td>
                     <td>
@@ -398,7 +400,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('library_id', object.id) }}">
-                        {{ $t('views.admin.library.LibraryDetail.link.uploads') }}
+                        {{ t('views.admin.library.LibraryDetail.link.uploads') }}
                       </router-link>
                     </td>
                     <td>
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
index 65afbe1a9..4c3890d84 100644
--- a/front/src/views/admin/library/TagDetail.vue
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -2,6 +2,8 @@
 import { truncate } from '~/utils/filters'
 import { useRouter } from 'vue-router'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -11,8 +13,11 @@ interface Props {
   id: number
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
+const store = useStore()
 const router = useRouter()
 
 const isLoading = ref(false)
@@ -77,7 +82,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.tags.detail', params: {id: object.name }}"
                   >
                     <i class="info icon" />
-                    {{ $t('views.admin.library.TagDetail.link.localProfile') }}
+                    {{ t('views.admin.library.TagDetail.link.localProfile') }}
                   </router-link>
                   <button
                     v-dropdown
@@ -86,14 +91,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <i class="dropdown icon" />
                     <div class="menu">
                       <a
-                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                         class="basic item"
-                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/tags/tag/${object.id}`)"
+                        :href="store.getters['instance/absoluteUrl'](`/api/admin/tags/tag/${object.id}`)"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.admin.library.TagDetail.link.django') }}
+                        {{ t('views.admin.library.TagDetail.link.django') }}
                       </a>
                     </div>
                   </button>
@@ -103,22 +108,22 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    {{ $t('views.admin.library.TagDetail.button.delete') }}
+                    {{ t('views.admin.library.TagDetail.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('views.admin.library.TagDetail.modal.delete.header') }}
+                        {{ t('views.admin.library.TagDetail.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('views.admin.library.TagDetail.modal.delete.content.warning') }}
+                          {{ t('views.admin.library.TagDetail.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('views.admin.library.TagDetail.button.delete') }}
+                        {{ t('views.admin.library.TagDetail.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -135,14 +140,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.TagDetail.header.tagData') }}
+                  {{ t('views.admin.library.TagDetail.header.tagData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TagDetail.table.tag.name') }}
+                      {{ t('views.admin.library.TagDetail.table.tag.name') }}
                     </td>
                     <td>
                       {{ object.name }}
@@ -157,14 +162,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.TagDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.library.TagDetail.header.activity') }}&nbsp;
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TagDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.library.TagDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -179,7 +184,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.TagDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.library.TagDetail.header.audioContent') }}&nbsp;
                 </div>
               </h3>
               <table class="ui very basic table">
@@ -187,7 +192,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('tag', object.name) }}">
-                        {{ $t('views.admin.library.TagDetail.link.artists') }}
+                        {{ t('views.admin.library.TagDetail.link.artists') }}
                       </router-link>
                     </td>
                     <td>
@@ -197,7 +202,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('tag', object.name) }}">
-                        {{ $t('views.admin.library.TagDetail.link.albums') }}
+                        {{ t('views.admin.library.TagDetail.link.albums') }}
                       </router-link>
                     </td>
                     <td>
@@ -207,7 +212,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('tag', object.name) }}">
-                        {{ $t('views.admin.library.TagDetail.link.tracks') }}
+                        {{ t('views.admin.library.TagDetail.link.tracks') }}
                       </router-link>
                     </td>
                     <td>
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index e5a57879e..851899401 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -3,6 +3,7 @@ import { humanSize, truncate } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { ref, computed } from 'vue'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -56,6 +57,8 @@ fetchData()
 fetchStats()
 
 const router = useRouter()
+const store = useStore()
+
 const remove = async () => {
   isLoading.value = true
 
@@ -91,7 +94,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h2 class="ui header">
                 <img
                   v-if="track.cover && track.cover.urls.medium_square_crop"
-                  v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+                  v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
                   alt=""
                 >
                 <img
@@ -105,7 +108,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template v-if="track.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        {{ $t('views.admin.library.TrackDetail.header.local') }}
+                        {{ t('views.admin.library.TrackDetail.header.local') }}
                       </span>
                       &nbsp;
                     </template>
@@ -129,7 +132,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.tracks.detail', params: {id: track.id }}"
                   >
                     <i class="info icon" />
-                    {{ $t('views.admin.library.TrackDetail.link.localProfile') }}
+                    {{ t('views.admin.library.TrackDetail.link.localProfile') }}
                   </router-link>
                   <button
                     v-dropdown
@@ -138,14 +141,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <i class="dropdown icon" />
                     <div class="menu">
                       <a
-                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                         class="basic item"
-                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
+                        :href="store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.admin.library.TrackDetail.link.django') }}
+                        {{ t('views.admin.library.TrackDetail.link.django') }}
                       </a>
                       <a
                         v-if="track.mbid"
@@ -155,7 +158,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.TrackDetail.link.musicbrainz') }}
+                        {{ t('views.admin.library.TrackDetail.link.musicbrainz') }}
                       </a>
                       <fetch-button
                         v-if="!track.is_local"
@@ -164,7 +167,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        {{ $t('views.admin.library.TrackDetail.button.remoteRefresh') }}
+                        {{ t('views.admin.library.TrackDetail.button.remoteRefresh') }}
                       </fetch-button>
                       <a
                         class="basic item"
@@ -173,7 +176,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.TrackDetail.link.remoteProfile') }}
+                        {{ t('views.admin.library.TrackDetail.link.remoteProfile') }}
                       </a>
                     </div>
                   </button>
@@ -185,7 +188,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     class="ui labeled icon button"
                   >
                     <i class="edit icon" />
-                    {{ $t('views.admin.library.TrackDetail.button.edit') }}
+                    {{ t('views.admin.library.TrackDetail.button.edit') }}
                   </router-link>
                 </div>
                 <div class="ui buttons">
@@ -193,22 +196,22 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    {{ $t('views.admin.library.TrackDetail.button.delete') }}
+                    {{ t('views.admin.library.TrackDetail.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('views.admin.library.TrackDetail.modal.delete.header') }}
+                        {{ t('views.admin.library.TrackDetail.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('views.admin.library.TrackDetail.modal.delete.content.warning') }}
+                          {{ t('views.admin.library.TrackDetail.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('views.admin.library.TrackDetail.button.delete') }}
+                        {{ t('views.admin.library.TrackDetail.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -225,14 +228,14 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.TrackDetail.header.trackData') }}
+                  {{ t('views.admin.library.TrackDetail.header.trackData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.track.title') }}
+                      {{ t('views.admin.library.TrackDetail.table.track.title') }}
                     </td>
                     <td>
                       {{ track.title }}
@@ -241,7 +244,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr v-if="track.album">
                     <td>
                       <router-link :to="{name: 'manage.library.albums.detail', params: {id: track.album.id }}">
-                        {{ $t('views.admin.library.TrackDetail.link.album') }}
+                        {{ t('views.admin.library.TrackDetail.link.album') }}
                       </router-link>
                     </td>
                     <td>
@@ -252,7 +255,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists.detail', params: {id: track.artist.id }}">
-                        {{ $t('views.admin.library.TrackDetail.link.artist') }}
+                        {{ t('views.admin.library.TrackDetail.link.artist') }}
                       </router-link>
                     </td>
                     <td>
@@ -262,7 +265,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr v-if="track.album">
                     <td>
                       <router-link :to="{name: 'manage.library.artists.detail', params: {id: track.album.artist.id }}">
-                        {{ $t('views.admin.library.TrackDetail.link.albumArtist') }}
+                        {{ t('views.admin.library.TrackDetail.link.albumArtist') }}
                       </router-link>
                     </td>
                     <td>
@@ -271,7 +274,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.track.position') }}
+                      {{ t('views.admin.library.TrackDetail.table.track.position') }}
                     </td>
                     <td>
                       {{ track.position }}
@@ -279,7 +282,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="track.disc_number">
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.track.discNumber') }}
+                      {{ t('views.admin.library.TrackDetail.table.track.discNumber') }}
                     </td>
                     <td>
                       {{ track.disc_number }}
@@ -287,13 +290,13 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="track.copyright">
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.track.copyright') }}
+                      {{ t('views.admin.library.TrackDetail.table.track.copyright') }}
                     </td>
                     <td>{{ track.copyright }}</td>
                   </tr>
                   <tr v-if="track.license">
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.track.license') }}
+                      {{ t('views.admin.library.TrackDetail.table.track.license') }}
                     </td>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('license', track.license)}}">
@@ -304,7 +307,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr v-if="!track.is_local">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: track.domain }}">
-                        {{ $t('views.admin.library.TrackDetail.link.domain') }}
+                        {{ t('views.admin.library.TrackDetail.link.domain') }}
                       </router-link>
                     </td>
                     <td>
@@ -313,7 +316,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="track.description">
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.track.description') }}
+                      {{ t('views.admin.library.TrackDetail.table.track.description') }}
                     </td>
                     <sanitized-html
                       tag="td"
@@ -329,7 +332,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.TrackDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.library.TrackDetail.header.activity') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -349,7 +352,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.library.TrackDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="track.creation_date" />
@@ -357,7 +360,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.activity.listenings') }}
+                      {{ t('views.admin.library.TrackDetail.table.activity.listenings') }}
                     </td>
                     <td>
                       {{ stats.listenings }}
@@ -365,7 +368,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.activity.favorited') }}
+                      {{ t('views.admin.library.TrackDetail.table.activity.favorited') }}
                     </td>
                     <td>
                       {{ stats.track_favorites }}
@@ -373,7 +376,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.activity.playlists') }}
+                      {{ t('views.admin.library.TrackDetail.table.activity.playlists') }}
                     </td>
                     <td>
                       {{ stats.playlists }}
@@ -382,7 +385,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `track:${track.id}`) }}">
-                        {{ $t('views.admin.library.TrackDetail.link.reports') }}
+                        {{ t('views.admin.library.TrackDetail.link.reports') }}
                       </router-link>
                     </td>
                     <td>
@@ -392,7 +395,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.edits', query: {q: getQuery('target', 'track ' + track.id)}}">
-                        {{ $t('views.admin.library.TrackDetail.link.edits') }}
+                        {{ t('views.admin.library.TrackDetail.link.edits') }}
                       </router-link>
                     </td>
                     <td>
@@ -408,7 +411,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.TrackDetail.header.trackData') }}&nbsp;
+                  {{ t('views.admin.library.TrackDetail.header.trackData') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -428,7 +431,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.trackData.cachedSize') }}
+                      {{ t('views.admin.library.TrackDetail.table.trackData.cachedSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_downloaded_size) }}
@@ -436,7 +439,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.TrackDetail.table.trackData.totalSize') }}
+                      {{ t('views.admin.library.TrackDetail.table.trackData.totalSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_total_size) }}
@@ -446,7 +449,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('track_id', track.id) }}">
-                        {{ $t('views.admin.library.TrackDetail.link.libraries') }}
+                        {{ t('views.admin.library.TrackDetail.link.libraries') }}
                       </router-link>
                     </td>
                     <td>
@@ -456,7 +459,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('track_id', track.id) }}">
-                        {{ $t('views.admin.library.TrackDetail.link.uploads') }}
+                        {{ t('views.admin.library.TrackDetail.link.uploads') }}
                       </router-link>
                     </td>
                     <td>
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index cdf7f8319..7012affd7 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -4,6 +4,8 @@ import type { PrivacyLevel, ImportStatus } from '~/types'
 import { humanSize, truncate } from '~/utils/filters'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 import time from '~/utils/time'
 import axios from 'axios'
@@ -17,10 +19,13 @@ interface Props {
   id: number
 }
 
+const router = useRouter()
+const store = useStore()
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const sharedLabels = useSharedLabels()
-const router = useRouter()
 
 const privacyLevels = computed(() => sharedLabels.fields.privacy_level.shortChoices[object.value.library.privacy_level as PrivacyLevel])
 const importStatus = computed(() => sharedLabels.fields.import_status.choices[object.value.import_status as ImportStatus].label)
@@ -89,7 +94,7 @@ const showUploadDetailModal = ref(false)
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        {{ $t('views.admin.library.UploadDetail.header.local') }}
+                        {{ t('views.admin.library.UploadDetail.header.local') }}
                       </span>
                       &nbsp;
                     </template>
@@ -99,14 +104,14 @@ const showUploadDetailModal = ref(false)
               <div class="header-buttons">
                 <div class="ui icon buttons">
                   <a
-                    v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                    v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                     class="ui labeled icon button"
-                    :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/upload/${object.id}`)"
+                    :href="store.getters['instance/absoluteUrl'](`/api/admin/music/upload/${object.id}`)"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    {{ $t('views.admin.library.UploadDetail.link.django') }}
+                    {{ t('views.admin.library.UploadDetail.link.django') }}
                   </a>
                   <button
                     v-dropdown
@@ -115,14 +120,14 @@ const showUploadDetailModal = ref(false)
                     <i class="dropdown icon" />
                     <div class="menu">
                       <a
-                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                         class="basic item"
-                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/upload/${object.id}`)"
+                        :href="store.getters['instance/absoluteUrl'](`/api/admin/music/upload/${object.id}`)"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.admin.library.UploadDetail.link.django') }}
+                        {{ t('views.admin.library.UploadDetail.link.django') }}
                       </a>
                       <a
                         class="basic item"
@@ -131,7 +136,7 @@ const showUploadDetailModal = ref(false)
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.library.UploadDetail.link.remoteProfile') }}
+                        {{ t('views.admin.library.UploadDetail.link.remoteProfile') }}
                       </a>
                     </div>
                   </button>
@@ -140,12 +145,12 @@ const showUploadDetailModal = ref(false)
                   <a
                     v-if="object.audio_file"
                     class="ui labeled icon button"
-                    :href="$store.getters['instance/absoluteUrl'](object.audio_file)"
+                    :href="store.getters['instance/absoluteUrl'](object.audio_file)"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <i class="download icon" />
-                    {{ $t('views.admin.library.UploadDetail.button.download') }}
+                    {{ t('views.admin.library.UploadDetail.button.download') }}
                   </a>
                 </div>
                 <div class="ui buttons">
@@ -153,22 +158,22 @@ const showUploadDetailModal = ref(false)
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    {{ $t('views.admin.library.UploadDetail.button.delete') }}
+                    {{ t('views.admin.library.UploadDetail.button.delete') }}
                     <template #modal-header>
                       <p>
-                        {{ $t('views.admin.library.UploadDetail.modal.delete.header') }}
+                        {{ t('views.admin.library.UploadDetail.modal.delete.header') }}
                       </p>
                     </template>
                     <template #modal-content>
                       <div>
                         <p>
-                          {{ $t('views.admin.library.UploadDetail.modal.delete.content.warning') }}
+                          {{ t('views.admin.library.UploadDetail.modal.delete.content.warning') }}
                         </p>
                       </div>
                     </template>
                     <template #modal-confirm>
                       <p>
-                        {{ $t('views.admin.library.UploadDetail.button.delete') }}
+                        {{ t('views.admin.library.UploadDetail.button.delete') }}
                       </p>
                     </template>
                   </dangerous-button>
@@ -185,14 +190,14 @@ const showUploadDetailModal = ref(false)
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.UploadDetail.header.uploadData') }}
+                  {{ t('views.admin.library.UploadDetail.header.uploadData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.UploadDetail.table.upload.name') }}
+                      {{ t('views.admin.library.UploadDetail.table.upload.name') }}
                     </td>
                     <td>
                       {{ displayName(object) }}
@@ -201,7 +206,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('privacy_level', object.library.privacy_level) }}">
-                        {{ $t('views.admin.library.UploadDetail.link.visibility') }}
+                        {{ t('views.admin.library.UploadDetail.link.visibility') }}
                       </router-link>
                     </td>
                     <td>
@@ -211,7 +216,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: object.library.actor.full_username }}">
-                        {{ $t('views.admin.library.UploadDetail.link.account') }}
+                        {{ t('views.admin.library.UploadDetail.link.account') }}
                       </router-link>
                     </td>
                     <td>
@@ -221,7 +226,7 @@ const showUploadDetailModal = ref(false)
                   <tr v-if="!object.is_local">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        {{ $t('views.admin.library.UploadDetail.link.domain') }}
+                        {{ t('views.admin.library.UploadDetail.link.domain') }}
                       </router-link>
                     </td>
                     <td>
@@ -231,7 +236,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('status', object.import_status) }}">
-                        {{ $t('views.admin.library.UploadDetail.link.importStatus') }}
+                        {{ t('views.admin.library.UploadDetail.link.importStatus') }}
                       </router-link>
                     </td>
                     <td>
@@ -248,7 +253,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries.detail', params: {id: object.library.uuid }}">
-                        {{ $t('views.admin.library.UploadDetail.link.library') }}
+                        {{ t('views.admin.library.UploadDetail.link.library') }}
                       </router-link>
                     </td>
                     <td>
@@ -264,14 +269,14 @@ const showUploadDetailModal = ref(false)
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.UploadDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.library.UploadDetail.header.activity') }}&nbsp;
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.UploadDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.library.UploadDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -279,7 +284,7 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.UploadDetail.table.activity.accessedDate') }}
+                      {{ t('views.admin.library.UploadDetail.table.activity.accessedDate') }}
                     </td>
                     <td>
                       <human-date
@@ -289,7 +294,7 @@ const showUploadDetailModal = ref(false)
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.library.UploadDetail.notApplicable') }}
+                        {{ t('views.admin.library.UploadDetail.notApplicable') }}
                       </span>
                     </td>
                   </tr>
@@ -302,7 +307,7 @@ const showUploadDetailModal = ref(false)
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.library.UploadDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.library.UploadDetail.header.audioContent') }}&nbsp;
                 </div>
               </h3>
               <table class="ui very basic table">
@@ -310,7 +315,7 @@ const showUploadDetailModal = ref(false)
                   <tr v-if="object.track">
                     <td>
                       <router-link :to="{name: 'manage.library.tracks.detail', params: {id: object.track.id }}">
-                        {{ $t('views.admin.library.UploadDetail.table.audioContent.track') }}
+                        {{ t('views.admin.library.UploadDetail.table.audioContent.track') }}
                       </router-link>
                     </td>
                     <td>
@@ -319,7 +324,7 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.UploadDetail.table.audioContent.cachedSize') }}
+                      {{ t('views.admin.library.UploadDetail.table.audioContent.cachedSize') }}
                     </td>
                     <td>
                       <template v-if="object.audio_file">
@@ -328,13 +333,13 @@ const showUploadDetailModal = ref(false)
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.library.UploadDetail.notApplicable') }}
+                        {{ t('views.admin.library.UploadDetail.notApplicable') }}
                       </span>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.UploadDetail.table.audioContent.size') }}
+                      {{ t('views.admin.library.UploadDetail.table.audioContent.size') }}
                     </td>
                     <td>
                       {{ humanSize(object.size) }}
@@ -342,22 +347,22 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.UploadDetail.table.audioContent.bitrate.label') }}
+                      {{ t('views.admin.library.UploadDetail.table.audioContent.bitrate.label') }}
                     </td>
                     <td>
                       <template v-if="object.bitrate">
-                        {{ $t('views.admin.library.UploadDetail.table.audioContent.bitrate.value', {bitrate: humanSize(object.bitrate)}) }}
+                        {{ t('views.admin.library.UploadDetail.table.audioContent.bitrate.value', {bitrate: humanSize(object.bitrate)}) }}
                       </template>
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.library.UploadDetail.notApplicable') }}
+                        {{ t('views.admin.library.UploadDetail.notApplicable') }}
                       </span>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.library.UploadDetail.table.audioContent.duration') }}
+                      {{ t('views.admin.library.UploadDetail.table.audioContent.duration') }}
                     </td>
                     <td>
                       <template v-if="object.duration">
@@ -366,14 +371,14 @@ const showUploadDetailModal = ref(false)
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.library.UploadDetail.notApplicable') }}
+                        {{ t('views.admin.library.UploadDetail.notApplicable') }}
                       </span>
                     </td>
                   </tr>
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('type', object.mimetype) }}">
-                        {{ $t('views.admin.library.UploadDetail.link.type') }}
+                        {{ t('views.admin.library.UploadDetail.link.type') }}
                       </router-link>
                     </td>
                     <td>
@@ -383,7 +388,7 @@ const showUploadDetailModal = ref(false)
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.library.UploadDetail.notApplicable') }}
+                        {{ t('views.admin.library.UploadDetail.notApplicable') }}
                       </span>
                     </td>
                   </tr>
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 389d629e3..694a6f2dc 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -5,6 +5,7 @@ import { computed, ref, reactive, nextTick, watch } from 'vue'
 import { useCurrentElement } from '@vueuse/core'
 import { humanSize } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 import $ from 'jquery'
@@ -21,6 +22,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const store = useStore()
 const { t } = useI18n()
 
 const logger = useLogger()
@@ -167,7 +169,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                     <template v-if="object.user">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        {{ $t('views.admin.moderation.AccountsDetail.header.localAccount') }}
+                        {{ t('views.admin.moderation.AccountsDetail.header.localAccount') }}
                       </span>
                       &nbsp;
                     </template>
@@ -176,7 +178,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      {{ $t('views.admin.moderation.AccountsDetail.link.openProfile') }}&nbsp;
+                      {{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}&nbsp;
                       <i class="external icon" />
                     </a>
                   </div>
@@ -185,24 +187,24 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <div class="header-buttons">
                 <div class="ui icon buttons">
                   <a
-                    v-if="object.user && $store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                    v-if="object.user && store.state.auth.profile && store.state.auth.profile.is_superuser"
                     class="ui labeled icon button"
-                    :href="$store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object.user.id}`)"
+                    :href="store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object.user.id}`)"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    {{ $t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
+                    {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
                   </a>
                   <a
-                    v-else-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                    v-else-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
                     class="ui labeled icon button"
-                    :href="$store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object.id}`)"
+                    :href="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object.id}`)"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    {{ $t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
+                    {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
                   </a>
                   <button
                     v-dropdown
@@ -217,7 +219,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        {{ $t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
+                        {{ t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
                       </a>
                     </div>
                   </button>
@@ -243,17 +245,17 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 <header class="ui header">
                   <h3>
                     <i class="shield icon" />
-                    {{ $t('views.admin.moderation.AccountsDetail.header.noPolicy') }}
+                    {{ t('views.admin.moderation.AccountsDetail.header.noPolicy') }}
                   </h3>
                 </header>
                 <p>
-                  {{ $t('views.admin.moderation.AccountsDetail.description.policy') }}
+                  {{ t('views.admin.moderation.AccountsDetail.description.policy') }}
                 </p>
                 <button
                   class="ui primary button"
                   @click="showPolicyForm = true"
                 >
-                  {{ $t('views.admin.moderation.AccountsDetail.button.addPolicy') }}
+                  {{ t('views.admin.moderation.AccountsDetail.button.addPolicy') }}
                 </button>
               </template>
               <instance-policy-card
@@ -263,7 +265,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               >
                 <header class="ui header">
                   <h3>
-                    {{ $t('views.admin.moderation.AccountsDetail.header.activePolicy') }}
+                    {{ t('views.admin.moderation.AccountsDetail.header.activePolicy') }}
                   </h3>
                 </header>
               </instance-policy-card>
@@ -287,14 +289,14 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.moderation.AccountsDetail.header.accountData') }}
+                  {{ t('views.admin.moderation.AccountsDetail.header.accountData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.username') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.username') }}
                     </td>
                     <td>
                       {{ object.preferred_username }}
@@ -303,7 +305,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr v-if="!object.user">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        {{ $t('views.admin.moderation.AccountsDetail.link.domain') }}
+                        {{ t('views.admin.moderation.AccountsDetail.link.domain') }}
                       </router-link>
                     </td>
                     <td>
@@ -312,7 +314,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.displayName') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.displayName') }}
                     </td>
                     <td>
                       {{ object.name }}
@@ -320,7 +322,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.email') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.email') }}
                     </td>
                     <td>
                       {{ object.user.email }}
@@ -328,11 +330,11 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.label') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.label') }}
                     </td>
                     <td>
                       <div
-                        v-if="object.user.username != $store.state.auth.profile?.username"
+                        v-if="object.user.username != store.state.auth.profile?.username"
                         class="ui toggle checkbox"
                       >
                         <input
@@ -344,27 +346,27 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                         <label for="is-active">
                           <span
                             v-if="object.user.is_active"
-                          >{{ $t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}</span>
+                          >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}</span>
                           <span
                             v-else
-                          >{{ $t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}</span>
+                          >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}</span>
                         </label>
                       </div>
                       <span
                         v-else-if="object.user.is_active"
                       >
-                        {{ $t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}
+                        {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}
                       </span>
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}
+                        {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}
                       </span>
                     </td>
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.permissions') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.permissions') }}
                     </td>
                     <td>
                       <select
@@ -386,7 +388,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.userType') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.userType') }}
                     </td>
                     <td>
                       {{ object.type }}
@@ -394,7 +396,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="!object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.lastChecked') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastChecked') }}
                     </td>
                     <td>
                       <human-date
@@ -404,13 +406,13 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.moderation.AccountsDetail.notApplicable') }}
+                        {{ t('views.admin.moderation.AccountsDetail.notApplicable') }}
                       </span>
                     </td>
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.signupDate') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.signupDate') }}
                     </td>
                     <td>
                       <human-date :date="object.user.date_joined" />
@@ -418,7 +420,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.accountData.lastActivity') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastActivity') }}
                     </td>
                     <td>
                       <human-date :date="object.user.last_activity" />
@@ -433,7 +435,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.moderation.AccountsDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.moderation.AccountsDetail.header.activity') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -453,7 +455,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 <tbody>
                   <tr v-if="!object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -461,7 +463,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.activity.emittedMessages') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedMessages') }}
                     </td>
                     <td>
                       {{ stats.outbox_activities }}
@@ -469,7 +471,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.activity.receivedFollows') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.activity.receivedFollows') }}
                     </td>
                     <td>
                       {{ stats.received_library_follows }}
@@ -477,7 +479,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.activity.emittedFollows') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedFollows') }}
                     </td>
                     <td>
                       {{ stats.emitted_library_follows }}
@@ -486,7 +488,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object.full_username}`) }}">
-                        {{ $t('views.admin.moderation.AccountsDetail.link.linkedReports') }}
+                        {{ t('views.admin.moderation.AccountsDetail.link.linkedReports') }}
                       </router-link>
                     </td>
                     <td>
@@ -496,7 +498,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object.full_username}`) }}">
-                        {{ $t('views.admin.moderation.AccountsDetail.link.requests') }}
+                        {{ t('views.admin.moderation.AccountsDetail.link.requests') }}
                       </router-link>
                     </td>
                     <td>
@@ -512,7 +514,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.moderation.AccountsDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.moderation.AccountsDetail.header.audioContent') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -532,7 +534,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 <tbody>
                   <tr v-if="!object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.audioContent.cachedSize') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.audioContent.cachedSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_downloaded_size) }}
@@ -540,7 +542,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.audioContent.uploadQuota') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.audioContent.uploadQuota') }}
                       <span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
                     </td>
                     <td>
@@ -553,7 +555,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                           @change="updateUser('upload_quota', true)"
                         >
                         <div class="ui basic label">
-                          {{ $t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
+                          {{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
                         </div>
                         <action-feedback
                           class="ui basic label"
@@ -565,7 +567,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
+                      {{ t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_total_size) }}
@@ -574,7 +576,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.channels', query: {q: getQuery('account', object.full_username) }}">
-                        {{ $t('views.admin.moderation.AccountsDetail.link.channels') }}
+                        {{ t('views.admin.moderation.AccountsDetail.link.channels') }}
                       </router-link>
                     </td>
                     <td>
@@ -584,7 +586,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('account', object.full_username) }}">
-                        {{ $t('views.admin.moderation.AccountsDetail.link.libraries') }}
+                        {{ t('views.admin.moderation.AccountsDetail.link.libraries') }}
                       </router-link>
                     </td>
                     <td>
@@ -594,7 +596,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('account', object.full_username) }}">
-                        {{ $t('views.admin.moderation.AccountsDetail.link.uploads') }}
+                        {{ t('views.admin.moderation.AccountsDetail.link.uploads') }}
                       </router-link>
                     </td>
                     <td>
@@ -603,7 +605,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.link.artists') }}
+                      {{ t('views.admin.moderation.AccountsDetail.link.artists') }}
                     </td>
                     <td>
                       {{ stats.artists }}
@@ -611,7 +613,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.link.albums') }}
+                      {{ t('views.admin.moderation.AccountsDetail.link.albums') }}
                     </td>
                     <td>
                       {{ stats.albums }}
@@ -619,7 +621,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.AccountsDetail.link.tracks') }}
+                      {{ t('views.admin.moderation.AccountsDetail.link.tracks') }}
                     </td>
                     <td>
                       {{ stats.tracks }}
diff --git a/front/src/views/admin/moderation/Base.vue b/front/src/views/admin/moderation/Base.vue
index 88afb504e..3c81452db 100644
--- a/front/src/views/admin/moderation/Base.vue
+++ b/front/src/views/admin/moderation/Base.vue
@@ -2,10 +2,14 @@
 import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { get } from 'lodash-es'
+import { useStore } from '~/store'
+import { useRoute } from 'vue-router'
 
 import axios from 'axios'
 
+const store = useStore()
 const { t } = useI18n()
+const route = useRoute()
 
 const allowListEnabled = ref(false)
 const labels = computed(() => ({
@@ -35,41 +39,41 @@ fetchNodeInfo()
         class="ui item"
         :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
       >
-        {{ $t('views.admin.moderation.Base.link.reports') }}
+        {{ t('views.admin.moderation.Base.link.reports') }}
         <div
-          v-if="$store.state.ui.notifications.pendingReviewReports > 0"
+          v-if="store.state.ui.notifications.pendingReviewReports > 0"
           :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
         >
-          {{ $store.state.ui.notifications.pendingReviewReports }}
+          {{ store.state.ui.notifications.pendingReviewReports }}
         </div>
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.moderation.requests.list', query: {q: 'status:pending'}}"
       >
-        {{ $t('views.admin.moderation.Base.link.userRequests') }}
+        {{ t('views.admin.moderation.Base.link.userRequests') }}
         <div
-          v-if="$store.state.ui.notifications.pendingReviewRequests > 0"
+          v-if="store.state.ui.notifications.pendingReviewRequests > 0"
           :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
         >
-          {{ $store.state.ui.notifications.pendingReviewRequests }}
+          {{ store.state.ui.notifications.pendingReviewRequests }}
         </div>
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.moderation.domains.list'}"
       >
-        {{ $t('views.admin.moderation.Base.link.domains') }}
+        {{ t('views.admin.moderation.Base.link.domains') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.moderation.accounts.list'}"
       >
-        {{ $t('views.admin.moderation.Base.link.accounts') }}
+        {{ t('views.admin.moderation.Base.link.accounts') }}
       </router-link>
     </nav>
     <router-view
-      :key="$route.fullPath"
+      :key="route.fullPath"
       :allow-list-enabled="allowListEnabled"
     />
   </div>
diff --git a/front/src/views/admin/moderation/DomainsDetail.vue b/front/src/views/admin/moderation/DomainsDetail.vue
index a2d2653a9..e7c33e000 100644
--- a/front/src/views/admin/moderation/DomainsDetail.vue
+++ b/front/src/views/admin/moderation/DomainsDetail.vue
@@ -5,6 +5,7 @@ import { humanSize } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { get } from 'lodash-es'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -20,6 +21,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const store = useStore()
 const { t } = useI18n()
 
 const labels = computed(() => ({
@@ -133,7 +135,7 @@ const setAllowList = async (value: boolean) => {
                       rel="noopener noreferrer"
                       class="logo-wrapper"
                     >
-                      {{ $t('views.admin.moderation.DomainsDetail.link.website') }}&nbsp;
+                      {{ t('views.admin.moderation.DomainsDetail.link.website') }}&nbsp;
                       <i class="external icon" />
                     </a>
                   </div>
@@ -142,14 +144,14 @@ const setAllowList = async (value: boolean) => {
               <div class="header-buttons">
                 <div class="ui icon buttons">
                   <a
-                    v-if="$store.state.auth.profile?.is_superuser"
+                    v-if="store.state.auth.profile?.is_superuser"
                     class="ui labeled icon button"
-                    :href="$store.getters['instance/absoluteUrl'](`/api/admin/federation/domain/${object.name}`)"
+                    :href="store.getters['instance/absoluteUrl'](`/api/admin/federation/domain/${object.name}`)"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    {{ $t('views.admin.moderation.DomainsDetail.link.django') }}&nbsp;
+                    {{ t('views.admin.moderation.DomainsDetail.link.django') }}&nbsp;
                   </a>
                 </div>
                 <div
@@ -162,7 +164,7 @@ const setAllowList = async (value: boolean) => {
                     @click.prevent="setAllowList(false)"
                   >
                     <i class="x icon" />
-                    {{ $t('views.admin.moderation.DomainsDetail.button.removeFromAllowList') }}
+                    {{ t('views.admin.moderation.DomainsDetail.button.removeFromAllowList') }}
                   </button>
                   <button
                     v-else
@@ -170,7 +172,7 @@ const setAllowList = async (value: boolean) => {
                     @click.prevent="setAllowList(true)"
                   >
                     <i class="check icon" />
-                    {{ $t('views.admin.moderation.DomainsDetail.button.addToAllowList') }}
+                    {{ t('views.admin.moderation.DomainsDetail.button.addToAllowList') }}
                   </button>
                 </div>
               </div>
@@ -191,17 +193,17 @@ const setAllowList = async (value: boolean) => {
                 <header class="ui header">
                   <h3>
                     <i class="shield icon" />
-                    {{ $t('views.admin.moderation.DomainsDetail.header.noPolicy') }}
+                    {{ t('views.admin.moderation.DomainsDetail.header.noPolicy') }}
                   </h3>
                 </header>
                 <p>
-                  {{ $t('views.admin.moderation.DomainsDetail.description.policy') }}
+                  {{ t('views.admin.moderation.DomainsDetail.description.policy') }}
                 </p>
                 <button
                   class="ui primary button"
                   @click="showPolicyForm = true"
                 >
-                  {{ $t('views.admin.moderation.DomainsDetail.button.addPolicy') }}
+                  {{ t('views.admin.moderation.DomainsDetail.button.addPolicy') }}
                 </button>
               </template>
               <instance-policy-card
@@ -211,7 +213,7 @@ const setAllowList = async (value: boolean) => {
               >
                 <header class="ui header">
                   <h3>
-                    {{ $t('views.admin.moderation.DomainsDetail.header.activePolicy') }}
+                    {{ t('views.admin.moderation.DomainsDetail.header.activePolicy') }}
                   </h3>
                 </header>
               </instance-policy-card>
@@ -235,31 +237,31 @@ const setAllowList = async (value: boolean) => {
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  {{ $t('views.admin.moderation.DomainsDetail.header.instanceData') }}
+                  {{ t('views.admin.moderation.DomainsDetail.header.instanceData') }}
                 </div>
               </h3>
               <table class="ui very basic table">
                 <tbody>
                   <tr v-if="allowListEnabled">
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.label') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.label') }}
                     </td>
                     <td>
                       <span
                         v-if="object.allowed"
                       >
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.true') }}
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.true') }}
                       </span>
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.false') }}
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.false') }}
                       </span>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.lastChecked') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.instanceData.lastChecked') }}
                     </td>
                     <td>
                       <human-date
@@ -269,7 +271,7 @@ const setAllowList = async (value: boolean) => {
                       <span
                         v-else
                       >
-                        {{ $t('views.admin.moderation.DomainsDetail.notApplicable') }}
+                        {{ t('views.admin.moderation.DomainsDetail.notApplicable') }}
                       </span>
                     </td>
                   </tr>
@@ -277,15 +279,15 @@ const setAllowList = async (value: boolean) => {
                   <template v-if="object.nodeinfo && object.nodeinfo.status === 'ok'">
                     <tr>
                       <td>
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.software.label') }}
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.software.label') }}
                       </td>
                       <td>
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.software.value', {name: get(object, 'nodeinfo.payload.software.name', t('views.admin.moderation.DomainsDetail.notApplicable')), version: get(object, 'nodeinfo.payload.software.version', t('views.admin.moderation.DomainsDetail.notApplicable'))}) }}
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.software.value', {name: get(object, 'nodeinfo.payload.software.name', t('views.admin.moderation.DomainsDetail.notApplicable')), version: get(object, 'nodeinfo.payload.software.version', t('views.admin.moderation.DomainsDetail.notApplicable'))}) }}
                       </td>
                     </tr>
                     <tr>
                       <td>
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.domainName') }}
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.domainName') }}
                       </td>
                       <td>
                         {{ get(object, 'nodeinfo.payload.metadata.nodeName', t('views.admin.moderation.DomainsDetail.notApplicable')) }}
@@ -293,7 +295,7 @@ const setAllowList = async (value: boolean) => {
                     </tr>
                     <tr>
                       <td>
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.totalUsers') }}
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.totalUsers') }}
                       </td>
                       <td>
                         {{ get(object, 'nodeinfo.payload.usage.users.total', t('views.admin.moderation.DomainsDetail.notApplicable')) }}
@@ -303,10 +305,10 @@ const setAllowList = async (value: boolean) => {
                   <template v-if="object.nodeinfo && object.nodeinfo.status === 'error'">
                     <tr>
                       <td>
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.label') }}
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.label') }}
                       </td>
                       <td>
-                        {{ $t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.value') }}&nbsp;
+                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.value') }}&nbsp;
 
                         <span :data-tooltip="object.nodeinfo.error"><i class="question circle icon" /></span>
                       </td>
@@ -319,7 +321,7 @@ const setAllowList = async (value: boolean) => {
                 :url="'manage/federation/domains/' + object.name + '/nodeinfo/'"
                 @action-done="refreshNodeInfo"
               >
-                {{ $t('views.admin.moderation.DomainsDetail.button.refreshNodeInfo') }}
+                {{ t('views.admin.moderation.DomainsDetail.button.refreshNodeInfo') }}
               </ajax-button>
             </section>
           </div>
@@ -328,7 +330,7 @@ const setAllowList = async (value: boolean) => {
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  {{ $t('views.admin.moderation.DomainsDetail.header.activity') }}&nbsp;
+                  {{ t('views.admin.moderation.DomainsDetail.header.activity') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -348,7 +350,7 @@ const setAllowList = async (value: boolean) => {
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.activity.firstSeen') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.activity.firstSeen') }}
                     </td>
                     <td>
                       <human-date :date="object.creation_date" />
@@ -359,7 +361,7 @@ const setAllowList = async (value: boolean) => {
                       <router-link
                         :to="{name: 'manage.moderation.accounts.list', query: {q: 'domain:' + object.name }}"
                       >
-                        {{ $t('views.admin.moderation.DomainsDetail.link.knownAccounts') }}
+                        {{ t('views.admin.moderation.DomainsDetail.link.knownAccounts') }}
                       </router-link>
                     </td>
                     <td>
@@ -368,7 +370,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.activity.emittedMessages') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.activity.emittedMessages') }}
                     </td>
                     <td>
                       {{ stats.outbox_activities }}
@@ -376,7 +378,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.activity.receivedFollows') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.activity.receivedFollows') }}
                     </td>
                     <td>
                       {{ stats.received_library_follows }}
@@ -384,7 +386,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.activity.emittedFollows') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.activity.emittedFollows') }}
                     </td>
                     <td>
                       {{ stats.emitted_library_follows }}
@@ -399,7 +401,7 @@ const setAllowList = async (value: boolean) => {
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  {{ $t('views.admin.moderation.DomainsDetail.header.audioContent') }}&nbsp;
+                  {{ t('views.admin.moderation.DomainsDetail.header.audioContent') }}&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
                 </div>
               </h3>
@@ -419,7 +421,7 @@ const setAllowList = async (value: boolean) => {
                 <tbody>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.audioContent.cachedSize') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.audioContent.cachedSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_downloaded_size) }}
@@ -427,7 +429,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      {{ $t('views.admin.moderation.DomainsDetail.table.audioContent.totalSize') }}
+                      {{ t('views.admin.moderation.DomainsDetail.table.audioContent.totalSize') }}
                     </td>
                     <td>
                       {{ humanSize(stats.media_total_size) }}
@@ -436,7 +438,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.channels', query: {q: getQuery('domain', object.name) }}">
-                        {{ $t('views.admin.moderation.DomainsDetail.link.channels') }}
+                        {{ t('views.admin.moderation.DomainsDetail.link.channels') }}
                       </router-link>
                     </td>
                     <td>
@@ -446,7 +448,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('domain', object.name) }}">
-                        {{ $t('views.admin.moderation.DomainsDetail.link.libraries') }}
+                        {{ t('views.admin.moderation.DomainsDetail.link.libraries') }}
                       </router-link>
                     </td>
                     <td>
@@ -456,7 +458,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('domain', object.name) }}">
-                        {{ $t('views.admin.moderation.DomainsDetail.link.uploads') }}
+                        {{ t('views.admin.moderation.DomainsDetail.link.uploads') }}
                       </router-link>
                     </td>
                     <td>
@@ -466,7 +468,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('domain', object.name) }}">
-                        {{ $t('views.admin.moderation.DomainsDetail.link.artists') }}
+                        {{ t('views.admin.moderation.DomainsDetail.link.artists') }}
                       </router-link>
                     </td>
                     <td>
@@ -476,7 +478,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('domain', object.name) }}">
-                        {{ $t('views.admin.moderation.DomainsDetail.link.albums') }}
+                        {{ t('views.admin.moderation.DomainsDetail.link.albums') }}
                       </router-link>
                     </td>
                     <td>
@@ -486,7 +488,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('domain', object.name) }}">
-                        {{ $t('views.admin.moderation.DomainsDetail.link.tracks') }}
+                        {{ t('views.admin.moderation.DomainsDetail.link.tracks') }}
                       </router-link>
                     </td>
                     <td>
diff --git a/front/src/views/admin/moderation/DomainsList.vue b/front/src/views/admin/moderation/DomainsList.vue
index 91a0f2b2a..aa93ed71e 100644
--- a/front/src/views/admin/moderation/DomainsList.vue
+++ b/front/src/views/admin/moderation/DomainsList.vue
@@ -50,7 +50,7 @@ const createDomain = async () => {
   <main v-title="labels.domains">
     <section class="ui vertical stripe segment">
       <h2 class="ui left floated header">
-        {{ $t('views.admin.moderation.DomainsList.header.domains') }}
+        {{ t('views.admin.moderation.DomainsList.header.domains') }}
       </h2>
       <form
         class="ui right floated form"
@@ -62,7 +62,7 @@ const createDomain = async () => {
           class="ui negative message"
         >
           <h4 class="header">
-            {{ $t('views.admin.moderation.DomainsList.header.failure') }}
+            {{ t('views.admin.moderation.DomainsList.header.failure') }}
           </h4>
           <ul class="list">
             <li
@@ -75,7 +75,7 @@ const createDomain = async () => {
         </div>
         <div class="inline fields">
           <div class="field">
-            <label for="add-domain">{{ $t('views.admin.moderation.DomainsList.label.addDomain') }}</label>
+            <label for="add-domain">{{ t('views.admin.moderation.DomainsList.label.addDomain') }}</label>
             <input
               id="add-domain"
               v-model="domainName"
@@ -93,7 +93,7 @@ const createDomain = async () => {
               type="checkbox"
               name="allowed"
             >
-            <label for="allowed">{{ $t('views.admin.moderation.DomainsList.label.addToAllowList') }}</label>
+            <label for="allowed">{{ t('views.admin.moderation.DomainsList.label.addToAllowList') }}</label>
           </div>
           <div class="field">
             <button
@@ -101,7 +101,7 @@ const createDomain = async () => {
               type="submit"
               :disabled="isCreating"
             >
-              {{ $t('views.admin.moderation.DomainsList.button.add') }}
+              {{ t('views.admin.moderation.DomainsList.button.add') }}
             </button>
           </div>
         </div>
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index d1ab1d1e0..f51266b28 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -102,13 +102,13 @@ const labels = computed(() => ({
   <main v-title="labels.reports">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        {{ $t('views.admin.moderation.ReportsList.header.reports') }}
+        {{ t('views.admin.moderation.ReportsList.header.reports') }}
       </h2>
       <div class="ui hidden divider" />
       <div class="ui inline form">
         <div class="fields">
           <div class="ui field">
-            <label for="reports-search">{{ $t('views.admin.moderation.ReportsList.label.search') }}</label>
+            <label for="reports-search">{{ t('views.admin.moderation.ReportsList.label.search') }}</label>
             <form @submit.prevent="query = search.value">
               <input
                 id="reports-search"
@@ -121,7 +121,7 @@ const labels = computed(() => ({
             </form>
           </div>
           <div class="field">
-            <label for="reports-status">{{ $t('views.admin.moderation.ReportsList.label.status') }}</label>
+            <label for="reports-status">{{ t('views.admin.moderation.ReportsList.label.status') }}</label>
             <select
               id="reports-status"
               class="ui dropdown"
@@ -129,13 +129,13 @@ const labels = computed(() => ({
               @change="addSearchToken('resolved', ($event.target as HTMLSelectElement).value)"
             >
               <option value="">
-                {{ $t('views.admin.moderation.ReportsList.option.status.all') }}
+                {{ t('views.admin.moderation.ReportsList.option.status.all') }}
               </option>
               <option value="yes">
-                {{ $t('views.admin.moderation.ReportsList.option.status.resolved') }}
+                {{ t('views.admin.moderation.ReportsList.option.status.resolved') }}
               </option>
               <option value="no">
-                {{ $t('views.admin.moderation.ReportsList.option.status.unresolved') }}
+                {{ t('views.admin.moderation.ReportsList.option.status.unresolved') }}
               </option>
             </select>
           </div>
@@ -147,7 +147,7 @@ const labels = computed(() => ({
             @update:model-value="addSearchToken('category', $event)"
           />
           <div class="field">
-            <label for="reports-ordering">{{ $t('views.admin.moderation.ReportsList.ordering.label') }}</label>
+            <label for="reports-ordering">{{ t('views.admin.moderation.ReportsList.ordering.label') }}</label>
             <select
               id="reports-ordering"
               v-model="ordering"
@@ -163,17 +163,17 @@ const labels = computed(() => ({
             </select>
           </div>
           <div class="field">
-            <label for="reports-ordering-direction">{{ $t('views.admin.moderation.ReportsList.ordering.direction.label') }}</label>
+            <label for="reports-ordering-direction">{{ t('views.admin.moderation.ReportsList.ordering.direction.label') }}</label>
             <select
               id="reports-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('views.admin.moderation.ReportsList.ordering.direction.ascending') }}
+                {{ t('views.admin.moderation.ReportsList.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('views.admin.moderation.ReportsList.ordering.direction.descending') }}
+                {{ t('views.admin.moderation.ReportsList.ordering.direction.descending') }}
               </option>
             </select>
           </div>
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 031e223dc..6842a9215 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/front/src/views/admin/moderation/RequestsList.vue
@@ -95,13 +95,13 @@ const labels = computed(() => ({
   <main v-title="labels.reports">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        {{ $t('views.admin.moderation.RequestsList.header.userRequests') }}
+        {{ t('views.admin.moderation.RequestsList.header.userRequests') }}
       </h2>
       <div class="ui hidden divider" />
       <div class="ui inline form">
         <div class="fields">
           <div class="ui field">
-            <label for="requests-search">{{ $t('views.admin.moderation.RequestsList.label.search') }}</label>
+            <label for="requests-search">{{ t('views.admin.moderation.RequestsList.label.search') }}</label>
             <form @submit.prevent="query = search.value">
               <input
                 id="requests-search"
@@ -114,7 +114,7 @@ const labels = computed(() => ({
             </form>
           </div>
           <div class="field">
-            <label for="requests-status">{{ $t('views.admin.moderation.RequestsList.label.status') }}</label>
+            <label for="requests-status">{{ t('views.admin.moderation.RequestsList.label.status') }}</label>
             <select
               id="requests-status"
               class="ui dropdown"
@@ -122,21 +122,21 @@ const labels = computed(() => ({
               @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
             >
               <option value="">
-                {{ $t('views.admin.moderation.RequestsList.option.status.all') }}
+                {{ t('views.admin.moderation.RequestsList.option.status.all') }}
               </option>
               <option value="pending">
-                {{ $t('views.admin.moderation.RequestsList.option.status.pending') }}
+                {{ t('views.admin.moderation.RequestsList.option.status.pending') }}
               </option>
               <option value="approved">
-                {{ $t('views.admin.moderation.RequestsList.option.status.approved') }}
+                {{ t('views.admin.moderation.RequestsList.option.status.approved') }}
               </option>
               <option value="refused">
-                {{ $t('views.admin.moderation.RequestsList.option.status.refused') }}
+                {{ t('views.admin.moderation.RequestsList.option.status.refused') }}
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="requests-ordering">{{ $t('views.admin.moderation.RequestsList.ordering.label') }}</label>
+            <label for="requests-ordering">{{ t('views.admin.moderation.RequestsList.ordering.label') }}</label>
             <select
               id="requests-ordering"
               v-model="ordering"
@@ -152,17 +152,17 @@ const labels = computed(() => ({
             </select>
           </div>
           <div class="field">
-            <label for="requests-ordering-direction">{{ $t('views.admin.moderation.RequestsList.ordering.direction.label') }}</label>
+            <label for="requests-ordering-direction">{{ t('views.admin.moderation.RequestsList.ordering.direction.label') }}</label>
             <select
               id="requests-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('views.admin.moderation.RequestsList.ordering.direction.ascending') }}
+                {{ t('views.admin.moderation.RequestsList.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('views.admin.moderation.RequestsList.ordering.direction.descending') }}
+                {{ t('views.admin.moderation.RequestsList.ordering.direction.descending') }}
               </option>
             </select>
           </div>
diff --git a/front/src/views/admin/users/Base.vue b/front/src/views/admin/users/Base.vue
index 110e2156b..92689dd78 100644
--- a/front/src/views/admin/users/Base.vue
+++ b/front/src/views/admin/users/Base.vue
@@ -24,13 +24,13 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.users.users.list'}"
       >
-        {{ $t('views.admin.users.Base.link.users') }}
+        {{ t('views.admin.users.Base.link.users') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'manage.users.invitations.list'}"
       >
-        {{ $t('views.admin.users.Base.link.invitations') }}
+        {{ t('views.admin.users.Base.link.invitations') }}
       </router-link>
     </nav>
     <router-view :key="$route.fullPath" />
diff --git a/front/src/views/auth/Callback.vue b/front/src/views/auth/Callback.vue
index b4553fdd2..da901c63d 100644
--- a/front/src/views/auth/Callback.vue
+++ b/front/src/views/auth/Callback.vue
@@ -27,7 +27,7 @@ onMounted(async () => {
         <div class="ui active inverted dimmer">
           <div class="ui text loader">
             <h2>
-              {{ $t('views.auth.Callback.header.loggingIn') }}
+              {{ t('views.auth.Callback.header.loggingIn') }}
             </h2>
           </div>
         </div>
diff --git a/front/src/views/auth/EmailConfirm.vue b/front/src/views/auth/EmailConfirm.vue
index 476892d5d..9ebbbf8f3 100644
--- a/front/src/views/auth/EmailConfirm.vue
+++ b/front/src/views/auth/EmailConfirm.vue
@@ -60,7 +60,7 @@ onMounted(() => {
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('views.auth.EmailConfirm.header.failure') }}
+              {{ t('views.auth.EmailConfirm.header.failure') }}
             </h4>
             <ul class="list">
               <li
@@ -72,7 +72,7 @@ onMounted(() => {
             </ul>
           </div>
           <div class="field">
-            <label for="confirmation-code">{{ $t('views.auth.EmailConfirm.label.confirmationCode') }}</label>
+            <label for="confirmation-code">{{ t('views.auth.EmailConfirm.label.confirmationCode') }}</label>
             <input
               id="confirmation-code"
               v-model="key"
@@ -82,7 +82,7 @@ onMounted(() => {
             >
           </div>
           <router-link :to="{path: '/login'}">
-            {{ $t('views.auth.EmailConfirm.link.back') }}
+            {{ t('views.auth.EmailConfirm.link.back') }}
           </router-link>
           <button
             :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
@@ -96,13 +96,13 @@ onMounted(() => {
           class="ui positive message"
         >
           <h4 class="header">
-            {{ $t('views.auth.EmailConfirm.header.success') }}
+            {{ t('views.auth.EmailConfirm.header.success') }}
           </h4>
           <p>
-            {{ $t('views.auth.EmailConfirm.message.success') }}
+            {{ t('views.auth.EmailConfirm.message.success') }}
           </p>
           <router-link :to="{name: 'login'}">
-            {{ $t('views.auth.EmailConfirm.link.login') }}
+            {{ t('views.auth.EmailConfirm.link.login') }}
           </router-link>
         </div>
       </div>
diff --git a/front/src/views/auth/Login.vue b/front/src/views/auth/Login.vue
index 6d3b79727..9f2ef32b1 100644
--- a/front/src/views/auth/Login.vue
+++ b/front/src/views/auth/Login.vue
@@ -37,7 +37,7 @@ whenever(() => store.state.auth.authenticated, () => {
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          {{ $t('views.auth.Login.header.login') }}
+          {{ t('views.auth.Login.header.login') }}
         </h2>
         <login-form :next="next" />
       </div>
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index 3470f80dd..36114860e 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -51,7 +51,7 @@ onMounted(() => emailInput.value.focus())
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          {{ $t('views.auth.PasswordReset.header.reset') }}
+          {{ t('views.auth.PasswordReset.header.reset') }}
         </h2>
         <form
           class="ui form"
@@ -63,7 +63,7 @@ onMounted(() => emailInput.value.focus())
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('views.auth.PasswordReset.header.failure') }}
+              {{ t('views.auth.PasswordReset.header.failure') }}
             </h4>
             <ul class="list">
               <li
@@ -75,10 +75,10 @@ onMounted(() => emailInput.value.focus())
             </ul>
           </div>
           <p>
-            {{ $t('views.auth.PasswordReset.help.form') }}
+            {{ t('views.auth.PasswordReset.help.form') }}
           </p>
           <div class="field">
-            <label for="account-email">{{ $t('views.auth.PasswordReset.label.email') }}</label>
+            <label for="account-email">{{ t('views.auth.PasswordReset.label.email') }}</label>
             <input
               id="account-email"
               ref="emailInput"
@@ -91,13 +91,13 @@ onMounted(() => emailInput.value.focus())
             >
           </div>
           <router-link :to="{path: '/login'}">
-            {{ $t('views.auth.PasswordReset.link.back') }}
+            {{ t('views.auth.PasswordReset.link.back') }}
           </router-link>
           <button
             :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
             type="submit"
           >
-            {{ $t('views.auth.PasswordReset.button.requestReset') }}
+            {{ t('views.auth.PasswordReset.button.requestReset') }}
           </button>
         </form>
       </div>
diff --git a/front/src/views/auth/PasswordResetConfirm.vue b/front/src/views/auth/PasswordResetConfirm.vue
index 1d810d1d0..182c06eaa 100644
--- a/front/src/views/auth/PasswordResetConfirm.vue
+++ b/front/src/views/auth/PasswordResetConfirm.vue
@@ -68,7 +68,7 @@ const submit = async () => {
             class="ui negative message"
           >
             <h4 class="header">
-              {{ $t('views.auth.PasswordResetConfirm.header.failure') }}
+              {{ t('views.auth.PasswordResetConfirm.header.failure') }}
             </h4>
             <ul class="list">
               <li
@@ -81,25 +81,25 @@ const submit = async () => {
           </div>
           <template v-if="token && uid">
             <div class="field">
-              <label for="password-field">{{ $t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
+              <label for="password-field">{{ t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
               <password-input
                 v-model="newPassword"
                 field-id="password-field"
               />
             </div>
             <router-link :to="{path: '/login'}">
-              {{ $t('views.auth.PasswordResetConfirm.link.back') }}
+              {{ t('views.auth.PasswordResetConfirm.link.back') }}
             </router-link>
             <button
               :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
               type="submit"
             >
-              {{ $t('views.auth.PasswordResetConfirm.button.update') }}
+              {{ t('views.auth.PasswordResetConfirm.button.update') }}
             </button>
           </template>
           <template v-else>
             <p>
-              {{ $t('views.auth.PasswordResetConfirm.message.requestSent') }}
+              {{ t('views.auth.PasswordResetConfirm.message.requestSent') }}
             </p>
           </template>
         </form>
@@ -108,13 +108,13 @@ const submit = async () => {
           class="ui positive message"
         >
           <h4 class="header">
-            {{ $t('views.auth.PasswordResetConfirm.header.success') }}
+            {{ t('views.auth.PasswordResetConfirm.header.success') }}
           </h4>
           <p>
-            {{ $t('views.auth.PasswordResetConfirm.message.success') }}
+            {{ t('views.auth.PasswordResetConfirm.message.success') }}
           </p>
           <router-link :to="{name: 'login'}">
-            {{ $t('views.auth.PasswordResetConfirm.link.login') }}
+            {{ t('views.auth.PasswordResetConfirm.link.login') }}
           </router-link>
         </div>
       </div>
diff --git a/front/src/views/auth/ProfileActivity.vue b/front/src/views/auth/ProfileActivity.vue
index f1541fab6..182dae8dd 100644
--- a/front/src/views/auth/ProfileActivity.vue
+++ b/front/src/views/auth/ProfileActivity.vue
@@ -27,7 +27,7 @@ const recentActivity = ref(0)
         :client-only="true"
       />
       <h2 class="ui header">
-        {{ $t('views.auth.ProfileActivity.header.recentlyListened') }}
+        {{ t('views.auth.ProfileActivity.header.recentlyListened') }}
       </h2>
       <div class="ui divider" />
       <track-widget
@@ -39,7 +39,7 @@ const recentActivity = ref(0)
     <div class="ui hidden divider" />
     <div>
       <h2 class="ui header">
-        {{ $t('views.auth.ProfileActivity.header.recentlyFavorited') }}
+        {{ t('views.auth.ProfileActivity.header.recentlyFavorited') }}
       </h2>
       <div class="ui divider" />
       <track-widget
@@ -50,7 +50,7 @@ const recentActivity = ref(0)
     <div class="ui hidden divider" />
     <div>
       <h2 class="ui header">
-        {{ $t('views.auth.ProfileActivity.header.playlists') }}
+        {{ t('views.auth.ProfileActivity.header.playlists') }}
       </h2>
       <div class="ui divider" />
       <playlist-widget
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 9dc52c42f..74345bb4b 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -100,7 +100,7 @@ watch(props, fetchData, { immediate: true })
                 class="basic item"
               >
                 <i class="external icon" />
-                {{ $t('views.auth.ProfileBase.link.domainView', {domain: object.domain}) }}
+                {{ t('views.auth.ProfileBase.link.domainView', {domain: object.domain}) }}
               </a>
               <div
                 v-for="obj in getReportableObjects({account: object})"
@@ -119,7 +119,7 @@ watch(props, fetchData, { immediate: true })
                 :to="{name: 'manage.moderation.accounts.detail', params: {id: object.full_username}}"
               >
                 <i class="wrench icon" />
-                {{ $t('views.auth.ProfileBase.link.moderation') }}
+                {{ t('views.auth.ProfileBase.link.moderation') }}
               </router-link>
             </div>
           </button>
@@ -152,7 +152,7 @@ watch(props, fetchData, { immediate: true })
             <template v-if="object.full_username === $store.state.auth.fullUsername">
               <div class="ui very small hidden divider" />
               <div class="ui basic success label">
-                {{ $t('views.auth.ProfileBase.label.self') }}
+                {{ t('views.auth.ProfileBase.label.self') }}
               </div>
             </template>
           </h1>
@@ -175,13 +175,13 @@ watch(props, fetchData, { immediate: true })
                   class="item"
                   :to="{name: 'profile.overview', params: routerParams}"
                 >
-                  {{ $t('views.auth.ProfileBase.link.overview') }}
+                  {{ t('views.auth.ProfileBase.link.overview') }}
                 </router-link>
                 <router-link
                   class="item"
                   :to="{name: 'profile.activity', params: routerParams}"
                 >
-                  {{ $t('views.auth.ProfileBase.link.activity') }}
+                  {{ t('views.auth.ProfileBase.link.activity') }}
                 </router-link>
               </div>
               <div class="ui hidden divider" />
diff --git a/front/src/views/auth/ProfileOverview.vue b/front/src/views/auth/ProfileOverview.vue
index 47f5f4ea3..c98ce3037 100644
--- a/front/src/views/auth/ProfileOverview.vue
+++ b/front/src/views/auth/ProfileOverview.vue
@@ -6,6 +6,9 @@ import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import ChannelForm from '~/components/audio/ChannelForm.vue'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -15,6 +18,10 @@ interface Props {
   object: Actor
 }
 
+const store = useStore()
+const { t } = useI18n()
+const router = useRouter()
+
 const emit = defineEmits<Events>()
 defineProps<Props>()
 
@@ -30,21 +37,21 @@ const createForm = ref()
 
 <template>
   <section>
-    <div v-if="$store.getters['ui/layoutVersion'] === 'small'">
+    <div v-if="store.getters['ui/layoutVersion'] === 'small'">
       <rendered-description
         :content="object.summary"
         :field-name="'summary'"
-        :update-url="`users/${$store.state.auth.username}/`"
-        :can-update="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername"
+        :update-url="`users/${store.state.auth.username}/`"
+        :can-update="store.state.auth.authenticated && object.full_username === store.state.auth.fullUsername"
         @updated="emit('updated', $event)"
       />
       <div class="ui hidden divider" />
     </div>
     <div>
       <h2 class="ui with-actions header">
-        {{ $t('views.auth.ProfileOverview.header.channels') }}
+        {{ t('views.auth.ProfileOverview.header.channels') }}
         <div
-          v-if="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername"
+          v-if="store.state.auth.authenticated && object.full_username === store.state.auth.fullUsername"
           class="actions"
         >
           <a
@@ -52,26 +59,26 @@ const createForm = ref()
             @click.stop.prevent="showCreateModal = true"
           >
             <i class="plus icon" />
-            {{ $t('views.auth.ProfileOverview.link.addNew') }}
+            {{ t('views.auth.ProfileOverview.link.addNew') }}
           </a>
         </div>
       </h2>
       <channels-widget :filters="{scope: `actor:${object.full_username}`}" />
       <h2 class="ui with-actions header">
-        {{ $t('views.auth.ProfileOverview.header.libraries') }}
+        {{ t('views.auth.ProfileOverview.header.libraries') }}
         <div
-          v-if="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername"
+          v-if="store.state.auth.authenticated && object.full_username === store.state.auth.fullUsername"
           class="actions"
         >
           <router-link :to="{name: 'content.libraries.index'}">
             <i class="plus icon" />
-            {{ $t('views.auth.ProfileOverview.link.addNew') }}
+            {{ t('views.auth.ProfileOverview.link.addNew') }}
           </router-link>
         </div>
       </h2>
       <library-widget :url="`federation/actors/${object.full_username}/libraries/`">
         <template #title>
-          {{ $t('views.auth.ProfileOverview.header.sharedLibraries') }}
+          {{ t('views.auth.ProfileOverview.header.sharedLibraries') }}
         </template>
       </library-widget>
     </div>
@@ -81,17 +88,17 @@ const createForm = ref()
         <span
           v-if="step === 1"
         >
-          {{ $t('views.auth.ProfileOverview.modal.createChannel.header') }}
+          {{ t('views.auth.ProfileOverview.modal.createChannel.header') }}
         </span>
         <span
           v-else-if="category === 'podcast'"
         >
-          {{ $t('views.auth.ProfileOverview.modal.createChannel.podcast.header') }}
+          {{ t('views.auth.ProfileOverview.modal.createChannel.podcast.header') }}
         </span>
         <span
           v-else
         >
-          {{ $t('views.auth.ProfileOverview.modal.createChannel.artist.header') }}
+          {{ t('views.auth.ProfileOverview.modal.createChannel.artist.header') }}
         </span>
       </h4>
       <div
@@ -106,7 +113,7 @@ const createForm = ref()
           @submittable="submittable = $event"
           @category="category = $event"
           @errored="modalContent.scrollTop = 0"
-          @created="$router.push({name: 'channels.detail', params: {id: $event.actor.preferred_username}})"
+          @created="router.push({name: 'channels.detail', params: {id: $event.actor.preferred_username}})"
         />
         <div class="ui hidden divider" />
       </div>
@@ -115,21 +122,21 @@ const createForm = ref()
           v-if="step === 1"
           class="ui basic deny button"
         >
-          {{ $t('views.auth.ProfileOverview.button.cancel') }}
+          {{ t('views.auth.ProfileOverview.button.cancel') }}
         </button>
         <button
           v-if="step > 1"
           class="ui basic button"
           @click.stop.prevent="step -= 1"
         >
-          {{ $t('views.auth.ProfileOverview.button.previous') }}
+          {{ t('views.auth.ProfileOverview.button.previous') }}
         </button>
         <button
           v-if="step === 1"
           class="ui primary button"
           @click.stop.prevent="step += 1"
         >
-          {{ $t('views.auth.ProfileOverview.button.next') }}
+          {{ t('views.auth.ProfileOverview.button.next') }}
         </button>
         <button
           v-if="step === 2"
@@ -138,7 +145,7 @@ const createForm = ref()
           :disabled="!submittable && !loading"
           @click.prevent.stop="createForm.submit"
         >
-          {{ $t('views.auth.ProfileOverview.button.createChannel') }}
+          {{ t('views.auth.ProfileOverview.button.createChannel') }}
         </button>
       </div>
     </semantic-modal>
diff --git a/front/src/views/auth/Signup.vue b/front/src/views/auth/Signup.vue
index e05432ab1..75beef700 100644
--- a/front/src/views/auth/Signup.vue
+++ b/front/src/views/auth/Signup.vue
@@ -31,7 +31,7 @@ const labels = computed(() => ({
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          {{ $t('views.auth.Signup.header.createAccount') }}
+          {{ t('views.auth.Signup.header.createAccount') }}
         </h2>
         <signup-form
           :default-invitation="defaultInvitation"
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 71fa3854b..47c5b1305 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -174,19 +174,19 @@ const updateSubscriptionCount = (delta: number) => {
                   <span
                     v-if="object.artist?.content_category === 'podcast'"
                   >
-                    {{ $t('views.channels.DetailBase.meta.episodes', totalTracks) }}
+                    {{ t('views.channels.DetailBase.meta.episodes', totalTracks) }}
                   </span>
                   <span
                     v-else
                   >
-                    {{ $t('views.channels.DetailBase.meta.tracks', totalTracks) }}
+                    {{ t('views.channels.DetailBase.meta.tracks', totalTracks) }}
                   </span>
                 </template>
                 <template v-if="object.attributed_to.full_username === $store.state.auth.fullUsername || $store.getters['channels/isSubscribed'](object.uuid)">
                   <br>
-                  {{ $t('views.channels.DetailBase.meta.subscribers', object?.subscriptions_count ?? 0) }}
+                  {{ t('views.channels.DetailBase.meta.subscribers', object?.subscriptions_count ?? 0) }}
                   <br>
-                  {{ $t('views.channels.DetailBase.meta.listenings', object?.downloads_count ?? 0) }}
+                  {{ t('views.channels.DetailBase.meta.listenings', object?.downloads_count ?? 0) }}
                 </template>
                 <div class="ui hidden small divider" />
                 <a
@@ -200,14 +200,14 @@ const updateSubscriptionCount = (delta: number) => {
                   class="tiny"
                 >
                   <h4 class="header">
-                    {{ $t('views.channels.DetailBase.modal.subscribe.header') }}
+                    {{ t('views.channels.DetailBase.modal.subscribe.header') }}
                   </h4>
                   <div class="scrollable content">
                     <div class="description">
                       <template v-if="$store.state.auth.authenticated">
                         <h3>
                           <i class="user icon" />
-                          {{ $t('views.channels.DetailBase.modal.subscribe.funkwhale.header') }}
+                          {{ t('views.channels.DetailBase.modal.subscribe.funkwhale.header') }}
                         </h3>
                         <subscribe-button
                           :channel="object"
@@ -218,20 +218,20 @@ const updateSubscriptionCount = (delta: number) => {
                       <template v-if="object.rss_url">
                         <h3>
                           <i class="feed icon" />
-                          {{ $t('views.channels.DetailBase.modal.subscribe.rss.header') }}
+                          {{ t('views.channels.DetailBase.modal.subscribe.rss.header') }}
                         </h3>
                         <p>
-                          {{ $t('views.channels.DetailBase.modal.subscribe.rss.content.help') }}
+                          {{ t('views.channels.DetailBase.modal.subscribe.rss.content.help') }}
                         </p>
                         <copy-input :value="object.rss_url" />
                       </template>
                       <template v-if="object.actor">
                         <h3>
                           <i class="bell icon" />
-                          {{ $t('views.channels.DetailBase.modal.subscribe.fediverse.header') }}
+                          {{ t('views.channels.DetailBase.modal.subscribe.fediverse.header') }}
                         </h3>
                         <p>
-                          {{ $t('views.channels.DetailBase.modal.subscribe.fediverse.content.help') }}
+                          {{ t('views.channels.DetailBase.modal.subscribe.fediverse.content.help') }}
                         </p>
                         <copy-input
                           id="copy-tag"
@@ -242,7 +242,7 @@ const updateSubscriptionCount = (delta: number) => {
                   </div>
                   <div class="actions">
                     <button class="ui basic deny button">
-                      {{ $t('views.channels.DetailBase.button.cancel') }}
+                      {{ t('views.channels.DetailBase.button.cancel') }}
                     </button>
                   </div>
                 </semantic-modal>
@@ -260,7 +260,7 @@ const updateSubscriptionCount = (delta: number) => {
                       @click.prevent="showEmbedModal = !showEmbedModal"
                     >
                       <i class="code icon" />
-                      {{ $t('views.channels.DetailBase.button.embed') }}
+                      {{ t('views.channels.DetailBase.button.embed') }}
                     </a>
                     <a
                       v-if="object.actor && object.actor.domain != $store.getters['instance/domain']"
@@ -269,7 +269,7 @@ const updateSubscriptionCount = (delta: number) => {
                       class="basic item"
                     >
                       <i class="external icon" />
-                      {{ $t('views.channels.DetailBase.link.domainView', {domain: object.actor.domain}) }}
+                      {{ t('views.channels.DetailBase.link.domainView', {domain: object.actor.domain}) }}
                     </a>
                     <div class="divider" />
                     <a
@@ -290,7 +290,7 @@ const updateSubscriptionCount = (delta: number) => {
                         @click.stop.prevent="showEditModal = true"
                       >
                         <i class="edit icon" />
-                        {{ $t('views.channels.DetailBase.button.edit') }}
+                        {{ t('views.channels.DetailBase.button.edit') }}
                       </a>
                       <dangerous-button
                         v-if="object"
@@ -298,22 +298,22 @@ const updateSubscriptionCount = (delta: number) => {
                         @confirm="remove()"
                       >
                         <i class="ui trash icon" />
-                        {{ $t('views.channels.DetailBase.button.delete') }}
+                        {{ t('views.channels.DetailBase.button.delete') }}
                         <template #modal-header>
                           <p>
-                            {{ $t('views.channels.DetailBase.modal.delete.header') }}
+                            {{ t('views.channels.DetailBase.modal.delete.header') }}
                           </p>
                         </template>
                         <template #modal-content>
                           <div>
                             <p>
-                              {{ $t('views.channels.DetailBase.modal.delete.content.warning') }}
+                              {{ t('views.channels.DetailBase.modal.delete.content.warning') }}
                             </p>
                           </div>
                         </template>
                         <template #modal-confirm>
                           <p>
-                            {{ $t('views.channels.DetailBase.button.confirm') }}
+                            {{ t('views.channels.DetailBase.button.confirm') }}
                           </p>
                         </template>
                       </dangerous-button>
@@ -325,7 +325,7 @@ const updateSubscriptionCount = (delta: number) => {
                         :to="{name: 'manage.channels.detail', params: {id: object.uuid}}"
                       >
                         <i class="wrench icon" />
-                        {{ $t('views.channels.DetailBase.link.moderation') }}
+                        {{ t('views.channels.DetailBase.link.moderation') }}
                       </router-link>
                     </template>
                   </div>
@@ -356,7 +356,7 @@ const updateSubscriptionCount = (delta: number) => {
                     target="_blank"
                   >
                     <i class="external link icon" />
-                    {{ $t('views.channels.DetailBase.link.mirrored', {domain: externalDomain}) }}
+                    {{ t('views.channels.DetailBase.link.mirrored', {domain: externalDomain}) }}
                   </a>
                 </div>
               </div>
@@ -371,7 +371,7 @@ const updateSubscriptionCount = (delta: number) => {
                   @click.prevent.stop="$store.commit('channels/showUploadModal', {show: true, config: {channel: object}})"
                 >
                   <i class="upload icon" />
-                  {{ $t('views.channels.DetailBase.button.upload') }}
+                  {{ t('views.channels.DetailBase.button.upload') }}
                 </button>
               </div>
               <div class="ui buttons">
@@ -380,7 +380,7 @@ const updateSubscriptionCount = (delta: number) => {
                   class="vibrant"
                   :artist="object.artist"
                 >
-                  {{ $t('views.channels.DetailBase.button.play') }}
+                  {{ t('views.channels.DetailBase.button.play') }}
                 </play-button>
               </div>
               <div class="ui buttons">
@@ -396,7 +396,7 @@ const updateSubscriptionCount = (delta: number) => {
                 v-model:show="showEmbedModal"
               >
                 <h4 class="header">
-                  {{ $t('views.channels.DetailBase.modal.embed.header') }}
+                  {{ t('views.channels.DetailBase.modal.embed.header') }}
                 </h4>
                 <div class="scrolling content">
                   <div class="description">
@@ -408,7 +408,7 @@ const updateSubscriptionCount = (delta: number) => {
                 </div>
                 <div class="actions">
                   <button class="ui basic deny button">
-                    {{ $t('views.channels.DetailBase.button.cancel') }}
+                    {{ t('views.channels.DetailBase.button.cancel') }}
                   </button>
                 </div>
               </semantic-modal>
@@ -420,12 +420,12 @@ const updateSubscriptionCount = (delta: number) => {
                   <span
                     v-if="object.artist?.content_category === 'podcast'"
                   >
-                    {{ $t('views.channels.DetailBase.header.podcastChannel') }}
+                    {{ t('views.channels.DetailBase.header.podcastChannel') }}
                   </span>
                   <span
                     v-else
                   >
-                    {{ $t('views.channels.DetailBase.header.artistChannel') }}
+                    {{ t('views.channels.DetailBase.header.artistChannel') }}
                   </span>
                 </h4>
                 <div class="scrolling content">
@@ -440,14 +440,14 @@ const updateSubscriptionCount = (delta: number) => {
                 </div>
                 <div class="actions">
                   <button class="ui left floated basic deny button">
-                    {{ $t('views.channels.DetailBase.button.cancel') }}
+                    {{ t('views.channels.DetailBase.button.cancel') }}
                   </button>
                   <button
                     :class="['ui', 'primary', 'confirm', {loading: edit.loading}, 'button']"
                     :disabled="!edit.submittable"
                     @click.stop="editForm?.submit"
                   >
-                    {{ $t('views.channels.DetailBase.button.updateChannel') }}
+                    {{ t('views.channels.DetailBase.button.updateChannel') }}
                   </button>
                 </div>
               </semantic-modal>
@@ -468,7 +468,7 @@ const updateSubscriptionCount = (delta: number) => {
 
                 :to="{name: 'channels.detail', params: {id: id}}"
               >
-                {{ $t('views.channels.DetailBase.link.channelOverview') }}
+                {{ t('views.channels.DetailBase.link.channelOverview') }}
               </router-link>
               <router-link
                 class="item"
@@ -478,12 +478,12 @@ const updateSubscriptionCount = (delta: number) => {
                 <span
                   v-if="isPodcast"
                 >
-                  {{ $t('views.channels.DetailBase.link.channelEpisodes') }}
+                  {{ t('views.channels.DetailBase.link.channelEpisodes') }}
                 </span>
                 <span
                   v-else
                 >
-                  {{ $t('views.channels.DetailBase.link.channelTracks') }}
+                  {{ t('views.channels.DetailBase.link.channelTracks') }}
                 </span>
               </router-link>
             </div>
diff --git a/front/src/views/channels/DetailOverview.vue b/front/src/views/channels/DetailOverview.vue
index 61c48451e..0e8a0a0f3 100644
--- a/front/src/views/channels/DetailOverview.vue
+++ b/front/src/views/channels/DetailOverview.vue
@@ -4,9 +4,11 @@ import type { Channel, Upload } from '~/types'
 import { computed, ref, reactive, watch } from 'vue'
 import { whenever } from '@vueuse/core'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
+
 import ChannelEntries from '~/components/audio/ChannelEntries.vue'
 import ChannelSeries from '~/components/audio/ChannelSeries.vue'
 import AlbumModal from '~/components/channels/AlbumModal.vue'
@@ -17,6 +19,8 @@ interface Props {
   object: Channel
 }
 
+const { t } = useI18n()
+
 const props = defineProps<Props>()
 
 const store = useStore()
@@ -101,15 +105,15 @@ const albumModal = ref()
           @click="pendingUploads.length = 0"
         />
         <h3 class="ui header">
-          {{ $t('views.channels.DetailOverview.header.uploadsSuccess') }}
+          {{ t('views.channels.DetailOverview.header.uploadsSuccess') }}
         </h3>
         <p>
-          {{ $t('views.channels.DetailOverview.meta.progress', {finished: processedUploads.length, total: pendingUploads.length}) }}
+          {{ t('views.channels.DetailOverview.meta.progress', {finished: processedUploads.length, total: pendingUploads.length}) }}
         </p>
       </template>
       <template v-else-if="isOver">
         <h3 class="ui header">
-          {{ $t('views.channels.DetailOverview.header.uploadsFailure') }}
+          {{ t('views.channels.DetailOverview.header.uploadsFailure') }}
         </h3>
         <div class="ui hidden divider" />
         <router-link
@@ -117,30 +121,30 @@ const albumModal = ref()
           class="ui basic button"
           :to="{name: 'content.libraries.files', query: {q: 'status:skipped'}}"
         >
-          {{ $t('views.channels.DetailOverview.link.skippedUploads') }}
+          {{ t('views.channels.DetailOverview.link.skippedUploads') }}
         </router-link>
         <router-link
           v-if="erroredUploads.length > 0"
           class="ui basic button"
           :to="{name: 'content.libraries.files', query: {q: 'status:errored'}}"
         >
-          {{ $t('views.channels.DetailOverview.link.erroredUploads') }}
+          {{ t('views.channels.DetailOverview.link.erroredUploads') }}
         </router-link>
       </template>
       <template v-else>
         <div class="ui inline right floated active loader" />
         <h3 class="ui header">
-          {{ $t('views.channels.DetailOverview.header.uploadsProcessing') }}
+          {{ t('views.channels.DetailOverview.header.uploadsProcessing') }}
         </h3>
         <p>
-          {{ $t('views.channels.DetailOverview.message.processing') }}
+          {{ t('views.channels.DetailOverview.message.processing') }}
         </p>
         <p>
-          {{ $t('views.channels.DetailOverview.meta.progress', {finished: processedUploads.length, total: pendingUploads.length}) }}
+          {{ t('views.channels.DetailOverview.meta.progress', {finished: processedUploads.length, total: pendingUploads.length}) }}
         </p>
       </template>
     </div>
-    <div v-if="$store.getters['ui/layoutVersion'] === 'small'">
+    <div v-if="store.getters['ui/layoutVersion'] === 'small'">
       <rendered-description
         :content="object.artist?.description"
         :update-url="`channels/${object.uuid}/`"
@@ -159,12 +163,12 @@ const albumModal = ref()
         <span
           v-if="isPodcast"
         >
-          {{ $t('views.channels.DetailOverview.header.latestEpisodes') }}
+          {{ t('views.channels.DetailOverview.header.latestEpisodes') }}
         </span>
         <span
           v-else
         >
-          {{ $t('views.channels.DetailOverview.header.latestTracks') }}
+          {{ t('views.channels.DetailOverview.header.latestTracks') }}
         </span>
       </h2>
     </channel-entries>
@@ -178,12 +182,12 @@ const albumModal = ref()
         <span
           v-if="isPodcast"
         >
-          {{ $t('views.channels.DetailOverview.header.series') }}
+          {{ t('views.channels.DetailOverview.header.series') }}
         </span>
         <span
           v-else
         >
-          {{ $t('views.channels.DetailOverview.header.albums') }}
+          {{ t('views.channels.DetailOverview.header.albums') }}
         </span>
         <div
           v-if="isOwner"
@@ -191,7 +195,7 @@ const albumModal = ref()
         >
           <a @click.stop.prevent="albumModal.show = true">
             <i class="plus icon" />
-            {{ $t('views.channels.DetailOverview.link.addAlbum') }}
+            {{ t('views.channels.DetailOverview.link.addAlbum') }}
           </a>
         </div>
       </h2>
diff --git a/front/src/views/channels/SubscriptionsList.vue b/front/src/views/channels/SubscriptionsList.vue
index 9bc1233d9..8f64f3f1a 100644
--- a/front/src/views/channels/SubscriptionsList.vue
+++ b/front/src/views/channels/SubscriptionsList.vue
@@ -66,7 +66,7 @@ const showSubscribeModal = ref(false)
         <div class="actions">
           <a @click.stop.prevent="showSubscribeModal = true">
             <i class="plus icon" />
-            {{ $t('views.channels.SubscriptionsList.link.addNew') }}
+            {{ t('views.channels.SubscriptionsList.link.addNew') }}
           </a>
         </div>
       </h1>
@@ -76,7 +76,7 @@ const showSubscribeModal = ref(false)
         :fullscreen="false"
       >
         <h2 class="header">
-          {{ $t('views.channels.SubscriptionsList.modal.subscription.header') }}
+          {{ t('views.channels.SubscriptionsList.modal.subscription.header') }}
         </h2>
         <div
           ref="modalContent"
@@ -92,7 +92,7 @@ const showSubscribeModal = ref(false)
         </div>
         <div class="actions">
           <button class="ui basic deny button">
-            {{ $t('views.channels.SubscriptionsList.button.cancel') }}
+            {{ t('views.channels.SubscriptionsList.button.cancel') }}
           </button>
           <button
             form="remote-search"
@@ -100,7 +100,7 @@ const showSubscribeModal = ref(false)
             class="ui primary button"
           >
             <i class="bookmark icon" />
-            {{ $t('views.channels.SubscriptionsList.button.subscribe') }}
+            {{ t('views.channels.SubscriptionsList.button.subscribe') }}
           </button>
         </div>
       </semantic-modal>
diff --git a/front/src/views/content/Base.vue b/front/src/views/content/Base.vue
index e021074a2..32dc0e5ec 100644
--- a/front/src/views/content/Base.vue
+++ b/front/src/views/content/Base.vue
@@ -24,13 +24,13 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'content.libraries.index'}"
       >
-        {{ $t('views.content.Base.link.libraries') }}
+        {{ t('views.content.Base.link.libraries') }}
       </router-link>
       <router-link
         class="ui item"
         :to="{name: 'content.libraries.files'}"
       >
-        {{ $t('views.content.Base.link.tracks') }}
+        {{ t('views.content.Base.link.tracks') }}
       </router-link>
     </nav>
     <router-view :key="$route.fullPath" />
diff --git a/front/src/views/content/Home.vue b/front/src/views/content/Home.vue
index 8cee5bf23..25c0dc803 100644
--- a/front/src/views/content/Home.vue
+++ b/front/src/views/content/Home.vue
@@ -24,51 +24,51 @@ const defaultQuota = computed(() => humanSize(quota.value * 1e6))
     <div class="ui text container">
       <h1>{{ labels.title }}</h1>
       <p>
-        <strong>{{ $t('views.content.Home.help.uploadQuota', { quota: defaultQuota }) }}</strong>
+        <strong>{{ t('views.content.Home.help.uploadQuota', { quota: defaultQuota }) }}</strong>
       </p>
       <div class="ui segment">
         <h2>
           <i class="feed icon" />&nbsp;
-          {{ $t('views.content.Home.header.channel') }}
+          {{ t('views.content.Home.header.channel') }}
         </h2>
         <p>
-          {{ $t('views.content.Home.description.channel.1') }}&#32;{{ $t('views.content.Home.description.channel.2') }}
+          {{ t('views.content.Home.description.channel.1') }}&#32;{{ t('views.content.Home.description.channel.2') }}
         </p>
         <router-link
           :to="{name: 'profile.overview', params: {username: store.state.auth.username}, hash: '#channels'}"
           class="ui primary button"
         >
-          {{ $t('views.content.Home.button.start') }}
+          {{ t('views.content.Home.button.start') }}
         </router-link>
       </div>
       <div class="ui segment">
         <h2>
           <i class="cloud icon" />&nbsp;
-          {{ $t('views.content.Home.header.upload') }}
+          {{ t('views.content.Home.header.upload') }}
         </h2>
         <p>
-          {{ $t('views.content.Home.description.upload') }}
+          {{ t('views.content.Home.description.upload') }}
         </p>
         <router-link
           :to="{name: 'content.libraries.index'}"
           class="ui primary button"
         >
-          {{ $t('views.content.Home.button.start') }}
+          {{ t('views.content.Home.button.start') }}
         </router-link>
       </div>
       <div class="ui segment">
         <h2>
           <i class="download icon" />&nbsp;
-          {{ $t('views.content.Home.header.follow') }}
+          {{ t('views.content.Home.header.follow') }}
         </h2>
         <p>
-          {{ $t('views.content.Home.description.follow') }}
+          {{ t('views.content.Home.description.follow') }}
         </p>
         <router-link
           :to="{name: 'content.remote.index'}"
           class="ui primary button"
         >
-          {{ $t('views.content.Home.button.start') }}
+          {{ t('views.content.Home.button.start') }}
         </router-link>
       </div>
     </div>
diff --git a/front/src/views/content/channels/CardUpload.vue b/front/src/views/content/channels/CardUpload.vue
index 876944598..e0ced75dc 100644
--- a/front/src/views/content/channels/CardUpload.vue
+++ b/front/src/views/content/channels/CardUpload.vue
@@ -55,7 +55,7 @@ const updatedAgo = computed(() => moment(props.channel.artist?.modification_date
         <span
           class="meta ellipsis"
         >
-          {{ $t('components.audio.ChannelCard.meta.tracks', channel.artist?.tracks_count ?? 0) }}
+          {{ t('components.audio.ChannelCard.meta.tracks', channel.artist?.tracks_count ?? 0) }}
         </span>
         <tags-list
           style="pointer-events:none;"
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 5406c4157..6569f5474 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -69,7 +69,7 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
           {{ humanSize(library.size) }}
         </span>
         <i class="music icon" />
-        {{ $t('views.content.libraries.Card.meta.tracks', library.uploads_count) }}
+        {{ t('views.content.libraries.Card.meta.tracks', library.uploads_count) }}
       </div>
     </div>
     <div class="ui bottom basic attached buttons">
@@ -77,13 +77,13 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
         :to="{name: 'library.detail.upload', params: {id: library.uuid}}"
         class="ui button"
       >
-        {{ $t('views.content.libraries.Card.button.upload') }}
+        {{ t('views.content.libraries.Card.button.upload') }}
       </router-link>
       <router-link
         :to="{name: 'library.detail', params: {id: library.uuid}}"
         class="ui button"
       >
-        {{ $t('views.content.libraries.Card.link.details') }}
+        {{ t('views.content.libraries.Card.link.details') }}
       </router-link>
     </div>
   </div>
diff --git a/front/src/views/content/libraries/CardUpload.vue b/front/src/views/content/libraries/CardUpload.vue
index 38904324a..eaeff9a45 100644
--- a/front/src/views/content/libraries/CardUpload.vue
+++ b/front/src/views/content/libraries/CardUpload.vue
@@ -65,7 +65,7 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
       </div>
       <div class="content">
         <i class="music icon" />
-        {{ $t('views.content.libraries.Card.meta.tracks', library.uploads_count) }}
+        {{ t('views.content.libraries.Card.meta.tracks', library.uploads_count) }}
       </div>
     </div>
     <!-- <div class="ui bottom basic attached buttons">
@@ -73,7 +73,7 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
         :to="{name: 'library.detail.upload', params: {id: library.uuid}}"
         class="ui button"
       >
-        {{ $t('views.content.libraries.Card.button.upload') }}
+        {{ t('views.content.libraries.Card.button.upload') }}
       </router-link>
     </div> -->
   </fw-card>
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index 805d32848..4cf9ba28a 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -138,7 +138,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
       <div class="fields">
         <div class="ui six wide field">
           <label for="files-search">
-            {{ $t('views.content.libraries.FilesTable.label.search') }}
+            {{ t('views.content.libraries.FilesTable.label.search') }}
           </label>
           <form @submit.prevent="query = search.value">
             <input
@@ -153,7 +153,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
         </div>
         <div class="field">
           <label for="import-status">
-            {{ $t('views.content.libraries.FilesTable.label.importStatus') }}
+            {{ t('views.content.libraries.FilesTable.label.importStatus') }}
           </label>
           <select
             id="import-status"
@@ -162,28 +162,28 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
           >
             <option value>
-              {{ $t('views.content.libraries.FilesTable.option.status.all') }}
+              {{ t('views.content.libraries.FilesTable.option.status.all') }}
             </option>
             <option value="draft">
-              {{ $t('views.content.libraries.FilesTable.option.status.draft') }}
+              {{ t('views.content.libraries.FilesTable.option.status.draft') }}
             </option>
             <option value="pending">
-              {{ $t('views.content.libraries.FilesTable.option.status.pending') }}
+              {{ t('views.content.libraries.FilesTable.option.status.pending') }}
             </option>
             <option value="skipped">
-              {{ $t('views.content.libraries.FilesTable.option.status.skipped') }}
+              {{ t('views.content.libraries.FilesTable.option.status.skipped') }}
             </option>
             <option value="errored">
-              {{ $t('views.content.libraries.FilesTable.option.status.failed') }}
+              {{ t('views.content.libraries.FilesTable.option.status.failed') }}
             </option>
             <option value="finished">
-              {{ $t('views.content.libraries.FilesTable.option.status.finished') }}
+              {{ t('views.content.libraries.FilesTable.option.status.finished') }}
             </option>
           </select>
         </div>
         <div class="field">
           <label for="ordering-select">
-            {{ $t('views.content.libraries.FilesTable.ordering.label') }}
+            {{ t('views.content.libraries.FilesTable.ordering.label') }}
           </label>
           <select
             id="ordering-select"
@@ -201,7 +201,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
         </div>
         <div class="field">
           <label for="ordering-direction">
-            {{ $t('views.content.libraries.FilesTable.ordering.direction.label') }}
+            {{ t('views.content.libraries.FilesTable.ordering.direction.label') }}
           </label>
           <select
             id="ordering-direction"
@@ -209,10 +209,10 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             class="ui dropdown"
           >
             <option value="+">
-              {{ $t('views.content.libraries.FilesTable.ordering.direction.ascending') }}
+              {{ t('views.content.libraries.FilesTable.ordering.direction.ascending') }}
             </option>
             <option value="-">
-              {{ $t('views.content.libraries.FilesTable.ordering.direction.descending') }}
+              {{ t('views.content.libraries.FilesTable.ordering.direction.descending') }}
             </option>
           </select>
         </div>
@@ -236,7 +236,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
       >
         <div class="ui icon header">
           <i class="upload icon" />
-          {{ $t('views.content.libraries.FilesTable.empty.noTracks') }}
+          {{ t('views.content.libraries.FilesTable.empty.noTracks') }}
         </div>
       </div>
       <action-table
@@ -254,25 +254,25 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
       >
         <template #header-cells>
           <th>
-            {{ $t('views.content.libraries.FilesTable.table.file.header.title') }}
+            {{ t('views.content.libraries.FilesTable.table.file.header.title') }}
           </th>
           <th>
-            {{ $t('views.content.libraries.FilesTable.table.file.header.artist') }}
+            {{ t('views.content.libraries.FilesTable.table.file.header.artist') }}
           </th>
           <th>
-            {{ $t('views.content.libraries.FilesTable.table.file.header.album') }}
+            {{ t('views.content.libraries.FilesTable.table.file.header.album') }}
           </th>
           <th>
-            {{ $t('views.content.libraries.FilesTable.table.file.header.uploadDate') }}
+            {{ t('views.content.libraries.FilesTable.table.file.header.uploadDate') }}
           </th>
           <th>
-            {{ $t('views.content.libraries.FilesTable.table.file.header.importStatus') }}
+            {{ t('views.content.libraries.FilesTable.table.file.header.importStatus') }}
           </th>
           <th>
-            {{ $t('views.content.libraries.FilesTable.table.file.header.duration') }}
+            {{ t('views.content.libraries.FilesTable.table.file.header.duration') }}
           </th>
           <th>
-            {{ $t('views.content.libraries.FilesTable.table.file.header.size') }}
+            {{ t('views.content.libraries.FilesTable.table.file.header.size') }}
           </th>
         </template>
         <template
@@ -330,13 +330,13 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             {{ time.parse(scope.obj.duration) }}
           </td>
           <td v-else>
-            {{ $t('views.content.libraries.FilesTable.notApplicable') }}
+            {{ t('views.content.libraries.FilesTable.notApplicable') }}
           </td>
           <td v-if="scope.obj.size">
             {{ humanSize(scope.obj.size) }}
           </td>
           <td v-else>
-            {{ $t('views.content.libraries.FilesTable.notApplicable') }}
+            {{ t('views.content.libraries.FilesTable.notApplicable') }}
           </td>
         </template>
       </action-table>
@@ -351,7 +351,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
       />
 
       <span v-if="result && result.results.length > 0">
-        {{ $t('views.content.libraries.FilesTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+        {{ t('views.content.libraries.FilesTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
       </span>
     </div>
   </div>
diff --git a/front/src/views/content/libraries/Form.vue b/front/src/views/content/libraries/Form.vue
index d630ffee8..4ec5f2280 100644
--- a/front/src/views/content/libraries/Form.vue
+++ b/front/src/views/content/libraries/Form.vue
@@ -94,7 +94,7 @@ const remove = async () => {
     @submit.prevent="submit"
   >
     <p v-if="!library">
-      {{ $t('views.content.libraries.Form.description.library') }}
+      {{ t('views.content.libraries.Form.description.library') }}
     </p>
     <div
       v-if="errors.length > 0"
@@ -102,7 +102,7 @@ const remove = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('views.content.libraries.Form.header.failure') }}
+        {{ t('views.content.libraries.Form.header.failure') }}
       </h4>
       <ul class="list">
         <li
@@ -114,7 +114,7 @@ const remove = async () => {
       </ul>
     </div>
     <div class="required field">
-      <label for="current-name">{{ $t('views.content.libraries.Form.label.name') }}</label>
+      <label for="current-name">{{ t('views.content.libraries.Form.label.name') }}</label>
       <input
         id="current-name"
         v-model="currentName"
@@ -125,7 +125,7 @@ const remove = async () => {
       >
     </div>
     <div class="field">
-      <label for="current-description">{{ $t('views.content.libraries.Form.label.description') }}</label>
+      <label for="current-description">{{ t('views.content.libraries.Form.label.description') }}</label>
       <textarea
         id="current-description"
         v-model="currentDescription"
@@ -134,9 +134,9 @@ const remove = async () => {
       />
     </div>
     <div class="field">
-      <label for="visibility-level">{{ $t('views.content.libraries.Form.label.visibility') }}</label>
+      <label for="visibility-level">{{ t('views.content.libraries.Form.label.visibility') }}</label>
       <p>
-        {{ $t('views.content.libraries.Form.description.visibility') }}
+        {{ t('views.content.libraries.Form.description.visibility') }}
       </p>
       <select
         id="visibility-level"
@@ -159,12 +159,12 @@ const remove = async () => {
       <span
         v-if="library"
       >
-        {{ $t('views.content.libraries.Form.button.update') }}
+        {{ t('views.content.libraries.Form.button.update') }}
       </span>
       <span
         v-else
       >
-        {{ $t('views.content.libraries.Form.button.create') }}
+        {{ t('views.content.libraries.Form.button.create') }}
       </span>
     </button>
     <dangerous-button
@@ -173,20 +173,20 @@ const remove = async () => {
       class="ui right floated basic danger button"
       @confirm="remove"
     >
-      {{ $t('views.content.libraries.Form.button.delete') }}
+      {{ t('views.content.libraries.Form.button.delete') }}
       <template #modal-header>
         <p>
-          {{ $t('views.content.libraries.Form.modal.delete.header') }}
+          {{ t('views.content.libraries.Form.modal.delete.header') }}
         </p>
       </template>
       <template #modal-content>
         <p>
-          {{ $t('views.content.libraries.Form.modal.delete.content.warning') }}
+          {{ t('views.content.libraries.Form.modal.delete.content.warning') }}
         </p>
       </template>
       <template #modal-confirm>
         <div>
-          {{ $t('views.content.libraries.Form.button.confirm') }}
+          {{ t('views.content.libraries.Form.button.confirm') }}
         </div>
       </template>
     </dangerous-button>
diff --git a/front/src/views/content/libraries/Home.vue b/front/src/views/content/libraries/Home.vue
index 6e77a0545..6e5381194 100644
--- a/front/src/views/content/libraries/Home.vue
+++ b/front/src/views/content/libraries/Home.vue
@@ -11,6 +11,10 @@ import Quota from './Quota.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
 const router = useRouter()
 
 const libraries = ref([] as Library[])
@@ -47,7 +51,7 @@ const libraryCreated = (library: Library) => {
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        {{ $t('views.content.libraries.Home.loading.libraries') }}
+        {{ t('views.content.libraries.Home.loading.libraries') }}
       </div>
     </div>
     <div
@@ -55,11 +59,11 @@ const libraryCreated = (library: Library) => {
       class="ui text container"
     >
       <h1 class="ui header">
-        {{ $t('views.content.libraries.Home.header.libraries') }}
+        {{ t('views.content.libraries.Home.header.libraries') }}
       </h1>
 
       <p v-if="libraries.length == 0">
-        {{ $t('views.content.libraries.Home.empty.noLibrary') }}
+        {{ t('views.content.libraries.Home.empty.noLibrary') }}
       </p>
       <a
         :aria-expanded="!hiddenForm"
@@ -74,7 +78,7 @@ const libraryCreated = (library: Library) => {
           v-else
           class="minus icon"
         />
-        {{ $t('views.content.libraries.Home.link.createLibrary') }}
+        {{ t('views.content.libraries.Home.link.createLibrary') }}
       </a>
       <library-form
         v-if="!hiddenForm"
diff --git a/front/src/views/content/libraries/Quota.vue b/front/src/views/content/libraries/Quota.vue
index 1d0224c46..90463dd9f 100644
--- a/front/src/views/content/libraries/Quota.vue
+++ b/front/src/views/content/libraries/Quota.vue
@@ -8,6 +8,9 @@ import { computed, ref } from 'vue'
 import useErrorHandler from '~/composables/useErrorHandler'
 
 import axios from 'axios'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const quotaStatus = ref()
 const progress = computed(() => !quotaStatus.value
@@ -53,14 +56,14 @@ const purgeErroredFiles = () => purge('errored')
 <template>
   <div class="ui segment">
     <h3 class="ui header">
-      {{ $t('views.content.libraries.Quota.header.currentUsage') }}
+      {{ t('views.content.libraries.Quota.header.currentUsage') }}
     </h3>
     <div
       v-if="isLoading"
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        {{ $t('views.content.libraries.Quota.loading.currentUsage') }}
+        {{ t('views.content.libraries.Quota.loading.currentUsage') }}
       </div>
     </div>
     <div
@@ -72,14 +75,14 @@ const purgeErroredFiles = () => purge('errored')
         :style="{width: `${progress}%`}"
       >
         <div class="progress">
-          {{ $t('views.content.libraries.Quota.label.percentUsed', {progress: progress}) }}
+          {{ t('views.content.libraries.Quota.label.percentUsed', {progress: progress}) }}
         </div>
       </div>
       <div
         v-if="quotaStatus"
         class="label"
       >
-        {{ $t('views.content.libraries.Quota.label.currentUsage', {max: humanSize(quotaStatus.max * 1000 * 1000), current: humanSize(quotaStatus.current * 1000 * 1000)}) }}
+        {{ t('views.content.libraries.Quota.label.currentUsage', {max: humanSize(quotaStatus.max * 1000 * 1000), current: humanSize(quotaStatus.current * 1000 * 1000)}) }}
       </div>
     </div>
     <div class="ui hidden divider" />
@@ -96,7 +99,7 @@ const purgeErroredFiles = () => purge('errored')
             {{ humanSize(quotaStatus.pending * 1000 * 1000) }}
           </div>
           <div class="label">
-            {{ $t('views.content.libraries.Quota.label.pending') }}
+            {{ t('views.content.libraries.Quota.label.pending') }}
           </div>
         </div>
         <div>
@@ -104,27 +107,27 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic primary tiny button"
             :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}"
           >
-            {{ $t('views.content.libraries.Quota.link.viewFiles') }}
+            {{ t('views.content.libraries.Quota.link.viewFiles') }}
           </router-link>
 
           <dangerous-button
             class="ui basic tiny button"
             :action="purgePendingFiles"
           >
-            {{ $t('views.content.libraries.Quota.button.purge') }}
+            {{ t('views.content.libraries.Quota.button.purge') }}
             <template #modal-header>
               <p>
-                {{ $t('views.content.libraries.Quota.modal.purgePending.header') }}
+                {{ t('views.content.libraries.Quota.modal.purgePending.header') }}
               </p>
             </template>
             <template #modal-content>
               <p>
-                {{ $t('views.content.libraries.Quota.modal.purgePending.content.description') }}
+                {{ t('views.content.libraries.Quota.modal.purgePending.content.description') }}
               </p>
             </template>
             <template #modal-confirm>
               <div>
-                {{ $t('views.content.libraries.Quota.button.purge') }}
+                {{ t('views.content.libraries.Quota.button.purge') }}
               </div>
             </template>
           </dangerous-button>
@@ -139,7 +142,7 @@ const purgeErroredFiles = () => purge('errored')
             {{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
           </div>
           <div class="label">
-            {{ $t('views.content.libraries.Quota.label.skipped') }}
+            {{ t('views.content.libraries.Quota.label.skipped') }}
           </div>
         </div>
         <div>
@@ -147,26 +150,26 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic primary tiny button"
             :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'skipped'}])}}"
           >
-            {{ $t('views.content.libraries.Quota.link.viewFiles') }}
+            {{ t('views.content.libraries.Quota.link.viewFiles') }}
           </router-link>
           <dangerous-button
             class="ui basic tiny button"
             :action="purgeSkippedFiles"
           >
-            {{ $t('views.content.libraries.Quota.button.purge') }}
+            {{ t('views.content.libraries.Quota.button.purge') }}
             <template #modal-header>
               <p>
-                {{ $t('views.content.libraries.Quota.modal.purgeSkipped.header') }}
+                {{ t('views.content.libraries.Quota.modal.purgeSkipped.header') }}
               </p>
             </template>
             <template #modal-content>
               <p>
-                {{ $t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
+                {{ t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
               </p>
             </template>
             <template #modal-confirm>
               <div>
-                {{ $t('views.content.libraries.Quota.button.purge') }}
+                {{ t('views.content.libraries.Quota.button.purge') }}
               </div>
             </template>
           </dangerous-button>
@@ -181,7 +184,7 @@ const purgeErroredFiles = () => purge('errored')
             {{ humanSize(quotaStatus.errored * 1000 * 1000) }}
           </div>
           <div class="label">
-            {{ $t('views.content.libraries.Quota.label.errored') }}
+            {{ t('views.content.libraries.Quota.label.errored') }}
           </div>
         </div>
         <div>
@@ -189,26 +192,26 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic primary tiny button"
             :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'errored'}])}}"
           >
-            {{ $t('views.content.libraries.Quota.link.viewFiles') }}
+            {{ t('views.content.libraries.Quota.link.viewFiles') }}
           </router-link>
           <dangerous-button
             class="ui basic tiny button"
             :action="purgeErroredFiles"
           >
-            {{ $t('views.content.libraries.Quota.button.purge') }}
+            {{ t('views.content.libraries.Quota.button.purge') }}
             <template #modal-header>
               <p>
-                {{ $t('views.content.libraries.Quota.modal.purgeErrored.header') }}
+                {{ t('views.content.libraries.Quota.modal.purgeErrored.header') }}
               </p>
             </template>
             <template #modal-content>
               <p>
-                {{ $t('views.content.libraries.Quota.modal.purgeErrored.content.description') }}
+                {{ t('views.content.libraries.Quota.modal.purgeErrored.content.description') }}
               </p>
             </template>
             <template #modal-confirm>
               <div>
-                {{ $t('views.content.libraries.Quota.button.purge') }}
+                {{ t('views.content.libraries.Quota.button.purge') }}
               </div>
             </template>
           </dangerous-button>
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index ef95ba805..b814c5608 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -194,7 +194,7 @@ watch(showScan, (shouldShow) => {
       </div>
       <div class="meta">
         <i class="music icon" />
-        {{ $t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
+        {{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
       </div>
       <div
         v-if="displayScan && latestScan"
@@ -202,30 +202,30 @@ watch(showScan, (shouldShow) => {
       >
         <template v-if="latestScan.status === 'pending'">
           <i class="hourglass icon" />
-          {{ $t('views.content.remote.Card.label.scanPending') }}
+          {{ t('views.content.remote.Card.label.scanPending') }}
         </template>
         <template v-if="latestScan.status === 'scanning'">
           <i class="loading spinner icon" />
-          {{ $t('views.content.remote.Card.label.scanProgress', {progress: scanProgress}) }}
+          {{ t('views.content.remote.Card.label.scanProgress', {progress: scanProgress}) }}
         </template>
         <template v-else-if="latestScan.status === 'errored'">
           <i class="dangerdownload icon" />
-          {{ $t('views.content.remote.Card.label.scanFailure') }}
+          {{ t('views.content.remote.Card.label.scanFailure') }}
         </template>
         <template v-else-if="latestScan.status === 'finished' && latestScan.errored_files === 0">
           <i class="success download icon" />
-          {{ $t('views.content.remote.Card.label.scanSuccess') }}
+          {{ t('views.content.remote.Card.label.scanSuccess') }}
         </template>
         <template v-else-if="latestScan.status === 'finished' && latestScan.errored_files > 0">
           <i class="warning download icon" />
-          {{ $t('views.content.remote.Card.label.scanPartialSuccess') }}
+          {{ t('views.content.remote.Card.label.scanPartialSuccess') }}
         </template>
         <a
           href=""
           class="link right floated"
           @click.prevent="showScan = !showScan"
         >
-          {{ $t('views.content.remote.Card.link.scanDetails') }}
+          {{ t('views.content.remote.Card.link.scanDetails') }}
           <i
             v-if="showScan"
             class="angle down icon"
@@ -237,9 +237,9 @@ watch(showScan, (shouldShow) => {
         </a>
         <div v-if="showScan">
           <template v-if="latestScan.modification_date">
-            {{ $t('views.content.remote.Card.meta.lastUpdate') }}<human-date :date="latestScan.modification_date" /><br>
+            {{ t('views.content.remote.Card.meta.lastUpdate') }}<human-date :date="latestScan.modification_date" /><br>
           </template>
-          {{ $t('views.content.remote.Card.meta.failedTracks', {tracks: latestScan.errored_files}) }}
+          {{ t('views.content.remote.Card.meta.failedTracks', {tracks: latestScan.errored_files}) }}
         </div>
       </div>
       <div
@@ -251,7 +251,7 @@ watch(showScan, (shouldShow) => {
           class="right floated link"
           @click.prevent="launchScan"
         >
-          {{ $t('views.content.remote.Card.link.scan') }}<i class="paper plane icon" />
+          {{ t('views.content.remote.Card.link.scan') }}<i class="paper plane icon" />
         </a>
       </div>
     </div>
@@ -267,7 +267,7 @@ watch(showScan, (shouldShow) => {
     >
       <div class="ui form">
         <div class="field">
-          <label :for="library.fid">{{ $t('views.content.remote.Card.label.sharingLink') }}</label>
+          <label :for="library.fid">{{ t('views.content.remote.Card.label.sharingLink') }}</label>
           <copy-input
             :id="library.fid"
             :button-classes="'basic'"
@@ -291,20 +291,20 @@ watch(showScan, (shouldShow) => {
           :class="['ui', 'success', {'loading': isLoadingFollow}, 'button']"
           @click="follow()"
         >
-          {{ $t('views.content.remote.Card.button.follow') }}
+          {{ t('views.content.remote.Card.button.follow') }}
         </button>
         <template v-else-if="!library.follow.approved">
           <button
             class="ui disabled button"
           >
             <i class="hourglass icon" />
-            {{ $t('views.content.remote.Card.button.pending') }}
+            {{ t('views.content.remote.Card.button.pending') }}
           </button>
           <button
             class="ui button"
             @click="unfollow"
           >
-            {{ $t('views.content.remote.Card.button.cancel') }}
+            {{ t('views.content.remote.Card.button.cancel') }}
           </button>
         </template>
         <template v-else-if="library.follow.approved">
@@ -312,22 +312,22 @@ watch(showScan, (shouldShow) => {
             :class="['ui', 'button']"
             :action="unfollow"
           >
-            {{ $t('views.content.remote.Card.button.unfollow') }}
+            {{ t('views.content.remote.Card.button.unfollow') }}
             <template #modal-header>
               <p>
-                {{ $t('views.content.remote.Card.modal.unfollow.header') }}
+                {{ t('views.content.remote.Card.modal.unfollow.header') }}
               </p>
             </template>
             <template #modal-content>
               <div>
                 <p>
-                  {{ $t('views.content.remote.Card.modal.unfollow.content.warning') }}
+                  {{ t('views.content.remote.Card.modal.unfollow.content.warning') }}
                 </p>
               </div>
             </template>
             <template #modal-confirm>
               <div>
-                {{ $t('views.content.remote.Card.button.unfollow') }}
+                {{ t('views.content.remote.Card.button.unfollow') }}
               </div>
             </template>
           </dangerous-button>
diff --git a/front/src/views/content/remote/Home.vue b/front/src/views/content/remote/Home.vue
index 9981498e2..94081a447 100644
--- a/front/src/views/content/remote/Home.vue
+++ b/front/src/views/content/remote/Home.vue
@@ -10,6 +10,10 @@ import LibraryCard from './Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
 const existingFollows = ref()
 const isLoading = ref(false)
 const fetchData = async () => {
@@ -47,7 +51,7 @@ const scanResult = ref()
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        {{ $t('views.content.remote.Home.loading.remoteLibraries') }}
+        {{ t('views.content.remote.Home.loading.remoteLibraries') }}
       </div>
     </div>
     <div
@@ -55,10 +59,10 @@ const scanResult = ref()
       class="ui text container"
     >
       <h1 class="ui header">
-        {{ $t('views.content.remote.Home.header.remoteLibraries') }}
+        {{ t('views.content.remote.Home.header.remoteLibraries') }}
       </h1>
       <p>
-        {{ $t('views.content.remote.Home.description.remoteLibraries') }}
+        {{ t('views.content.remote.Home.description.remoteLibraries') }}
       </p>
       <scan-form @scanned="scanResult = $event" />
       <div class="ui hidden divider" />
@@ -74,7 +78,7 @@ const scanResult = ref()
       </div>
       <template v-if="existingFollows && existingFollows.count > 0">
         <h2>
-          {{ $t('views.content.remote.Home.header.knownLibraries') }}
+          {{ t('views.content.remote.Home.header.knownLibraries') }}
         </h2>
         <a
           href=""
@@ -82,7 +86,7 @@ const scanResult = ref()
           @click.prevent="fetchData"
         >
           <i :class="['ui', 'circular', 'refresh', 'icon']" />
-          {{ $t('views.content.remote.Home.button.refresh') }}
+          {{ t('views.content.remote.Home.button.refresh') }}
         </a>
         <div class="ui hidden divider" />
         <div class="ui two cards">
diff --git a/front/src/views/content/remote/ScanForm.vue b/front/src/views/content/remote/ScanForm.vue
index a72224a60..86d281499 100644
--- a/front/src/views/content/remote/ScanForm.vue
+++ b/front/src/views/content/remote/ScanForm.vue
@@ -49,7 +49,7 @@ const scan = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        {{ $t('views.content.remote.ScanForm.header.failure') }}
+        {{ t('views.content.remote.ScanForm.header.failure') }}
       </h4>
       <ul class="list">
         <li
@@ -61,7 +61,7 @@ const scan = async () => {
       </ul>
     </div>
     <div class="ui field">
-      <label for="library-search">{{ $t('views.content.remote.ScanForm.label.search') }}</label>
+      <label for="library-search">{{ t('views.content.remote.ScanForm.label.search') }}</label>
       <div :class="['ui', 'action', {loading: isLoading}, 'input']">
         <input
           id="library-search"
diff --git a/front/src/views/content/upload/Home.vue b/front/src/views/content/upload/Home.vue
index ddbbff741..2f60839a1 100644
--- a/front/src/views/content/upload/Home.vue
+++ b/front/src/views/content/upload/Home.vue
@@ -21,6 +21,8 @@ import Upload from '~/ui/pages/upload.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+const { t } = useI18n()
+
 const router = useRouter()
 
 const libraries = ref([] as Library[])
@@ -116,7 +118,7 @@ const openModal = (object_: Library | Channel) => {
     <div class="ui text container">
       <h1>{{ labels.title }}</h1>
       <p>
-        <strong>{{ $t('views.content.Home.help.uploadQuota', { quota: defaultQuota }) }}</strong>
+        <strong>{{ t('views.content.Home.help.uploadQuota', { quota: defaultQuota }) }}</strong>
       </p>
       <hr/>
       <h3>Choose a library:</h3>
diff --git a/front/src/views/library/DetailAlbums.vue b/front/src/views/library/DetailAlbums.vue
index a45a1a7bb..a83455dd6 100644
--- a/front/src/views/library/DetailAlbums.vue
+++ b/front/src/views/library/DetailAlbums.vue
@@ -3,6 +3,10 @@ import type { Library } from '~/types'
 
 import AlbumWidget from '~/components/album/Widget.vue'
 
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
 interface Props {
   object: Library
   isOwner: boolean
@@ -26,12 +30,12 @@ defineProps<Props>()
             <span
               v-if="isOwner"
             >
-              {{ $t('views.library.DetailAlbums.empty.upload') }}
+              {{ t('views.library.DetailAlbums.empty.upload') }}
             </span>
             <span
               v-else
             >
-              {{ $t('views.library.DetailAlbums.empty.follow') }}
+              {{ t('views.library.DetailAlbums.empty.follow') }}
             </span>
           </p>
         </empty-state>
diff --git a/front/src/views/library/DetailOverview.vue b/front/src/views/library/DetailOverview.vue
index 91df3ef1b..69e119695 100644
--- a/front/src/views/library/DetailOverview.vue
+++ b/front/src/views/library/DetailOverview.vue
@@ -3,6 +3,12 @@ import type { Library } from '~/types'
 
 import ArtistWidget from '~/components/artist/Widget.vue'
 
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
+
+const { t } = useI18n()
+const store = useStore()
+
 interface Props {
   object: Library
   isOwner: boolean
@@ -13,7 +19,7 @@ defineProps<Props>()
 
 <template>
   <section>
-    <template v-if="$store.getters['ui/layoutVersion'] === 'small'">
+    <template v-if="store.getters['ui/layoutVersion'] === 'small'">
       <rendered-description
         :content="object.description ? {html: object.description} : null"
         :update-url="`channels/${object.uuid}/`"
@@ -35,12 +41,12 @@ defineProps<Props>()
             <span
               v-if="isOwner"
             >
-              {{ $t('views.library.DetailOverview.empty.upload') }}
+              {{ t('views.library.DetailOverview.empty.upload') }}
             </span>
             <span
               v-else
             >
-              {{ $t('views.library.DetailOverview.empty.follow') }}
+              {{ t('views.library.DetailOverview.empty.follow') }}
             </span>
           </p>
         </empty-state>
diff --git a/front/src/views/library/DetailTracks.vue b/front/src/views/library/DetailTracks.vue
index 801c1685a..160df5db1 100644
--- a/front/src/views/library/DetailTracks.vue
+++ b/front/src/views/library/DetailTracks.vue
@@ -25,12 +25,12 @@ defineProps<Props>()
             <span
               v-if="isOwner"
             >
-              {{ $t('views.library.DetailTracks.empty.upload') }}
+              {{ t('views.library.DetailTracks.empty.upload') }}
             </span>
             <span
               v-else
             >
-              {{ $t('views.library.DetailTracks.empty.follow') }}
+              {{ t('views.library.DetailTracks.empty.follow') }}
             </span>
           </p>
         </empty-state>
diff --git a/front/src/views/library/Edit.vue b/front/src/views/library/Edit.vue
index b0b888842..4e5ddacfe 100644
--- a/front/src/views/library/Edit.vue
+++ b/front/src/views/library/Edit.vue
@@ -10,6 +10,14 @@ import LibraryForm from '~/views/content/libraries/Form.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const { t } = useI18n()
+const store = useStore()
+
 interface Events {
   (e: 'updated'): void
 }
@@ -55,24 +63,24 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
     <library-form
       :library="object"
       @updated="emit('updated')"
-      @deleted="$router.push({name: 'profile.overview', params: {username: $store.state.auth.username}})"
+      @deleted="router.push({name: 'profile.overview', params: {username: store.state.auth.username}})"
     />
     <div class="ui hidden divider" />
     <h2 class="ui header">
-      {{ $t('views.library.Edit.header.libraryContents') }}
+      {{ t('views.library.Edit.header.libraryContents') }}
     </h2>
     <library-files-table :filters="{ library: object.uuid }" />
 
     <div class="ui hidden divider" />
     <h2 class="ui header">
-      {{ $t('views.library.Edit.header.followers') }}
+      {{ t('views.library.Edit.header.followers') }}
     </h2>
     <div
       v-if="isLoading"
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        {{ $t('views.library.Edit.loading.followers') }}
+        {{ t('views.library.Edit.loading.followers') }}
       </div>
     </div>
     <table
@@ -82,16 +90,16 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
       <thead>
         <tr>
           <th>
-            {{ $t('views.library.Edit.table.action.header.user') }}
+            {{ t('views.library.Edit.table.action.header.user') }}
           </th>
           <th>
-            {{ $t('views.library.Edit.table.action.header.date') }}
+            {{ t('views.library.Edit.table.action.header.date') }}
           </th>
           <th>
-            {{ $t('views.library.Edit.table.action.header.status') }}
+            {{ t('views.library.Edit.table.action.header.status') }}
           </th>
           <th>
-            {{ $t('views.library.Edit.table.action.header.action') }}
+            {{ t('views.library.Edit.table.action.header.action') }}
           </th>
         </tr>
       </thead>
@@ -106,19 +114,19 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
             v-if="follow.approved === null"
             :class="['ui', 'warning', 'basic', 'label']"
           >
-            {{ $t('views.library.Edit.table.action.status.pending') }}
+            {{ t('views.library.Edit.table.action.status.pending') }}
           </span>
           <span
             v-else-if="follow.approved === true"
             :class="['ui', 'success', 'basic', 'label']"
           >
-            {{ $t('views.library.Edit.table.action.status.accepted') }}
+            {{ t('views.library.Edit.table.action.status.accepted') }}
           </span>
           <span
             v-else-if="follow.approved === false"
             :class="['ui', 'danger', 'basic', 'label']"
           >
-            {{ $t('views.library.Edit.table.action.status.rejected') }}
+            {{ t('views.library.Edit.table.action.status.rejected') }}
           </span>
         </td>
         <td>
@@ -128,7 +136,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
             @click="updateApproved(follow, true)"
           >
             <i class="ui check icon" />
-            {{ $t('views.library.Edit.button.accept') }}
+            {{ t('views.library.Edit.button.accept') }}
           </button>
           <button
             v-if="follow.approved === null || follow.approved === true"
@@ -136,13 +144,13 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
             @click="updateApproved(follow, false)"
           >
             <i class="ui x icon" />
-            {{ $t('views.library.Edit.button.reject') }}
+            {{ t('views.library.Edit.button.reject') }}
           </button>
         </td>
       </tr>
     </table>
     <p v-else>
-      {{ $t('views.library.Edit.empty.noFollowers') }}
+      {{ t('views.library.Edit.empty.noFollowers') }}
     </p>
   </section>
 </template>
diff --git a/front/src/views/library/LibraryBase.vue b/front/src/views/library/LibraryBase.vue
index 419ae02b7..aeb9119d8 100644
--- a/front/src/views/library/LibraryBase.vue
+++ b/front/src/views/library/LibraryBase.vue
@@ -111,7 +111,7 @@ const updateUploads = (count: number) => {
                 class="basic item"
               >
                 <i class="external icon" />
-                {{ $t('views.library.LibraryBase.link.domain', {domain: object.actor.domain}) }}
+                {{ t('views.library.LibraryBase.link.domain', {domain: object.actor.domain}) }}
               </a>
               <div
                 v-for="obj in getReportableObjects({library: object})"
@@ -130,7 +130,7 @@ const updateUploads = (count: number) => {
                 :to="{name: 'manage.library.libraries.detail', params: {id: object.uuid}}"
               >
                 <i class="wrench icon" />
-                {{ $t('views.library.LibraryBase.link.moderation') }}
+                {{ t('views.library.LibraryBase.link.moderation') }}
               </router-link>
             </div>
           </button>
@@ -149,7 +149,7 @@ const updateUploads = (count: number) => {
                   :actor="object.actor"
                   :truncate-length="0"
                 >
-                  {{ $t('views.library.LibraryBase.link.owner', {username: object.actor.full_username}) }}
+                  {{ t('views.library.LibraryBase.link.owner', {username: object.actor.full_username}) }}
                 </actor-link>
               </div>
             </div>
@@ -179,7 +179,7 @@ const updateUploads = (count: number) => {
             </span>
             <span class="middledot icon">
               <i class="music icon" />
-              {{ $t('views.library.LibraryBase.meta.tracks', object.uploads_count) }}
+              {{ t('views.library.LibraryBase.meta.tracks', object.uploads_count) }}
             </span>
             <span v-if="object.size">
               <i class="database icon" />
@@ -217,10 +217,10 @@ const updateUploads = (count: number) => {
           <div class="ui form">
             <div class="field">
               <label for="copy-input">
-                {{ $t('views.library.LibraryBase.label.sharingLink') }}
+                {{ t('views.library.LibraryBase.label.sharingLink') }}
               </label>
               <p>
-                {{ $t('views.library.LibraryBase.description.sharingLink') }}
+                {{ t('views.library.LibraryBase.description.sharingLink') }}
               </p>
               <copy-input :value="object.fid" />
             </div>
@@ -236,7 +236,7 @@ const updateUploads = (count: number) => {
                   active-class=""
                   :to="{name: 'library.detail'}"
                 >
-                  {{ $t('views.library.LibraryBase.link.artists') }}
+                  {{ t('views.library.LibraryBase.link.artists') }}
                 </router-link>
                 <router-link
                   class="item"
@@ -244,7 +244,7 @@ const updateUploads = (count: number) => {
                   active-class=""
                   :to="{name: 'library.detail.albums'}"
                 >
-                  {{ $t('views.library.LibraryBase.link.albums') }}
+                  {{ t('views.library.LibraryBase.link.albums') }}
                 </router-link>
                 <router-link
                   class="item"
@@ -252,7 +252,7 @@ const updateUploads = (count: number) => {
                   active-class=""
                   :to="{name: 'library.detail.tracks'}"
                 >
-                  {{ $t('views.library.LibraryBase.link.tracks') }}
+                  {{ t('views.library.LibraryBase.link.tracks') }}
                 </router-link>
                 <router-link
                   v-if="isOwner"
@@ -262,7 +262,7 @@ const updateUploads = (count: number) => {
                   :to="{name: 'library.detail.upload'}"
                 >
                   <i class="upload icon" />
-                  {{ $t('views.library.LibraryBase.button.upload') }}
+                  {{ t('views.library.LibraryBase.button.upload') }}
                 </router-link>
                 <router-link
                   v-if="isOwner"
@@ -272,7 +272,7 @@ const updateUploads = (count: number) => {
                   :to="{name: 'library.detail.edit'}"
                 >
                   <i class="pencil icon" />
-                  {{ $t('views.library.LibraryBase.button.edit') }}
+                  {{ t('views.library.LibraryBase.button.edit') }}
                 </router-link>
               </div>
               <div class="ui hidden divider" />
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 7c958d220..851115734 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -95,7 +95,7 @@ const deletePlaylist = async () => {
           <div class="content">
             {{ playlist.name }}
             <div class="sub header">
-              {{ $t('views.playlists.Detail.meta.tracks', { username: playlist.actor.name }, playlist.tracks_count) }}
+              {{ t('views.playlists.Detail.meta.tracks', { username: playlist.actor.name }, playlist.tracks_count) }}
               <br>
               <duration :seconds="playlist.duration" />
             </div>
@@ -109,7 +109,7 @@ const deletePlaylist = async () => {
               :is-playable="playlist.is_playable"
               :tracks="tracks"
             >
-              {{ $t('views.playlists.Detail.button.playAll') }}
+              {{ t('views.playlists.Detail.button.playAll') }}
             </play-button>
           </div>
           <div class="ui buttons">
@@ -120,10 +120,10 @@ const deletePlaylist = async () => {
             >
               <i class="pencil icon" />
               <template v-if="edit">
-                {{ $t('views.playlists.Detail.button.stopEdit') }}
+                {{ t('views.playlists.Detail.button.stopEdit') }}
               </template>
               <template v-else>
-                {{ $t('views.playlists.Detail.button.edit') }}
+                {{ t('views.playlists.Detail.button.edit') }}
               </template>
             </button>
           </div>
@@ -134,7 +134,7 @@ const deletePlaylist = async () => {
               @click="showEmbedModal = !showEmbedModal"
             >
               <i class="code icon" />
-              {{ $t('views.playlists.Detail.button.embed') }}
+              {{ t('views.playlists.Detail.button.embed') }}
             </button>
             <dangerous-button
               v-if="$store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
@@ -142,20 +142,20 @@ const deletePlaylist = async () => {
               :action="deletePlaylist"
             >
               <i class="trash icon" />
-              {{ $t('views.playlists.Detail.button.delete') }}
+              {{ t('views.playlists.Detail.button.delete') }}
               <template #modal-header>
                 <p>
-                  {{ $t('views.playlists.Detail.modal.delete.header', {playlist: playlist.name}) }}
+                  {{ t('views.playlists.Detail.modal.delete.header', {playlist: playlist.name}) }}
                 </p>
               </template>
               <template #modal-content>
                 <p>
-                  {{ $t('views.playlists.Detail.modal.delete.content.warning') }}
+                  {{ t('views.playlists.Detail.modal.delete.content.warning') }}
                 </p>
               </template>
               <template #modal-confirm>
                 <div>
-                  {{ $t('views.playlists.Detail.button.confirm') }}
+                  {{ t('views.playlists.Detail.button.confirm') }}
                 </div>
               </template>
             </dangerous-button>
@@ -171,7 +171,7 @@ const deletePlaylist = async () => {
           v-model:show="showEmbedModal"
         >
           <h4 class="header">
-            {{ $t('views.playlists.Detail.modal.embed.header') }}
+            {{ t('views.playlists.Detail.modal.embed.header') }}
           </h4>
           <div class="scrolling content">
             <div class="description">
@@ -183,7 +183,7 @@ const deletePlaylist = async () => {
           </div>
           <div class="actions">
             <button class="ui basic deny button">
-              {{ $t('views.playlists.Detail.button.cancel') }}
+              {{ t('views.playlists.Detail.button.cancel') }}
             </button>
           </div>
         </semantic-modal>
@@ -198,7 +198,7 @@ const deletePlaylist = async () => {
       </template>
       <template v-else-if="tracks.length > 0">
         <h2>
-          {{ $t('views.playlists.Detail.header.tracks') }}
+          {{ t('views.playlists.Detail.header.tracks') }}
         </h2>
         <track-table
           :display-position="true"
@@ -212,14 +212,14 @@ const deletePlaylist = async () => {
       >
         <div class="ui icon header">
           <i class="list icon" />
-          {{ $t('views.playlists.Detail.empty.noTracks') }}
+          {{ t('views.playlists.Detail.empty.noTracks') }}
         </div>
         <button
           class="ui success icon labeled button"
           @click="edit = !edit"
         >
           <i class="pencil icon" />
-          {{ $t('views.playlists.Detail.button.edit') }}
+          {{ t('views.playlists.Detail.button.edit') }}
         </button>
       </div>
     </section>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index bcd463bf7..41c2a7e5d 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -9,6 +9,7 @@ import { useRouteQuery } from '@vueuse/router'
 import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 import $ from 'jquery'
@@ -29,6 +30,8 @@ interface Props extends OrderingProps {
   orderingConfigName?: RouteRecordName
 }
 
+const store = useStore()
+
 const props = withDefaults(defineProps<Props>(), {
   scope: 'all',
   orderingConfigName: undefined
@@ -108,14 +111,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
   <main v-title="labels.playlists">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        {{ $t('views.playlists.List.header.browse') }}
+        {{ t('views.playlists.List.header.browse') }}
       </h2>
-      <template v-if="$store.state.auth.authenticated">
+      <template v-if="store.state.auth.authenticated">
         <button
           class="ui success button"
-          @click="$store.commit('playlists/showModal', true)"
+          @click="store.commit('playlists/showModal', true)"
         >
-          {{ $t('views.playlists.List.button.manage') }}
+          {{ t('views.playlists.List.button.manage') }}
         </button>
         <div class="ui hidden divider" />
       </template>
@@ -125,7 +128,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="fields">
           <div class="field">
-            <label for="playlists-search">{{ $t('views.playlists.List.label.search') }}</label>
+            <label for="playlists-search">{{ t('views.playlists.List.label.search') }}</label>
             <div class="ui action input">
               <input
                 id="playlists-search"
@@ -144,7 +147,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </div>
           </div>
           <div class="field">
-            <label for="playlists-ordering">{{ $t('views.playlists.List.ordering.label') }}</label>
+            <label for="playlists-ordering">{{ t('views.playlists.List.ordering.label') }}</label>
             <select
               id="playlists-ordering"
               v-model="ordering"
@@ -160,22 +163,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="playlists-ordering-direction">{{ $t('views.playlists.List.ordering.direction.label') }}</label>
+            <label for="playlists-ordering-direction">{{ t('views.playlists.List.ordering.direction.label') }}</label>
             <select
               id="playlists-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                {{ $t('views.playlists.List.ordering.direction.ascending') }}
+                {{ t('views.playlists.List.ordering.direction.ascending') }}
               </option>
               <option value="-">
-                {{ $t('views.playlists.List.ordering.direction.descending') }}
+                {{ t('views.playlists.List.ordering.direction.descending') }}
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="playlists-results">{{ $t('views.playlists.List.pagination.results') }}</label>
+            <label for="playlists-results">{{ t('views.playlists.List.pagination.results') }}</label>
             <select
               id="playlists-results"
               v-model="paginateBy"
@@ -204,15 +207,15 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="list icon" />
-          {{ $t('views.playlists.List.empty.noResults') }}
+          {{ t('views.playlists.List.empty.noResults') }}
         </div>
         <button
-          v-if="$store.state.auth.authenticated"
+          v-if="store.state.auth.authenticated"
           class="ui success button labeled icon"
-          @click="$store.commit('playlists/showModal', true)"
+          @click="store.commit('playlists/showModal', true)"
         >
           <i class="list icon" />
-          {{ $t('views.playlists.List.button.create') }}
+          {{ t('views.playlists.List.button.create') }}
         </button>
       </div>
       <div class="ui center aligned basic segment">
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 3485aa661..ece697a16 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -4,6 +4,7 @@ import type { Track, Radio } from '~/types'
 import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
@@ -52,6 +53,8 @@ const fetchData = async () => {
 watch(page, fetchData, { immediate: true })
 
 const router = useRouter()
+const store = useStore()
+
 const deleteRadio = async () => {
   try {
     await axios.delete(`radios/radios/${props.id}/`)
@@ -82,7 +85,7 @@ const deleteRadio = async () => {
           <div class="content">
             {{ radio.name }}
             <div class="sub header">
-              {{ $t('views.radios.Detail.header.radio', {tracks: totalTracks}) }}<username :username="radio.user.username" />
+              {{ t('views.radios.Detail.header.radio', {tracks: totalTracks}) }}<username :username="radio.user.username" />
             </div>
           </div>
         </h2>
@@ -91,32 +94,32 @@ const deleteRadio = async () => {
           type="custom"
           :custom-radio-id="radio.id"
         />
-        <template v-if="$store.state.auth.username === radio.user.username">
+        <template v-if="store.state.auth.username === radio.user.username">
           <router-link
             class="ui icon labeled button"
             :to="{name: 'library.radios.edit', params: {id: radio.id}}"
           >
             <i class="pencil icon" />
-            {{ $t('views.radios.Detail.button.edit') }}
+            {{ t('views.radios.Detail.button.edit') }}
           </router-link>
           <dangerous-button
             class="ui labeled danger icon button"
             :action="deleteRadio"
           >
-            <i class="trash icon" /> {{ $t('views.radios.Detail.button.delete') }}
+            <i class="trash icon" /> {{ t('views.radios.Detail.button.delete') }}
             <template #modal-header>
               <p>
-                {{ $t('views.radios.Detail.modal.delete.header', {radio: radio.name}) }}
+                {{ t('views.radios.Detail.modal.delete.header', {radio: radio.name}) }}
               </p>
             </template>
             <template #modal-content>
               <p>
-                {{ $t('views.radios.Detail.modal.delete.content.warning') }}
+                {{ t('views.radios.Detail.modal.delete.content.warning') }}
               </p>
             </template>
             <template #modal-confirm>
               <p>
-                {{ $t('views.radios.Detail.button.confirm') }}
+                {{ t('views.radios.Detail.button.confirm') }}
               </p>
             </template>
           </dangerous-button>
@@ -128,7 +131,7 @@ const deleteRadio = async () => {
       class="ui vertical stripe segment"
     >
       <h2>
-        {{ $t('views.radios.Detail.header.tracks') }}
+        {{ t('views.radios.Detail.header.tracks') }}
       </h2>
       <track-table :tracks="tracks" />
       <div class="ui center aligned basic segment">
@@ -146,15 +149,15 @@ const deleteRadio = async () => {
     >
       <div class="ui icon header">
         <i class="rss icon" />
-        {{ $t('views.radios.Detail.empty.noTracks') }}
+        {{ t('views.radios.Detail.empty.noTracks') }}
       </div>
       <router-link
-        v-if="$store.state.auth.username === radio?.user.username"
+        v-if="store.state.auth.username === radio?.user.username"
         class="ui success icon labeled button"
         :to="{name: 'library.radios.edit', params: { id: radio?.id }}"
       >
         <i class="pencil icon" />
-        {{ $t('views.radios.Detail.button.edit') }}
+        {{ t('views.radios.Detail.button.edit') }}
       </router-link>
     </div>
   </main>