From ebea32faf908bc8da41e56e3218ff8364704a351 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Thu, 8 Sep 2022 14:32:45 +0000
Subject: [PATCH] Replace gettext with i18n

---
 front/package.json                            |   1 -
 front/src/components/About.vue                |  46 +--
 front/src/components/AboutPod.vue             |  80 ++--
 front/src/components/Home.vue                 |  77 ++--
 front/src/components/PageNotFound.vue         |  12 +-
 front/src/components/Queue.vue                |  60 +--
 front/src/components/RemoteSearchForm.vue     |  32 +-
 front/src/components/SetInstanceModal.vue     |  26 +-
 front/src/components/ShortcutsModal.vue       |  48 +--
 front/src/components/Sidebar.vue              | 100 +++--
 front/src/components/admin/SettingsGroup.vue  |   8 +-
 .../components/admin/SignupFormBuilder.vue    |  42 +-
 front/src/components/audio/ChannelCard.vue    |  10 +-
 front/src/components/audio/ChannelEntries.vue |   2 +-
 front/src/components/audio/ChannelForm.vue    |  46 +--
 .../src/components/audio/ChannelSerieCard.vue |   2 +-
 front/src/components/audio/ChannelSeries.vue  |   4 +-
 front/src/components/audio/ChannelsWidget.vue |   2 +-
 front/src/components/audio/EmbedWizard.vue    |  20 +-
 .../components/audio/LibraryFollowButton.vue  |   6 +-
 front/src/components/audio/PlayButton.vue     |  44 +--
 front/src/components/audio/Player.vue         |  38 +-
 front/src/components/audio/Search.vue         |  16 +-
 front/src/components/audio/SearchBar.vue      |  30 +-
 front/src/components/audio/VolumeControl.vue  |  10 +-
 front/src/components/audio/album/Card.vue     |   2 +-
 front/src/components/audio/album/Widget.vue   |   2 +-
 front/src/components/audio/artist/Card.vue    |   4 +-
 front/src/components/audio/artist/Widget.vue  |   2 +-
 .../components/audio/podcast/MobileRow.vue    |   6 +-
 front/src/components/audio/podcast/Modal.vue  |  30 +-
 .../src/components/audio/track/MobileRow.vue  |   6 +-
 front/src/components/audio/track/Modal.vue    |  30 +-
 front/src/components/audio/track/Table.vue    |  10 +-
 front/src/components/audio/track/Widget.vue   |   4 +-
 front/src/components/auth/ApplicationEdit.vue |  26 +-
 front/src/components/auth/ApplicationForm.vue |  28 +-
 front/src/components/auth/ApplicationNew.vue  |  19 +-
 front/src/components/auth/Authorize.vue       |  30 +-
 front/src/components/auth/LoginForm.vue       |  23 +-
 front/src/components/auth/Logout.vue          |  16 +-
 front/src/components/auth/Plugin.vue          |  14 +-
 front/src/components/auth/Settings.vue        | 148 +++----
 front/src/components/auth/SignupForm.vue      |  32 +-
 .../src/components/auth/SubsonicTokenForm.vue |  42 +-
 front/src/components/channels/AlbumForm.vue   |   4 +-
 front/src/components/channels/AlbumModal.vue  |   8 +-
 front/src/components/channels/AlbumSelect.vue |   8 +-
 .../src/components/channels/LicenseSelect.vue |   6 +-
 .../components/channels/SubscribeButton.vue   |  10 +-
 front/src/components/channels/UploadForm.vue  |  36 +-
 .../channels/UploadMetadataForm.vue           |  10 +-
 front/src/components/channels/UploadModal.vue |  32 +-
 front/src/components/common/ActionTable.vue   |  38 +-
 .../src/components/common/AttachmentInput.vue |  10 +-
 front/src/components/common/CollapseLink.vue  |   4 +-
 front/src/components/common/ContentForm.vue   |  14 +-
 front/src/components/common/CopyInput.vue     |   4 +-
 .../src/components/common/DangerousButton.vue |   6 +-
 front/src/components/common/Duration.vue      |   4 +-
 front/src/components/common/EmptyState.vue    |   4 +-
 front/src/components/common/ExpandableDiv.vue |   4 +-
 .../src/components/common/InlineSearchBar.vue |  10 +-
 front/src/components/common/LoginModal.vue    |  12 +-
 .../components/common/RenderedDescription.vue |  14 +-
 front/src/components/common/UserMenu.vue      |  43 +-
 front/src/components/common/UserModal.vue     |  40 +-
 front/src/components/favorites/List.vue       |  24 +-
 .../favorites/TrackFavoriteIcon.vue           |  12 +-
 .../src/components/federation/FetchButton.vue |  48 +--
 .../components/federation/LibraryWidget.vue   |   4 +-
 front/src/components/forms/PasswordInput.vue  |  10 +-
 front/src/components/library/AlbumBase.vue    |  18 +-
 front/src/components/library/AlbumDetail.vue  |   9 +-
 .../src/components/library/AlbumDropdown.vue  |  32 +-
 front/src/components/library/AlbumEdit.vue    |   6 +-
 front/src/components/library/Albums.vue       |  30 +-
 front/src/components/library/ArtistBase.vue   |  32 +-
 front/src/components/library/ArtistDetail.vue |  16 +-
 front/src/components/library/ArtistEdit.vue   |   6 +-
 front/src/components/library/Artists.vue      |  32 +-
 front/src/components/library/EditCard.vue     |  32 +-
 front/src/components/library/EditForm.vue     |  40 +-
 front/src/components/library/FileUpload.vue   |  69 ++--
 front/src/components/library/FsBrowser.vue    |   2 +-
 front/src/components/library/FsLogs.vue       |   2 +-
 front/src/components/library/Home.vue         |  16 +-
 .../components/library/ImportStatusModal.vue  |  36 +-
 front/src/components/library/Podcasts.vue     |  38 +-
 front/src/components/library/Radios.vue       |  34 +-
 front/src/components/library/TagDetail.vue    |  10 +-
 front/src/components/library/TagsSelector.vue |   2 +-
 front/src/components/library/TrackBase.vue    |  44 +--
 front/src/components/library/TrackDetail.vue  |  52 +--
 front/src/components/library/TrackEdit.vue    |   6 +-
 .../src/components/library/radios/Builder.vue |  44 +--
 .../src/components/library/radios/Filter.vue  |   8 +-
 front/src/components/manage/ChannelsTable.vue |  38 +-
 .../components/manage/library/AlbumsTable.vue |  40 +-
 .../manage/library/ArtistsTable.vue           |  38 +-
 .../manage/library/EditsCardList.vue          |  28 +-
 .../manage/library/LibrariesTable.vue         |  42 +-
 .../components/manage/library/TagsTable.vue   |  32 +-
 .../components/manage/library/TracksTable.vue |  38 +-
 .../manage/library/UploadsTable.vue           |  62 +--
 .../manage/moderation/AccountsTable.vue       |  36 +-
 .../manage/moderation/DomainsTable.vue        |  48 +--
 .../manage/moderation/InstancePolicyCard.vue  |  18 +-
 .../manage/moderation/InstancePolicyForm.vue  |  52 +--
 .../manage/moderation/InstancePolicyModal.vue |   8 +-
 .../components/manage/moderation/NoteForm.vue |  10 +-
 .../manage/moderation/NotesThread.vue         |   8 +-
 .../manage/moderation/ReportCard.vue          |  68 ++--
 .../manage/moderation/UserRequestCard.vue     |  38 +-
 .../manage/users/InvitationForm.vue           |  18 +-
 .../manage/users/InvitationsTable.vue         |  40 +-
 .../components/manage/users/UsersTable.vue    |  50 +--
 .../src/components/moderation/FilterModal.vue |  26 +-
 .../moderation/ReportCategoryDropdown.vue     |   8 +-
 .../src/components/moderation/ReportModal.vue |  32 +-
 .../notifications/NotificationRow.vue         |  28 +-
 front/src/components/playlists/Card.vue       |   2 +-
 front/src/components/playlists/Editor.vue     |  30 +-
 front/src/components/playlists/Form.vue       |  22 +-
 .../components/playlists/PlaylistModal.vue    |  44 +--
 .../playlists/TrackPlaylistIcon.vue           |   8 +-
 front/src/components/playlists/Widget.vue     |   6 +-
 front/src/components/radios/Button.vue        |  20 +-
 front/src/components/radios/Card.vue          |   2 +-
 front/src/components/tags/List.vue            |   2 +-
 front/src/components/vui/Pagination.vue       |  10 +-
 front/src/composables/audio/usePlayOptions.ts |   8 +-
 .../src/composables/locale/useSharedLabels.ts | 164 ++++----
 .../composables/moderation/useEditConfigs.ts  |  24 +-
 front/src/composables/moderation/useReport.ts |  36 +-
 .../moderation/useReportConfigs.ts            |  44 +--
 front/src/composables/useErrorHandler.ts      |  10 +-
 front/src/composables/useThemeList.ts         |  10 +-
 front/src/init/axios.ts                       |  18 +-
 front/src/init/locale.ts                      |  87 ++++-
 front/src/init/sentry.ts                      |  13 +-
 front/src/init/serviceWorker.ts               |  12 +-
 front/src/store/ui.ts                         |   4 +-
 front/src/views/Notifications.vue             |  52 +--
 front/src/views/Search.vue                    |  30 +-
 front/src/views/admin/ChannelDetail.vue       |  66 ++--
 front/src/views/admin/CommonList.vue          |  24 +-
 front/src/views/admin/Settings.vue            |  30 +-
 front/src/views/admin/library/AlbumDetail.vue |  64 +--
 .../src/views/admin/library/ArtistDetail.vue  |  66 ++--
 front/src/views/admin/library/Base.vue        |  24 +-
 front/src/views/admin/library/EditsList.vue   |   8 +-
 .../src/views/admin/library/LibraryDetail.vue |  56 +--
 front/src/views/admin/library/TagDetail.vue   |  28 +-
 front/src/views/admin/library/TrackDetail.vue |  74 ++--
 .../src/views/admin/library/UploadDetail.vue  |  62 +--
 .../views/admin/moderation/AccountsDetail.vue | 100 ++---
 front/src/views/admin/moderation/Base.vue     |  16 +-
 .../views/admin/moderation/DomainsDetail.vue  |  80 ++--
 .../views/admin/moderation/DomainsList.vue    |  16 +-
 .../views/admin/moderation/ReportsList.vue    |  28 +-
 .../views/admin/moderation/RequestsList.vue   |  30 +-
 front/src/views/admin/users/Base.vue          |  12 +-
 front/src/views/auth/Callback.vue             |   2 +-
 front/src/views/auth/EmailConfirm.vue         |  18 +-
 front/src/views/auth/Login.vue                |   8 +-
 front/src/views/auth/PasswordReset.vue        |  20 +-
 front/src/views/auth/PasswordResetConfirm.vue |  22 +-
 front/src/views/auth/Plugins.vue              |   6 +-
 front/src/views/auth/ProfileActivity.vue      |   6 +-
 front/src/views/auth/ProfileBase.vue          |  16 +-
 front/src/views/auth/ProfileOverview.vue      |  24 +-
 front/src/views/auth/Signup.vue               |   8 +-
 front/src/views/channels/DetailBase.vue       |  68 ++--
 front/src/views/channels/DetailOverview.vue   |  26 +-
 .../src/views/channels/SubscriptionsList.vue  |  16 +-
 front/src/views/content/Base.vue              |  12 +-
 front/src/views/content/Home.vue              |  28 +-
 front/src/views/content/libraries/Card.vue    |  12 +-
 .../views/content/libraries/FilesTable.vue    |  58 +--
 front/src/views/content/libraries/Form.vue    |  38 +-
 front/src/views/content/libraries/Home.vue    |   8 +-
 front/src/views/content/libraries/Quota.vue   |  42 +-
 front/src/views/content/remote/Card.vue       |  48 +--
 front/src/views/content/remote/Home.vue       |  10 +-
 front/src/views/content/remote/ScanForm.vue   |  12 +-
 front/src/views/library/DetailAlbums.vue      |   4 +-
 front/src/views/library/DetailOverview.vue    |   4 +-
 front/src/views/library/DetailTracks.vue      |   4 +-
 front/src/views/library/Edit.vue              |  26 +-
 front/src/views/library/LibraryBase.vue       |  40 +-
 front/src/views/playlists/Detail.vue          |  34 +-
 front/src/views/playlists/List.vue            |  30 +-
 front/src/views/radios/Detail.vue             |  16 +-
 front/test/specs/views/admin/library.test.ts  |   3 +-
 front/tsconfig.json                           |   1 -
 front/yarn.lock                               | 366 +-----------------
 197 files changed, 2623 insertions(+), 2932 deletions(-)

diff --git a/front/package.json b/front/package.json
index 43116ca50..051076f21 100644
--- a/front/package.json
+++ b/front/package.json
@@ -76,7 +76,6 @@
     "@vue/eslint-config-typescript": "11.0.2",
     "@vue/test-utils": "2.2.4",
     "@vue/tsconfig": "0.1.3",
-    "easygettext": "2.17.0",
     "eslint": "8.28.0",
     "eslint-config-standard": "17.0.0",
     "eslint-plugin-html": "7.1.0",
diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index 6e2bf9815..fddb6a1ba 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { get } from 'lodash-es'
 import { humanSize } from '~/utils/filters'
 import { computed } from 'vue'
@@ -11,9 +11,9 @@ import LogoText from '~/components/LogoText.vue'
 const store = useStore()
 const nodeinfo = computed(() => store.state.instance.nodeinfo)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/About/Title', 'About')
+  title: t('About')
 }))
 
 const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') ?? 'Funkwhale')
@@ -67,12 +67,12 @@ const headerStyle = computed(() => {
                 <div class="column" />
               </div>
               <h2 class="header">
-                <translate translate-context="Content/About/Heading">
+                <translate >
                   A social platform to enjoy and share music
                 </translate>
               </h2>
               <p>
-                <translate translate-context="Content/About/Paragraph">
+                <translate >
                   Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.
                 </translate>
               </p>
@@ -88,19 +88,19 @@ const headerStyle = computed(() => {
                 class="signup-form content"
               >
                 <h3 class="header">
-                  <translate translate-context="*/Signup/Title">
+                  <translate >
                     Sign up
                   </translate>
                 </h3>
                 <template v-if="openRegistrations">
                   <p>
-                    <translate translate-context="Content/About/Paragraph">
+                    <translate >
                       Sign up now to keep a track of your favorites, create playlists, discover new content and much more!
                     </translate>
                   </p>
                   <p v-if="defaultUploadQuota">
                     <translate
-                      translate-context="Content/About/Paragraph"
+
                       :translate-params="{quota: defaultUploadQuota}"
                     >
                       Users on this pod also get %{ quota } of free storage to upload their own content!
@@ -112,7 +112,7 @@ const headerStyle = computed(() => {
                   />
                 </template>
                 <div v-else>
-                  <p translate-context="Content/About/Paragraph">
+                  <p >
                     Registrations are closed on this pod. You can signup on another pod using the link below.
                   </p>
 
@@ -121,7 +121,7 @@ const headerStyle = computed(() => {
                     rel="noopener"
                     href="https://funkwhale.audio/#get-started"
                   >
-                    <translate translate-context="Content/About/Link">Find another pod</translate>
+                    <translate >Find another pod</translate>
                     &nbsp;<i class="external alternate icon" />
                   </a>
                 </div>
@@ -131,12 +131,12 @@ const headerStyle = computed(() => {
                 class="signup-form content"
               >
                 <h3 class="header">
-                  <translate translate-context="*/Signup/Title">
+                  <translate >
                     Sign up
                   </translate>
                   <div class="ui positive message">
                     <div class="header">
-                      <translate translate-context="Content/About/Message">
+                      <translate >
                         You're already signed in!
                       </translate>
                     </div>
@@ -164,7 +164,7 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     About this pod
                   </translate>
                 </h3>
@@ -175,7 +175,7 @@ const headerStyle = computed(() => {
                   {{ shortDescription }}
                 </div>
                 <p v-else>
-                  <translate translate-context="Content/About/Paragraph">
+                  <translate >
                     No description available.
                   </translate>
                 </p>
@@ -188,7 +188,7 @@ const headerStyle = computed(() => {
                           <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                           <br>
                           <translate
-                            translate-context="Content/About/*"
+
                             :translate-n="stats.users"
                             translate-plural="active users"
                           >active user</translate>
@@ -213,7 +213,7 @@ const headerStyle = computed(() => {
                   to="/about/pod"
                   class="ui fluid basic secondary button"
                 >
-                  <translate translate-context="Content/About/Paragraph">
+                  <translate >
                     Learn More
                   </translate>
                 </router-link>
@@ -234,12 +234,12 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     Browse public content
                   </translate>
                 </h3>
                 <p>
-                  <translate translate-context="Content/About/Paragraph">
+                  <translate >
                     Listen to public albums and playlists shared on this pod.
                   </translate>
                 </p>
@@ -255,11 +255,11 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  <translate translate-context="Content/About/Header">Find another pod</translate>
+                  <translate >Find another pod</translate>
                   &nbsp;<i class="external alternate icon" />
                 </h3>
                 <p>
-                  <translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
+                  <translate >Listen to public albums and playlists shared on this pod.</translate>
                 </p>
               </div>
             </a>
@@ -273,11 +273,11 @@ const headerStyle = computed(() => {
                   id="description"
                   class="ui header"
                 >
-                  <translate translate-context="Content/About/Header">Find an app</translate>
+                  <translate >Find an app</translate>
                   &nbsp;<i class="external alternate icon" />
                 </h3>
                 <p>
-                  <translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
+                  <translate >Use Funkwhale on other devices with our apps.</translate>
                 </p>
               </div>
             </a>
@@ -287,7 +287,7 @@ const headerStyle = computed(() => {
               to="/about/pod"
               class="ui right floated basic secondary button"
             >
-              <translate translate-context="Content/About/Paragraph">
+              <translate >
                 About this pod
               </translate>
               <i class="icon arrow right" />
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index 9a0eabb6a..ae8dd780b 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { humanSize } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 import { get } from 'lodash-es'
 import { computed } from 'vue'
@@ -9,6 +8,7 @@ import axios from 'axios'
 
 import useMarkdown from '~/composables/useMarkdown'
 import type { NodeInfo } from '~/store/instance'
+import { useI18n } from 'vue-i18n'
 
 const store = useStore()
 const nodeinfo = computed(() => store.state.instance.nodeinfo)
@@ -19,9 +19,9 @@ const fetchData = async () => {
 }
 fetchData()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/About/Title', 'About')
+  title: t('About')
 }))
 
 const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') || 'Funkwhale')
@@ -99,7 +99,7 @@ const headerStyle = computed(() => {
                   to="/about/pod"
                   class="item"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     About this pod
                   </translate>
                 </router-link>
@@ -107,7 +107,7 @@ const headerStyle = computed(() => {
                   to="/about/pod#rules"
                   class="item"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     Rules
                   </translate>
                 </router-link>
@@ -115,7 +115,7 @@ const headerStyle = computed(() => {
                   to="/about/pod#terms"
                   class="item"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     Terms and privacy policy
                   </translate>
                 </router-link>
@@ -123,7 +123,7 @@ const headerStyle = computed(() => {
                   to="/about/pod#features"
                   class="item"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     Features
                   </translate>
                 </router-link>
@@ -132,7 +132,7 @@ const headerStyle = computed(() => {
                   to="/about/pod#statistics"
                   class="item"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     Statistics
                   </translate>
                 </router-link>
@@ -144,7 +144,7 @@ const headerStyle = computed(() => {
                 id="description about-this-pod"
                 class="ui header"
               >
-                <translate translate-context="Content/About/Header">
+                <translate >
                   About this pod
                 </translate>
               </h2>
@@ -153,7 +153,7 @@ const headerStyle = computed(() => {
                 :html="longDescription"
               />
               <p v-else>
-                <translate translate-context="Content/About/Paragraph">
+                <translate >
                   No description available.
                 </translate>
               </p>
@@ -162,7 +162,7 @@ const headerStyle = computed(() => {
                 id="rules"
                 class="ui header"
               >
-                <translate translate-context="Content/About/Header">
+                <translate >
                   Rules
                 </translate>
               </h3>
@@ -171,7 +171,7 @@ const headerStyle = computed(() => {
                 :html="rules"
               />
               <p v-else>
-                <translate translate-context="Content/About/Paragraph">
+                <translate >
                   No rules available.
                 </translate>
               </p>
@@ -180,7 +180,7 @@ const headerStyle = computed(() => {
                 id="terms"
                 class="ui header"
               >
-                <translate translate-context="Content/About/Header">
+                <translate >
                   Terms and privacy policy
                 </translate>
               </h3>
@@ -189,7 +189,7 @@ const headerStyle = computed(() => {
                 :html="terms"
               />
               <p v-else>
-                <translate translate-context="Content/About/Paragraph">
+                <translate >
                   No terms available.
                 </translate>
               </p>
@@ -198,7 +198,7 @@ const headerStyle = computed(() => {
                 id="features"
                 class="header"
               >
-                <translate translate-context="Content/About/Header/Name">
+                <translate >
                   Features
                 </translate>
               </h3>
@@ -208,7 +208,7 @@ const headerStyle = computed(() => {
                     <tbody>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">
+                          <translate >
                             Funkwhale version
                           </translate>
                         </td>
@@ -225,13 +225,13 @@ const headerStyle = computed(() => {
                           class="right aligned"
                         >
                           <span class="features-status ui text">
-                            <translate translate-context="*/*/*">N/A</translate>
+                            <translate >N/A</translate>
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">
+                          <translate >
                             Federation
                           </translate>
                         </td>
@@ -241,7 +241,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            <translate translate-context="*/*/*/State of feature">Enabled</translate>
+                            <translate >Enabled</translate>
                           </span>
                         </td>
                         <td
@@ -250,13 +250,13 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            <translate translate-context="*/*/*/State of feature">Disabled</translate>
+                            <translate >Disabled</translate>
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">
+                          <translate >
                             Allow-list
                           </translate>
                         </td>
@@ -266,7 +266,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            <translate translate-context="*/*/*/State of feature">Enabled</translate>
+                            <translate >Enabled</translate>
                           </span>
                         </td>
                         <td
@@ -275,7 +275,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            <translate translate-context="*/*/*/State of feature">Disabled</translate>
+                            <translate >Disabled</translate>
                           </span>
                         </td>
                       </tr>
@@ -287,7 +287,7 @@ const headerStyle = computed(() => {
                     <tbody>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">
+                          <translate >
                             Anonymous access
                           </translate>
                         </td>
@@ -297,7 +297,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            <translate translate-context="*/*/*/State of feature">Enabled</translate>
+                            <translate >Enabled</translate>
                           </span>
                         </td>
                         <td
@@ -306,13 +306,13 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            <translate translate-context="*/*/*/State of feature">Disabled</translate>
+                            <translate >Disabled</translate>
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">
+                          <translate >
                             Registrations
                           </translate>
                         </td>
@@ -322,7 +322,7 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="check icon" />
-                            <translate translate-context="*/*/*/State of registrations">Open</translate>
+                            <translate >Open</translate>
                           </span>
                         </td>
                         <td
@@ -331,13 +331,13 @@ const headerStyle = computed(() => {
                         >
                           <span class="features-status ui text">
                             <i class="x icon" />
-                            <translate translate-context="*/*/*/State of registrations">Closed</translate>
+                            <translate >Closed</translate>
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">
+                          <translate >
                             Upload quota
                           </translate>
                         </td>
@@ -354,7 +354,7 @@ const headerStyle = computed(() => {
                           class="right aligned"
                         >
                           <span class="features-status ui text">
-                            <translate translate-context="*/*/*">N/A</translate>
+                            <translate >N/A</translate>
                           </span>
                         </td>
                       </tr>
@@ -368,7 +368,7 @@ const headerStyle = computed(() => {
                   id="statistics"
                   class="header"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     Statistics
                   </translate>
                 </h3>
@@ -395,7 +395,7 @@ const headerStyle = computed(() => {
                       <span class="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       <translate
-                        translate-context="Content/About/*"
+
                         :translate-n="stats.artists"
                         translate-plural="artists"
                       >artist</translate>
@@ -409,7 +409,7 @@ const headerStyle = computed(() => {
                       <span class="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       <translate
-                        translate-context="Content/About/*"
+
                         :translate-n="stats.albums"
                         translate-plural="albums"
                       >album</translate>
@@ -423,7 +423,7 @@ const headerStyle = computed(() => {
                       <span class="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       <translate
-                        translate-context="Content/About/*"
+
                         :translate-n="stats.tracks"
                         translate-plural="tracks"
                       >track</translate>
@@ -437,7 +437,7 @@ const headerStyle = computed(() => {
                       <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       <translate
-                        translate-context="Content/About/*"
+
                         :translate-n="stats.users"
                         translate-plural="active users"
                       >active user</translate>
@@ -451,7 +451,7 @@ const headerStyle = computed(() => {
                       <span class="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       <translate
-                        translate-context="Content/About/*"
+
                         :translate-n="stats.listenings"
                         translate-plural="listenings"
                       >listening</translate>
@@ -465,7 +465,7 @@ const headerStyle = computed(() => {
                   id="contact"
                   class="ui header"
                 >
-                  <translate translate-context="Content/About/Header">
+                  <translate >
                     Contact
                   </translate>
                 </h3>
@@ -474,7 +474,7 @@ const headerStyle = computed(() => {
                   :href="`mailto:${contactEmail}`"
                 >
                   <translate
-                    translate-context="Content/About/Email"
+
                     :translate-params="{ email: contactEmail }"
                   >Send us an email: {{ contactEmail }}</translate>
                 </a>
@@ -487,7 +487,7 @@ const headerStyle = computed(() => {
                   class="ui left floated basic secondary button"
                 >
                   <i class="icon arrow left" />
-                  <translate translate-context="Content/About/Paragraph">
+                  <translate >
                     Introduction
                   </translate>
                 </router-link>
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index 7db516aa3..e842f7f13 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -9,12 +9,12 @@ import { humanSize } from '~/utils/filters'
 import { useStore } from '~/store'
 import { computed } from 'vue'
 import { whenever } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/Home/Title', 'Home')
+  title: t('Home')
 }))
 
 const store = useStore()
@@ -70,13 +70,12 @@ whenever(() => store.state.auth.authenticated, () => {
     >
       <div class="segment-content">
         <h1 class="ui center aligned large header">
-          <span
-            v-translate="{podName: podName}"
-            translate-context="Content/Home/Header"
+          <translate
             :translate-params="{podName: podName}"
+            tag="span"
           >
             Welcome to %{ podName }!
-          </span>
+          </translate>
           <div
             v-if="shortDescription"
             class="sub header"
@@ -90,7 +89,7 @@ whenever(() => store.state.auth.authenticated, () => {
       <div class="ui stackable grid">
         <div class="ten wide column">
           <h2 class="header">
-            <translate translate-context="Content/Home/Header">
+            <translate >
               About this Funkwhale pod
             </translate>
           </h2>
@@ -101,7 +100,7 @@ whenever(() => store.state.auth.authenticated, () => {
             <div class="ui stackable grid">
               <div class="eight wide column">
                 <p v-if="!longDescription">
-                  <translate translate-context="Content/Home/Paragraph">
+                  <translate >
                     No description available.
                   </translate>
                 </p>
@@ -126,7 +125,7 @@ whenever(() => store.state.auth.authenticated, () => {
                           class="ui link"
                           :to="{name: 'about'}"
                         >
-                          <translate translate-context="Content/Home/Link">
+                          <translate >
                             Learn more
                           </translate>
                         </router-link>
@@ -143,7 +142,7 @@ whenever(() => store.state.auth.authenticated, () => {
                           class="ui link"
                           :to="{name: 'about', hash: '#rules'}"
                         >
-                          <translate translate-context="Content/Home/Link">
+                          <translate >
                             Server rules
                           </translate>
                         </router-link>
@@ -155,13 +154,13 @@ whenever(() => store.state.auth.authenticated, () => {
               <div class="eight wide column">
                 <template v-if="stats">
                   <h3 class="sub header">
-                    <translate translate-context="Content/Home/Header">
+                    <translate >
                       Statistics
                     </translate>
                   </h3>
                   <p>
                     <i class="user icon" /><translate
-                      translate-context="Content/Home/Stat"
+
                       :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }"
                       :translate-n="stats.users"
                       translate-plural="%{ count } active users"
@@ -182,7 +181,7 @@ whenever(() => store.state.auth.authenticated, () => {
                 </template>
                 <template v-if="contactEmail">
                   <h3 class="sub header">
-                    <translate translate-context="Content/Home/Header/Name">
+                    <translate >
                       Contact
                     </translate>
                   </h3>
@@ -207,34 +206,28 @@ whenever(() => store.state.auth.authenticated, () => {
       <div class="ui stackable grid">
         <div class="four wide column">
           <h3 class="header">
-            <translate translate-context="Footer/*/Title/Short">
+            <translate >
               About Funkwhale
             </translate>
           </h3>
-          <p
-            v-translate
-            translate-context="Content/Home/Paragraph"
-          >
+          <translate tag="p">
             This pod runs Funkwhale, a community-driven project that lets you listen and share music and audio within a decentralized, open network.
-          </p>
-          <p
-            v-translate
-            translate-context="Content/Home/Paragraph"
-          >
+        </translate>
+          <translate tag="p">
             Funkwhale is free and developed by a friendly community of volunteers.
-          </p>
+          </translate>
           <a
             target="_blank"
             rel="noopener"
             href="https://funkwhale.audio"
           >
             <i class="external alternate icon" />
-            <translate translate-context="Content/Home/Link">Visit funkwhale.audio</translate>
+            <translate >Visit funkwhale.audio</translate>
           </a>
         </div>
         <div class="four wide column">
           <h3 class="header">
-            <translate translate-context="Head/Login/Title">
+            <translate >
               Log In
             </translate>
           </h3>
@@ -246,19 +239,19 @@ whenever(() => store.state.auth.authenticated, () => {
         </div>
         <div class="four wide column">
           <h3 class="header">
-            <translate translate-context="*/Signup/Title">
+            <translate >
               Sign up
             </translate>
           </h3>
           <template v-if="openRegistrations">
             <p>
-              <translate translate-context="Content/Home/Paragraph">
+              <translate >
                 Sign up now to keep track of your favorites, create playlists, discover new content and much more!
               </translate>
             </p>
             <p v-if="defaultUploadQuota">
               <translate
-                translate-context="Content/Home/Paragraph"
+
                 :translate-params="{quota: humanSize(defaultUploadQuota * 1000 * 1000)}"
               >
                 Users on this pod also get %{ quota } of free storage to upload their own content!
@@ -270,7 +263,7 @@ whenever(() => store.state.auth.authenticated, () => {
             />
           </template>
           <div v-else>
-            <p translate-context="Content/Home/Paragraph">
+            <p >
               Registrations are closed on this pod. You can signup on another pod using the link below.
             </p>
             <a
@@ -279,14 +272,14 @@ whenever(() => store.state.auth.authenticated, () => {
               href="https://funkwhale.audio/#get-started"
             >
               <i class="external alternate icon" />
-              <translate translate-context="Content/Home/Link">Find another pod</translate>
+              <translate >Find another pod</translate>
             </a>
           </div>
         </div>
 
         <div class="four wide column">
           <h3 class="header">
-            <translate translate-context="Content/Home/Header">
+            <translate >
               Useful links
             </translate>
           </h3>
@@ -299,12 +292,12 @@ whenever(() => store.state.auth.authenticated, () => {
                   class="header"
                   to="/library"
                 >
-                  <translate translate-context="Content/Home/Link">
+                  <translate >
                     Browse public content
                   </translate>
                 </router-link>
                 <div class="description">
-                  <translate translate-context="Content/Home/Link">
+                  <translate >
                     Listen to public albums and playlists shared on this pod
                   </translate>
                 </div>
@@ -319,10 +312,10 @@ whenever(() => store.state.auth.authenticated, () => {
                   target="_blank"
                   rel="noopener"
                 >
-                  <translate translate-context="Content/Home/Link">Mobile apps</translate>
+                  <translate >Mobile apps</translate>
                 </a>
                 <div class="description">
-                  <translate translate-context="Content/Home/Link">
+                  <translate >
                     Use Funkwhale on other devices with our apps
                   </translate>
                 </div>
@@ -337,10 +330,10 @@ whenever(() => store.state.auth.authenticated, () => {
                   target="_blank"
                   rel="noopener"
                 >
-                  <translate translate-context="Content/Home/Link">User guides</translate>
+                  <translate >User guides</translate>
                 </a>
                 <div class="description">
-                  <translate translate-context="Content/Home/Link">
+                  <translate >
                     Discover everything you need to know about Funkwhale and its features
                   </translate>
                 </div>
@@ -359,12 +352,12 @@ whenever(() => store.state.auth.authenticated, () => {
         :limit="10"
       >
         <template #title>
-          <translate translate-context="Content/Home/Title">
+          <translate >
             Recently added albums
           </translate>
         </template>
         <router-link to="/library">
-          <translate translate-context="Content/Home/Link">
+          <translate >
             View more…
           </translate>
           <div class="ui hidden divider" />
@@ -372,7 +365,7 @@ whenever(() => store.state.auth.authenticated, () => {
       </album-widget>
       <div class="ui hidden section divider" />
       <h3 class="ui header">
-        <translate translate-context="*/*/*">
+        <translate >
           New channels
         </translate>
       </h3>
diff --git a/front/src/components/PageNotFound.vue b/front/src/components/PageNotFound.vue
index 60c7121e3..f8f9d9183 100644
--- a/front/src/components/PageNotFound.vue
+++ b/front/src/components/PageNotFound.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 const path = window.location.href
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/*/Title', 'Page Not Found')
+  title: t('Page Not Found')
 }))
 </script>
 
@@ -20,13 +20,13 @@ const labels = computed(() => ({
         <h1 class="ui huge header">
           <i class="warning icon" />
           <div class="content">
-            <translate translate-context="Content/*/Title">
+            <translate >
               Page not found!
             </translate>
           </div>
         </h1>
         <p>
-          <translate translate-context="Content/*/Paragraph">
+          <translate >
             Sorry, the page you asked for does not exist:
           </translate>
         </p>
@@ -36,7 +36,7 @@ const labels = computed(() => ({
           class="ui icon labeled right button"
           to="/"
         >
-          <translate translate-context="Content/*/Button.Label/Verb">
+          <translate >
             Go to home page
           </translate>
           <i class="right arrow icon" />
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 763058190..e90b613fa 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -4,7 +4,6 @@ import type { QueueItemSource } from '~/types'
 import { whenever, watchDebounced, useCurrentElement, useScrollLock, useFullscreen, useIdle, refAutoReset, useStorage } from '@vueuse/core'
 import { nextTick, ref, computed, watchEffect, onMounted } from 'vue'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import { useGettext } from 'vue3-gettext'
 import { useRouter } from 'vue-router'
 import { useStore } from '~/store'
 
@@ -18,6 +17,11 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import PlayerControls from '~/components/audio/PlayerControls.vue'
 import MilkDrop from '~/components/audio/visualizer/MilkDrop.vue'
+import { whenever, watchDebounced, useCurrentElement, useScrollLock } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import useQueue from '~/composables/audio/useQueue'
+import usePlayer from '~/composables/audio/usePlayer'
+
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
 
@@ -49,24 +53,24 @@ const { currentSound } = useTracks()
 const queueModal = ref()
 const { activate, deactivate } = useFocusTrap(queueModal, { allowOutsideClick: true, preventScroll: true })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const scrollLock = useScrollLock(document.body)
 const store = useStore()
 
 const labels = computed(() => ({
-  queue: $pgettext('*/*/*', 'Queue'),
-  populating: $pgettext('*/*/*', 'Fetching radio track'),
-  duration: $pgettext('*/*/*', 'Duration'),
-  addArtistContentFilter: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…'),
-  restart: $pgettext('*/*/*', 'Restart track'),
-  previous: $pgettext('*/*/*', 'Previous track'),
-  next: $pgettext('*/*/*', 'Next track'),
-  pause: $pgettext('*/*/*', 'Pause'),
-  play: $pgettext('*/*/*', 'Play'),
-  fullscreen: $pgettext('*/*/*', 'Fullscreen'),
-  exitFullscreen: $pgettext('*/*/*', 'Exit fullscreen'),
-  showCoverArt: $pgettext('*/*/*', 'Show cover art'),
-  showVisualizer: $pgettext('*/*/*', 'Show visualizer')
+  queue: t('Queue'),
+  populating: t('Fetching radio track'),
+  duration: t('Duration'),
+  addArtistContentFilter: t('Hide content from this artist…'),
+  restart: t('Restart track'),
+  previous: t('Previous track'),
+  next: t('Next track'),
+  pause: t('Pause'),
+  play: t('Play'),
+  fullscreen: t('Fullscreen'),
+  exitFullscreen: t('Exit fullscreen'),
+  showCoverArt: t('Show cover art'),
+  showVisualizer: t('Show visualizer')
 }))
 
 watchEffect(async () => {
@@ -125,10 +129,11 @@ const queueItems = computed(() => queue.value.map((track, index) => ({
   ...track,
   key: `${index}-${track.id}`,
   labels: {
-    remove: $pgettext('*/*/*', 'Remove'),
-    selectTrack: $pgettext('*/*/*', 'Select track'),
-    favorite: $pgettext('*/*/*', 'Favorite track')
-  }
+    remove: t('Remove'),
+    selectTrack: t('Select track'),
+    favorite: t('Favorite track')
+  },
+  duration: time.durationFormatted(track.uploads[0]?.duration ?? 0) ?? ''
 }) as QueueItemSource))
 
 const reorderTracks = async (from: number, to: number) => {
@@ -296,18 +301,18 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
             class="ui small warning message"
           >
             <h3 class="header">
-              <translate translate-context="Sidebar/Player/Error message.Title">
+              <translate >
                 The track cannot be loaded
               </translate>
             </h3>
             <p v-if="hasNext && isPlaying">
-              <translate translate-context="Sidebar/Player/Error message.Paragraph">
+              <translate >
                 The next track will play automatically in a few seconds…
               </translate>
               <i class="loading spinner icon" />
             </p>
             <p>
-              <translate translate-context="Sidebar/Player/Error message.Paragraph">
+              <translate >
                 You may have a connectivity issue.
               </translate>
             </p>
@@ -408,7 +413,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                 class="ui right floated basic button"
                 @click="$store.commit('ui/queueFocused', null)"
               >
-                <translate translate-context="*/Queue/*/Verb">
+                <translate >
                   Close
                 </translate>
               </button>
@@ -416,7 +421,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                 class="ui right floated basic button danger"
                 @click="clear"
               >
-                <translate translate-context="*/Queue/*/Verb">
+                <translate >
                   Clear
                 </translate>
               </button>
@@ -424,7 +429,6 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
               <div class="sub header">
                 <div>
                   <translate
-                    translate-context="Sidebar/Queue/Text"
                     :translate-params="{index: currentIndex + 1, length: queue.length}"
                   >
                     Track %{ index } of %{ length }
@@ -473,12 +477,12 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
             >
               <div class="content">
                 <h3 class="header">
-                  <i class="feed icon" /> <translate translate-context="Sidebar/Player/Title">
+                  <i class="feed icon" /> <translate >
                     You have a radio playing
                   </translate>
                 </h3>
                 <p>
-                  <translate translate-context="Sidebar/Player/Paragraph">
+                  <translate >
                     New tracks will be appended here automatically.
                   </translate>
                 </p>
@@ -486,7 +490,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                   class="ui basic primary button"
                   @click="$store.dispatch('radios/stop')"
                 >
-                  <translate translate-context="*/Player/Button.Label/Short, Verb">
+                  <translate >
                     Stop radio
                   </translate>
                 </button>
diff --git a/front/src/components/RemoteSearchForm.vue b/front/src/components/RemoteSearchForm.vue
index 5c50fd996..777f108a8 100644
--- a/front/src/components/RemoteSearchForm.vue
+++ b/front/src/components/RemoteSearchForm.vue
@@ -2,7 +2,7 @@
 import type { BackendError } from '~/types'
 
 import { ref, computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useStore } from '~/store'
 
@@ -37,17 +37,17 @@ const type = ref(props.initialType)
 const id = ref(props.initialId)
 const errors = ref([] as string[])
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
   title: type.value === 'rss'
-    ? $pgettext('Head/Fetch/Title', 'Subscribe to a podcast RSS feed')
-    : $pgettext('Head/Fetch/Title', 'Subscribe to a podcast hosted on the Fediverse'),
+    ? t('Subscribe to a podcast RSS feed')
+    : t('Subscribe to a podcast hosted on the Fediverse'),
   fieldLabel: type.value === 'rss'
-    ? $pgettext('*/*/*', 'RSS feed location')
-    : $pgettext('*/*/*', 'Fediverse object'),
+    ? t('RSS feed location')
+    : t('Fediverse object'),
   fieldPlaceholder: type.value === 'rss'
-    ? $pgettext('Head/Fetch/Field.Placeholder', 'https://website.example.com/rss.xml')
-    : $pgettext('Head/Fetch/Field.Placeholder', '@username@example.com')
+    ? t('https://website.example.com/rss.xml')
+    : t('@username@example.com')
 }))
 
 const obj = ref()
@@ -117,7 +117,7 @@ const createFetch = async () => {
     obj.value = response.data
 
     if (response.data.status === 'errored' || response.data.status === 'skipped') {
-      errors.value.push($pgettext('Content/*/Error message.Title', 'This object cannot be retrieved'))
+      errors.value.push(t('This object cannot be retrieved'))
     }
   } catch (error) {
     errors.value = (error as BackendError).backendErrors
@@ -172,7 +172,7 @@ watch(() => props.initialId, () => {
       @click.prevent="type = 'rss'"
     >
       <i class="feed icon" />
-      <translate translate-context="Content/Search/Input.Label/Noun">
+      <translate >
         RSS
       </translate>
     </button>
@@ -182,7 +182,7 @@ watch(() => props.initialId, () => {
       @click.prevent="type = 'artists'"
     >
       <i class="globe icon" />
-      <translate translate-context="Content/Search/Input.Label/Noun">
+      <translate >
         Fediverse
       </translate>
     </button>
@@ -199,7 +199,7 @@ watch(() => props.initialId, () => {
         class="ui negative message"
       >
         <h3 class="header">
-          <translate translate-context="Content/*/Error message.Title">
+          <translate >
             Error while fetching object
           </translate>
         </h3>
@@ -217,12 +217,12 @@ watch(() => props.initialId, () => {
           {{ labels.fieldLabel }}
         </label>
         <p v-if="type === 'rss'">
-          <translate translate-context="Content/Fetch/Paragraph">
+          <translate >
             Use this form to subscribe to an RSS feed from its URL.
           </translate>
         </p>
         <p v-else-if="type === 'artists'">
-          <translate translate-context="Content/Fetch/Paragraph">
+          <translate >
             Use this form to subscribe to a channel hosted somewhere else on the Fediverse.
           </translate>
         </p>
@@ -241,7 +241,7 @@ watch(() => props.initialId, () => {
         :class="['ui', 'primary', {loading: isLoading}, 'button']"
         :disabled="isLoading || !id || id.length === 0"
       >
-        <translate translate-context="Content/Search/Input.Label/Noun">
+        <translate >
           Search
         </translate>
       </button>
@@ -252,7 +252,7 @@ watch(() => props.initialId, () => {
       class="ui warning message"
     >
       <p>
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           This kind of object isn't supported yet
         </translate>
       </p>
diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
index ec50c76fd..70b00fb09 100644
--- a/front/src/components/SetInstanceModal.vue
+++ b/front/src/components/SetInstanceModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useVModel } from '@vueuse/core'
 import { useStore } from '~/store'
 import { uniq } from 'lodash-es'
@@ -38,7 +38,7 @@ const suggestedInstances = computed(() => {
 
 watch(() => store.state.instance.instanceUrl, () => store.dispatch('instance/fetchSettings'))
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const isError = ref(false)
 const isLoading = ref(false)
 const checkAndSwitch = async (url: string) => {
@@ -51,7 +51,7 @@ const checkAndSwitch = async (url: string) => {
 
     show.value = false
     store.commit('ui/addMessage', {
-      content: $pgettext('*/Instance/Message', 'You are now using the Funkwhale instance at %{ url }', { url: instanceUrl }),
+      content: t('You are now using the Funkwhale instance at %{ url }', { url: instanceUrl }),
       date: new Date()
     })
 
@@ -71,7 +71,7 @@ const checkAndSwitch = async (url: string) => {
     @update:show="isError = false"
   >
     <h3 class="header">
-      <translate translate-context="Popup/Instance/Title">
+      <translate >
         Choose your instance
       </translate>
     </h3>
@@ -82,18 +82,18 @@ const checkAndSwitch = async (url: string) => {
         class="ui negative message"
       >
         <h4 class="header">
-          <translate translate-context="Popup/Instance/Error message.Title">
+          <translate >
             It is not possible to connect to the given URL
           </translate>
         </h4>
         <ul class="list">
           <li>
-            <translate translate-context="Popup/Instance/Error message.List item">
+            <translate >
               The server might be down
             </translate>
           </li>
           <li>
-            <translate translate-context="Popup/Instance/Error message.List item">
+            <translate >
               The given address is not a Funkwhale server
             </translate>
           </li>
@@ -107,7 +107,7 @@ const checkAndSwitch = async (url: string) => {
           v-if="$store.state.instance.instanceUrl"
           v-translate="{url: $store.state.instance.instanceUrl, hostname: $store.getters['instance/domain'] }"
           class="description"
-          translate-context="Popup/Login/Paragraph"
+
         >
           You are currently connected to <a
             href="%{ url }"
@@ -115,12 +115,12 @@ const checkAndSwitch = async (url: string) => {
           >%{ hostname }&nbsp;<i class="external icon" /></a>. If you continue, you will be disconnected from your current instance and all your local data will be deleted.
         </p>
         <p v-else>
-          <translate translate-context="Popup/Instance/Paragraph">
+          <translate >
             To continue, please select the Funkwhale instance you want to connect to. Enter the address directly, or select one of the suggested choices.
           </translate>
         </p>
         <div class="field">
-          <label for="instance-picker"><translate translate-context="Popup/Instance/Input.Label/Noun">Instance URL</translate></label>
+          <label for="instance-picker"><translate >Instance URL</translate></label>
           <div class="ui action input">
             <input
               id="instance-picker"
@@ -132,7 +132,7 @@ const checkAndSwitch = async (url: string) => {
               type="submit"
               :class="['ui', 'icon', {loading: isLoading}, 'button']"
             >
-              <translate translate-context="*/*/Button.Label/Verb">
+              <translate >
                 Submit
               </translate>
             </button>
@@ -146,7 +146,7 @@ const checkAndSwitch = async (url: string) => {
       >
         <div class="field">
           <h4>
-            <translate translate-context="Popup/Instance/List.Label">
+            <translate >
               Suggested choices
             </translate>
           </h4>
@@ -163,7 +163,7 @@ const checkAndSwitch = async (url: string) => {
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Cancel
         </translate>
       </button>
diff --git a/front/src/components/ShortcutsModal.vue b/front/src/components/ShortcutsModal.vue
index 9c406d284..8859bb590 100644
--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@@ -2,7 +2,7 @@
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'update:show', show: boolean): void
@@ -17,22 +17,22 @@ const props = defineProps<Props>()
 
 const showRef = useVModel(props, 'show', emit)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const general = computed(() => [
   {
-    title: $pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'),
+    title: t('General shortcuts'),
     shortcuts: [
       {
         key: 'h',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Show available keyboard shortcuts')
+        summary: t('Show available keyboard shortcuts')
       },
       {
         key: 'shift + f',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Focus searchbar')
+        summary: t('Focus searchbar')
       },
       {
         key: 'esc',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Unfocus searchbar')
+        summary: t('Unfocus searchbar')
       }
     ]
   }
@@ -40,67 +40,67 @@ const general = computed(() => [
 
 const player = computed(() => [
   {
-    title: $pgettext('Popup/Keyboard shortcuts/Title', 'Audio player shortcuts'),
+    title: t('Audio player shortcuts'),
     shortcuts: [
       {
         key: 'p',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
+        summary: t('Pause/play the current track')
       },
       {
         key: 'left',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 5s')
+        summary: t('Seek backwards 5s')
       },
       {
         key: 'right',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 5s')
+        summary: t('Seek forwards 5s')
       },
       {
         key: 'shift + left',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 30s')
+        summary: t('Seek backwards 30s')
       },
       {
         key: 'shift + right',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 30s')
+        summary: t('Seek forwards 30s')
       },
       {
         key: 'ctrl + shift + left',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
+        summary: t('Play previous track')
       },
       {
         key: 'ctrl + shift + right',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
+        summary: t('Play next track')
       },
       {
         key: 'shift + up',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume')
+        summary: t('Increase volume')
       },
       {
         key: 'shift + down',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Decrease volume')
+        summary: t('Decrease volume')
       },
       {
         key: 'm',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle mute')
+        summary: t('Toggle mute')
       },
       {
         key: 'e',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Expand queue/player view')
+        summary: t('Expand queue/player view')
       },
       {
         key: 'l',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle queue looping')
+        summary: t('Toggle queue looping')
       },
       {
         key: 's',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Shuffle queue')
+        summary: t('Shuffle queue')
       },
       {
         key: 'q',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Clear queue')
+        summary: t('Clear queue')
       },
       {
         key: 'f',
-        summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle favorite')
+        summary: t('Toggle favorite')
       }
     ]
   }
@@ -110,7 +110,7 @@ const player = computed(() => [
 <template>
   <semantic-modal v-model:show="showRef">
     <header class="header">
-      <translate translate-context="*/*/*/Noun">
+      <translate >
         Keyboard shortcuts
       </translate>
     </header>
@@ -156,7 +156,7 @@ const player = computed(() => [
     </section>
     <footer class="actions">
       <button class="ui basic cancel button">
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Close
         </translate>
       </button>
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 0a7b4498d..48abd56c9 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
 import type { RouteRecordName } from 'vue-router'
 
+import { computed, ref, watch, watchEffect, onMounted } from 'vue'
+import { SUPPORTED_LOCALES } from '~/init/locale'
+import { useCurrentElement } from '@vueuse/core'
+import { setupDropdown } from '~/utils/fomantic'
+import { useRoute } from 'vue-router'
+import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+
+import SemanticModal from '~/components/semantic/Modal.vue'
 import UserModal from '~/components/common/UserModal.vue'
-import Logo from '~/components/Logo.vue'
 import SearchBar from '~/components/audio/SearchBar.vue'
 import UserMenu from '~/components/common/UserMenu.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Logo from '~/components/Logo.vue'
 
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
-import { useRoute } from 'vue-router'
-import { computed, ref, watch, watchEffect, onMounted } from 'vue'
-import { useGettext } from 'vue3-gettext'
-import { useStore } from '~/store'
-import { setupDropdown } from '~/utils/fomantic'
-import { useCurrentElement } from '@vueuse/core'
 
 interface Events {
   (e: 'show:set-instance-modal'): void
@@ -30,7 +32,7 @@ defineProps<Props>()
 const store = useStore()
 const { theme } = useTheme()
 const themes = useThemeList()
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const route = useRoute()
 const isCollapsed = ref(true)
@@ -40,15 +42,15 @@ const additionalNotifications = computed(() => store.getters['ui/additionalNotif
 const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
 
 const labels = computed(() => ({
-  mainMenu: $pgettext('Sidebar/*/Hidden text', 'Main menu'),
-  selectTrack: $pgettext('Sidebar/Player/Hidden text', 'Play this track'),
-  pendingFollows: $pgettext('Sidebar/Notifications/Hidden text', 'Pending follow requests'),
-  pendingReviewEdits: $pgettext('Sidebar/Moderation/Hidden text', 'Pending review edits'),
-  pendingReviewReports: $pgettext('Sidebar/Moderation/Hidden text', 'Pending review reports'),
-  language: $pgettext('Sidebar/Settings/Dropdown.Label/Short, Verb', 'Language'),
-  theme: $pgettext('Sidebar/Settings/Dropdown.Label/Short, Verb', 'Theme'),
-  addContent: $pgettext('*/Library/*/Verb', 'Add content'),
-  administration: $pgettext('Sidebar/Admin/Title/Noun', 'Administration')
+  mainMenu: t('Main menu'),
+  selectTrack: t('Play this track'),
+  pendingFollows: t('Pending follow requests'),
+  pendingReviewEdits: t('Pending review edits'),
+  pendingReviewReports: t('Pending review reports'),
+  language: t('Language'),
+  theme: t('Theme'),
+  addContent: t('Add content'),
+  administration: t('Administration')
 }))
 
 type SidebarMenuTabs = 'explore' | 'myLibrary'
@@ -104,12 +106,6 @@ const showUserModal = ref(false)
 const showLanguageModal = ref(false)
 const showThemeModal = ref(false)
 
-const gettext = useGettext()
-const languageSelection = ref(gettext.current)
-watch(languageSelection, (v) => {
-  store.dispatch('ui/currentLanguage', v)
-})
-
 const el = useCurrentElement()
 watchEffect(() => {
   if (store.state.auth.authenticated) {
@@ -153,7 +149,7 @@ onMounted(() => {
               </div>
               <div class="menu">
                 <h3 class="header">
-                  <translate translate-context="Sidebar/Admin/Title/Noun">
+                  <translate >
                     Administration
                   </translate>
                 </h3>
@@ -170,7 +166,7 @@ onMounted(() => {
                   >
                     {{ $store.state.ui.notifications.pendingReviewEdits }}
                   </div>
-                  <translate translate-context="*/*/*/Noun">
+                  <translate >
                     Library
                   </translate>
                 </router-link>
@@ -186,7 +182,7 @@ onMounted(() => {
                   >
                     {{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
                   </div>
-                  <translate translate-context="*/Moderation/*">
+                  <translate >
                     Moderation
                   </translate>
                 </router-link>
@@ -195,7 +191,7 @@ onMounted(() => {
                   class="item"
                   :to="{name: 'manage.users.users.list'}"
                 >
-                  <translate translate-context="*/*/*/Noun">
+                  <translate >
                     Users
                   </translate>
                 </router-link>
@@ -204,7 +200,7 @@ onMounted(() => {
                   class="item"
                   :to="{path: '/manage/settings'}"
                 >
-                  <translate translate-context="*/*/*/Noun">
+                  <translate >
                     Settings
                   </translate>
                 </router-link>
@@ -300,12 +296,12 @@ onMounted(() => {
           </div>
           <div class="content">
             <fieldset
-              v-for="(language, key) in $language.available"
+              v-for="(language, key) in SUPPORTED_LOCALES"
               :key="key"
             >
               <input
                 :id="`${key}`"
-                v-model="languageSelection"
+                v-model="$i18n.locale"
                 type="radio"
                 name="language"
                 :value="key"
@@ -366,7 +362,7 @@ onMounted(() => {
         class="ui fluid tiny primary button"
         :to="{name: 'login'}"
       >
-        <translate translate-context="*/Login/*/Verb">
+        <translate >
           Login
         </translate>
       </router-link>
@@ -375,7 +371,7 @@ onMounted(() => {
         class="ui fluid tiny button"
         :to="{path: '/signup'}"
       >
-        <translate translate-context="*/Signup/Link/Verb">
+        <translate >
           Create an account
         </translate>
       </router-link>
@@ -389,7 +385,7 @@ onMounted(() => {
         id="navigation-label"
         class="visually-hidden"
       >
-        <translate translate-context="*/*/*">
+        <translate >
           Main navigation
         </translate>
       </h1>
@@ -411,7 +407,7 @@ onMounted(() => {
               @click="expanded = 'explore'"
               @focus="expanded = 'explore'"
             >
-              <translate translate-context="*/*/*/Verb">
+              <translate >
                 Explore
               </translate>
               <i
@@ -424,7 +420,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'search'}"
               >
-                <i class="search icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
+                <i class="search icon" /><translate >
                   Search
                 </translate>
               </router-link>
@@ -433,7 +429,7 @@ onMounted(() => {
                 :to="{name: 'library.index'}"
                 active-class="_active"
               >
-                <i class="music icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
+                <i class="music icon" /><translate >
                   Browse
                 </translate>
               </router-link>
@@ -441,7 +437,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.podcasts.browse'}"
               >
-                <i class="podcast icon" /><translate translate-context="*/*/*">
+                <i class="podcast icon" /><translate >
                   Podcasts
                 </translate>
               </router-link>
@@ -449,7 +445,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.albums.browse'}"
               >
-                <i class="compact disc icon" /><translate translate-context="*/*/*">
+                <i class="compact disc icon" /><translate >
                   Albums
                 </translate>
               </router-link>
@@ -457,7 +453,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.artists.browse'}"
               >
-                <i class="user icon" /><translate translate-context="*/*/*">
+                <i class="user icon" /><translate >
                   Artists
                 </translate>
               </router-link>
@@ -465,7 +461,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.playlists.browse'}"
               >
-                <i class="list icon" /><translate translate-context="*/*/*">
+                <i class="list icon" /><translate >
                   Playlists
                 </translate>
               </router-link>
@@ -473,7 +469,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.radios.browse'}"
               >
-                <i class="feed icon" /><translate translate-context="*/*/*">
+                <i class="feed icon" /><translate >
                   Radios
                 </translate>
               </router-link>
@@ -490,7 +486,7 @@ onMounted(() => {
               @click="expanded = 'myLibrary'"
               @focus="expanded = 'myLibrary'"
             >
-              <translate translate-context="*/*/*/Noun">
+              <translate >
                 My Library
               </translate>
               <i
@@ -503,7 +499,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.me'}"
               >
-                <i class="music icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
+                <i class="music icon" /><translate >
                   Browse
                 </translate>
               </router-link>
@@ -511,7 +507,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.albums.me'}"
               >
-                <i class="compact disc icon" /><translate translate-context="*/*/*">
+                <i class="compact disc icon" /><translate >
                   Albums
                 </translate>
               </router-link>
@@ -519,7 +515,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.artists.me'}"
               >
-                <i class="user icon" /><translate translate-context="*/*/*">
+                <i class="user icon" /><translate >
                   Artists
                 </translate>
               </router-link>
@@ -527,7 +523,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.playlists.me'}"
               >
-                <i class="list icon" /><translate translate-context="*/*/*">
+                <i class="list icon" /><translate >
                   Playlists
                 </translate>
               </router-link>
@@ -535,7 +531,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'library.radios.me'}"
               >
-                <i class="feed icon" /><translate translate-context="*/*/*">
+                <i class="feed icon" /><translate >
                   Radios
                 </translate>
               </router-link>
@@ -543,7 +539,7 @@ onMounted(() => {
                 class="item"
                 :to="{name: 'favorites'}"
               >
-                <i class="heart icon" /><translate translate-context="Sidebar/Favorites/List item.Link/Noun">
+                <i class="heart icon" /><translate >
                   Favorites
                 </translate>
               </router-link>
@@ -554,13 +550,13 @@ onMounted(() => {
             class="header item"
             :to="{name: 'subscriptions'}"
           >
-            <translate translate-context="*/*/*">
+            <translate >
               Channels
             </translate>
           </router-link>
           <div class="item">
             <h3 class="header">
-              <translate translate-context="Footer/About/List item.Link">
+              <translate >
                 More
               </translate>
             </h3>
@@ -570,7 +566,7 @@ onMounted(() => {
                 to="/about"
                 active-class="router-link-exact-active active"
               >
-                <i class="info icon" /><translate translate-context="Sidebar/*/List item.Link">
+                <i class="info icon" /><translate >
                   About this pod
                 </translate>
               </router-link>
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index d0879552d..01571d7a3 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -110,7 +110,7 @@ const save = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Error while saving settings
         </translate>
       </h4>
@@ -127,7 +127,7 @@ const save = async () => {
       v-if="result"
       class="ui positive message"
     >
-      <translate translate-context="Content/Settings/Paragraph">
+      <translate >
         Settings updated successfully.
       </translate>
     </div>
@@ -229,7 +229,7 @@ const save = async () => {
         <div v-if="values[setting.identifier]">
           <div class="ui hidden divider" />
           <h3 class="ui header">
-            <translate translate-context="Content/Settings/Title/Noun">
+            <translate >
               Current image
             </translate>
           </h3>
@@ -246,7 +246,7 @@ const save = async () => {
       type="submit"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
     >
-      <translate translate-context="Content/*/Button.Label/Verb">
+      <translate >
         Save
       </translate>
     </button>
diff --git a/front/src/components/admin/SignupFormBuilder.vue b/front/src/components/admin/SignupFormBuilder.vue
index f64c537d8..d2a28355a 100644
--- a/front/src/components/admin/SignupFormBuilder.vue
+++ b/front/src/components/admin/SignupFormBuilder.vue
@@ -4,7 +4,7 @@ import type { Form } from '~/types'
 import SignupForm from '~/components/auth/SignupForm.vue'
 import { useVModel } from '@vueuse/core'
 import { computed, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { arrayMove } from '~/utils'
 
 interface Events {
@@ -26,11 +26,11 @@ const value = useVModel(props, 'modelValue', emit, { deep: true })
 const maxFields = ref(10)
 const isPreviewing = ref(false)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  delete: $pgettext('*/*/*', 'Delete'),
-  up: $pgettext('*/*/*', 'Move up'),
-  down: $pgettext('*/*/*', 'Move down')
+  delete: t('Delete'),
+  up: t('Move up'),
+  down: t('Move down')
 }))
 
 if (!value.value?.fields) {
@@ -45,7 +45,7 @@ if (!value.value?.fields) {
 
 const addField = () => {
   value.value.fields.push({
-    label: $pgettext('*/*/Form-builder', 'Additional field') + ' ' + (value.value.fields.length + 1),
+    label: t('Additional field') + ' ' + (value.value.fields.length + 1),
     required: true,
     input_type: 'short_text'
   })
@@ -69,7 +69,7 @@ const move = (idx: number, increment: number) => {
         :class="[{active: !isPreviewing}, 'item']"
         @click.stop.prevent="isPreviewing = false"
       >
-        <translate translate-context="Content/*/Button.Label/Verb">
+        <translate >
           Edit form
         </translate>
       </button>
@@ -77,7 +77,7 @@ const move = (idx: number, increment: number) => {
         :class="[{active: isPreviewing}, 'item']"
         @click.stop.prevent="isPreviewing = true"
       >
-        <translate translate-context="*/Form/Menu.item">
+        <translate >
           Preview form
         </translate>
       </button>
@@ -99,10 +99,10 @@ const move = (idx: number, increment: number) => {
     >
       <div class="field">
         <label for="help-text">
-          <translate translate-context="*/*/Label">Help text</translate>
+          <translate >Help text</translate>
         </label>
         <p>
-          <translate translate-context="*/*/Help">
+          <translate >
             An optional text to be displayed at the start of the sign-up form.
           </translate>
         </p>
@@ -115,10 +115,10 @@ const move = (idx: number, increment: number) => {
       </div>
       <div class="field">
         <label>
-          <translate translate-context="*/*/Label">Additional fields</translate>
+          <translate >Additional fields</translate>
         </label>
         <p>
-          <translate translate-context="*/*/Help">
+          <translate >
             Additional form fields to be displayed in the form. Only shown if manual sign-up validation is enabled.
           </translate>
         </p>
@@ -126,21 +126,21 @@ const move = (idx: number, increment: number) => {
           <thead>
             <tr>
               <th>
-                <translate translate-context="*/*/Form-builder,Help">
+                <translate >
                   Field label
                 </translate>
               </th>
               <th>
-                <translate translate-context="*/*/Form-builder,Help">
+                <translate >
                   Field type
                 </translate>
               </th>
               <th>
-                <translate translate-context="*/*/Form-builder,Help">
+                <translate >
                   Required
                 </translate>
               </th>
-              <th><span class="visually-hidden"><translate translate-context="*/*/Form-builder,Help">Actions</translate></span></th>
+              <th><span class="visually-hidden"><translate >Actions</translate></span></th>
             </tr>
           </thead>
           <tbody>
@@ -158,12 +158,12 @@ const move = (idx: number, increment: number) => {
               <td>
                 <select v-model="field.input_type">
                   <option value="short_text">
-                    <translate translate-context="*/*/Form-builder">
+                    <translate >
                       Short text
                     </translate>
                   </option>
                   <option value="long_text">
-                    <translate translate-context="*/*/Form-builder">
+                    <translate >
                       Long text
                     </translate>
                   </option>
@@ -172,12 +172,12 @@ const move = (idx: number, increment: number) => {
               <td>
                 <select v-model="field.required">
                   <option :value="true">
-                    <translate translate-context="*/*/*">
+                    <translate >
                       Yes
                     </translate>
                   </option>
                   <option :value="false">
-                    <translate translate-context="*/*/*">
+                    <translate >
                       No
                     </translate>
                   </option>
@@ -214,7 +214,7 @@ const move = (idx: number, increment: number) => {
           class="ui basic button"
           @click.stop.prevent="addField"
         >
-          <translate translate-context="*/*/Form-builder">
+          <translate >
             Add a new field
           </translate>
         </button>
diff --git a/front/src/components/audio/ChannelCard.vue b/front/src/components/audio/ChannelCard.vue
index 4f0f3b5c2..ca0b3ca4a 100644
--- a/front/src/components/audio/ChannelCard.vue
+++ b/front/src/components/audio/ChannelCard.vue
@@ -2,7 +2,7 @@
 import type { Channel } from '~/types'
 
 import { momentFormat } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { computed } from 'vue'
 
@@ -30,10 +30,10 @@ const urlId = computed(() => props.object.actor?.is_local
     : props.object.uuid
 )
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const updatedTitle = computed(() => {
   const date = momentFormat(new Date(props.object.artist?.modification_date ?? '1970-01-01'))
-  return $pgettext('*/*/*', 'Updated on %{ date }', { date })
+  return t('Updated on %{ date }', { date })
 })
 
 // TODO (wvffle): Use time ago
@@ -67,7 +67,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
         <translate
           v-if="object.artist?.content_category === 'podcast'"
           class="meta ellipsis"
-          translate-context="Content/Channel/Paragraph"
+
           translate-plural="%{ count } episodes"
           :translate-n="object.artist.tracks_count"
           :translate-params="{count: object.artist.tracks_count}"
@@ -76,7 +76,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
         </translate>
         <translate
           v-else
-          translate-context="*/*/*"
+
           :translate-params="{count: object.artist?.tracks_count}"
           :translate-n="object.artist?.tracks_count"
           translate-plural="%{ count } tracks"
diff --git a/front/src/components/audio/ChannelEntries.vue b/front/src/components/audio/ChannelEntries.vue
index ae2967f3c..5cada810d 100644
--- a/front/src/components/audio/ChannelEntries.vue
+++ b/front/src/components/audio/ChannelEntries.vue
@@ -103,7 +103,7 @@ watch(page, fetchData, { immediate: true })
         @refresh="fetchData()"
       >
         <p>
-          <translate translate-context="Content/Channels/*">
+          <translate >
             You may need to subscribe to this channel to see its content.
           </translate>
         </p>
diff --git a/front/src/components/audio/ChannelForm.vue b/front/src/components/audio/ChannelForm.vue
index 6bc77225d..4bdbe4029 100644
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@@ -3,7 +3,7 @@ import type { ContentCategory, Channel, BackendError } from '~/types'
 
 import { slugify } from 'transliteration'
 import { reactive, computed, ref, watchEffect, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   step: 1
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const newValues = reactive({
   name: props.object?.artist?.name ?? '',
@@ -45,13 +45,13 @@ const creating = computed(() => props.object === null)
 const categoryChoices = computed(() => [
   {
     value: 'podcast',
-    label: $pgettext('*/*/*', 'Podcasts'),
-    helpText: $pgettext('Content/Channels/Help', 'Host your episodes and keep your community updated.')
+    label: t('Podcasts'),
+    helpText: t('Host your episodes and keep your community updated.')
   },
   {
     value: 'music',
-    label: $pgettext('*/*/*', 'Artist discography'),
-    helpText: $pgettext('Content/Channels/Help', 'Publish music you make as a nice discography of albums and singles.')
+    label: t('Artist discography'),
+    helpText: t('Publish music you make as a nice discography of albums and singles.')
   }
 ])
 
@@ -81,8 +81,8 @@ const itunesSubcategories = computed(() => {
 })
 
 const labels = computed(() => ({
-  namePlaceholder: $pgettext('Content/Channel/Form.Field.Placeholder', 'Awesome channel name'),
-  usernamePlaceholder: $pgettext('Content/Channel/Form.Field.Placeholder', 'awesomechannelname')
+  namePlaceholder: t('Awesome channel name'),
+  usernamePlaceholder: t('awesomechannelname')
 }))
 
 const submittable = computed(() => !!(
@@ -165,7 +165,7 @@ defineExpose({
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Error while saving channel
         </translate>
       </h4>
@@ -184,7 +184,7 @@ defineExpose({
         class="ui grouped channel-type required field"
       >
         <legend>
-          <translate translate-context="Content/Channel/Paragraph">
+          <translate >
             What will this channel be used for?
           </translate>
         </legend>
@@ -214,7 +214,7 @@ defineExpose({
       <template v-if="!creating || step === 2">
         <div class="ui required field">
           <label for="channel-name">
-            <translate translate-context="Content/Channel/*">Name</translate>
+            <translate >Name</translate>
           </label>
           <input
             v-model="newValues.name"
@@ -225,7 +225,7 @@ defineExpose({
         </div>
         <div class="ui required field">
           <label for="channel-username">
-            <translate translate-context="Content/Channel/*">Fediverse handle</translate>
+            <translate >Fediverse handle</translate>
           </label>
           <div class="ui left labeled input">
             <div class="ui basic label">
@@ -242,7 +242,7 @@ defineExpose({
           <template v-if="creating">
             <div class="ui small hidden divider" />
             <p>
-              <translate translate-context="Content/Channels/Paragraph">
+              <translate >
                 Used in URLs and to follow this channel in the Fediverse. It cannot be changed later.
               </translate>
             </p>
@@ -254,7 +254,7 @@ defineExpose({
             :image-class="newValues.content_category === 'podcast' ? '' : 'circular'"
             @delete="newValues.cover = null"
           >
-            <translate translate-context="Content/Channel/*">
+            <translate >
               Channel Picture
             </translate>
           </attachment-input>
@@ -264,7 +264,7 @@ defineExpose({
           <div class="ten wide column">
             <div class="ui field">
               <label for="channel-tags">
-                <translate translate-context="*/*/*">Tags</translate>
+                <translate >Tags</translate>
               </label>
               <tags-selector
                 id="channel-tags"
@@ -279,7 +279,7 @@ defineExpose({
           >
             <div class="ui required field">
               <label for="channel-language">
-                <translate translate-context="*/*/*">Language</translate>
+                <translate >Language</translate>
               </label>
               <select
                 id="channel-language"
@@ -302,7 +302,7 @@ defineExpose({
         <div class="ui small hidden divider" />
         <div class="ui field">
           <label for="channel-name">
-            <translate translate-context="*/*/*">Description</translate>
+            <translate >Description</translate>
           </label>
           <content-form v-model="newValues.description" />
         </div>
@@ -312,7 +312,7 @@ defineExpose({
         >
           <div class="ui required field">
             <label for="channel-itunes-category">
-              <translate translate-context="*/*/*">Category</translate>
+              <translate >Category</translate>
             </label>
             <select
               id="itunes-category"
@@ -332,7 +332,7 @@ defineExpose({
           </div>
           <div class="ui field">
             <label for="channel-itunes-category">
-              <translate translate-context="*/*/*">Subcategory</translate>
+              <translate >Subcategory</translate>
             </label>
             <select
               id="itunes-category"
@@ -357,7 +357,7 @@ defineExpose({
         >
           <div class="ui field">
             <label for="channel-itunes-email">
-              <translate translate-context="*/*/*">Owner e-mail address</translate>
+              <translate >Owner e-mail address</translate>
             </label>
             <input
               id="channel-itunes-email"
@@ -368,7 +368,7 @@ defineExpose({
           </div>
           <div class="ui field">
             <label for="channel-itunes-name">
-              <translate translate-context="*/*/*">Owner name</translate>
+              <translate >Owner name</translate>
             </label>
             <input
               id="channel-itunes-name"
@@ -379,7 +379,7 @@ defineExpose({
           </div>
         </div>
         <p>
-          <translate translate-context="*/*/*">
+          <translate >
             Used for the itunes:email and itunes:name field required by certain platforms such as Spotify or iTunes.
           </translate>
         </p>
@@ -390,7 +390,7 @@ defineExpose({
       class="ui active inverted dimmer"
     >
       <div class="ui text loader">
-        <translate translate-context="*/*/*">
+        <translate >
           Loading
         </translate>
       </div>
diff --git a/front/src/components/audio/ChannelSerieCard.vue b/front/src/components/audio/ChannelSerieCard.vue
index 7f95cce5e..1f1e37896 100644
--- a/front/src/components/audio/ChannelSerieCard.vue
+++ b/front/src/components/audio/ChannelSerieCard.vue
@@ -56,7 +56,7 @@ const cover = computed(() => props.serie?.cover ?? null)
       </strong>
       <div class="description">
         <translate
-          translate-context="Content/Channel/Paragraph"
+
           translate-plural="%{ count } episodes"
           :translate-n="serie.tracks_count"
           :translate-params="{count: serie.tracks_count}"
diff --git a/front/src/components/audio/ChannelSeries.vue b/front/src/components/audio/ChannelSeries.vue
index fe30459a9..043798e27 100644
--- a/front/src/components/audio/ChannelSeries.vue
+++ b/front/src/components/audio/ChannelSeries.vue
@@ -84,7 +84,7 @@ fetchData()
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        <translate translate-context="*/*/Button,Label">
+        <translate >
           Show more
         </translate>
       </button>
@@ -95,7 +95,7 @@ fetchData()
         @refresh="fetchData()"
       >
         <p>
-          <translate translate-context="Content/Channels/*">
+          <translate >
             You may need to subscribe to this channel to see its contents.
           </translate>
         </p>
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index 1feffac9d..443d6e62b 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -77,7 +77,7 @@ fetchData()
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        <translate translate-context="*/*/Button,Label">
+        <translate >
           Show more
         </translate>
       </button>
diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue
index ccaa78fc7..a817b41c4 100644
--- a/front/src/components/audio/EmbedWizard.vue
+++ b/front/src/components/audio/EmbedWizard.vue
@@ -52,11 +52,11 @@ const { copy, copied } = useClipboard({ source: textarea })
     >
       <p>
         <strong>
-          <translate translate-context="Content/Embed/Message">Sharing will not work because this pod doesn't allow anonymous users to access content.</translate>
+          <translate >Sharing will not work because this pod doesn't allow anonymous users to access content.</translate>
         </strong>
       </p>
       <p>
-        <translate translate-context="Content/Embed/Message">
+        <translate >
           Please contact your admins and ask them to update the corresponding setting.
         </translate>
       </p>
@@ -65,9 +65,9 @@ const { copy, copied } = useClipboard({ source: textarea })
       <div class="two fields">
         <div class="field">
           <div class="field">
-            <label for="embed-width"><translate translate-context="Popup/Embed/Input.Label">Widget width</translate></label>
+            <label for="embed-width"><translate >Widget width</translate></label>
             <p>
-              <translate translate-context="Popup/Embed/Paragraph">
+              <translate >
                 Leave empty for a responsive widget
               </translate>
             </p>
@@ -82,7 +82,7 @@ const { copy, copied } = useClipboard({ source: textarea })
           <template v-if="type != 'track'">
             <br>
             <div class="field">
-              <label for="embed-height"><translate translate-context="Popup/Embed/Input.Label">Widget height</translate></label>
+              <label for="embed-height"><translate >Widget height</translate></label>
               <input
                 id="embed-height"
                 v-model="height"
@@ -99,13 +99,13 @@ const { copy, copied } = useClipboard({ source: textarea })
             class="ui right accent labeled icon floated button"
             @click="copy()"
           >
-            <i class="copy icon" /><translate translate-context="*/*/Button.Label/Short, Verb">
+            <i class="copy icon" /><translate >
               Copy
             </translate>
           </button>
-          <label for="embed-width"><translate translate-context="Popup/Embed/Input.Label/Noun">Embed code</translate></label>
+          <label for="embed-width"><translate >Embed code</translate></label>
           <p>
-            <translate translate-context="Popup/Embed/Paragraph">
+            <translate >
               Copy/paste this code in your website HTML
             </translate>
           </p>
@@ -120,7 +120,7 @@ const { copy, copied } = useClipboard({ source: textarea })
               v-if="copied"
               class="message"
             >
-              <translate translate-context="Content/*/Paragraph">
+              <translate >
                 Text copied to clipboard!
               </translate>
             </p>
@@ -134,7 +134,7 @@ const { copy, copied } = useClipboard({ source: textarea })
           :href="iframeSrc"
           target="_blank"
         >
-          <translate translate-context="Popup/Embed/Title/Noun">Preview</translate>
+          <translate >Preview</translate>
         </a>
       </h3>
       <iframe
diff --git a/front/src/components/audio/LibraryFollowButton.vue b/front/src/components/audio/LibraryFollowButton.vue
index 0f81f815f..ab91b0bcd 100644
--- a/front/src/components/audio/LibraryFollowButton.vue
+++ b/front/src/components/audio/LibraryFollowButton.vue
@@ -40,19 +40,19 @@ const toggle = () => {
     <i class="heart icon" />
     <translate
       v-if="isApproved"
-      translate-context="Content/Library/Card.Button.Label/Verb"
+
     >
       Unfollow
     </translate>
     <translate
       v-else-if="isPending"
-      translate-context="Content/Library/Card.Button.Label/Verb"
+
     >
       Cancel follow request
     </translate>
     <translate
       v-else
-      translate-context="Content/Library/Card.Button.Label/Verb"
+
     >
       Follow
     </translate>
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index d66d0ac6b..c664a4b1d 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -3,7 +3,7 @@ import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 
 import { ref, computed, onMounted } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
 import { useCurrentElement } from '@vueuse/core'
@@ -63,33 +63,33 @@ const {
 
 const { report, getReportableObjects } = useReport()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  playNow: $pgettext('*/Queue/Dropdown/Button/Title', 'Play now'),
-  addToQueue: $pgettext('*/Queue/Dropdown/Button/Title', 'Add to current queue'),
-  playNext: $pgettext('*/Queue/Dropdown/Button/Title', 'Play next'),
-  startRadio: $pgettext('*/Queue/Dropdown/Button/Title', 'Play similar songs'),
-  report: $pgettext('*/Moderation/*/Button/Label,Verb', 'Report…'),
-  addToPlaylist: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Add to playlist…'),
-  hideArtist: $pgettext('*/Queue/Dropdown/Button/Label/Short', 'Hide content from this artist'),
+  playNow: t('Play now'),
+  addToQueue: t('Add to current queue'),
+  playNext: t('Play next'),
+  startRadio: t('Play similar songs'),
+  report: t('Report…'),
+  addToPlaylist: t('Add to playlist…'),
+  hideArtist: t('Hide content from this artist'),
   replacePlay: props.track
-    ? $pgettext('*/Queue/Dropdown/Button/Title', 'Play track')
+    ? t('Play track')
     : props.album
-      ? $pgettext('*/Queue/Dropdown/Button/Title', 'Play album')
+      ? t('Play album')
       : props.artist
-        ? $pgettext('*/Queue/Dropdown/Button/Title', 'Play artist')
+        ? t('Play artist')
         : props.playlist
-          ? $pgettext('*/Queue/Dropdown/Button/Title', 'Play playlist')
-          : $pgettext('*/Queue/Dropdown/Button/Title', 'Play tracks')
+          ? t('Play playlist')
+          : t('Play tracks')
 }))
 
 const title = computed(() => {
   if (playable.value) {
-    return $pgettext('*/*/Button.Label/Noun', 'More…')
+    return t('More…')
   }
 
   if (props.track) {
-    return $pgettext('*/Queue/Button/Title', 'This track is not available in any library you have access to')
+    return t('This track is not available in any library you have access to')
   }
 
   return ''
@@ -138,7 +138,7 @@ const openMenu = () => {
         v-else
         :class="[playIconClass, 'icon']"
       />
-      <template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
+      <template v-if="!discrete && !iconOnly">&nbsp;<slot><translate >Play</translate></slot></template>
     </button>
     <button
       v-if="!discrete && !iconOnly"
@@ -156,7 +156,7 @@ const openMenu = () => {
           :title="labels.addToQueue"
           @click.stop.prevent="enqueue"
         >
-          <i class="plus icon" /><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Add to queue</translate>
+          <i class="plus icon" /><translate >Add to queue</translate>
         </button>
         <button
           class="item basic"
@@ -181,7 +181,7 @@ const openMenu = () => {
           :title="labels.startRadio"
           @click.stop.prevent="$store.dispatch('radios/start', {type: 'similar', objectId: track?.id})"
         >
-          <i class="feed icon" /><translate translate-context="*/Queue/Button.Label/Short, Verb">Play radio</translate>
+          <i class="feed icon" /><translate >Play radio</translate>
         </button>
         <button
           v-if="track"
@@ -190,7 +190,7 @@ const openMenu = () => {
           @click.stop="$store.commit('playlists/chooseTrack', track)"
         >
           <i class="list icon" />
-          <translate translate-context="Sidebar/Player/Icon.Tooltip/Verb">Add to playlist…</translate>
+          <translate >Add to playlist…</translate>
         </button>
         <button
           v-if="track && $route.name !== 'library.tracks.detail'"
@@ -200,11 +200,11 @@ const openMenu = () => {
           <i class="info icon" />
           <translate
             v-if="track.artist?.content_category === 'podcast'"
-            translate-context="*/Queue/Dropdown/Button/Label/Short"
+
           >Episode details</translate>
           <translate
             v-else
-            translate-context="*/Queue/Dropdown/Button/Label/Short"
+
           >Track details</translate>
         </button>
         <div class="divider" />
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 2e6fd4dcd..2d78e5bb4 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -3,17 +3,17 @@ import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 
 import { useMouse, useWindowSize } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import time from '~/utils/time'
 
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
-import VolumeControl from './VolumeControl.vue'
 import PlayerControls from './PlayerControls.vue'
+import VolumeControl from './VolumeControl.vue'
 
 const {
   LoopingMode,
@@ -44,7 +44,7 @@ const {
 } = useQueue()
 
 const store = useStore()
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const toggleMobilePlayer = () => {
   store.commit('ui/queueFocused', ['queue', 'player'].includes(store.state.ui.queueFocused as string) ? null : 'player')
@@ -72,17 +72,17 @@ onKeyboardShortcut(['ctrl', 'shift', 'left'], playPrevious, true)
 onKeyboardShortcut(['ctrl', 'shift', 'right'], playNext, true)
 
 const labels = computed(() => ({
-  audioPlayer: $pgettext('Sidebar/Player/Hidden text', 'Media player'),
-  previous: $pgettext('Sidebar/Player/Icon.Tooltip', 'Previous track'),
-  play: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play'),
-  pause: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause'),
-  next: $pgettext('Sidebar/Player/Icon.Tooltip', 'Next track'),
-  unmute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute'),
-  mute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Mute'),
-  expandQueue: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue'),
-  shuffle: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Shuffle your queue'),
-  clear: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Clear your queue'),
-  addArtistContentFilter: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
+  audioPlayer: t('Media player'),
+  previous: t('Previous track'),
+  play: t('Play'),
+  pause: t('Pause'),
+  next: t('Next track'),
+  unmute: t('Unmute'),
+  mute: t('Mute'),
+  expandQueue: t('Expand queue'),
+  shuffle: t('Shuffle your queue'),
+  clear: t('Clear your queue'),
+  addArtistContentFilter: t('Hide content from this artist…')
 }))
 
 const switchTab = () => {
@@ -103,10 +103,10 @@ initializeFirstTrack()
 const loopingTitle = computed(() => {
   const mode = looping.value
   return mode === LoopingMode.None
-    ? $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping disabled. Click to switch to single-track looping.')
+    ? t('Looping disabled. Click to switch to single-track looping.')
     : mode === LoopingMode.LoopTrack
-      ? $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping on a single track. Click to switch to whole queue looping.')
-      : $pgettext('Sidebar/Player/Icon.Tooltip', 'Looping on whole queue. Click to disable looping.')
+      ? t('Looping on a single track. Click to switch to whole queue looping.')
+      : t('Looping on whole queue. Click to disable looping.')
 })
 
 const hideArtist = () => {
@@ -133,7 +133,7 @@ const hideArtist = () => {
       id="player-label"
       class="visually-hidden"
     >
-      <translate translate-context="*/*/*">
+      <translate >
         Audio player and controls
       </translate>
     </h1>
@@ -302,7 +302,6 @@ const hideArtist = () => {
               >
                 <i class="stream icon" />
                 <translate
-                  translate-context="Sidebar/Queue/Text"
                   :translate-params="{index: currentIndex + 1, length: queue.length}"
                 >
                   %{ index } of %{ length }
@@ -314,7 +313,6 @@ const hideArtist = () => {
               >
                 <i class="stream icon" />
                 <translate
-                  translate-context="Sidebar/Queue/Text"
                   :translate-params="{index: currentIndex + 1, length: queue.length}"
                 >
                   %{ index } of %{ length }
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index 822963f22..f211725a2 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Artist, Album } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { ref, computed, reactive, watch, onMounted } from 'vue'
 import { refDebounced } from '@vueuse/core'
 
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const logger = useLogger()
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const query = ref('')
 const queryDebounced = refDebounced(query, 500)
@@ -65,7 +65,7 @@ onMounted(() => {
 })
 
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('*/Search/Input.Placeholder', 'Artist, album, track…')
+  searchPlaceholder: t('Artist, album, track…')
 }))
 
 </script>
@@ -73,7 +73,7 @@ const labels = computed(() => ({
 <template>
   <div>
     <h2>
-      <translate translate-context="Content/Search/Title">
+      <translate >
         Search for some music
       </translate>
     </h2>
@@ -91,7 +91,7 @@ const labels = computed(() => ({
     </div>
     <template v-if="query.length > 0">
       <h3 class="ui title">
-        <translate translate-context="*/*/*/Noun">
+        <translate >
           Artists
         </translate>
       </h3>
@@ -105,14 +105,14 @@ const labels = computed(() => ({
         </div>
       </div>
       <p v-else>
-        <translate translate-context="Content/Search/Paragraph">
+        <translate >
           No artist matched your query
         </translate>
       </p>
     </template>
     <template v-if="query.length > 0">
       <h3 class="ui title">
-        <translate translate-context="*/*/*">
+        <translate >
           Albums
         </translate>
       </h3>
@@ -132,7 +132,7 @@ const labels = computed(() => ({
         </div>
       </div>
       <p v-else>
-        <translate translate-context="Content/Search/Paragraph">
+        <translate >
           No album matched your query
         </translate>
       </p>
diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 64dc5da6a..b9bdeb6a7 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@@ -6,7 +6,7 @@ import jQuery from 'jquery'
 import { trim } from 'lodash-es'
 import { useFocus, useCurrentElement } from '@vueuse/core'
 import { ref, computed, onMounted } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useStore } from '~/store'
 
@@ -48,14 +48,14 @@ const { focused } = useFocus(search)
 onKeyboardShortcut(['shift', 'f'], () => (focused.value = true), true)
 onKeyboardShortcut(['ctrl', 'k'], () => (focused.value = true), true)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  placeholder: $pgettext('Sidebar/Search/Input.Placeholder', 'Search for artists, albums, tracks…'),
-  searchContent: $pgettext('Sidebar/Search/Input.Label', 'Search for content'),
-  artist: $pgettext('*/*/*/Noun', 'Artist'),
-  album: $pgettext('*/*/*', 'Album'),
-  track: $pgettext('*/*/*/Noun', 'Track'),
-  tag: $pgettext('*/*/*/Noun', 'Tag')
+  placeholder: t('Search for artists, albums, tracks…'),
+  searchContent: t('Search for content'),
+  artist: t('Artist'),
+  album: t('Album'),
+  track: t('Track'),
+  tag: t('Tag')
 }))
 
 const router = useRouter()
@@ -77,11 +77,11 @@ const blur = () => {
 const categories = computed(() => [
   {
     code: 'federation',
-    name: $pgettext('*/*/*', 'Federation')
+    name: t('Federation')
   },
   {
     code: 'podcasts',
-    name: $pgettext('*/*/*', 'Podcasts')
+    name: t('Podcasts')
   },
   {
     code: 'artists',
@@ -138,8 +138,8 @@ onMounted(() => {
     showNoResults: true,
     error: {
       // @ts-expect-error Semantic is broken
-      noResultsHeader: $pgettext('Sidebar/Search/Error', 'No matches found'),
-      noResults: $pgettext('Sidebar/Search/Error.Label', 'Sorry, there are no results for this search')
+      noResultsHeader: t('No matches found'),
+      noResults: t('Sorry, there are no results for this search')
     },
 
     onSelect (result, response) {
@@ -179,7 +179,7 @@ onMounted(() => {
           if (category.code === 'federation' && id) {
             resultsEmpty = false
             results[category.code]?.results.push({
-              title: $pgettext('Search/*/*', 'Search on the fediverse'),
+              title: t('Search on the fediverse'),
               routerUrl: {
                 name: 'search',
                 query: { id }
@@ -190,7 +190,7 @@ onMounted(() => {
           if (category.code === 'podcasts' && id) {
             resultsEmpty = false
             results[category.code]?.results.push({
-              title: $pgettext('Search/*/*', 'Subscribe to podcast via RSS'),
+              title: t('Subscribe to podcast via RSS'),
               routerUrl: {
                 name: 'search',
                 query: { id, type: 'rss' }
@@ -200,7 +200,7 @@ onMounted(() => {
 
           if (category.code === 'more') {
             results[category.code]?.results.push({
-              title: $pgettext('Search/*/*', 'More results 🡒'),
+              title: t('More results 🡒'),
               routerUrl: {
                 name: 'search',
                 query: { type: 'artists', q: query.value }
diff --git a/front/src/components/audio/VolumeControl.vue b/front/src/components/audio/VolumeControl.vue
index 10a255786..adcbcadea 100644
--- a/front/src/components/audio/VolumeControl.vue
+++ b/front/src/components/audio/VolumeControl.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { usePlayer } from '~/composables/audio/player'
 import { useTimeoutFn } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { volume, mute } = usePlayer()
 const expanded = ref(false)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  unmute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute'),
-  mute: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Mute'),
-  slider: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Adjust volume')
+  unmute: t('Unmute'),
+  mute: t('Mute'),
+  slider: t('Adjust volume')
 }))
 
 const { start, stop } = useTimeoutFn(() => (expanded.value = false), 500, { immediate: false })
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index dc242d6f7..f4b4b9436 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -60,7 +60,7 @@ const imageUrl = computed(() => props.album.cover?.urls.original
     <div class="extra content">
       <span v-if="album.release_date">{{ momentFormat(new Date(album.release_date), 'Y') }} · </span>
       <translate
-        translate-context="*/*/*"
+
         :translate-params="{count: album.tracks_count}"
         :translate-n="album.tracks_count"
         translate-plural="%{ count } tracks"
diff --git a/front/src/components/audio/album/Widget.vue b/front/src/components/audio/album/Widget.vue
index 09f66b132..dc9a18f33 100644
--- a/front/src/components/audio/album/Widget.vue
+++ b/front/src/components/audio/album/Widget.vue
@@ -112,7 +112,7 @@ watch(
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        <translate translate-context="*/*/Button,Label">
+        <translate >
           Show more
         </translate>
       </button>
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index 6e4de95b4..961915e72 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -64,7 +64,7 @@ const imageUrl = computed(() => cover.value?.urls.original
     <div class="extra content">
       <translate
         v-if="artist.content_category === 'music'"
-        translate-context="*/*/*"
+
         :translate-params="{count: artist.tracks_count}"
         :translate-n="artist.tracks_count"
         translate-plural="%{ count } tracks"
@@ -73,7 +73,7 @@ const imageUrl = computed(() => cover.value?.urls.original
       </translate>
       <translate
         v-else
-        translate-context="*/*/*"
+
         :translate-params="{count: artist.tracks_count}"
         :translate-n="artist.tracks_count"
         translate-plural="%{ count } episodes"
diff --git a/front/src/components/audio/artist/Widget.vue b/front/src/components/audio/artist/Widget.vue
index d8c3c85f6..266c7cc8b 100644
--- a/front/src/components/audio/artist/Widget.vue
+++ b/front/src/components/audio/artist/Widget.vue
@@ -108,7 +108,7 @@ watch(
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        <translate translate-context="*/*/Button,Label">
+        <translate >
           Show more
         </translate>
       </button>
diff --git a/front/src/components/audio/podcast/MobileRow.vue b/front/src/components/audio/podcast/MobileRow.vue
index a6789e4f3..ebb751e30 100644
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@@ -2,8 +2,8 @@
 import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 
-import { useGettext } from 'vue3-gettext'
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
@@ -52,8 +52,8 @@ const { currentTrack } = useQueue()
 const { isPlaying } = usePlayer()
 const { activateTrack } = usePlayOptions(props)
 
-const { $pgettext } = useGettext()
-const actionsButtonLabel = computed(() => $pgettext('Content/Track/Icon.Tooltip/Verb', 'Show track actions'))
+const { t } = useI18n()
+const actionsButtonLabel = computed(() => t('Show track actions'))
 </script>
 
 <template>
diff --git a/front/src/components/audio/podcast/Modal.vue b/front/src/components/audio/podcast/Modal.vue
index 421cc72bd..5faad7d84 100644
--- a/front/src/components/audio/podcast/Modal.vue
+++ b/front/src/components/audio/podcast/Modal.vue
@@ -4,7 +4,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 // import type { Track } from '~/types'
 
 import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref } from 'vue'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
@@ -58,33 +58,33 @@ const store = useStore()
 
 const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const favoriteButton = computed(() => isFavorite.value
-  ? $pgettext('Content/Track/Icon.Tooltip/Verb', 'Remove from favorites')
-  : $pgettext('Content/Track/*/Verb', 'Add to favorites')
+  ? t('Remove from favorites')
+  : t('Add to favorites')
 )
 
 const trackDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
-  ? $pgettext('*/Queue/Dropdown/Button/Label/Short', 'Episode details')
-  : $pgettext('*/Queue/Dropdown/Button/Label/Short', 'Track details')
+  ? t('Episode details')
+  : t('Track details')
 )
 
 const albumDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
-  ? $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View series')
-  : $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View album')
+  ? t('View series')
+  : t('View album')
 )
 
 const artistDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
-  ? $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View channel')
-  : $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View artist')
+  ? t('View channel')
+  : t('View artist')
 )
 
 const labels = computed(() => ({
-  startRadio: $pgettext('*/Queue/Dropdown/Button/Title', 'Play radio'),
-  playNow: $pgettext('*/Queue/Dropdown/Button/Title', 'Play now'),
-  addToQueue: $pgettext('*/Queue/Dropdown/Button/Title', 'Add to queue'),
-  playNext: $pgettext('*/Queue/Dropdown/Button/Title', 'Play next'),
-  addToPlaylist: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Add to playlist…')
+  startRadio: t('Play radio'),
+  playNow: t('Play now'),
+  addToQueue: t('Add to queue'),
+  playNext: t('Play next'),
+  addToPlaylist: t('Add to playlist…')
 }))
 </script>
 
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index e1f5d656b..511204f48 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -2,8 +2,8 @@
 import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 
-import { useGettext } from 'vue3-gettext'
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
@@ -52,8 +52,8 @@ const { currentTrack } = useQueue()
 const { isPlaying } = usePlayer()
 const { activateTrack } = usePlayOptions(props)
 
-const { $pgettext } = useGettext()
-const actionsButtonLabel = computed(() => $pgettext('Content/Track/Icon.Tooltip/Verb', 'Show track actions'))
+const { t } = useI18n()
+const actionsButtonLabel = computed(() => t('Show track actions'))
 </script>
 
 <template>
diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index 3d693f48c..5e78a3cfc 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -4,7 +4,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 // import type { Track } from '~/types'
 
 import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref } from 'vue'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
@@ -58,33 +58,33 @@ const store = useStore()
 
 const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const favoriteButton = computed(() => isFavorite.value
-  ? $pgettext('Content/Track/Icon.Tooltip/Verb', 'Remove from favorites')
-  : $pgettext('Content/Track/*/Verb', 'Add to favorites')
+  ? t('Remove from favorites')
+  : t('Add to favorites')
 )
 
 const trackDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
-  ? $pgettext('*/Queue/Dropdown/Button/Label/Short', 'Episode details')
-  : $pgettext('*/Queue/Dropdown/Button/Label/Short', 'Track details')
+  ? t('Episode details')
+  : t('Track details')
 )
 
 const albumDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
-  ? $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View series')
-  : $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View album')
+  ? t('View series')
+  : t('View album')
 )
 
 const artistDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
-  ? $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View channel')
-  : $pgettext('*/Queue/Dropdown/Button/Label/Short', 'View artist')
+  ? t('View channel')
+  : t('View artist')
 )
 
 const labels = computed(() => ({
-  startRadio: $pgettext('*/Queue/Dropdown/Button/Title', 'Play radio'),
-  playNow: $pgettext('*/Queue/Dropdown/Button/Title', 'Play now'),
-  addToQueue: $pgettext('*/Queue/Dropdown/Button/Title', 'Add to queue'),
-  playNext: $pgettext('*/Queue/Dropdown/Button/Title', 'Play next'),
-  addToPlaylist: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Add to playlist…')
+  startRadio: t('Play radio'),
+  playNow: t('Play now'),
+  addToQueue: t('Add to queue'),
+  playNext: t('Play next'),
+  addToPlaylist: t('Add to playlist…')
 }))
 </script>
 
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 884b7a169..4158eb4fb 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -2,7 +2,7 @@
 import type { Track } from '~/types'
 
 import { useElementByPoint, useMouse } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { clone, uniqBy } from 'lodash-es'
 import { ref, computed } from 'vue'
 
@@ -93,11 +93,11 @@ const allTracks = computed(() => {
     : tracks
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('*/*/*/Noun', 'Title'),
-  album: $pgettext('*/*/*/Noun', 'Album'),
-  artist: $pgettext('*/*/*/Noun', 'Artist')
+  title: t('Title'),
+  album: t('Album'),
+  artist: t('Artist')
 }))
 
 const isLoading = ref(false)
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 88cdc97e5..ecfcc401b 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -200,7 +200,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     >
       <div class="ui icon header">
         <i class="music icon" />
-        <translate translate-context="Content/Home/Placeholder">
+        <translate >
           Nothing found
         </translate>
       </div>
@@ -217,7 +217,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage as string)"
       >
-        <translate translate-context="*/*/Button,Label">
+        <translate >
           Show more
         </translate>
       </button>
diff --git a/front/src/components/auth/ApplicationEdit.vue b/front/src/components/auth/ApplicationEdit.vue
index 24f9e501f..e455ca5a9 100644
--- a/front/src/components/auth/ApplicationEdit.vue
+++ b/front/src/components/auth/ApplicationEdit.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 
 import axios from 'axios'
@@ -15,12 +15,12 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const application = ref()
 
 const labels = computed(() => ({
-  title: $pgettext('Content/Applications/Title', 'Edit application')
+  title: t('Edit application')
 }))
 
 const isLoading = ref(false)
@@ -72,23 +72,23 @@ store.state.auth.applicationSecret = undefined
         </div>
         <template v-else>
           <router-link :to="{name: 'settings'}">
-            <translate translate-context="Content/Applications/Link">
+            <translate >
               Back to settings
             </translate>
           </router-link>
           <h2 class="ui header">
-            <translate translate-context="Content/Applications/Title">
+            <translate >
               Application details
             </translate>
           </h2>
           <div class="ui form">
             <p>
-              <translate translate-context="Content/Application/Paragraph/">
+              <translate >
                 Application ID and secret are really sensitive values and must be treated like passwords. Do not share those with anyone else.
               </translate>
             </p>
             <div class="field">
-              <label for="copy-id"><translate translate-context="Content/Applications/Label">Application ID</translate></label>
+              <label for="copy-id"><translate >Application ID</translate></label>
               <copy-input
                 id="copy-id"
                 :value="application.client_id"
@@ -100,18 +100,18 @@ store.state.auth.applicationSecret = undefined
             >
               <div class="ui small warning message">
                 <h3 class="header">
-                  <translate translate-context="*/*/*">
+                  <translate >
                     Keep a copy of this token in a safe place
                   </translate>
                 </h3>
                 <p>
-                  <translate translate-context="*/*/*">
+                  <translate >
                     You won't be able to see it again once you leave this screen.
                   </translate>
                 </p>
               </div>
 
-              <label for="copy-secret"><translate translate-context="Content/Applications/Label">Application secret</translate></label>
+              <label for="copy-secret"><translate >Application secret</translate></label>
               <copy-input
                 id="copy-secret"
                 :value="secret"
@@ -121,7 +121,7 @@ store.state.auth.applicationSecret = undefined
               v-if="application.token != undefined"
               class="field"
             >
-              <label for="copy-secret"><translate translate-context="Content/Applications/Label">Access token</translate></label>
+              <label for="copy-secret"><translate >Access token</translate></label>
               <copy-input
                 id="copy-secret"
                 :value="application.token"
@@ -131,12 +131,12 @@ store.state.auth.applicationSecret = undefined
                 @click.prevent="refreshToken"
               >
                 <i class="refresh icon" />
-                <translate translate-context="Content/Applications/Label">Regenerate token</translate>
+                <translate >Regenerate token</translate>
               </a>
             </div>
           </div>
           <h2 class="ui header">
-            <translate translate-context="Content/Applications/Title">
+            <translate >
               Edit application
             </translate>
           </h2>
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
index 407a0a30a..be80f9861 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -4,7 +4,7 @@ import type { BackendError, Application } from '~/types'
 import axios from 'axios'
 import { ref, reactive, computed } from 'vue'
 import { computedEager } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { uniq } from 'lodash-es'
 
 import useScopes from '~/composables/auth/useScopes'
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   defaults: () => ({})
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const scopes = useScopes()
   .filter(scope => !['reports', 'security'].includes(scope.id))
 
@@ -86,14 +86,14 @@ const toggleAllScopes = (parent: typeof allScopes['value'][number]) => {
 const scopeParents = computedEager(() => [
   {
     id: 'read',
-    label: $pgettext('Content/OAuth Scopes/Label/Verb', 'Read'),
-    description: $pgettext('Content/OAuth Scopes/Help Text', 'Read-only access to user data'),
+    label: t('Read'),
+    description: t('Read-only access to user data'),
     value: scopeArray.value.includes('read')
   },
   {
     id: 'write',
-    label: $pgettext('Content/OAuth Scopes/Label/Verb', 'Write'),
-    description: $pgettext('Content/OAuth Scopes/Help Text', 'Write-only access to user data'),
+    label: t('Write'),
+    description: t('Write-only access to user data'),
     value: scopeArray.value.includes('write')
   }
 ])
@@ -120,7 +120,7 @@ const allScopes = computed(() => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           We cannot save your changes
         </translate>
       </h4>
@@ -134,7 +134,7 @@ const allScopes = computed(() => {
       </ul>
     </div>
     <div class="ui field">
-      <label for="application-name"><translate translate-context="*/*/*/Noun">Name</translate></label>
+      <label for="application-name"><translate >Name</translate></label>
       <input
         id="application-name"
         v-model="fields.name"
@@ -144,7 +144,7 @@ const allScopes = computed(() => {
       >
     </div>
     <div class="ui field">
-      <label for="redirect-uris"><translate translate-context="Content/Applications/Input.Label/Noun">Redirect URI</translate></label>
+      <label for="redirect-uris"><translate >Redirect URI</translate></label>
       <input
         id="redirect-uris"
         v-model="fields.redirect_uris"
@@ -152,15 +152,15 @@ const allScopes = computed(() => {
         type="text"
       >
       <p class="help">
-        <translate translate-context="Content/Applications/Help Text">
+        <translate >
           Use "urn:ietf:wg:oauth:2.0:oob" as a redirect URI if your application is not served on the web.
         </translate>
       </p>
     </div>
     <div class="ui field">
-      <label><translate translate-context="Content/*/*/Noun">Scopes</translate></label>
+      <label><translate >Scopes</translate></label>
       <p>
-        <translate translate-context="Content/Applications/Paragraph/">
+        <translate >
           Checking the parent "Read" or "Write" scopes implies access to all the corresponding children scopes.
         </translate>
       </p>
@@ -210,13 +210,13 @@ const allScopes = computed(() => {
     >
       <translate
         v-if="app !== null"
-        translate-context="Content/Applications/Button.Label/Verb"
+
       >
         Update application
       </translate>
       <translate
         v-else
-        translate-context="Content/Applications/Button.Label/Verb"
+
       >
         Create application
       </translate>
diff --git a/front/src/components/auth/ApplicationNew.vue b/front/src/components/auth/ApplicationNew.vue
index 1b3336e45..72d79eefe 100644
--- a/front/src/components/auth/ApplicationNew.vue
+++ b/front/src/components/auth/ApplicationNew.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import ApplicationForm from '~/components/auth/ApplicationForm.vue'
-import { computed, reactive } from 'vue'
-import { useGettext } from 'vue3-gettext'
-import { useRouter } from 'vue-router'
 import type { Application } from '~/types'
+
+import { computed, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
 import { useStore } from '~/store'
 
+import ApplicationForm from '~/components/auth/ApplicationForm.vue'
+
 interface Props {
   name?: string
   scopes?: string
@@ -24,9 +27,9 @@ const defaults = reactive({
   redirectUris: props.redirectUris
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Content/Settings/Button.Label', 'Create a new application')
+  title: t('Create a new application')
 }))
 
 const router = useRouter()
@@ -52,12 +55,12 @@ const created = (application: Application) => {
     <div class="ui vertical stripe segment">
       <section class="ui text container">
         <router-link :to="{name: 'settings'}">
-          <translate translate-context="Content/Applications/Link">
+          <translate >
             Back to settings
           </translate>
         </router-link>
         <h2 class="ui header">
-          <translate translate-context="Content/Settings/Button.Label">
+          <translate >
             Create a new application
           </translate>
         </h2>
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
index c387f7cc2..2b877a334 100644
--- a/front/src/components/auth/Authorize.vue
+++ b/front/src/components/auth/Authorize.vue
@@ -2,7 +2,7 @@
 import type { BackendError, Application } from '~/types'
 
 import axios from 'axios'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { whenever } from '@vueuse/core'
 import { ref, computed } from 'vue'
 
@@ -21,7 +21,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const sharedLabels = useSharedLabels()
 const knownScopes = useScopes()
 
@@ -84,7 +84,7 @@ const submit = async () => {
 }
 
 const labels = computed(() => ({
-  title: $pgettext('Head/Authorize/Title', 'Allow application')
+  title: t('Allow application')
 }))
 
 const requestedScopes = computed(() => props.scope.split(' '))
@@ -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" /><translate translate-context="Content/Auth/Title/Verb">
+          <i class="lock open icon" /><translate >
             Authorize third-party app
           </translate>
         </h2>
@@ -132,7 +132,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
             v-if="application"
             class="header"
           >
-            <translate translate-context="Popup/Moderation/Error message">
+            <translate >
               Error while authorizing application
             </translate>
           </h4>
@@ -140,7 +140,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
             v-else
             class="header"
           >
-            <translate translate-context="Popup/Moderation/Error message">
+            <translate >
               Error while fetching application data
             </translate>
           </h4>
@@ -166,7 +166,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
         >
           <h3>
             <translate
-              translate-context="Content/Auth/Title"
+
               :translate-params="{app: application.name}"
             >
               %{ app } wants to access your Funkwhale account
@@ -183,20 +183,20 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
               <i class="pencil icon" />
-              <translate translate-context="Content/Auth/Label/Noun">Write-only</translate>
+              <translate >Write-only</translate>
             </span>
             <span
               v-else-if="!topic.write && topic.read"
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
-              <translate translate-context="Content/Auth/Label/Noun">Read-only</translate>
+              <translate >Read-only</translate>
             </span>
             <span
               v-else-if="topic.write && topic.read"
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
               <i class="pencil icon" />
-              <translate translate-context="Content/Auth/Label/Noun">Full access</translate>
+              <translate >Full access</translate>
             </span>
             <i :class="[topic.icon, 'icon']" />
             <div class="content">
@@ -207,7 +207,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
             </div>
           </h4>
           <div v-if="unknownRequestedScopes.length > 0">
-            <p><strong><translate translate-context="Content/Auth/Paragraph">The application is also requesting the following unknown permissions:</translate></strong></p>
+            <p><strong><translate >The application is also requesting the following unknown permissions:</translate></strong></p>
             <ul
               v-for="(unknownscope, key) in unknownRequestedScopes"
               :key="key"
@@ -221,7 +221,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
           >
             <i class="lock open icon" />
             <translate
-              translate-context="Content/Signup/Button.Label/Verb"
+
               :translate-params="{app: application.name}"
             >
               Authorize %{ app }
@@ -230,21 +230,21 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
           <p
             v-if="redirectUri === 'urn:ietf:wg:oauth:2.0:oob'"
             v-translate
-            translate-context="Content/Auth/Paragraph"
+
           >
             You will be shown a code to copy-paste in the application.
           </p>
           <p
             v-else
             v-translate="{url: redirectUri}"
-            translate-context="Content/Auth/Paragraph"
+
             :translate-params="{url: redirectUri}"
           >
             You will be redirected to <strong>%{ url }</strong>
           </p>
         </form>
         <div v-else-if="code">
-          <p><strong><translate translate-context="Content/Auth/Paragraph">Copy-paste the following code in the application:</translate></strong></p>
+          <p><strong><translate >Copy-paste the following code in the application:</translate></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 271a339b6..e3bbf73c3 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -3,7 +3,7 @@ import type { BackendError } from '~/types'
 import type { RouteLocationRaw } from 'vue-router'
 
 import { ref, reactive, computed, onMounted, nextTick } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import PasswordInput from '~/components/forms/PasswordInput.vue'
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const domain = location.hostname
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const store = useStore()
 
 const credentials = reactive({
@@ -30,7 +30,7 @@ const credentials = reactive({
 })
 
 const labels = computed(() => ({
-  usernamePlaceholder: $pgettext('Content/Login/Input.Placeholder', 'Enter your username or e-mail address')
+  usernamePlaceholder: t('Enter your username or e-mail address')
 }))
 
 const username = ref()
@@ -75,18 +75,18 @@ const submit = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/Login/Error message.Title">
+        <translate >
           We cannot log you in
         </translate>
       </h4>
       <ul class="list">
         <li v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value">
-          <translate translate-context="Content/Login/Error message.List item/Call to action">
+          <translate >
             If you signed-up recently, you may need to wait before our moderation team review your account, or verify your e-mail address.
           </translate>
         </li>
         <li v-else-if="errors[0] == 'invalid_credentials'">
-          <translate translate-context="Content/Login/Error message.List item/Call to action">
+          <translate >
             Please double-check that your username and password combination is correct and make sure you verified your e-mail address.
           </translate>
         </li>
@@ -98,11 +98,11 @@ const submit = async () => {
     <template v-if="domain === $store.getters['instance/domain']">
       <div class="field">
         <label for="username-field">
-          <translate translate-context="Content/Login/Input.Label/Noun">Username or e-mail address</translate>
+          <translate >Username or e-mail address</translate>
           <template v-if="showSignup">
             |
             <router-link :to="{path: '/signup'}">
-              <translate translate-context="*/Signup/Link/Verb">Create an account</translate>
+              <translate >Create an account</translate>
             </router-link>
           </template>
         </label>
@@ -119,12 +119,12 @@ const submit = async () => {
       </div>
       <div class="field">
         <label for="password-field">
-          <translate translate-context="*/*/*">Password</translate> |
+          <translate >Password</translate> |
           <router-link
             tabindex="1"
             :to="{name: 'auth.password-reset', query: {email: credentials.username}}"
           >
-            <translate translate-context="*/Login/*/Verb">Reset your password</translate>
+            <translate >Reset your password</translate>
           </router-link>
         </label>
         <password-input
@@ -137,7 +137,6 @@ const submit = async () => {
     <template v-else>
       <p>
         <translate
-          translate-context="Content/Auth/Paragraph"
           :translate-params="{domain: $store.getters['instance/domain']}"
         >
           You will be redirected to %{ domain } to authenticate.
@@ -148,7 +147,7 @@ const submit = async () => {
       :class="['ui', {'loading': isLoading}, 'right', 'floated', buttonClasses, 'button']"
       type="submit"
     >
-      <translate translate-context="*/Login/*/Verb">
+      <translate >
         Login
       </translate>
     </button>
diff --git a/front/src/components/auth/Logout.vue b/front/src/components/auth/Logout.vue
index 789149cc1..a4cdc96df 100644
--- a/front/src/components/auth/Logout.vue
+++ b/front/src/components/auth/Logout.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/Login/Title', 'Log Out')
+  title: t('Log Out')
 }))
 </script>
 
@@ -19,13 +19,13 @@ const labels = computed(() => ({
         class="ui small text container"
       >
         <h2>
-          <translate translate-context="Content/Login/Title">
+          <translate >
             Are you sure you want to log out?
           </translate>
         </h2>
         <p
           v-translate="{username: $store.state.auth.username}"
-          translate-context="Content/Login/Paragraph"
+
         >
           You are currently logged in as %{ username }
         </p>
@@ -33,7 +33,7 @@ const labels = computed(() => ({
           class="ui button"
           @click="$store.dispatch('auth/logout')"
         >
-          <translate translate-context="Content/Login/Button.Label">
+          <translate >
             Yes, log me out!
           </translate>
         </button>
@@ -43,7 +43,7 @@ const labels = computed(() => ({
         class="ui small text container"
       >
         <h2>
-          <translate translate-context="Content/Login/Title">
+          <translate >
             You aren't currently logged in
           </translate>
         </h2>
@@ -51,7 +51,7 @@ const labels = computed(() => ({
           to="/login"
           class="ui button"
         >
-          <translate translate-context="Content/Login/Button.Label">
+          <translate >
             Log in!
           </translate>
         </router-link>
diff --git a/front/src/components/auth/Plugin.vue b/front/src/components/auth/Plugin.vue
index 68cf0596a..556ebfd28 100644
--- a/front/src/components/auth/Plugin.vue
+++ b/front/src/components/auth/Plugin.vue
@@ -69,7 +69,7 @@ const submitAndScan = async () => {
         target="_blank"
       >
         <i class="external icon" />
-        <translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate>
+        <translate >Documentation</translate>
       </a>
     </template>
     <div class="ui clearing hidden divider" />
@@ -79,7 +79,7 @@ const submitAndScan = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Error while saving plugin
         </translate>
       </h4>
@@ -99,7 +99,7 @@ const submitAndScan = async () => {
           v-model="enabled"
           type="checkbox"
         >
-        <label :for="`${plugin.name}-enabled`"><translate translate-context="*/*/*">Enabled</translate></label>
+        <label :for="`${plugin.name}-enabled`"><translate >Enabled</translate></label>
       </div>
     </div>
     <div class="ui clearing hidden divider" />
@@ -107,7 +107,7 @@ const submitAndScan = async () => {
       v-if="plugin.source"
       class="field"
     >
-      <label for="plugin-library"><translate translate-context="*/*/*/Noun">Library</translate></label>
+      <label for="plugin-library"><translate >Library</translate></label>
       <select
         id="plugin-library"
         v-model="values['library']"
@@ -121,7 +121,7 @@ const submitAndScan = async () => {
         </option>
       </select>
       <div>
-        <translate translate-context="*/*/Paragraph/Noun">
+        <translate >
           Library where files should be imported.
         </translate>
       </div>
@@ -198,7 +198,7 @@ const submitAndScan = async () => {
       type="submit"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
     >
-      <translate translate-context="Content/*/Button.Label/Verb">
+      <translate >
         Save
       </translate>
     </button>
@@ -207,7 +207,7 @@ const submitAndScan = async () => {
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
       @click.prevent="submitAndScan"
     >
-      <translate translate-context="Content/*/Button.Label/Verb">
+      <translate >
         Scan
       </translate>
     </button>
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 873f906f9..736627b95 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -6,7 +6,7 @@ import axios from 'axios'
 import $ from 'jquery'
 
 import { computed, reactive, ref, onMounted } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useStore } from '~/store'
 
@@ -30,7 +30,7 @@ interface Settings {
   fields: Record<FieldId, Field>
 }
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const sharedLabels = useSharedLabels()
 const logger = useLogger()
 const router = useRouter()
@@ -57,7 +57,7 @@ const settings = reactive({
 const orderedSettingsFields = SETTINGS_ORDER.map(id => settings.fields[id])
 
 const labels = computed(() => ({
-  title: $pgettext('Head/Settings/Title', 'Account Settings')
+  title: t('Account Settings')
 }))
 
 const isLoading = ref(false)
@@ -224,7 +224,7 @@ const deleteAccount = async () => {
     await axios.delete('users/me/', { data: payload })
 
     store.commit('ui/addMessage', {
-      content: $pgettext('*/Auth/Message', 'Your deletion request was submitted, your account and content will be deleted shortly'),
+      content: t('Your deletion request was submitted, your account and content will be deleted shortly'),
       date: new Date()
     })
 
@@ -276,7 +276,7 @@ fetchOwnedApps()
     <div class="ui vertical stripe segment">
       <section class="ui text container">
         <h2 class="ui header">
-          <translate translate-context="Content/Settings/Title">
+          <translate >
             Account settings
           </translate>
         </h2>
@@ -289,7 +289,7 @@ fetchOwnedApps()
             class="ui positive message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Settings/Message">
+              <translate >
                 Settings updated
               </translate>
             </h4>
@@ -300,7 +300,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Settings/Error message.Title">
+              <translate >
                 Your settings can't be updated
               </translate>
             </h4>
@@ -346,7 +346,7 @@ fetchOwnedApps()
             :class="['ui', { loading: isLoading }, 'button']"
             type="submit"
           >
-            <translate translate-context="Content/Settings/Button.Label/Verb">
+            <translate >
               Update settings
             </translate>
           </button>
@@ -355,7 +355,7 @@ fetchOwnedApps()
       <section class="ui text container">
         <div class="ui hidden divider" />
         <h2 class="ui header">
-          <translate translate-context="Content/Settings/Title">
+          <translate >
             Avatar
           </translate>
         </h2>
@@ -366,7 +366,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Settings/Error message.Title">
+              <translate >
                 Your avatar cannot be saved
               </translate>
             </h4>
@@ -385,7 +385,7 @@ fetchOwnedApps()
             @update:model-value="submitAvatar($event)"
             @delete="avatar = {uuid: null}"
           >
-            <translate translate-context="Content/Channel/*">
+            <translate >
               Avatar
             </translate>
           </attachment-input>
@@ -395,14 +395,14 @@ fetchOwnedApps()
       <section class="ui text container">
         <div class="ui hidden divider" />
         <h2 class="ui header">
-          <translate translate-context="Content/Settings/Title/Verb">
+          <translate >
             Change my password
           </translate>
         </h2>
         <div class="ui message">
-          <translate translate-context="Content/Settings/Paragraph'">
+          <translate >
             Changing your password will also change your Subsonic API password if you have requested one.
-          </translate>&nbsp;<translate translate-context="Content/Settings/Paragraph">
+          </translate>&nbsp;<translate >
             You will have to update your password on your clients that use this password.
           </translate>
         </div>
@@ -416,20 +416,20 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Settings/Error message.Title">
+              <translate >
                 Your password cannot be changed
               </translate>
             </h4>
             <ul class="list">
               <li v-if="passwordError == 'invalid_credentials'">
-                <translate translate-context="Content/Settings/Error message.List item/Call to action">
+                <translate >
                   Please double-check your password is correct
                 </translate>
               </li>
             </ul>
           </div>
           <div class="field">
-            <label for="old-password-field"><translate translate-context="Content/Settings/Input.Label">Current password</translate></label>
+            <label for="old-password-field"><translate >Current password</translate></label>
             <password-input
               v-model="credentials.oldPassword"
               field-id="old-password-field"
@@ -437,7 +437,7 @@ fetchOwnedApps()
             />
           </div>
           <div class="field">
-            <label for="new-password-field"><translate translate-context="Content/Settings/Input.Label">New password</translate></label>
+            <label for="new-password-field"><translate >New password</translate></label>
             <password-input
               v-model="credentials.newPassword"
               field-id="new-password-field"
@@ -448,12 +448,12 @@ fetchOwnedApps()
             :class="['ui', {'loading': isLoadingPassword}, {disabled: !credentials.newPassword || !credentials.oldPassword}, 'warning', 'button']"
             :action="submitPassword"
           >
-            <translate translate-context="Content/Settings/Button.Label">
+            <translate >
               Change password
             </translate>
             <template #modal-header>
               <p>
-                <translate translate-context="Popup/Settings/Title">
+                <translate >
                   Change your password?
                 </translate>
               </p>
@@ -461,18 +461,18 @@ fetchOwnedApps()
             <template #modal-content>
               <div>
                 <p>
-                  <translate translate-context="Popup/Settings/Paragraph">
+                  <translate >
                     Changing your password will have the following consequences:
                   </translate>
                 </p>
                 <ul>
                   <li>
-                    <translate translate-context="Popup/Settings/List item">
+                    <translate >
                       You will be logged out from this session and have to log in with the new one
                     </translate>
                   </li>
                   <li>
-                    <translate translate-context="Popup/Settings/List item">
+                    <translate >
                       Your Subsonic password will be changed to a new, random one, logging you out from devices that used the old Subsonic password
                     </translate>
                   </li>
@@ -481,7 +481,7 @@ fetchOwnedApps()
             </template>
             <template #modal-confirm>
               <div>
-                <translate translate-context="Popup/Settings/Button.Label">
+                <translate >
                   Disable access
                 </translate>
               </div>
@@ -500,13 +500,13 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="eye slash outline icon" />
           <div class="content">
-            <translate translate-context="Content/Settings/Title/Noun">
+            <translate >
               Content filters
             </translate>
           </div>
         </h2>
         <p>
-          <translate translate-context="Content/Settings/Paragraph">
+          <translate >
             Content filters help you hide content you don't want to see on the service.
           </translate>
         </p>
@@ -516,12 +516,12 @@ fetchOwnedApps()
           @click="$store.dispatch('moderation/fetchContentFilters')"
         >
           <i class="refresh icon" />&nbsp;
-          <translate translate-context="Content/*/Button.Label/Short, Verb">
+          <translate >
             Refresh
           </translate>
         </button>
         <h3 class="ui header">
-          <translate translate-context="Content/Settings/Title">
+          <translate >
             Hidden artists
           </translate>
         </h3>
@@ -529,12 +529,12 @@ fetchOwnedApps()
           <thead>
             <tr>
               <th>
-                <translate translate-context="*/*/*/Noun">
+                <translate >
                   Name
                 </translate>
               </th>
               <th>
-                <translate translate-context="Content/*/*/Noun">
+                <translate >
                   Creation date
                 </translate>
               </th>
@@ -559,7 +559,7 @@ fetchOwnedApps()
                   class="ui basic tiny button"
                   @click="$store.dispatch('moderation/deleteContentFilter', filter.uuid)"
                 >
-                  <translate translate-context="*/*/*/Verb">
+                  <translate >
                     Delete
                   </translate>
                 </button>
@@ -576,13 +576,13 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="open lock icon" />
           <div class="content">
-            <translate translate-context="Content/Settings/Title/Noun">
+            <translate >
               Authorized apps
             </translate>
           </div>
         </h2>
         <p>
-          <translate translate-context="Content/Settings/Paragraph">
+          <translate >
             This is the list of applications that have access to your account data.
           </translate>
         </p>
@@ -591,7 +591,7 @@ fetchOwnedApps()
           @click="fetchApps()"
         >
           <i class="refresh icon" />&nbsp;
-          <translate translate-context="Content/*/Button.Label/Short, Verb">
+          <translate >
             Refresh
           </translate>
         </button>
@@ -602,12 +602,12 @@ fetchOwnedApps()
           <thead>
             <tr>
               <th>
-                <translate translate-context="*/*/*/Noun">
+                <translate >
                   Application
                 </translate>
               </th>
               <th>
-                <translate translate-context="Content/*/*/Noun">
+                <translate >
                   Permissions
                 </translate>
               </th>
@@ -630,27 +630,27 @@ fetchOwnedApps()
                   :class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']"
                   @confirm="revokeApp(app.client_id)"
                 >
-                  <translate translate-context="*/*/*/Verb">
+                  <translate >
                     Revoke
                   </translate>
                   <template #modal-header>
                     <p
                       v-translate="{application: app.name}"
-                      translate-context="Popup/Settings/Title"
+
                     >
                       Revoke access for application "%{ application }"?
                     </p>
                   </template>
                   <template #modal-content>
                     <p>
-                      <translate translate-context="Popup/Settings/Paragraph">
+                      <translate >
                         This will prevent this application from accessing the service on your behalf.
                       </translate>
                     </p>
                   </template>
                   <template #modal-confirm>
                     <div>
-                      <translate translate-context="*/Settings/Button.Label/Verb">
+                      <translate >
                         Revoke access
                       </translate>
                     </div>
@@ -662,11 +662,11 @@ fetchOwnedApps()
         </table>
         <empty-state v-else>
           <template #title>
-            <translate translate-context="Content/Applications/Paragraph">
+            <translate >
               You don't have any application connected with your account.
             </translate>
           </template>
-          <translate translate-context="Content/Applications/Paragraph">
+          <translate >
             If you authorize third-party applications to access your data, those applications will be listed here.
           </translate>
         </empty-state>
@@ -679,13 +679,13 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="code icon" />
           <div class="content">
-            <translate translate-context="Content/Settings/Title/Noun">
+            <translate >
               Your applications
             </translate>
           </div>
         </h2>
         <p>
-          <translate translate-context="Content/Settings/Paragraph">
+          <translate >
             This is the list of applications that you have registered.
           </translate>
         </p>
@@ -693,7 +693,7 @@ fetchOwnedApps()
           class="ui success button"
           :to="{name: 'settings.applications.new'}"
         >
-          <translate translate-context="Content/Settings/Button.Label">
+          <translate >
             Register a new application
           </translate>
         </router-link>
@@ -704,17 +704,17 @@ fetchOwnedApps()
           <thead>
             <tr>
               <th>
-                <translate translate-context="*/*/*/Noun">
+                <translate >
                   Application
                 </translate>
               </th>
               <th>
-                <translate translate-context="Content/*/*/Noun">
+                <translate >
                   Scopes
                 </translate>
               </th>
               <th>
-                <translate translate-context="Content/*/*/Noun">
+                <translate >
                   Creation date
                 </translate>
               </th>
@@ -742,7 +742,7 @@ fetchOwnedApps()
                   class="ui tiny success button"
                   :to="{name: 'settings.applications.edit', params: {id: app.client_id}}"
                 >
-                  <translate translate-context="Content/*/Button.Label/Verb">
+                  <translate >
                     Edit
                   </translate>
                 </router-link>
@@ -750,27 +750,27 @@ fetchOwnedApps()
                   :class="['ui', 'tiny', 'danger', { loading: isDeleting.has(app.client_id) }, 'button']"
                   @confirm="deleteApp(app.client_id)"
                 >
-                  <translate translate-context="*/*/*/Verb">
+                  <translate >
                     Remove
                   </translate>
                   <template #modal-header>
                     <p
                       v-translate="{application: app.name}"
-                      translate-context="Popup/Settings/Title"
+
                     >
                       Remove application "%{ application }"?
                     </p>
                   </template>
                   <template #modal-content>
                     <p>
-                      <translate translate-context="Popup/Settings/Paragraph">
+                      <translate >
                         This will permanently remove the application and all the associated tokens.
                       </translate>
                     </p>
                   </template>
                   <template #modal-confirm>
                     <div>
-                      <translate translate-context="*/Settings/Button.Label/Verb">
+                      <translate >
                         Remove application
                       </translate>
                     </div>
@@ -782,11 +782,11 @@ fetchOwnedApps()
         </table>
         <empty-state v-else>
           <template #title>
-            <translate translate-context="Content/Applications/Paragraph">
+            <translate >
               You don't have registered any application yet.
             </translate>
           </template>
-          <translate translate-context="Content/Applications/Paragraph">
+          <translate >
             Register one to integrate Funkwhale with third-party applications.
           </translate>
         </empty-state>
@@ -800,13 +800,13 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="code icon" />
           <div class="content">
-            <translate translate-context="Content/Settings/Title/Noun">
+            <translate >
               Plugins
             </translate>
           </div>
         </h2>
         <p>
-          <translate translate-context="Content/Settings/Paragraph">
+          <translate >
             Use plugins to extend Funkwhale and get additional features.
           </translate>
         </p>
@@ -814,7 +814,7 @@ fetchOwnedApps()
           class="ui success button"
           :to="{name: 'settings.plugins'}"
         >
-          <translate translate-context="Content/Settings/Button.Label">
+          <translate >
             Manage plugins
           </translate>
         </router-link>
@@ -824,20 +824,20 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="comment icon" />
           <div class="content">
-            <translate translate-context="*/*/Button.Label">
+            <translate >
               Change my e-mail address
             </translate>
           </div>
         </h2>
         <p>
-          <translate translate-context="Content/Settings/Paragraph'">
+          <translate >
             Change the e-mail address associated with your account. We will send a confirmation to the new address.
           </translate>
         </p>
         <p>
           <translate
             :translate-params="{email: $store.state.auth.profile?.email}"
-            translate-context="Content/Settings/Paragraph'"
+
           >
             Your current e-mail address is %{ email }.
           </translate>
@@ -852,7 +852,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Settings/Error message.Title">
+              <translate >
                 We cannot change your e-mail address
               </translate>
             </h4>
@@ -866,7 +866,7 @@ fetchOwnedApps()
             </ul>
           </div>
           <div class="field">
-            <label for="new-email"><translate translate-context="*/*/*">New e-mail address</translate></label>
+            <label for="new-email"><translate >New e-mail address</translate></label>
             <input
               id="new-email"
               v-model="newEmail"
@@ -875,7 +875,7 @@ fetchOwnedApps()
             >
           </div>
           <div class="field">
-            <label for="current-password-field-email"><translate translate-context="*/*/*">Password</translate></label>
+            <label for="current-password-field-email"><translate >Password</translate></label>
             <password-input
               v-model="emailPassword"
               field-id="current-password-field-email"
@@ -886,7 +886,7 @@ fetchOwnedApps()
             type="submit"
             class="ui button"
           >
-            <translate translate-context="*/*/*">
+            <translate >
               Update
             </translate>
           </button>
@@ -897,13 +897,13 @@ fetchOwnedApps()
         <h2 class="ui header">
           <i class="trash icon" />
           <div class="content">
-            <translate translate-context="*/*/Button.Label">
+            <translate >
               Delete my account
             </translate>
           </div>
         </h2>
         <p>
-          <translate translate-context="Content/Settings/Paragraph'">
+          <translate >
             You can permanently and irreversibly delete your account and all the associated data using the form below. You will be asked for confirmation.
           </translate>
         </p>
@@ -911,7 +911,7 @@ fetchOwnedApps()
           role="alert"
           class="ui warning message"
         >
-          <translate translate-context="Content/Settings/Paragraph'">
+          <translate >
             Your account will be deleted from our servers within a few minutes. We will also notify other servers who may have a copy of some of your data so they can proceed to deletion. Please note that some of these servers may be offline or unwilling to comply though.
           </translate>
         </div>
@@ -922,7 +922,7 @@ fetchOwnedApps()
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Settings/Error message.Title">
+              <translate >
                 We cannot delete your account
               </translate>
             </h4>
@@ -936,7 +936,7 @@ fetchOwnedApps()
             </ul>
           </div>
           <div class="field">
-            <label for="current-password-field"><translate translate-context="*/*/*">Password</translate></label>
+            <label for="current-password-field"><translate >Password</translate></label>
             <password-input
               v-model="deleteAccountPassword"
               field-id="current-password-field"
@@ -947,12 +947,12 @@ fetchOwnedApps()
             :class="['ui', {'loading': isDeletingAccount}, {disabled: !deleteAccountPassword}, {danger: deleteAccountPassword}, 'button']"
             :action="deleteAccount"
           >
-            <translate translate-context="*/*/Button.Label">
+            <translate >
               Delete my account…
             </translate>
             <template #modal-header>
               <p>
-                <translate translate-context="Popup/Settings/Title">
+                <translate >
                   Do you want to delete your account?
                 </translate>
               </p>
@@ -960,7 +960,7 @@ fetchOwnedApps()
             <template #modal-content>
               <div>
                 <p>
-                  <translate translate-context="Popup/Settings/Paragraph">
+                  <translate >
                     This is irreversible and will permanently remove your data from our servers. You will we immediately logged out.
                   </translate>
                 </p>
@@ -968,7 +968,7 @@ fetchOwnedApps()
             </template>
             <template #modal-confirm>
               <div>
-                <translate translate-context="*/*/Button.Label">
+                <translate >
                   Delete my account
                 </translate>
               </div>
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index c4970b920..bad844f05 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -3,7 +3,7 @@ import type { RouteLocationRaw } from 'vue-router'
 import type { BackendError, Form } from '~/types'
 
 import { computed, reactive, ref, watchEffect } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -30,14 +30,14 @@ const props = withDefaults(defineProps<Props>(), {
   signupApprovalEnabled: undefined
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const logger = useLogger()
 const store = useStore()
 
 const labels = computed(() => ({
-  placeholder: $pgettext('Content/Signup/Form/Placeholder', 'Enter your invitation code (case insensitive)'),
-  usernamePlaceholder: $pgettext('Content/Signup/Form/Placeholder', 'Enter your username'),
-  emailPlaceholder: $pgettext('Content/Signup/Form/Placeholder', 'Enter your e-mail address')
+  placeholder: t('Enter your invitation code (case insensitive)'),
+  usernamePlaceholder: t('Enter your username'),
+  emailPlaceholder: t('Enter your e-mail address')
 }))
 
 const signupRequiresApproval = computed(() => props.signupApprovalEnabled ?? store.state.instance.settings.moderation.signup_approval_enabled.value)
@@ -88,18 +88,18 @@ fetchInstanceSettings()
   <div v-if="submitted">
     <div class="ui success message">
       <p v-if="signupRequiresApproval">
-        <translate translate-context="Content/Signup/Form/Paragraph">
+        <translate >
           Your account request was successfully submitted. You will be notified by e-mail when our moderation team has reviewed your request.
         </translate>
       </p>
       <p v-else>
-        <translate translate-context="Content/Signup/Form/Paragraph">
+        <translate >
           Your account was successfully created. Please verify your e-mail address before trying to login.
         </translate>
       </p>
     </div>
     <h2>
-      <translate translate-context="Content/Login/Title/Verb">
+      <translate >
         Log in to your Funkwhale account
       </translate>
     </h2>
@@ -117,7 +117,7 @@ fetchInstanceSettings()
       v-if="!$store.state.instance.settings.users.registration_enabled.value"
       class="ui message"
     >
-      <translate translate-context="Content/Signup/Form/Paragraph">
+      <translate >
         Public registrations are not possible on this instance. You will need an invitation code to sign up.
       </translate>
     </p>
@@ -125,7 +125,7 @@ fetchInstanceSettings()
       v-else-if="signupRequiresApproval"
       class="ui message"
     >
-      <translate translate-context="Content/Signup/Form/Paragraph">
+      <translate >
         Registrations on this pod are open, but reviewed by moderators before approval.
       </translate>
     </p>
@@ -143,7 +143,7 @@ fetchInstanceSettings()
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/Signup/Form/Paragraph">
+        <translate >
           Your account cannot be created.
         </translate>
       </h4>
@@ -157,7 +157,7 @@ fetchInstanceSettings()
       </ul>
     </div>
     <div class="required field">
-      <label for="username-field"><translate translate-context="Content/*/*">Username</translate></label>
+      <label for="username-field"><translate >Username</translate></label>
       <input
         id="username-field"
         ref="username"
@@ -170,7 +170,7 @@ fetchInstanceSettings()
       >
     </div>
     <div class="required field">
-      <label for="email-field"><translate translate-context="Content/*/*/Noun">E-mail address</translate></label>
+      <label for="email-field"><translate >E-mail address</translate></label>
       <input
         id="email-field"
         ref="email"
@@ -182,7 +182,7 @@ fetchInstanceSettings()
       >
     </div>
     <div class="required field">
-      <label for="password-field"><translate translate-context="*/*/*">Password</translate></label>
+      <label for="password-field"><translate >Password</translate></label>
       <password-input
         v-model="payload.password1"
         field-id="password-field"
@@ -192,7 +192,7 @@ fetchInstanceSettings()
       v-if="!$store.state.instance.settings.users.registration_enabled.value"
       class="required field"
     >
-      <label for="invitation-code"><translate translate-context="Content/*/Input.Label">Invitation code</translate></label>
+      <label for="invitation-code"><translate >Invitation code</translate></label>
       <input
         id="invitation-code"
         v-model="payload.invitation"
@@ -229,7 +229,7 @@ fetchInstanceSettings()
       :class="['ui', buttonClasses, {'loading': isLoading}, ' right floated button']"
       type="submit"
     >
-      <translate translate-context="Content/Signup/Button.Label">
+      <translate >
         Create my account
       </translate>
     </button>
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index 843ad0a4f..6ef233cc4 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import type { BackendError } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
 import axios from 'axios'
 
 import PasswordInput from '~/components/forms/PasswordInput.vue'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const store = useStore()
 
 const subsonicEnabled = computed(() => store.state.instance.settings.subsonic.enabled.value)
 const labels = computed(() => ({
-  subsonicField: $pgettext('Content/Password/Input.label', 'Your subsonic API password')
+  subsonicField: t('Your subsonic API password')
 }))
 
 const errors = ref([] as string[])
@@ -38,7 +38,7 @@ const fetchToken = async () => {
 const showToken = ref(false)
 const successMessage = ref('')
 const requestNewToken = async () => {
-  successMessage.value = $pgettext('Content/Settings/Message', 'Password updated')
+  successMessage.value = t('Password updated')
   success.value = false
   errors.value = []
   isLoading.value = true
@@ -56,7 +56,7 @@ const requestNewToken = async () => {
 }
 
 const disable = async () => {
-  successMessage.value = $pgettext('Content/Settings/Message', 'Access disabled')
+  successMessage.value = t('Access disabled')
   success.value = false
   errors.value = []
   isLoading.value = true
@@ -82,7 +82,7 @@ fetchToken()
     @submit.prevent="requestNewToken()"
   >
     <h2>
-      <translate translate-context="Content/Settings/Title">
+      <translate >
         Subsonic API password
       </translate>
     </h2>
@@ -90,19 +90,19 @@ fetchToken()
       v-if="!subsonicEnabled"
       class="ui message"
     >
-      <translate translate-context="Content/Settings/Paragraph">
+      <translate >
         The Subsonic API is not available on this Funkwhale instance.
       </translate>
     </p>
     <p>
-      <translate translate-context="Content/Settings/Paragraph'">
+      <translate >
         Funkwhale is compatible with other music players that support the Subsonic API.
-      </translate>&nbsp;<translate translate-context="Content/Settings/Paragraph">
+      </translate>&nbsp;<translate >
         You can use those to enjoy your playlist and music in offline mode, on your smartphone or tablet, for instance.
       </translate>
     </p>
     <p>
-      <translate translate-context="Content/Settings/Paragraph">
+      <translate >
         However, accessing Funkwhale from those clients requires a separate password you can set below.
       </translate>
     </p>
@@ -111,7 +111,7 @@ fetchToken()
         href="https://docs.funkwhale.audio/users/apps.html#subsonic-compatible-clients"
         target="_blank"
       >
-        <translate translate-context="Content/Settings/Link">Discover how to use Funkwhale from other apps</translate>
+        <translate >Discover how to use Funkwhale from other apps</translate>
       </a>
     </p>
     <div
@@ -128,7 +128,7 @@ fetchToken()
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Error
         </translate>
       </h4>
@@ -164,26 +164,26 @@ fetchToken()
         :class="['ui', {'loading': isLoading}, 'button']"
         :action="requestNewToken"
       >
-        <translate translate-context="*/Settings/Button.Label/Verb">
+        <translate >
           Request a new password
         </translate>
         <template #modal-header>
           <p>
-            <translate translate-context="Popup/Settings/Title">
+            <translate >
               Request a new Subsonic API password?
             </translate>
           </p>
         </template>
         <template #modal-content>
           <p>
-            <translate translate-context="Popup/Settings/Paragraph">
+            <translate >
               This will log you out from existing devices that use the current password.
             </translate>
           </p>
         </template>
         <template #modal-confirm>
           <div>
-            <translate translate-context="*/Settings/Button.Label/Verb">
+            <translate >
               Request a new password
             </translate>
           </div>
@@ -195,7 +195,7 @@ fetchToken()
         :class="['ui', {'loading': isLoading}, 'button']"
         @click="requestNewToken"
       >
-        <translate translate-context="Content/Settings/Button.Label/Verb">
+        <translate >
           Request a password
         </translate>
       </button>
@@ -204,26 +204,26 @@ fetchToken()
         :class="['ui', {'loading': isLoading}, 'warning', 'button']"
         :action="disable"
       >
-        <translate translate-context="Content/Settings/Button.Label/Verb">
+        <translate >
           Disable Subsonic access
         </translate>
         <template #modal-header>
           <p>
-            <translate translate-context="Popup/Settings/Title">
+            <translate >
               Disable Subsonic API access?
             </translate>
           </p>
         </template>
         <template #modal-content>
           <p>
-            <translate translate-context="Popup/Settings/Paragraph">
+            <translate >
               This will completely disable access to the Subsonic API using from account.
             </translate>
           </p>
         </template>
         <template #modal-confirm>
           <div>
-            <translate translate-context="Popup/Settings/Button.Label">
+            <translate >
               Disable access
             </translate>
           </div>
diff --git a/front/src/components/channels/AlbumForm.vue b/front/src/components/channels/AlbumForm.vue
index 340273463..50b0decf1 100644
--- a/front/src/components/channels/AlbumForm.vue
+++ b/front/src/components/channels/AlbumForm.vue
@@ -59,7 +59,7 @@ defineExpose({
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Error while creating
         </translate>
       </h4>
@@ -74,7 +74,7 @@ defineExpose({
     </div>
     <div class="ui required field">
       <label for="album-title">
-        <translate translate-context="*/*/*/Noun">Title</translate>
+        <translate >Title</translate>
       </label>
       <input
         v-model="title"
diff --git a/front/src/components/channels/AlbumModal.vue b/front/src/components/channels/AlbumModal.vue
index 2dc95c1c9..a24381e34 100644
--- a/front/src/components/channels/AlbumModal.vue
+++ b/front/src/components/channels/AlbumModal.vue
@@ -35,13 +35,13 @@ const albumForm = ref()
     <h4 class="header">
       <translate
         v-if="channel.content_category === 'podcast'"
-        translate-context="Popup/Channels/Title/Verb"
+
       >
         New series
       </translate>
       <translate
         v-else
-        translate-context="Popup/Channels/Title"
+
       >
         New album
       </translate>
@@ -57,7 +57,7 @@ const albumForm = ref()
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Cancel
         </translate>
       </button>
@@ -66,7 +66,7 @@ const albumForm = ref()
         :disabled="!submittable"
         @click.stop.prevent="albumForm.submit()"
       >
-        <translate translate-context="*/*/Button.Label">
+        <translate >
           Create
         </translate>
       </button>
diff --git a/front/src/components/channels/AlbumSelect.vue b/front/src/components/channels/AlbumSelect.vue
index 3542aa343..dd7efb338 100644
--- a/front/src/components/channels/AlbumSelect.vue
+++ b/front/src/components/channels/AlbumSelect.vue
@@ -49,11 +49,11 @@ watch(() => props.channel, fetchData, { immediate: true })
     <label for="album-dropdown">
       <translate
         v-if="channel && channel.artist && channel.artist.content_category === 'podcast'"
-        translate-context="*/*/*"
+
       >Series</translate>
       <translate
         v-else
-        translate-context="*/*/*"
+
       >Album</translate>
     </label>
     <select
@@ -62,7 +62,7 @@ watch(() => props.channel, fetchData, { immediate: true })
       class="ui search normal dropdown"
     >
       <option value="">
-        <translate translate-context="*/*/*">
+        <translate >
           None
         </translate>
       </option>
@@ -72,7 +72,7 @@ watch(() => props.channel, fetchData, { immediate: true })
         :value="album.id"
       >
         {{ album.title }} (<translate
-          translate-context="*/*/*"
+
           :translate-params="{count: album.tracks_count}"
           :translate-n="album.tracks_count"
           translate-plural="%{ count } tracks"
diff --git a/front/src/components/channels/LicenseSelect.vue b/front/src/components/channels/LicenseSelect.vue
index 4fad1f83c..605303b40 100644
--- a/front/src/components/channels/LicenseSelect.vue
+++ b/front/src/components/channels/LicenseSelect.vue
@@ -55,7 +55,7 @@ fetchLicenses()
 <template>
   <div>
     <label for="license-dropdown">
-      <translate translate-context="Content/*/*/Noun">License</translate>
+      <translate >License</translate>
     </label>
     <select
       id="license-dropdown"
@@ -63,7 +63,7 @@ fetchLicenses()
       class="ui search normal dropdown"
     >
       <option value="">
-        <translate translate-context="*/*/*">
+        <translate >
           None
         </translate>
       </option>
@@ -86,7 +86,7 @@ fetchLicenses()
         target="_blank"
         rel="noreferrer noopener"
       >
-        <translate translate-context="Content/*/*">About this license</translate>
+        <translate >About this license</translate>
       </a>
     </p>
   </div>
diff --git a/front/src/components/channels/SubscribeButton.vue b/front/src/components/channels/SubscribeButton.vue
index 39dd8e7c6..2972e1740 100644
--- a/front/src/components/channels/SubscribeButton.vue
+++ b/front/src/components/channels/SubscribeButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Channel } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
 
@@ -19,17 +19,17 @@ interface Props {
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const store = useStore()
 
 const isSubscribed = computed(() => store.getters['channels/isSubscribed'](props.channel.uuid))
 const title = computed(() => isSubscribed.value
-  ? $pgettext('Content/Channel/Button/Verb', 'Unsubscribe')
-  : $pgettext('Content/Channel/Button/Verb', 'Subscribe')
+  ? t('Unsubscribe')
+  : t('Subscribe')
 )
 
 const message = computed(() => ({
-  authMessage: $pgettext('Popup/Message/Paragraph', 'You need to be logged in to subscribe to this channel')
+  authMessage: t('You need to be logged in to subscribe to this channel')
 }))
 
 const toggle = async () => {
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index 82128e365..79b596979 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -5,7 +5,7 @@ import type { VueUploadItem } from 'vue-upload-component'
 import { computed, ref, reactive, watchEffect, watch } from 'vue'
 import { whenever, useCurrentElement } from '@vueuse/core'
 import { humanSize } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   channel: null
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const store = useStore()
 
 const errors = ref([] as string[])
@@ -396,7 +396,7 @@ watchEffect(() => {
 })
 
 const labels = computed(() => ({
-  editTitle: $pgettext('Content/*/Button.Label/Verb', 'Edit')
+  editTitle: t('Edit')
 }))
 </script>
 
@@ -411,7 +411,7 @@ const labels = computed(() => ({
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Error while publishing
         </translate>
       </h4>
@@ -426,7 +426,7 @@ const labels = computed(() => ({
     </div>
     <div :class="['ui', 'required', {hidden: step > 1}, 'field']">
       <label for="channel-dropdown">
-        <translate translate-context="*/*/*">Channel</translate>
+        <translate >Channel</translate>
       </label>
       <div
         id="channel-dropdown"
@@ -449,7 +449,7 @@ const labels = computed(() => ({
       <div class="content">
         <p>
           <i class="copyright icon" />
-          <translate translate-context="Content/Channels/Popup.Paragraph">
+          <translate >
             Add a license to your upload to ensure some freedoms to your public.
           </translate>
         </p>
@@ -464,7 +464,7 @@ const labels = computed(() => ({
         <div class="content">
           <p>
             <i class="warning icon" />
-            <translate translate-context="Content/Library/Paragraph">
+            <translate >
               You don't have any space left to upload your files. Please contact the moderators.
             </translate>
           </p>
@@ -477,7 +477,7 @@ const labels = computed(() => ({
         >
           <p>
             <i class="redo icon" />
-            <translate translate-context="Popup/Channels/Paragraph">
+            <translate >
               You have some draft uploads pending publication.
             </translate>
           </p>
@@ -485,7 +485,7 @@ const labels = computed(() => ({
             class="ui basic button"
             @click.stop.prevent="includeDraftUploads = false"
           >
-            <translate translate-context="*/*/*">
+            <translate >
               Ignore
             </translate>
           </button>
@@ -493,7 +493,7 @@ const labels = computed(() => ({
             class="ui basic button"
             @click.stop.prevent="includeDraftUploads = true"
           >
-            <translate translate-context="*/*/*">
+            <translate >
               Resume
             </translate>
           </button>
@@ -547,19 +547,19 @@ const labels = computed(() => ({
                 <template v-else>
                   <translate
                     v-if="file.active"
-                    translate-context="Channels/*/*"
+
                   >
                     Uploading
                   </translate>
                   <translate
                     v-else-if="file.error"
-                    translate-context="Channels/*/*"
+
                   >
                     Errored
                   </translate>
                   <translate
                     v-else
-                    translate-context="Channels/*/*"
+
                   >
                     Pending
                   </translate>
@@ -567,12 +567,12 @@ const labels = computed(() => ({
                   · {{ parseFloat(file.progress ?? '0') }}%
                 </template>
                 · <a @click.stop.prevent="remove(file)">
-                  <translate translate-context="Content/Radio/Button.Label/Verb">Remove</translate>
+                  <translate >Remove</translate>
                 </a>
                 <template v-if="file.error">
                   ·
                   <a @click.stop.prevent="retry(file)">
-                    <translate translate-context="*/*/*">Retry</translate>
+                    <translate >Retry</translate>
                   </a>
                 </template>
               </div>
@@ -592,7 +592,7 @@ const labels = computed(() => ({
             <p>
               <i class="info icon" />
               <translate
-                translate-context="Content/Library/Paragraph"
+
                 :translate-params="{extensions: $store.state.ui.supportedExtensions.join(', ')}"
               >
                 Supported extensions: %{ extensions }
@@ -615,13 +615,13 @@ const labels = computed(() => ({
         >
           <div>
             <i class="upload icon" />&nbsp;
-            <translate translate-context="Content/Channels/Paragraph">
+            <translate >
               Drag and drop your files here or open the browser to upload your files
             </translate>
           </div>
           <div class="ui very small divider" />
           <div>
-            <translate translate-context="*/*/*">
+            <translate >
               Browse…
             </translate>
           </div>
diff --git a/front/src/components/channels/UploadMetadataForm.vue b/front/src/components/channels/UploadMetadataForm.vue
index 06c8d7228..9151edb38 100644
--- a/front/src/components/channels/UploadMetadataForm.vue
+++ b/front/src/components/channels/UploadMetadataForm.vue
@@ -33,7 +33,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">
-        <translate translate-context="*/*/*/Noun">Title</translate>
+        <translate >Title</translate>
       </label>
       <input
         v-model="newValues.title"
@@ -44,7 +44,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
       v-model="newValues.cover"
       @delete="newValues.cover = ''"
     >
-      <translate translate-context="Content/Channel/*">
+      <translate >
         Track Picture
       </translate>
     </attachment-input>
@@ -52,7 +52,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
     <div class="ui two fields">
       <div class="ui field">
         <label for="upload-tags">
-          <translate translate-context="*/*/*/Noun">Tags</translate>
+          <translate >Tags</translate>
         </label>
         <tags-selector
           id="upload-tags"
@@ -62,7 +62,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
       </div>
       <div class="ui field">
         <label for="upload-position">
-          <translate translate-context="*/*/*/Short, Noun">Position</translate>
+          <translate >Position</translate>
         </label>
         <input
           v-model="newValues.position"
@@ -74,7 +74,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
     </div>
     <div class="ui field">
       <label for="upload-description">
-        <translate translate-context="*/*/*">Description</translate>
+        <translate >Description</translate>
       </label>
       <content-form
         v-model="newValues.description"
diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index 44f623877..137b7eb58 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -5,7 +5,7 @@ import { humanSize } from '~/utils/filters'
 import { useRouter } from 'vue-router'
 import { useStore } from '~/store'
 import { ref, computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 const store = useStore()
 const router = useRouter()
@@ -13,7 +13,7 @@ router.beforeEach(() => store.commit('channels/showUploadModal', { show: false }
 
 const update = (value: boolean) => store.commit('channels/showUploadModal', { show: value })
 
-const { $npgettext, $gettext } = useGettext()
+const { t } = useI18n()
 
 const uploadForm = ref()
 
@@ -29,8 +29,8 @@ const statusInfo = computed(() => {
   }
 
   if (statusData.value.totalFiles) {
-    const msg = $npgettext('*/*/*', '%{ count } file', '%{ count } files', statusData.value.totalFiles)
-    info.push($gettext(msg, { count: statusData.value.totalFiles }))
+    const msg = t('no files | %{ count } file | %{ count } files', statusData.value.totalFiles)
+    info.push(t(msg, { count: statusData.value.totalFiles }))
   }
 
   if (statusData.value.progress) {
@@ -56,25 +56,25 @@ const isLoading = ref(false)
     <h4 class="header">
       <translate
         v-if="step === 1"
-        translate-context="Popup/Channels/Title/Verb"
+
       >
         Publish audio
       </translate>
       <translate
         v-else-if="step === 2"
-        translate-context="Popup/Channels/Title"
+
       >
         Files to upload
       </translate>
       <translate
         v-else-if="step === 3"
-        translate-context="Popup/Channels/Title"
+
       >
         Upload details
       </translate>
       <translate
         v-else-if="step === 4"
-        translate-context="Popup/Channels/Title"
+
       >
         Processing uploads
       </translate>
@@ -95,7 +95,7 @@ const isLoading = ref(false)
         </template>
         <div class="ui very small hidden divider" />
         <template v-if="statusData && statusData.quotaStatus">
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Remaining storage space:
           </translate>
           {{ humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000) }}
@@ -106,7 +106,7 @@ const isLoading = ref(false)
         v-if="step === 1"
         class="ui basic cancel button"
       >
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Cancel
         </translate>
       </button>
@@ -115,7 +115,7 @@ const isLoading = ref(false)
         class="ui basic button"
         @click.stop.prevent="uploadForm.step -= 1"
       >
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Previous step
         </translate>
       </button>
@@ -124,7 +124,7 @@ const isLoading = ref(false)
         class="ui basic button"
         @click.stop.prevent="uploadForm.step -= 1"
       >
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Update
         </translate>
       </button>
@@ -133,7 +133,7 @@ const isLoading = ref(false)
         class="ui primary button"
         @click.stop.prevent="uploadForm.step += 1"
       >
-        <translate translate-context="*/*/Button.Label">
+        <translate >
           Next step
         </translate>
       </button>
@@ -147,7 +147,7 @@ const isLoading = ref(false)
           :disabled="!statusData?.canSubmit || undefined"
           @click.prevent.stop="uploadForm.publish"
         >
-          <translate translate-context="*/Channels/Button.Label">
+          <translate >
             Publish
           </translate>
         </button>
@@ -164,7 +164,7 @@ const isLoading = ref(false)
               class="basic item"
               @click="update(false)"
             >
-              <translate translate-context="Content/*/Button.Label/Verb">
+              <translate >
                 Finish later
               </translate>
             </div>
@@ -176,7 +176,7 @@ const isLoading = ref(false)
         class="ui basic cancel button"
         @click="update(false)"
       >
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Close
         </translate>
       </button>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index 1358e205c..28f763d93 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -2,7 +2,7 @@
 import type { BackendError } from '~/types'
 
 import { ref, computed, reactive, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
   customObjects: () => []
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const currentActionName = ref(props.actions[0]?.name ?? null)
 const currentAction = computed(() => props.actions.find(action => action.name === currentActionName.value))
@@ -123,10 +123,10 @@ const toggleCheck = (event: MouseEvent, id: string, index: number) => {
 }
 
 const labels = computed(() => ({
-  refresh: $pgettext('Content/*/Button.Tooltip/Verb', 'Refresh table content'),
-  selectAllItems: $pgettext('Content/*/Select/Verb', 'Select all items'),
-  performAction: $pgettext('Content/*/Button.Label', 'Perform actions'),
-  selectItem: $pgettext('Content/*/Select/Verb', 'Select')
+  refresh: t('Refresh table content'),
+  selectAllItems: t('Select all items'),
+  performAction: t('Perform actions'),
+  selectItem: t('Select')
 }))
 
 const errors = ref([] as string[])
@@ -167,7 +167,7 @@ const launchAction = async () => {
               class="right floated"
             >
               <span v-if="needsRefresh">
-                <translate translate-context="Content/*/Button.Help text.Paragraph">Content has been updated, click refresh to see up-to-date content</translate>
+                <translate >Content has been updated, click refresh to see up-to-date content</translate>
               </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"><translate translate-context="Content/*/*/Noun">Actions</translate></label>
+                  <label for="actions-select"><translate >Actions</translate></label>
                   <select
                     id="actions-select"
                     v-model="currentActionName"
@@ -208,14 +208,14 @@ const launchAction = async () => {
                     :aria-label="labels.performAction"
                     @confirm="launchAction"
                   >
-                    <translate translate-context="Content/*/Button.Label/Short, Verb">
+                    <translate >
                       Go
                     </translate>
                     <template #modal-header>
                       <p>
                         <translate
                           key="1"
-                          translate-context="Modal/*/Title"
+
                           :translate-n="affectedObjectsCount"
                           :translate-params="{count: affectedObjectsCount, action: currentActionName}"
                           translate-plural="Do you want to launch %{ action } on %{ count } elements?"
@@ -231,7 +231,7 @@ const launchAction = async () => {
                         </template>
                         <translate
                           v-else
-                          translate-context="Modal/*/Paragraph"
+
                         >
                           This may affect a lot of elements or have irreversible consequences, please double check this is really what you want.
                         </translate>
@@ -239,7 +239,7 @@ const launchAction = async () => {
                     </template>
                     <template #modal-confirm>
                       <div :aria-label="labels.performAction">
-                        <translate translate-context="Modal/*/Button.Label/Short, Verb">
+                        <translate >
                           Launch
                         </translate>
                       </div>
@@ -252,7 +252,7 @@ const launchAction = async () => {
                     :class="['ui', {disabled: checked.length === 0}, {'loading': isLoading}, 'button']"
                     @click="launchAction"
                   >
-                    <translate translate-context="Content/*/Button.Label/Short, Verb">
+                    <translate >
                       Go
                     </translate>
                   </button>
@@ -260,7 +260,7 @@ const launchAction = async () => {
                 <div class="count field">
                   <translate
                     v-if="selectAll"
-                    translate-context="Content/*/Paragraph"
+
                     tag="span"
                     :translate-n="objectsData.count"
                     :translate-params="{count: objectsData.count, total: objectsData.count}"
@@ -270,7 +270,7 @@ const launchAction = async () => {
                   </translate>
                   <translate
                     v-else
-                    translate-context="Content/*/Paragraph"
+
                     tag="span"
                     :translate-n="checked.length"
                     :translate-params="{count: checked.length, total: objectsData.count}"
@@ -286,7 +286,7 @@ const launchAction = async () => {
                     >
                       <translate
                         key="3"
-                        translate-context="Content/*/Link/Verb"
+
                         :translate-n="objectsData.count"
                         :translate-params="{total: objectsData.count}"
                         translate-plural="Select all %{ total } elements"
@@ -301,7 +301,7 @@ const launchAction = async () => {
                     >
                       <translate
                         key="4"
-                        translate-context="Content/*/Link/Verb"
+
                       >Select only current page</translate>
                     </a>
                   </template>
@@ -313,7 +313,7 @@ const launchAction = async () => {
                 class="ui negative message"
               >
                 <h4 class="header">
-                  <translate translate-context="Content/*/Error message/Header">
+                  <translate >
                     Error while applying action
                   </translate>
                 </h4>
@@ -332,7 +332,7 @@ const launchAction = async () => {
               >
                 <p>
                   <translate
-                    translate-context="Content/*/Paragraph"
+
                     :translate-n="result.updated"
                     :translate-params="{count: result.updated, action: result.action}"
                     translate-plural="Action %{ action } was launched successfully on %{ count } elements"
diff --git a/front/src/components/common/AttachmentInput.vue b/front/src/components/common/AttachmentInput.vue
index 089818813..52f22060a 100644
--- a/front/src/components/common/AttachmentInput.vue
+++ b/front/src/components/common/AttachmentInput.vue
@@ -107,7 +107,7 @@ const getAttachmentUrl = (uuid: string) => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Your attachment cannot be saved
         </translate>
       </h4>
@@ -146,7 +146,7 @@ const getAttachmentUrl = (uuid: string) => {
         <div class="eleven wide column">
           <div class="file-input">
             <label :for="attachmentId">
-              <translate translate-context="*/*/*">Upload New Picture…</translate>
+              <translate >Upload New Picture…</translate>
             </label>
             <input
               :id="attachmentId"
@@ -161,7 +161,7 @@ const getAttachmentUrl = (uuid: string) => {
           </div>
           <div class="ui very small hidden divider" />
           <p>
-            <translate translate-context="Content/*/Paragraph">
+            <translate >
               PNG or JPG. Dimensions should be between 1400x1400px and 3000x3000px. Maximum file size allowed is 5MB.
             </translate>
           </p>
@@ -170,7 +170,7 @@ const getAttachmentUrl = (uuid: string) => {
             class="ui basic tiny button"
             @click.stop.prevent="remove(value as string)"
           >
-            <translate translate-context="Content/Radio/Button.Label/Verb">
+            <translate >
               Remove
             </translate>
           </button>
@@ -179,7 +179,7 @@ const getAttachmentUrl = (uuid: string) => {
             class="ui active inverted dimmer"
           >
             <div class="ui indeterminate text loader">
-              <translate translate-context="Content/*/*/Noun">
+              <translate >
                 Uploading file…
               </translate>
             </div>
diff --git a/front/src/components/common/CollapseLink.vue b/front/src/components/common/CollapseLink.vue
index 35c0627c3..2b17aafc4 100644
--- a/front/src/components/common/CollapseLink.vue
+++ b/front/src/components/common/CollapseLink.vue
@@ -22,13 +22,13 @@ const value = useVModel(props, 'modelValue', emit)
   >
     <translate
       v-if="value"
-      translate-context="*/*/Button,Label"
+
     >
       Expand
     </translate>
     <translate
       v-else
-      translate-context="*/*/Button,Label"
+
     >
       Collapse
     </translate>
diff --git a/front/src/components/common/ContentForm.vue b/front/src/components/common/ContentForm.vue
index a25306542..e1cf82592 100644
--- a/front/src/components/common/ContentForm.vue
+++ b/front/src/components/common/ContentForm.vue
@@ -2,7 +2,7 @@
 import axios from 'axios'
 import { useVModel, watchDebounced, useTextareaAutosize, syncRef } from '@vueuse/core'
 import { ref, computed, watchEffect, onMounted, nextTick, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'update:modelValue', value: string): void
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   required: false
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const { textarea, input } = useTextareaAutosize()
 const value = useVModel(props, 'modelValue', emit)
 syncRef(value, input)
@@ -36,7 +36,7 @@ const preview = ref()
 const isLoadingPreview = ref(false)
 
 const labels = computed(() => ({
-  placeholder: props.placeholder ?? $pgettext('*/Form/Placeholder', 'Write a few words here…')
+  placeholder: props.placeholder ?? t('Write a few words here…')
 }))
 
 const remainingChars = computed(() => props.charLimit - props.modelValue.length)
@@ -86,7 +86,7 @@ onMounted(async () => {
           :class="[{active: !isPreviewing}, 'item']"
           @click.prevent="isPreviewing = false"
         >
-          <translate translate-context="*/Form/Menu.item">
+          <translate >
             Write
           </translate>
         </button>
@@ -94,7 +94,7 @@ onMounted(async () => {
           :class="[{active: isPreviewing}, 'item']"
           @click.prevent="isPreviewing = true"
         >
-          <translate translate-context="*/Form/Menu.item">
+          <translate >
             Preview
           </translate>
         </button>
@@ -112,7 +112,7 @@ onMounted(async () => {
           </div>
         </div>
         <p v-else-if="!preview">
-          <translate translate-context="*/Form/Paragraph">
+          <translate >
             Nothing to preview.
           </translate>
         </p>
@@ -141,7 +141,7 @@ onMounted(async () => {
         {{ remainingChars }}
       </span>
       <p>
-        <translate translate-context="*/Form/Paragraph">
+        <translate >
           Markdown syntax is supported.
         </translate>
       </p>
diff --git a/front/src/components/common/CopyInput.vue b/front/src/components/common/CopyInput.vue
index a76a2fb5d..78c354499 100644
--- a/front/src/components/common/CopyInput.vue
+++ b/front/src/components/common/CopyInput.vue
@@ -22,7 +22,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
       v-if="copied"
       class="message"
     >
-      <translate translate-context="Content/*/Paragraph">
+      <translate >
         Text copied to clipboard!
       </translate>
     </p>
@@ -39,7 +39,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
       @click="copy()"
     >
       <i class="copy icon" />
-      <translate translate-context="*/*/Button.Label/Short, Verb">
+      <translate >
         Copy
       </translate>
     </button>
diff --git a/front/src/components/common/DangerousButton.vue b/front/src/components/common/DangerousButton.vue
index 92a5a843b..e906cacf0 100644
--- a/front/src/components/common/DangerousButton.vue
+++ b/front/src/components/common/DangerousButton.vue
@@ -42,7 +42,7 @@ const confirm = () => {
     >
       <h4 class="header">
         <slot name="modal-header">
-          <translate translate-context="Modal/*/Title">
+          <translate >
             Do you want to confirm this action?
           </translate>
         </slot>
@@ -54,7 +54,7 @@ const confirm = () => {
       </div>
       <div class="actions">
         <button class="ui basic cancel button">
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Cancel
           </translate>
         </button>
@@ -63,7 +63,7 @@ const confirm = () => {
           @click="confirm"
         >
           <slot name="modal-confirm">
-            <translate translate-context="Modal/*/Button.Label/Short, Verb">
+            <translate >
               Confirm
             </translate>
           </slot>
diff --git a/front/src/components/common/Duration.vue b/front/src/components/common/Duration.vue
index b2c66b425..b33116ca9 100644
--- a/front/src/components/common/Duration.vue
+++ b/front/src/components/common/Duration.vue
@@ -20,12 +20,12 @@ const duration = computed(() => {
   <span>
     <translate
       v-if="duration.hours > 0"
-      translate-context="Content/*/Paragraph"
+
       :translate-params="duration"
     >%{ hours } h %{ minutes } min</translate>
     <translate
       v-else
-      translate-context="Content/*/Paragraph"
+
       :translate-params="duration"
     >%{ minutes } min</translate>
   </span>
diff --git a/front/src/components/common/EmptyState.vue b/front/src/components/common/EmptyState.vue
index d7ef475d7..a1fb2b785 100644
--- a/front/src/components/common/EmptyState.vue
+++ b/front/src/components/common/EmptyState.vue
@@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
       <div class="content">
         <slot name="title">
           <i class="search icon" />
-          <translate translate-context="Content/*/Paragraph">
+          <translate >
             No results were found.
           </translate>
         </slot>
@@ -32,7 +32,7 @@ withDefaults(defineProps<Props>(), {
         class="ui button"
         @click="emit('refresh')"
       >
-        <translate translate-context="Content/*/Button.Label/Short, Verb">
+        <translate >
           Refresh
         </translate>
       </button>
diff --git a/front/src/components/common/ExpandableDiv.vue b/front/src/components/common/ExpandableDiv.vue
index e7e16144b..5c63473d1 100644
--- a/front/src/components/common/ExpandableDiv.vue
+++ b/front/src/components/common/ExpandableDiv.vue
@@ -28,11 +28,11 @@ const truncated = computed(() => props.content.slice(0, props.length))
       <br>
       <translate
         v-if="expanded"
-        translate-context="*/*/Button,Label"
+
       >Show less</translate>
       <translate
         v-else
-        translate-context="*/*/Button,Label"
+
       >Show more</translate>
     </a>
   </div>
diff --git a/front/src/components/common/InlineSearchBar.vue b/front/src/components/common/InlineSearchBar.vue
index ef082d32e..0147db392 100644
--- a/front/src/components/common/InlineSearchBar.vue
+++ b/front/src/components/common/InlineSearchBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'update:modelValue', value: string): void
@@ -20,10 +20,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const value = useVModel(props, 'modelValue', emit)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search…'),
-  clear: $pgettext('Content/Library/Button.Label', 'Clear')
+  searchPlaceholder: t('Search…'),
+  clear: t('Clear')
 }))
 
 const search = () => {
@@ -42,7 +42,7 @@ const search = () => {
         for="search-query"
         class="hidden"
       >
-        <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
+        <translate >Search</translate>
       </label>
       <input
         id="search-query"
diff --git a/front/src/components/common/LoginModal.vue b/front/src/components/common/LoginModal.vue
index 5598d0bf5..0cac46662 100644
--- a/front/src/components/common/LoginModal.vue
+++ b/front/src/components/common/LoginModal.vue
@@ -4,7 +4,7 @@ import type { Cover } from '~/types'
 
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { ref, computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   nextRoute: RouteLocationRaw
@@ -16,12 +16,12 @@ defineProps<Props>()
 
 const show = ref(false)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  header: $pgettext('Popup/Title/Noun', 'Unauthenticated'),
-  login: $pgettext('*/*/Button.Label/Verb', 'Log in'),
-  signup: $pgettext('*/*/Button.Label/Verb', 'Sign up'),
-  description: $pgettext('Popup/*/Paragraph', "You don't have access!")
+  header: t('Unauthenticated'),
+  login: t('Log in'),
+  signup: t('Sign up'),
+  description: t("You don't have access!")
 }))
 </script>
 
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index ad90c90bc..6c9d07d31 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -91,19 +91,19 @@ const submit = async () => {
           href=""
           @click.stop.prevent="showMore = true"
         >
-          <translate translate-context="*/*/Button,Label">Show more</translate>
+          <translate >Show more</translate>
         </a>
         <a
           v-else
           href=""
           @click.stop.prevent="showMore = false"
         >
-          <translate translate-context="*/*/Button,Label">Show less</translate>
+          <translate >Show less</translate>
         </a>
       </template>
     </template>
     <p v-else-if="!isUpdating">
-      <translate translate-context="*/*/Placeholder">
+      <translate >
         No description available
       </translate>
     </p>
@@ -114,7 +114,7 @@ const submit = async () => {
         @click="isUpdating = true"
       >
         <i class="pencil icon" />
-        <translate translate-context="Content/*/Button.Label/Verb">Edit</translate>
+        <translate >Edit</translate>
       </span>
     </template>
     <form
@@ -128,7 +128,7 @@ const submit = async () => {
         class="ui negative message"
       >
         <h4 class="header">
-          <translate translate-context="Content/Channels/Error message.Title">
+          <translate >
             Error while updating description
           </translate>
         </h4>
@@ -149,14 +149,14 @@ const submit = async () => {
         class="left floated"
         @click.prevent="isUpdating = false"
       >
-        <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
+        <translate >Cancel</translate>
       </a>
       <button
         :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
         type="submit"
         :disabled="isLoading"
       >
-        <translate translate-context="Content/Channels/Button.Label/Verb">
+        <translate >
           Update description
         </translate>
       </button>
diff --git a/front/src/components/common/UserMenu.vue b/front/src/components/common/UserMenu.vue
index 056ee6204..51511fb0f 100644
--- a/front/src/components/common/UserMenu.vue
+++ b/front/src/components/common/UserMenu.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { SUPPORTED_LOCALES } from '~/init/locale'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
 
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
-import { computed } from 'vue'
 
 interface Events {
   (e: 'show:shortcuts-modal'): void
@@ -11,26 +12,26 @@ interface Events {
 
 const emit = defineEmits<Events>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const themes = useThemeList()
 const { theme } = useTheme()
 
 const labels = computed(() => ({
-  profile: $pgettext('*/*/*/Noun', 'Profile'),
-  settings: $pgettext('*/*/*/Noun', 'Settings'),
-  logout: $pgettext('Sidebar/Login/List item.Link/Verb', 'Log out'),
-  about: $pgettext('Sidebar/About/List item.Link', 'About'),
-  shortcuts: $pgettext('*/*/*/Noun', 'Keyboard shortcuts'),
-  support: $pgettext('Sidebar/*/Listitem.Link', 'Help'),
-  forum: $pgettext('Sidebar/*/Listitem.Link', 'Forum'),
-  docs: $pgettext('Sidebar/*/Listitem.Link', 'Documentation'),
-  language: $pgettext('Footer/Settings/Dropdown.Label/Short, Verb', 'Change language'),
-  theme: $pgettext('Footer/Settings/Dropdown.Label/Short, Verb', 'Change theme'),
-  chat: $pgettext('Sidebar/*/Listitem.Link', 'Chat room'),
-  git: $pgettext('Footer/*/List item.Link', 'Issue tracker'),
-  login: $pgettext('*/*/Button.Label/Verb', 'Log in'),
-  signup: $pgettext('*/*/Button.Label/Verb', 'Sign up'),
-  notifications: $pgettext('*/Notifications/*', 'Notifications')
+  profile: t('Profile'),
+  settings: t('Settings'),
+  logout: t('Log out'),
+  about: t('About'),
+  shortcuts: t('Keyboard shortcuts'),
+  support: t('Help'),
+  forum: t('Forum'),
+  docs: t('Documentation'),
+  language: t('Change language'),
+  theme: t('Change theme'),
+  chat: t('Chat room'),
+  git: t('Issue tracker'),
+  login: t('Log in'),
+  signup: t('Sign up'),
+  notifications: t('Notifications')
 }))
 </script>
 
@@ -45,11 +46,11 @@ const labels = computed(() => ({
         class="menu"
       >
         <a
-          v-for="(language, key) in $language.available"
+          v-for="(language, key) in SUPPORTED_LOCALES"
           :key="key"
-          :class="[{'active': $language.current === key},'item']"
+          :class="[{'active': $i18n.locale === key},'item']"
           :value="key"
-          @click="$store.dispatch('ui/currentLanguage', key)"
+          @click="$i18n.locale = key"
         >{{ language }}</a>
       </div>
     </div>
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index 77a6e5d2a..3f7ac3c86 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -4,7 +4,7 @@ import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
 import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'update:show', value: boolean): void
@@ -24,26 +24,26 @@ const show = useVModel(props, 'show', emit)
 const { theme } = useTheme()
 const themes = useThemeList()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  header: $pgettext('Popup/Title/Noun', 'Options'),
-  profile: $pgettext('*/*/*/Noun', 'Profile'),
-  settings: $pgettext('*/*/*/Noun', 'Settings'),
-  logout: $pgettext('Sidebar/Login/List item.Link/Verb', 'Log out'),
-  about: $pgettext('Sidebar/About/List item.Link', 'About'),
-  shortcuts: $pgettext('*/*/*/Noun', 'Keyboard shortcuts'),
-  support: $pgettext('Sidebar/*/Listitem.Link', 'Help'),
-  forum: $pgettext('Sidebar/*/Listitem.Link', 'Forum'),
-  docs: $pgettext('Sidebar/*/Listitem.Link', 'Documentation'),
-  help: $pgettext('Sidebar/*/Listitem.Link', 'Help'),
-  language: $pgettext('Sidebar/Settings/Dropdown.Label/Short, Verb', 'Language'),
-  theme: $pgettext('Sidebar/Settings/Dropdown.Label/Short, Verb', 'Theme'),
-  chat: $pgettext('Sidebar/*/Listitem.Link', 'Chat room'),
-  git: $pgettext('Sidebar/*/List item.Link', 'Issue tracker'),
-  login: $pgettext('*/*/Button.Label/Verb', 'Log in'),
-  signup: $pgettext('*/*/Button.Label/Verb', 'Sign up'),
-  notifications: $pgettext('*/Notifications/*', 'Notifications'),
-  useOtherInstance: $pgettext('Sidebar/*/List item.Link', 'Use another instance')
+  header: t('Options'),
+  profile: t('Profile'),
+  settings: t('Settings'),
+  logout: t('Log out'),
+  about: t('About'),
+  shortcuts: t('Keyboard shortcuts'),
+  support: t('Help'),
+  forum: t('Forum'),
+  docs: t('Documentation'),
+  help: t('Help'),
+  language: t('Language'),
+  theme: t('Theme'),
+  chat: t('Chat room'),
+  git: t('Issue tracker'),
+  login: t('Log in'),
+  signup: t('Sign up'),
+  notifications: t('Notifications'),
+  useOtherInstance: t('Use another instance')
 }))
 </script>
 
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 30ae19b03..0fce4791a 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -5,7 +5,7 @@ import type { OrderingField } from '~/store/ui'
 import type { Track } from '~/types'
 
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
 
@@ -96,9 +96,9 @@ onOrderingUpdate(() => {
 
 onMounted(() => $('.ui.dropdown').dropdown())
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/Favorites/Title', 'Your Favorites')
+  title: t('Your Favorites')
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
@@ -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">
-          <translate translate-context="Content/Favorites/Message">
+          <translate >
             Loading your favorites…
           </translate>
         </div>
@@ -126,7 +126,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           translate-plural="%{ count } favorites"
           :translate-n="$store.state.favorites.count"
           :translate-params="{ count }"
-          translate-context="Content/Favorites/Title"
+
         >
           %{ count } favorite
         </translate>
@@ -144,7 +144,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="favorites-ordering">
-              <translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate>
+              <translate >Ordering</translate>
             </label>
             <select
               id="favorites-ordering"
@@ -162,7 +162,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </div>
           <div class="field">
             <label for="favorites-ordering-direction">
-              <translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate>
+              <translate >Order</translate>
             </label>
             <select
               id="favorites-ordering-direction"
@@ -170,12 +170,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
@@ -183,7 +183,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </div>
           <div class="field">
             <label for="favorites-results">
-              <translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate>
+              <translate >Results per page</translate>
             </label>
             <select
               id="favorites-results"
@@ -223,7 +223,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       <div class="ui icon header">
         <i class="broken heart icon" />
         <translate
-          translate-context="Content/Home/Placeholder"
+
         >
           No tracks have been added to your favorites yet
         </translate>
@@ -233,7 +233,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         class="ui success labeled icon button"
       >
         <i class="headphones icon" />
-        <translate translate-context="Content/*/Verb">
+        <translate >
           Browse the library
         </translate>
       </router-link>
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 3811c10af..811f852cc 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -2,7 +2,7 @@
 import type { QueueTrack } from '~/composables/audio/queue'
 import type { Track } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { computed } from 'vue'
 
@@ -18,13 +18,13 @@ const props = withDefaults(defineProps<Props>(), {
   border: false
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const store = useStore()
 
 const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
 const title = computed(() => isFavorite.value
-  ? $pgettext('Content/Track/Icon.Tooltip/Verb', 'Remove from favorites')
-  : $pgettext('Content/Track/*/Verb', 'Add to favorites')
+  ? t('Remove from favorites')
+  : t('Add to favorites')
 )
 </script>
 
@@ -37,13 +37,13 @@ const title = computed(() => isFavorite.value
     <i class="heart icon" />
     <translate
       v-if="isFavorite"
-      translate-context="Content/Track/Button.Message"
+
     >
       In favorites
     </translate>
     <translate
       v-else
-      translate-context="Content/Track/*/Verb"
+
     >
       Add to favorites
     </translate>
diff --git a/front/src/components/federation/FetchButton.vue b/front/src/components/federation/FetchButton.vue
index 6da79ba64..35185ecd5 100644
--- a/front/src/components/federation/FetchButton.vue
+++ b/front/src/components/federation/FetchButton.vue
@@ -80,7 +80,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
       class="small"
     >
       <h3 class="header">
-        <translate translate-context="Popup/*/Title">
+        <translate >
           Refreshing object from remote server…
         </translate>
       </h3>
@@ -91,12 +91,12 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
             class="ui message"
           >
             <h4 class="header">
-              <translate translate-context="Popup/*/Message.Title">
+              <translate >
                 Refresh was skipped
               </translate>
             </h4>
             <p>
-              <translate translate-context="Popup/*/Message.Content">
+              <translate >
                 The remote server answered, but returned data was unsupported by Funkwhale.
               </translate>
             </p>
@@ -106,12 +106,12 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
             class="ui success message"
           >
             <h4 class="header">
-              <translate translate-context="Popup/*/Message.Title">
+              <translate >
                 Refresh successful
               </translate>
             </h4>
             <p>
-              <translate translate-context="Popup/*/Message.Content">
+              <translate >
                 Data was refreshed successfully from remote server.
               </translate>
             </p>
@@ -121,12 +121,12 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
             class="ui error message"
           >
             <h4 class="header">
-              <translate translate-context="Popup/*/Message.Title">
+              <translate >
                 Refresh error
               </translate>
             </h4>
             <p>
-              <translate translate-context="Popup/*/Message.Content">
+              <translate >
                 An error occurred while trying to refresh data:
               </translate>
             </p>
@@ -134,7 +134,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
               <tbody>
                 <tr>
                   <td>
-                    <translate translate-context="Popup/Import/Table.Label/Noun">
+                    <translate >
                       Error type
                     </translate>
                   </td>
@@ -144,7 +144,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Popup/Import/Table.Label/Noun">
+                    <translate >
                       Error detail
                     </translate>
                   </td>
@@ -152,49 +152,49 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
                     <translate
                       v-if="data.detail.error_code === 'http' && data.detail.status_code"
                       :translate-params="{status: data.detail.status_code}"
-                      translate-context="*/*/Error"
+
                     >
                       The remote server answered with HTTP %{ status }
                     </translate>
                     <translate
                       v-else-if="['http', 'request'].indexOf(data.detail.error_code) > -1"
-                      translate-context="*/*/Error"
+
                     >
                       An HTTP error occurred while contacting the remote server
                     </translate>
                     <translate
                       v-else-if="data.detail.error_code === 'timeout'"
-                      translate-context="*/*/Error"
+
                     >
                       The remote server didn't respond quickly enough
                     </translate>
                     <translate
                       v-else-if="data.detail.error_code === 'connection'"
-                      translate-context="*/*/Error"
+
                     >
                       Impossible to connect to the remote server
                     </translate>
                     <translate
                       v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(data.detail.error_code) > -1"
-                      translate-context="*/*/Error"
+
                     >
                       The remote server returned invalid JSON or JSON-LD data
                     </translate>
                     <translate
                       v-else-if="data.detail.error_code === 'validation'"
-                      translate-context="*/*/Error"
+
                     >
                       Data returned by the remote server had invalid or missing attributes
                     </translate>
                     <translate
                       v-else-if="data.detail.error_code === 'unhandled'"
-                      translate-context="*/*/Error"
+
                     >
                       Unknown error
                     </translate>
                     <translate
                       v-else
-                      translate-context="*/*/Error"
+
                     >
                       Unknown error
                     </translate>
@@ -209,7 +209,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui active inverted dimmer"
         >
           <div class="ui text loader">
-            <translate translate-context="Popup/*/Loading.Title">
+            <translate >
               Requesting a fetch…
             </translate>
           </div>
@@ -219,7 +219,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui active inverted dimmer"
         >
           <div class="ui text loader">
-            <translate translate-context="Popup/*/Loading.Title">
+            <translate >
               Waiting for result…
             </translate>
           </div>
@@ -230,7 +230,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui negative message"
         >
           <h4 class="header">
-            <translate translate-context="Content/*/Error message.Title">
+            <translate >
               Error while saving settings
             </translate>
           </h4>
@@ -249,12 +249,12 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui warning message"
         >
           <h4 class="header">
-            <translate translate-context="Popup/*/Message.Title">
+            <translate >
               Refresh pending
             </translate>
           </h4>
           <p>
-            <translate translate-context="Popup/*/Message.Content">
+            <translate >
               The refresh request hasn't been processed in time by our server. It will be processed later.
             </translate>
           </p>
@@ -262,7 +262,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
       </div>
       <div class="actions">
         <button class="ui basic cancel button">
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Close
           </translate>
         </button>
@@ -271,7 +271,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
           class="ui confirm success button"
           @click.prevent="showModal = false; emit('refresh')"
         >
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Close and reload page
           </translate>
         </button>
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index 261a77b76..a3d594582 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -64,7 +64,7 @@ fetchData()
       v-if="!isLoading && libraries.length === 0"
       class="ui subtitle"
     >
-      <translate translate-context="Content/Federation/Paragraph">
+      <translate >
         No matching library.
       </translate>
     </p>
@@ -92,7 +92,7 @@ fetchData()
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        <translate translate-context="*/*/Button,Label">
+        <translate >
           Show more
         </translate>
       </button>
diff --git a/front/src/components/forms/PasswordInput.vue b/front/src/components/forms/PasswordInput.vue
index 623552028..a4963f7a9 100644
--- a/front/src/components/forms/PasswordInput.vue
+++ b/front/src/components/forms/PasswordInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useClipboard, useVModel } from '@vueuse/core'
 import { useStore } from '~/store'
 
@@ -25,10 +25,10 @@ const value = useVModel(props, 'modelValue', emit)
 
 const showPassword = ref(props.defaultShow)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Content/Settings/Button.Tooltip/Verb', 'Show/hide password'),
-  copy: $pgettext('*/*/Button.Label/Short, Verb', 'Copy')
+  title: t('Show/hide password'),
+  copy: t('Copy')
 }))
 
 const passwordInputType = computed(() => showPassword.value ? 'text' : 'password')
@@ -38,7 +38,7 @@ const { isSupported: canCopy, copy } = useClipboard({ source: value })
 const copyPassword = () => {
   copy()
   store.commit('ui/addMessage', {
-    content: $pgettext('Content/*/Paragraph', 'Text copied to clipboard!'),
+    content: t('Text copied to clipboard!'),
     date: new Date()
   })
 }
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index a401b4b7a..56d9e47ba 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -2,8 +2,8 @@
 import type { Track, Album, Artist, Library } from '~/types'
 
 import { momentFormat } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
 import { computed, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { sum } from 'lodash-es'
 
@@ -39,9 +39,9 @@ const isSerie = computed(() => object.value?.artist.content_category === 'podcas
 const totalDuration = computed(() => sum((object.value?.tracks ?? []).map(track => track.uploads[0]?.duration ?? 0)))
 const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('*/*/*', 'Album')
+  title: t('Album')
 }))
 
 const isLoading = ref(false)
@@ -179,7 +179,7 @@ const remove = async () => {
                     <div class="ui hidden very small divider" />
                     <translate
                       v-if="isSerie"
-                      translate-context="Content/Channel/Paragraph"
+
                       translate-plural="%{ count } episodes"
                       :translate-n="totalTracks"
                       :translate-params="{count: totalTracks}"
@@ -188,7 +188,7 @@ const remove = async () => {
                     </translate>
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                       :translate-params="{count: totalTracks}"
                       :translate-n="totalTracks"
                       translate-plural="%{ count } tracks"
@@ -267,7 +267,7 @@ const remove = async () => {
               <template v-if="totalTracks > 0">
                 <translate
                   v-if="isSerie"
-                  translate-context="Content/Channel/Paragraph"
+
                   translate-plural="%{ count } episodes"
                   :translate-n="totalTracks"
                   :translate-params="{count: totalTracks}"
@@ -276,7 +276,7 @@ const remove = async () => {
                 </translate>
                 <translate
                   v-else
-                  translate-context="*/*/*"
+
                   :translate-params="{count: totalTracks}"
                   :translate-n="totalTracks"
                   translate-plural="%{ count } tracks"
@@ -323,7 +323,7 @@ const remove = async () => {
                   :to="{name: 'library.albums.edit', params: {id: object.id }}"
                 >
                   <i class="pencil icon" />
-                  <translate translate-context="Content/*/Button.Label/Verb">
+                  <translate >
                     Add a description…
                   </translate>
                 </router-link>
@@ -341,7 +341,7 @@ const remove = async () => {
                 :to="{name: 'library.albums.edit', params: {id: object.id }}"
               >
                 <i class="pencil icon" />
-                <translate translate-context="Content/*/Button.Label/Verb">
+                <translate >
                   Add a description…
                 </translate>
               </router-link>
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index 27b47a9f1..78838b53e 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -62,13 +62,13 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
     <h2 class="ui header">
       <translate
         v-if="isSerie"
-        translate-context="Content/Channels/*"
+
       >
         Episodes
       </translate>
       <translate
         v-else
-        translate-context="*/*/*"
+
       >
         Tracks
       </translate>
@@ -96,7 +96,6 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
             <translate
               tag="h3"
               :translate-params="{number: tracks[0]?.disc_number ?? index + 1}"
-              translate-context="Content/Album/"
             >
               Volume %{ number }
             </translate>
@@ -138,7 +137,7 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
 
     <template v-if="!artist.channel && !isSerie">
       <h2>
-        <translate translate-context="Content/*/Title/Noun">
+        <translate >
           User libraries
         </translate>
       </h2>
@@ -146,7 +145,7 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
         :url="'albums/' + object.id + '/libraries/'"
         @loaded="emit('libraries-loaded', $event)"
       >
-        <translate translate-context="Content/Album/Paragraph">
+        <translate >
           This album is present in the following libraries:
         </translate>
       </library-widget>
diff --git a/front/src/components/library/AlbumDropdown.vue b/front/src/components/library/AlbumDropdown.vue
index 1515666b2..339f05f78 100644
--- a/front/src/components/library/AlbumDropdown.vue
+++ b/front/src/components/library/AlbumDropdown.vue
@@ -2,7 +2,7 @@
 import type { Album, Artist, Library } from '~/types'
 
 import { computed, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import { getDomain } from '~/utils'
 
@@ -33,9 +33,9 @@ const showEmbedModal = ref(false)
 
 const domain = computed(() => getDomain(props.object.fid))
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  more: $pgettext('*/*/Button.Label/Noun', 'More…')
+  more: t('More…')
 }))
 
 const isEmbedable = computed(() => (props.isChannel && props.artist?.channel?.actor) || props.publicLibraries.length)
@@ -53,7 +53,7 @@ const remove = () => emit('remove')
       v-model:show="showEmbedModal"
     >
       <h4 class="header">
-        <translate translate-context="Popup/Album/Title/Verb">Embed this album on your website</translate>
+        <translate >Embed this album on your website</translate>
       </h4>
       <div class="scrolling content">
         <div class="description">
@@ -66,7 +66,7 @@ const remove = () => emit('remove')
       </div>
       <div class="actions">
         <button class="ui basic deny button">
-          <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
+          <translate >Cancel</translate>
         </button>
       </div>
     </semantic-modal>
@@ -86,7 +86,7 @@ const remove = () => emit('remove')
           <i class="external icon" />
           <translate
             :translate-params="{domain: domain}"
-            translate-context="Content/*/Button.Label/Verb"
+
           >View on %{ domain }</translate>
         </a>
 
@@ -97,7 +97,7 @@ const remove = () => emit('remove')
           @click="showEmbedModal = !showEmbedModal"
         >
           <i class="code icon" />
-          <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
+          <translate >Embed</translate>
         </div>
         <a
           v-if="isAlbum && musicbrainzUrl"
@@ -107,7 +107,7 @@ const remove = () => emit('remove')
           class="basic item"
         >
           <i class="external icon" />
-          <translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
+          <translate >View on MusicBrainz</translate>
         </a>
         <a
           v-if="!isChannel && isAlbum"
@@ -117,7 +117,7 @@ const remove = () => emit('remove')
           class="basic item"
         >
           <i class="external icon" />
-          <translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
+          <translate >Search on Discogs</translate>
         </a>
         <router-link
           v-if="object.is_local"
@@ -125,7 +125,7 @@ const remove = () => emit('remove')
           class="basic item"
         >
           <i class="edit icon" />
-          <translate translate-context="Content/*/Button.Label/Verb">Edit</translate>
+          <translate >Edit</translate>
         </router-link>
         <dangerous-button
           v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername"
@@ -133,16 +133,16 @@ const remove = () => emit('remove')
           @confirm="remove()"
         >
           <i class="ui trash icon" />
-          <translate translate-context="*/*/*/Verb">Delete…</translate>
+          <translate >Delete…</translate>
           <template #modal-header>
             <p>
-              <translate translate-context="Popup/Channel/Title">Delete this album?</translate>
+              <translate >Delete this album?</translate>
             </p>
           </template>
           <template #modal-content>
             <div>
               <p>
-                <translate translate-context="Content/Moderation/Paragraph">
+                <translate >
                   The album will be deleted, as well as any related files and data. This action is irreversible.
                 </translate>
               </p>
@@ -150,7 +150,7 @@ const remove = () => emit('remove')
           </template>
           <template #modal-confirm>
             <p>
-              <translate translate-context="*/*/*/Verb">Delete</translate>
+              <translate >Delete</translate>
             </p>
           </template>
         </dangerous-button>
@@ -171,7 +171,7 @@ const remove = () => emit('remove')
           :to="{name: 'manage.library.albums.detail', params: {id: object.id}}"
         >
           <i class="wrench icon" />
-          <translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
+          <translate >Open in moderation interface</translate>
         </router-link>
         <a
           v-if="$store.state.auth.profile && $store.state.auth.profile?.is_superuser"
@@ -181,7 +181,7 @@ const remove = () => emit('remove')
           rel="noopener noreferrer"
         >
           <i class="wrench icon" />
-          <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+          <translate >View in Django's admin</translate>&nbsp;
         </a>
       </div>
     </button>
diff --git a/front/src/components/library/AlbumEdit.vue b/front/src/components/library/AlbumEdit.vue
index f8f41d3ec..ae2fbd11b 100644
--- a/front/src/components/library/AlbumEdit.vue
+++ b/front/src/components/library/AlbumEdit.vue
@@ -24,13 +24,13 @@ const canEdit = store.state.auth.availablePermissions.library
       <h2>
         <translate
           v-if="canEdit"
-          translate-context="Content/*/Title"
+
         >
           Edit this album
         </translate>
         <translate
           v-else
-          translate-context="Content/*/Title"
+
         >
           Suggest an edit on this album
         </translate>
@@ -39,7 +39,7 @@ const canEdit = store.state.auth.availablePermissions.library
         v-if="!object.is_local"
         class="ui message"
       >
-        <translate translate-context="Content/*/Message">
+        <translate >
           This object is managed by another server, you cannot edit it.
         </translate>
       </div>
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index c1d1ea918..689385c81 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -6,7 +6,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
@@ -108,10 +108,10 @@ onOrderingUpdate(() => {
 
 onMounted(() => $('.ui.dropdown').dropdown())
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Enter album title…'),
-  title: $pgettext('*/*/*', 'Albums')
+  searchPlaceholder: t('Enter album title…'),
+  title: t('Albums')
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
@@ -121,7 +121,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate translate-context="Content/Album/Title">
+        <translate >
           Browsing albums
         </translate>
       </h2>
@@ -132,7 +132,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="albums-search">
-              <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
+              <translate >Search</translate>
             </label>
             <div class="ui action input">
               <input
@@ -145,18 +145,18 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
               <button
                 class="ui icon button"
                 type="submit"
-                :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')"
+                :aria-label="t('Search')"
               >
                 <i class="search icon" />
               </button>
             </div>
           </div>
           <div class="field">
-            <label for="tags-search"><translate translate-context="*/*/*/Noun">Tags</translate></label>
+            <label for="tags-search"><translate >Tags</translate></label>
             <tags-selector v-model="tags" />
           </div>
           <div class="field">
-            <label for="album-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+            <label for="album-ordering"><translate >Ordering</translate></label>
             <select
               id="album-ordering"
               v-model="ordering"
@@ -172,26 +172,26 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="album-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+            <label for="album-ordering-direction"><translate >Ordering direction</translate></label>
             <select
               id="album-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="album-results"><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
+            <label for="album-results"><translate >Results per page</translate></label>
             <select
               id="album-results"
               v-model="paginateBy"
@@ -234,7 +234,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         >
           <div class="ui icon header">
             <i class="compact disc icon" />
-            <translate translate-context="Content/Albums/Placeholder">
+            <translate >
               No results matching your query
             </translate>
           </div>
@@ -244,7 +244,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             class="ui success button labeled icon"
           >
             <i class="upload icon" />
-            <translate translate-context="Content/*/Verb">
+            <translate >
               Add some music
             </translate>
           </router-link>
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index 54faffe02..76e8db757 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -2,7 +2,7 @@
 import type { Track, Album, Artist, Library } from '~/types'
 
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { getDomain } from '~/utils'
 import { useStore } from '~/store'
@@ -57,9 +57,9 @@ const headerStyle = computed(() => cover.value?.urls.original
   : ''
 )
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('*/*/*', 'Artist')
+  title: t('Artist')
 }))
 
 const isLoading = ref(false)
@@ -118,7 +118,7 @@ watch(() => props.id, fetchData, { immediate: true })
                 class="sub header"
               >
                 <translate
-                  translate-context="Content/Artist/Paragraph"
+
                   tag="div"
                   translate-plural="%{ count } tracks in %{ albumsCount } albums"
                   :translate-n="totalTracks"
@@ -147,7 +147,7 @@ watch(() => props.id, fetchData, { immediate: true })
                 class="vibrant"
                 :artist="object"
               >
-                <translate translate-context="Content/Artist/Button.Label/Verb">
+                <translate >
                   Play all albums
                 </translate>
               </play-button>
@@ -158,7 +158,7 @@ watch(() => props.id, fetchData, { immediate: true })
               v-model:show="showEmbedModal"
             >
               <h4 class="header">
-                <translate translate-context="Popup/Artist/Title/Verb">
+                <translate >
                   Embed this artist work on your website
                 </translate>
               </h4>
@@ -172,7 +172,7 @@ watch(() => props.id, fetchData, { immediate: true })
               </div>
               <div class="actions">
                 <button class="ui deny button">
-                  <translate translate-context="*/*/Button.Label/Verb">
+                  <translate >
                     Cancel
                   </translate>
                 </button>
@@ -183,7 +183,7 @@ watch(() => props.id, fetchData, { immediate: true })
                 class="ui button"
                 @click="dropdown.click()"
               >
-                <translate translate-context="*/*/Button.Label/Noun">
+                <translate >
                   More…
                 </translate>
               </button>
@@ -203,7 +203,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     <i class="external icon" />
                     <translate
                       :translate-params="{domain: domain}"
-                      translate-context="Content/*/Button.Label/Verb"
+
                     >View on %{ domain }</translate>
                   </a>
 
@@ -214,7 +214,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     @click.prevent="showEmbedModal = !showEmbedModal"
                   >
                     <i class="code icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">
+                    <translate >
                       Embed
                     </translate>
                   </button>
@@ -225,7 +225,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     class="basic item"
                   >
                     <i class="wikipedia w icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
+                    <translate >Search on Wikipedia</translate>
                   </a>
                   <a
                     v-if="musicbrainzUrl"
@@ -235,7 +235,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     class="basic item"
                   >
                     <i class="external icon" />
-                    <translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
+                    <translate >View on MusicBrainz</translate>
                   </a>
                   <a
                     :href="discogsUrl"
@@ -244,7 +244,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     class="basic item"
                   >
                     <i class="external icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
+                    <translate >Search on Discogs</translate>
                   </a>
                   <router-link
                     v-if="object.is_local"
@@ -252,7 +252,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     class="basic item"
                   >
                     <i class="edit icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">
+                    <translate >
                       Edit
                     </translate>
                   </router-link>
@@ -274,7 +274,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     :to="{name: 'manage.library.artists.detail', params: {id: object.id}}"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link">
+                    <translate >
                       Open in moderation interface
                     </translate>
                   </router-link>
@@ -286,7 +286,7 @@ watch(() => props.id, fetchData, { immediate: true })
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                    <translate >View in Django's admin</translate>&nbsp;
                   </a>
                 </div>
               </button>
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index e6171f232..69433df07 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -65,7 +65,7 @@ const loadMoreAlbums = async () => {
       <div class="ui hidden divider" />
       <div class="ui message">
         <p>
-          <translate translate-context="Content/Artist/Paragraph">
+          <translate >
             You are currently hiding content related to this artist.
           </translate>
         </p>
@@ -73,7 +73,7 @@ const loadMoreAlbums = async () => {
           class="right floated"
           :to="{name: 'settings'}"
         >
-          <translate translate-context="Content/Moderation/Link">
+          <translate >
             Review my filters
           </translate>
         </router-link>
@@ -81,7 +81,7 @@ const loadMoreAlbums = async () => {
           class="ui basic tiny button"
           @click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
         >
-          <translate translate-context="Content/Moderation/Button.Label">
+          <translate >
             Remove filter
           </translate>
         </button>
@@ -98,7 +98,7 @@ const loadMoreAlbums = async () => {
       class="ui vertical stripe segment"
     >
       <h2>
-        <translate translate-context="Content/Artist/Title">
+        <translate >
           Albums by this artist
         </translate>
       </h2>
@@ -115,7 +115,7 @@ const loadMoreAlbums = async () => {
         :class="['ui', {loading: isLoadingMoreAlbums}, 'button']"
         @click="loadMoreAlbums()"
       >
-        <translate translate-context="Content/*/Button.Label">
+        <translate >
           Load more…
         </translate>
       </button>
@@ -132,7 +132,7 @@ const loadMoreAlbums = async () => {
       >
         <template #header>
           <h2>
-            <translate translate-context="Content/Artist/Title">
+            <translate >
               New tracks by this artist
             </translate>
           </h2>
@@ -142,7 +142,7 @@ const loadMoreAlbums = async () => {
     </section>
     <section class="ui vertical stripe segment">
       <h2>
-        <translate translate-context="Content/*/Title/Noun">
+        <translate >
           User libraries
         </translate>
       </h2>
@@ -150,7 +150,7 @@ const loadMoreAlbums = async () => {
         :url="'artists/' + object.id + '/libraries/'"
         @loaded="emit('libraries-loaded', $event)"
       >
-        <translate translate-context="Content/Artist/Paragraph">
+        <translate >
           This artist is present in the following libraries:
         </translate>
       </library-widget>
diff --git a/front/src/components/library/ArtistEdit.vue b/front/src/components/library/ArtistEdit.vue
index b19282fb4..b83dc44e3 100644
--- a/front/src/components/library/ArtistEdit.vue
+++ b/front/src/components/library/ArtistEdit.vue
@@ -24,13 +24,13 @@ const canEdit = store.state.auth.availablePermissions.library
       <h2>
         <translate
           v-if="canEdit"
-          translate-context="Content/*/Title"
+
         >
           Edit this artist
         </translate>
         <translate
           v-else
-          translate-context="Content/*/Title"
+
         >
           Suggest an edit on this artist
         </translate>
@@ -39,7 +39,7 @@ const canEdit = store.state.auth.availablePermissions.library
         v-if="!object.is_local"
         class="ui message"
       >
-        <translate translate-context="Content/*/Message">
+        <translate >
           This object is managed by another server, you cannot edit it.
         </translate>
       </div>
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 168693c01..4b819a6fc 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -6,7 +6,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { computed, ref, watch, onMounted } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
@@ -109,10 +109,10 @@ onOrderingUpdate(() => {
 
 onMounted(() => $('.ui.dropdown').dropdown())
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search…'),
-  title: $pgettext('*/*/*/Noun', 'Artists')
+  searchPlaceholder: t('Search…'),
+  title: t('Artists')
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
@@ -122,7 +122,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">
-        <translate translate-context="Content/Artist/Title">
+        <translate >
           Browsing artists
         </translate>
       </h2>
@@ -133,7 +133,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="artist-search">
-              <translate translate-context="Content/Search/Input.Label/Noun">Artist name</translate>
+              <translate >Artist name</translate>
             </label>
             <div class="ui action input">
               <input
@@ -146,18 +146,18 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
               <button
                 class="ui icon button"
                 type="submit"
-                :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')"
+                :aria-label="t('Search')"
               >
                 <i class="search icon" />
               </button>
             </div>
           </div>
           <div class="field">
-            <label for="tags-search"><translate translate-context="*/*/*/Noun">Tags</translate></label>
+            <label for="tags-search"><translate >Tags</translate></label>
             <tags-selector v-model="tags" />
           </div>
           <div class="field">
-            <label for="artist-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+            <label for="artist-ordering"><translate >Ordering</translate></label>
             <select
               id="artist-ordering"
               v-model="ordering"
@@ -173,26 +173,26 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="artist-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+            <label for="artist-ordering-direction"><translate >Ordering direction</translate></label>
             <select
               id="artist-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="artist-results"><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
+            <label for="artist-results"><translate >Results per page</translate></label>
             <select
               id="artist-results"
               v-model="paginateBy"
@@ -223,7 +223,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
               <label
                 for="exclude-compilation"
                 class="visually-hidden"
-              ><translate translate-context="Content/Search/Checkbox/Noun">Exclude Compilation Artists</translate></label>
+              ><translate >Exclude Compilation Artists</translate></label>
             </div>
           </div>
         </div>
@@ -252,7 +252,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="compact disc icon" />
-          <translate translate-context="Content/Artists/Placeholder">
+          <translate >
             No results matching your query
           </translate>
         </div>
@@ -262,7 +262,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           class="ui success button labeled icon"
         >
           <i class="upload icon" />
-          <translate translate-context="Content/*/Verb">
+          <translate >
             Add some music
           </translate>
         </router-link>
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index d84f08af7..bf24a87e9 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -157,7 +157,7 @@ const approve = async (approved: boolean) => {
       <h4 class="header">
         <router-link :to="detailUrl">
           <translate
-            translate-context="Content/Library/Card/Short"
+
             :translate-params="{id: obj.uuid.substring(0, 8)}"
           >
             Modification %{ id }
@@ -171,7 +171,7 @@ const approve = async (approved: boolean) => {
         >
           <i class="music icon" />
           <translate
-            translate-context="Content/Library/Card/Short"
+
             :translate-params="{id: obj.target.id, name: obj.target.repr}"
           >
             Track #%{ id } - %{ name }
@@ -186,19 +186,19 @@ const approve = async (approved: boolean) => {
         <span class="right floated">
           <span v-if="obj.is_approved && obj.is_applied">
             <i class="success check icon" />
-            <translate translate-context="Content/Library/Card/Short">Approved and applied</translate>
+            <translate >Approved and applied</translate>
           </span>
           <span v-else-if="obj.is_approved">
             <i class="success check icon" />
-            <translate translate-context="Content/*/*/Short">Approved</translate>
+            <translate >Approved</translate>
           </span>
           <span v-else-if="obj.is_approved === null">
             <i class="warning hourglass icon" />
-            <translate translate-context="Content/Admin/*/Noun">Pending review</translate>
+            <translate >Pending review</translate>
           </span>
           <span v-else-if="obj.is_approved === false">
             <i class="danger x icon" />
-            <translate translate-context="Content/Library/*/Short">Rejected</translate>
+            <translate >Rejected</translate>
           </span>
         </span>
       </div>
@@ -217,17 +217,17 @@ const approve = async (approved: boolean) => {
         <thead>
           <tr>
             <th>
-              <translate translate-context="Content/Library/Card.Table.Header/Short">
+              <translate >
                 Field
               </translate>
             </th>
             <th>
-              <translate translate-context="Content/Library/Card.Table.Header/Short">
+              <translate >
                 Old value
               </translate>
             </th>
             <th>
-              <translate translate-context="Content/Library/Card.Table.Header/Short">
+              <translate >
                 New value
               </translate>
             </th>
@@ -259,7 +259,7 @@ const approve = async (approved: boolean) => {
               </template>
             </td>
             <td v-else>
-              <translate translate-context="*/*/*">
+              <translate >
                 N/A
               </translate>
             </td>
@@ -319,7 +319,7 @@ const approve = async (approved: boolean) => {
         :class="['ui', {loading: isLoading}, 'success', 'basic', 'button']"
         @click="approve(true)"
       >
-        <translate translate-context="Content/*/Button.Label/Verb">
+        <translate >
           Approve
         </translate>
       </button>
@@ -328,7 +328,7 @@ const approve = async (approved: boolean) => {
         :class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']"
         @click="approve(false)"
       >
-        <translate translate-context="Content/Library/Button.Label">
+        <translate >
           Reject
         </translate>
       </button>
@@ -337,12 +337,12 @@ const approve = async (approved: boolean) => {
         :class="['ui', {loading: isLoading}, 'basic danger button']"
         :action="remove"
       >
-        <translate translate-context="*/*/*/Verb">
+        <translate >
           Delete
         </translate>
         <template #modal-header>
           <p>
-            <translate translate-context="Popup/Library/Title">
+            <translate >
               Delete this suggestion?
             </translate>
           </p>
@@ -350,7 +350,7 @@ const approve = async (approved: boolean) => {
         <template #modal-content>
           <div>
             <p>
-              <translate translate-context="Popup/Library/Paragraph">
+              <translate >
                 The suggestion will be completely removed, this action is irreversible.
               </translate>
             </p>
@@ -358,7 +358,7 @@ const approve = async (approved: boolean) => {
         </template>
         <template #modal-confirm>
           <p>
-            <translate translate-context="*/*/*/Verb">
+            <translate >
               Delete
             </translate>
           </p>
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index d6810106f..35351b3f5 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -4,7 +4,7 @@ import type { BackendError, License, ReviewState } from '~/types'
 
 import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
 import { isEqual, clone } from 'lodash-es'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   licenses: () => []
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const configs = useEditConfigs()
 const store = useStore()
 
@@ -46,7 +46,7 @@ const canEdit = computed(() => {
 })
 
 const labels = computed(() => ({
-  summaryPlaceholder: $pgettext('*/*/Placeholder', 'A short summary describing your changes.')
+  summaryPlaceholder: t('A short summary describing your changes.')
 }))
 
 const mutationsUrl = computed(() => props.objectType === 'track'
@@ -148,7 +148,7 @@ const resetField = (fieldId: string) => {
   <div v-if="submittedMutation">
     <div class="ui positive message">
       <h4 class="header">
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Your edit was successfully submitted.
         </translate>
       </h4>
@@ -161,7 +161,7 @@ const resetField = (fieldId: string) => {
       class="ui button"
       @click.prevent="submittedMutation = null"
     >
-      <translate translate-context="Content/Library/Button.Label">
+      <translate >
         Submit another edit
       </translate>
     </button>
@@ -175,27 +175,27 @@ const resetField = (fieldId: string) => {
     >
       <div>
         <template v-if="showPendingReview">
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Recent edits awaiting review
           </translate>
           <button
             class="ui tiny basic right floated button"
             @click.prevent="showPendingReview = false"
           >
-            <translate translate-context="Content/Library/Button.Label">
+            <translate >
               Show all edits
             </translate>
           </button>
         </template>
         <template v-else>
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Recent edits
           </translate>
           <button
             class="ui tiny basic right floated button"
             @click.prevent="showPendingReview = true"
           >
-            <translate translate-context="Content/Library/Button.Label">
+            <translate >
               Restrict to unreviewed edits
             </translate>
           </button>
@@ -203,7 +203,7 @@ const resetField = (fieldId: string) => {
       </div>
       <template #empty-state>
         <empty-state>
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Suggest a change using the form below.
           </translate>
         </empty-state>
@@ -220,7 +220,7 @@ const resetField = (fieldId: string) => {
         class="ui negative message"
       >
         <h4 class="header">
-          <translate translate-context="Content/Library/Error message.Title">
+          <translate >
             Error while submitting edit
           </translate>
         </h4>
@@ -237,7 +237,7 @@ const resetField = (fieldId: string) => {
         v-if="!canEdit"
         class="ui message"
       >
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           You don't have the permission to edit this object, but you can suggest changes. Once submitted, suggestions will be reviewed before approval.
         </translate>
       </div>
@@ -268,7 +268,7 @@ const resetField = (fieldId: string) => {
               class="ui fluid search dropdown"
             >
               <option :value="null">
-                <translate translate-context="*/*/*">
+                <translate >
                   N/A
                 </translate>
               </option>
@@ -286,7 +286,7 @@ const resetField = (fieldId: string) => {
               @click.prevent="values[fieldConfig.id] = null"
             >
               <i class="x icon" />
-              <translate translate-context="Content/Library/Button.Label">
+              <translate >
                 Clear
               </translate>
             </button>
@@ -325,7 +325,7 @@ const resetField = (fieldId: string) => {
               @click.prevent="values[fieldConfig.id] = []"
             >
               <i class="x icon" />
-              <translate translate-context="Content/Library/Button.Label">
+              <translate >
                 Clear
               </translate>
             </button>
@@ -337,7 +337,7 @@ const resetField = (fieldId: string) => {
               @click.prevent="resetField(fieldConfig.id)"
             >
               <i class="undo icon" />
-              <translate translate-context="Content/Library/Button.Label">
+              <translate >
                 Reset to initial value
               </translate>
             </button>
@@ -345,7 +345,7 @@ const resetField = (fieldId: string) => {
         </div>
       </template>
       <div class="field">
-        <label for="summary"><translate translate-context="*/*/*">Summary (optional)</translate></label>
+        <label for="summary"><translate >Summary (optional)</translate></label>
         <textarea
           id="change-summary"
           v-model="summary"
@@ -359,7 +359,7 @@ const resetField = (fieldId: string) => {
         class="ui left floated button"
         :to="{name: 'library.tracks.detail', params: {id: object.id }}"
       >
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Cancel
         </translate>
       </router-link>
@@ -370,13 +370,13 @@ const resetField = (fieldId: string) => {
       >
         <translate
           v-if="canEdit"
-          translate-context="Content/Library/Button.Label/Verb"
+
         >
           Submit and apply edit
         </translate>
         <translate
           v-else
-          translate-context="Content/Library/Button.Label/Verb"
+
         >
           Submit suggestion
         </translate>
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index d3688a382..d536a9dd6 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -5,7 +5,7 @@ import type { VueUploadItem } from 'vue-upload-component'
 import { computed, ref, reactive, watch, nextTick } from 'vue'
 import { useEventListener, useIntervalFn } from '@vueuse/core'
 import { humanSize, truncate } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { sortBy } from 'lodash-es'
 import { useStore } from '~/store'
 
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
   defaultImportReference: ''
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const store = useStore()
 
 const upload = ref()
@@ -43,13 +43,12 @@ const supportedExtensions = computed(() => store.state.ui.supportedExtensions)
 
 const labels = computed(() => ({
   tooltips: {
-    denied: $pgettext('Content/Library/Help text', 'Upload denied, ensure the file is not too big and that you have not reached your quota'),
-    server: $pgettext('Content/Library/Help text', 'Cannot upload this file, ensure it is not too big'),
-    network: $pgettext('Content/Library/Help text', 'A network error occurred while uploading this file'),
-    timeout: $pgettext('Content/Library/Help text', 'Upload timeout, please try again'),
-    retry: $pgettext('*/*/*/Verb', 'Retry'),
-    extension: $pgettext(
-      'Content/Library/Help text',
+    denied: t('Upload denied, ensure the file is not too big and that you have not reached your quota'),
+    server: t('Cannot upload this file, ensure it is not too big'),
+    network: t('A network error occurred while uploading this file'),
+    timeout: t('Upload timeout, please try again'),
+    retry: t('Retry'),
+    extension: t(
       'Invalid file type, ensure you are uploading an audio file. Supported file extensions are %{ extensions }',
       { extensions: supportedExtensions.value.join(', ') }
     )
@@ -283,7 +282,7 @@ const retry = (files: Omit<VueUploadItem, 'xhr'>[]) => {
 useEventListener(window, 'beforeunload', (event) => {
   if (!hasActiveUploads.value) return null
   event.preventDefault()
-  return (event.returnValue = $pgettext('*/*/*', 'This page is asking you to confirm that you want to leave - data you have entered may not be saved.'))
+  return (event.returnValue = t('This page is asking you to confirm that you want to leave - data you have entered may not be saved.'))
 })
 </script>
 
@@ -295,7 +294,7 @@ useEventListener(window, 'beforeunload', (event) => {
         :class="['item', {active: currentTab === 'uploads'}]"
         @click.prevent="currentTab = 'uploads'"
       >
-        <translate translate-context="Content/Library/Tab.Title/Short">Uploading</translate>
+        <translate >Uploading</translate>
         <div
           v-if="files.length === 0"
           class="ui label"
@@ -320,7 +319,7 @@ useEventListener(window, 'beforeunload', (event) => {
         :class="['item', {active: currentTab === 'processing'}]"
         @click.prevent="currentTab = 'processing'"
       >
-        <translate translate-context="Content/Library/Tab.Title/Short">Processing</translate>
+        <translate >Processing</translate>
         <div
           v-if="processableFiles === 0"
           class="ui label"
@@ -345,7 +344,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">
-            <translate translate-context="Content/Library/Paragraph">
+            <translate >
               Remaining storage space
             </translate>
           </div>
@@ -355,33 +354,33 @@ useEventListener(window, 'beforeunload', (event) => {
         </div>
         <div class="ui divider" />
         <h2 class="ui header">
-          <translate translate-context="Content/Library/Title/Verb">
+          <translate >
             Upload music from '~/your local storage
           </translate>
         </h2>
         <div class="ui message">
           <p>
-            <translate translate-context="Content/Library/Paragraph">
+            <translate >
               You are about to upload music to your library. Before proceeding, please ensure that:
             </translate>
           </p>
           <ul>
             <li v-if="library.privacy_level != 'me'">
-              <translate translate-context="Content/Library/List item">
+              <translate >
                 You are not uploading copyrighted content in a public library, otherwise you may be infringing the law
               </translate>
             </li>
             <li>
-              <translate translate-context="Content/Library/List item">
+              <translate >
                 The music files you are uploading are tagged properly.
               </translate>&nbsp;
               <a
                 href="http://picard.musicbrainz.org/"
                 target="_blank"
-              ><translate translate-context="Content/Library/Link">We recommend using Picard for that purpose.</translate></a>
+              ><translate >We recommend using Picard for that purpose.</translate></a>
             </li>
             <li>
-              <translate translate-context="Content/Library/List item">
+              <translate >
                 The music files you are uploading are in OGG, Flac, MP3 or AIFF format
               </translate>
             </li>
@@ -401,14 +400,14 @@ useEventListener(window, 'beforeunload', (event) => {
           @input-file="inputFile"
         >
           <i class="upload icon" />&nbsp;
-          <translate translate-context="Content/Library/Paragraph/Call to action">
+          <translate >
             Click to select files to upload or drag and drop files or directories
           </translate>
           <br>
           <br>
           <i>
             <translate
-              translate-context="Content/Library/Paragraph"
+
               :translate-params="{extensions: supportedExtensions.join(', ')}"
             >
               Supported extensions: %{ extensions }
@@ -425,22 +424,22 @@ useEventListener(window, 'beforeunload', (event) => {
           <thead>
             <tr>
               <th class="ten wide">
-                <translate translate-context="Content/Library/Table.Label">
+                <translate >
                   Filename
                 </translate>
               </th>
               <th>
-                <translate translate-context="Content/*/*/Noun">
+                <translate >
                   Size
                 </translate>
               </th>
               <th>
-                <translate translate-context="*/*/*">
+                <translate >
                   Status
                 </translate>
               </th>
               <th>
-                <translate translate-context="*/*/*">
+                <translate >
                   Actions
                 </translate>
               </th>
@@ -454,7 +453,7 @@ useEventListener(window, 'beforeunload', (event) => {
                   class="ui right floated small basic button"
                   @click.prevent="retry(retryableFiles)"
                 >
-                  <translate translate-context="Content/Library/Table">
+                  <translate >
                     Retry failed uploads
                   </translate>
                 </button>
@@ -486,7 +485,7 @@ useEventListener(window, 'beforeunload', (event) => {
                 >
                   <translate
                     key="1"
-                    translate-context="Content/Library/Table"
+
                   >Uploaded</translate>
                 </span>
                 <span
@@ -495,7 +494,7 @@ useEventListener(window, 'beforeunload', (event) => {
                 >
                   <translate
                     key="2"
-                    translate-context="Content/Library/Table"
+
                   >
                     Uploading…
                   </translate>
@@ -507,7 +506,7 @@ useEventListener(window, 'beforeunload', (event) => {
                 >
                   <translate
                     key="3"
-                    translate-context="Content/Library/*/Short"
+
                   >
                     Pending
                   </translate>
@@ -539,7 +538,7 @@ useEventListener(window, 'beforeunload', (event) => {
       </div>
       <div class="ui divider" />
       <h2 class="ui header">
-        <translate translate-context="Content/Library/Title/Verb">
+        <translate >
           Import music from your server
         </translate>
       </h2>
@@ -549,7 +548,7 @@ useEventListener(window, 'beforeunload', (event) => {
         class="ui negative message"
       >
         <h3 class="header">
-          <translate translate-context="Content/*/Error message.Title">
+          <translate >
             Error while launching import
           </translate>
         </h3>
@@ -570,17 +569,17 @@ useEventListener(window, 'beforeunload', (event) => {
       />
       <template v-if="fsStatus && fsStatus.import">
         <h3 class="ui header">
-          <translate translate-context="Content/Library/Title/Verb">
+          <translate >
             Import status
           </translate>
         </h3>
         <p v-if="fsStatus.import.reference !== importReference">
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Results of your previous import:
           </translate>
         </p>
         <p v-else>
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Results of your import:
           </translate>
         </p>
@@ -590,7 +589,7 @@ useEventListener(window, 'beforeunload', (event) => {
           class="ui button"
           @click="cancelFsScan"
         >
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Cancel
           </translate>
         </button>
diff --git a/front/src/components/library/FsBrowser.vue b/front/src/components/library/FsBrowser.vue
index 4e6e33a2a..b32b895fe 100644
--- a/front/src/components/library/FsBrowser.vue
+++ b/front/src/components/library/FsBrowser.vue
@@ -42,7 +42,7 @@ const handleClick = (entry: FSEntry) => {
         class="ui button"
         @click.prevent="emit('import')"
       >
-        <translate translate-context="Content/Library/Button/Verb">
+        <translate >
           Import
         </translate>
       </button>
diff --git a/front/src/components/library/FsLogs.vue b/front/src/components/library/FsLogs.vue
index 4459645ea..3d8ca00de 100644
--- a/front/src/components/library/FsLogs.vue
+++ b/front/src/components/library/FsLogs.vue
@@ -15,7 +15,7 @@ defineProps<Props>()
       class="ui active dimmer"
     >
       <div class="ui text loader">
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Import hasn't started yet
         </translate>
       </div>
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index bbed52395..faeb659bc 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { ref, computed } from 'vue'
 
 import axios from 'axios'
@@ -24,9 +24,9 @@ const artists = ref([])
 
 const logger = useLogger()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/Home/Title', 'Library')
+  title: t('Library')
 }))
 
 const isLoading = ref(false)
@@ -67,7 +67,7 @@ fetchData()
             :websocket-handlers="['Listen']"
           >
             <template #title>
-              <translate translate-context="Content/Home/Title">
+              <translate >
                 Recently listened
               </translate>
             </template>
@@ -79,7 +79,7 @@ fetchData()
             :filters="{scope: scope, ordering: '-creation_date'}"
           >
             <template #title>
-              <translate translate-context="Content/Home/Title">
+              <translate >
                 Recently favorited
               </translate>
             </template>
@@ -91,7 +91,7 @@ fetchData()
             :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
           >
             <template #title>
-              <translate translate-context="*/*/*">
+              <translate >
                 Playlists
               </translate>
             </template>
@@ -103,7 +103,7 @@ fetchData()
         <div class="column">
           <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
             <template #title>
-              <translate translate-context="Content/Home/Title">
+              <translate >
                 Recently added
               </translate>
             </template>
@@ -112,7 +112,7 @@ fetchData()
       </div>
       <template v-if="scope === 'all'">
         <h3 class="ui header">
-          <translate translate-context="*/*/*">
+          <translate >
             New channels
           </translate>
         </h3>
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
index 982e927cf..88fc05c35 100644
--- a/front/src/components/library/ImportStatusModal.vue
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -3,7 +3,7 @@ import type { Upload } from '~/types'
 
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { useVModel } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface ErrorEntry {
   key: string
@@ -44,7 +44,7 @@ const getErrors = (details: object): ErrorEntry[] => {
   return errors
 }
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const getErrorData = (upload: Upload) => {
   const payload = upload.import_details ?? { error_code: '', detail: {} }
@@ -58,11 +58,11 @@ const getErrorData = (upload: Upload) => {
     supportUrl: 'https://forum.funkwhale.audio/t/support',
     documentationUrl: `https://docs.funkwhale.audio/users/upload.html#${errorCode}`,
     label: errorCode === 'invalid_metadata'
-      ? $pgettext('Popup/Import/Error.Label', 'Invalid metadata')
-      : $pgettext('*/*/Error', 'Unknown error'),
+      ? t('Invalid metadata')
+      : t('Unknown error'),
     detail: errorCode === 'invalid_metadata'
-      ? $pgettext('Popup/Import/Error.Label', 'The metadata included in the file is invalid or some mandatory fields are missing.')
-      : $pgettext('Popup/Import/Error.Label', 'An unknown error occurred'),
+      ? t('The metadata included in the file is invalid or some mandatory fields are missing.')
+      : t('An unknown error occurred'),
     errorRows: errorCode === 'invalid_metadata'
       ? getErrors(payload.detail ?? {})
       : [],
@@ -77,7 +77,7 @@ const getErrorData = (upload: Upload) => {
 <template>
   <semantic-modal v-model:show="show">
     <h4 class="header">
-      <translate translate-context="Popup/Import/Title">
+      <translate >
         Import detail
       </translate>
     </h4>
@@ -90,7 +90,7 @@ const getErrorData = (upload: Upload) => {
           v-if="upload.import_status === 'pending'"
           class="ui message"
         >
-          <translate translate-context="Popup/Import/Message">
+          <translate >
             Upload is still pending and will soon be processed by the server.
           </translate>
         </div>
@@ -98,7 +98,7 @@ const getErrorData = (upload: Upload) => {
           v-if="upload.import_status === 'finished'"
           class="ui success message"
         >
-          <translate translate-context="Popup/Import/Message">
+          <translate >
             Upload was successfully processed by the server.
           </translate>
         </div>
@@ -107,7 +107,7 @@ const getErrorData = (upload: Upload) => {
           role="alert"
           class="ui warning message"
         >
-          <translate translate-context="Popup/Import/Message">
+          <translate >
             Upload was skipped because a similar one is already available in one of your libraries.
           </translate>
         </div>
@@ -115,7 +115,7 @@ const getErrorData = (upload: Upload) => {
           v-if="upload.import_status === 'errored'"
           class="ui error message"
         >
-          <translate translate-context="Popup/Import/Message">
+          <translate >
             An error occurred during upload processing. You will find more information below.
           </translate>
         </div>
@@ -124,7 +124,7 @@ const getErrorData = (upload: Upload) => {
             <tbody>
               <tr>
                 <td>
-                  <translate translate-context="Popup/Import/Table.Label/Noun">
+                  <translate >
                     Error type
                   </translate>
                 </td>
@@ -134,7 +134,7 @@ const getErrorData = (upload: Upload) => {
               </tr>
               <tr>
                 <td>
-                  <translate translate-context="Popup/Import/Table.Label/Noun">
+                  <translate >
                     Error detail
                   </translate>
                 </td>
@@ -152,7 +152,7 @@ const getErrorData = (upload: Upload) => {
               </tr>
               <tr>
                 <td>
-                  <translate translate-context="Footer/*/Link">
+                  <translate >
                     Getting help
                   </translate>
                 </td>
@@ -163,7 +163,7 @@ const getErrorData = (upload: Upload) => {
                         :href="getErrorData(upload).documentationUrl"
                         target="_blank"
                       >
-                        <translate translate-context="Popup/Import/Table.Label/Value">Read our documentation for this error</translate>
+                        <translate >Read our documentation for this error</translate>
                       </a>
                     </li>
                     <li>
@@ -171,7 +171,7 @@ const getErrorData = (upload: Upload) => {
                         :href="getErrorData(upload).supportUrl"
                         target="_blank"
                       >
-                        <translate translate-context="Popup/Import/Table.Label/Value">Open a support thread (include the debug information below in your message)</translate>
+                        <translate >Open a support thread (include the debug information below in your message)</translate>
                       </a>
                     </li>
                   </ul>
@@ -179,7 +179,7 @@ const getErrorData = (upload: Upload) => {
               </tr>
               <tr>
                 <td>
-                  <translate translate-context="Popup/Import/Table.Label/Noun">
+                  <translate >
                     Debug information
                   </translate>
                 </td>
@@ -200,7 +200,7 @@ const getErrorData = (upload: Upload) => {
     </div>
     <div class="actions">
       <button class="ui deny button">
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Close
         </translate>
       </button>
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index 0a3ae2cb0..1914b8986 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -6,7 +6,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { computed, ref, watch, onMounted } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
@@ -110,10 +110,10 @@ onOrderingUpdate(() => {
 
 onMounted(() => $('.ui.dropdown').dropdown())
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search…'),
-  title: $pgettext('*/*/*/Noun', 'Podcasts')
+  searchPlaceholder: t('Search…'),
+  title: t('Podcasts')
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
@@ -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">
-        <translate translate-context="Content/Podcasts/Title">
+        <translate >
           Browsing podcasts
         </translate>
       </h2>
@@ -134,7 +134,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         <div class="fields">
           <div class="field">
             <label for="artist-search">
-              <translate translate-context="Content/Search/Input.Label/Noun">Podcast title</translate>
+              <translate >Podcast title</translate>
             </label>
             <div class="ui action input">
               <input
@@ -147,18 +147,18 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
               <button
                 class="ui icon button"
                 type="submit"
-                :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')"
+                :aria-label="t('Search')"
               >
                 <i class="search icon" />
               </button>
             </div>
           </div>
           <div class="field">
-            <label for="tags-search"><translate translate-context="*/*/*/Noun">Tags</translate></label>
+            <label for="tags-search"><translate >Tags</translate></label>
             <tags-selector v-model="tags" />
           </div>
           <div class="field">
-            <label for="artist-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+            <label for="artist-ordering"><translate >Ordering</translate></label>
             <select
               id="artist-ordering"
               v-model="ordering"
@@ -174,26 +174,26 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="artist-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+            <label for="artist-ordering-direction"><translate >Ordering direction</translate></label>
             <select
               id="artist-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="artist-results"><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
+            <label for="artist-results"><translate >Results per page</translate></label>
             <select
               id="artist-results"
               v-model="paginateBy"
@@ -234,7 +234,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="podcast icon" />
-          <translate translate-context="Content/Artists/Placeholder">
+          <translate >
             No results matching your query
           </translate>
         </div>
@@ -244,7 +244,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           class="ui success button labeled icon"
         >
           <i class="upload icon" />
-          <translate translate-context="Content/*/Verb">
+          <translate >
             Create a Channel
           </translate>
         </router-link>
@@ -255,7 +255,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           <div class="actions">
             <a @click.stop.prevent="showSubscribeModal = true">
               <i class="plus icon" />
-              <translate translate-context="Content/Profile/Button">Subscribe to feed</translate>
+              <translate >Subscribe to feed</translate>
             </a>
           </div>
         </h1>
@@ -275,7 +275,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       :fullscreen="false"
     >
       <h2 class="header">
-        <translate translate-context="*/*/*/Noun">
+        <translate >
           Subscription
         </translate>
       </h2>
@@ -293,7 +293,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       </div>
       <div class="actions">
         <button class="ui basic deny button">
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Cancel
           </translate>
         </button>
@@ -303,7 +303,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           class="ui primary button"
         >
           <i class="bookmark icon" />
-          <translate translate-context="*/*/*/Verb">
+          <translate >
             Subscribe
           </translate>
         </button>
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 574071c9e..0f1421807 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -6,7 +6,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
@@ -99,10 +99,10 @@ onOrderingUpdate(() => {
 
 onMounted(() => $('.ui.dropdown').dropdown())
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Enter a radio name…'),
-  title: $pgettext('*/*/*', 'Radios')
+  searchPlaceholder: t('Enter a radio name…'),
+  title: t('Radios')
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
@@ -112,14 +112,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate translate-context="Content/Radio/Title">
+        <translate >
           Browsing radios
         </translate>
       </h2>
       <div class="ui hidden divider" />
       <div class="ui row">
         <h3 class="ui header">
-          <translate translate-context="Content/Radio/Title">
+          <translate >
             Instance radios
           </translate>
         </h3>
@@ -144,7 +144,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 
       <div class="ui hidden divider" />
       <h3 class="ui header">
-        <translate translate-context="Content/Radio/Title">
+        <translate >
           User radios
         </translate>
       </h3>
@@ -153,7 +153,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         class="ui success button"
         to="/library/radios/build"
       >
-        <translate translate-context="Content/Radio/Button.Label/Verb">
+        <translate >
           Create your own radio
         </translate>
       </router-link>
@@ -164,7 +164,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="fields">
           <div class="field">
-            <label for="radios-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+            <label for="radios-search"><translate >Search</translate></label>
             <div class="ui action input">
               <input
                 id="radios-search"
@@ -176,14 +176,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
               <button
                 class="ui icon button"
                 type="submit"
-                :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')"
+                :aria-label="t('Search')"
               >
                 <i class="search icon" />
               </button>
             </div>
           </div>
           <div class="field">
-            <label for="radios-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+            <label for="radios-ordering"><translate >Ordering</translate></label>
             <select
               id="radios-ordering"
               v-model="ordering"
@@ -199,26 +199,26 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="radios-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate></label>
+            <label for="radios-ordering-direction"><translate >Order</translate></label>
             <select
               id="radios-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="radios-results"><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
+            <label for="radios-results"><translate >Results per page</translate></label>
             <select
               id="radios-results"
               v-model="paginateBy"
@@ -242,7 +242,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="feed icon" />
-          <translate translate-context="Content/Radios/Placeholder">
+          <translate >
             No results matching your query
           </translate>
         </div>
@@ -252,7 +252,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           class="ui success button labeled icon"
         >
           <i class="rss icon" />
-          <translate translate-context="Content/*/Verb">
+          <translate >
             Create a radio
           </translate>
         </router-link>
diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 67bf69aba..8bfce8786 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -36,7 +36,7 @@ const labels = computed(() => ({
         :to="{name: 'manage.library.tags.detail', params: {id: id}}"
       >
         <i class="wrench icon" />
-        <translate translate-context="Content/Moderation/Link">
+        <translate >
           Open in moderation interface
         </translate>
       </router-link>
@@ -50,7 +50,7 @@ const labels = computed(() => ({
         >
           <template #title>
             <router-link :to="{name: 'library.artists.browse', query: {tag: id}}">
-              <translate translate-context="*/*/*/Noun">
+              <translate >
                 Artists
               </translate>
             </router-link>
@@ -59,7 +59,7 @@ const labels = computed(() => ({
         <div class="ui hidden divider" />
         <div class="ui hidden divider" />
         <h3 class="ui header">
-          <translate translate-context="*/*/*">
+          <translate >
             Channels
           </translate>
         </h3>
@@ -79,7 +79,7 @@ const labels = computed(() => ({
         >
           <template #title>
             <router-link :to="{name: 'library.albums.browse', query: {tag: id}}">
-              <translate translate-context="*/*/*">
+              <translate >
                 Albums
               </translate>
             </router-link>
@@ -97,7 +97,7 @@ const labels = computed(() => ({
           :filters="{playable: true, ordering: '-creation_date', tag: id}"
         >
           <template #title>
-            <translate translate-context="*/*/*">
+            <translate >
               Tracks
             </translate>
           </template>
diff --git a/front/src/components/library/TagsSelector.vue b/front/src/components/library/TagsSelector.vue
index e0d90e4ff..459046ddb 100644
--- a/front/src/components/library/TagsSelector.vue
+++ b/front/src/components/library/TagsSelector.vue
@@ -99,7 +99,7 @@ onMounted(async () => {
       class="search"
     >
     <div class="default text">
-      <translate translate-context="*/Dropdown/Placeholder/Verb">
+      <translate >
         Search…
       </translate>
     </div>
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 96a99b788..56cfdc7e8 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -3,7 +3,7 @@ import type { Track, Artist, Library } from '~/types'
 
 import { momentFormat } from '~/utils/filters'
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { getDomain } from '~/utils'
 import { useStore } from '~/store'
@@ -67,8 +67,7 @@ const attributedToUrl = computed(() => router.resolve({
 const escapeHtml = (unsafe: string) => document.createTextNode(unsafe).textContent ?? ''
 const subtitle = computed(() => {
   if (track.value?.attributed_to) {
-    return $pgettext(
-      'Content/Track/Paragraph',
+    return t(
       'Uploaded by <a class="internal" href="%{ uploaderUrl }">%{ uploader }</a> on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>',
       {
         uploaderUrl: attributedToUrl.value,
@@ -79,8 +78,7 @@ const subtitle = computed(() => {
     )
   }
 
-  return $pgettext(
-    'Content/Track/Paragraph',
+  return t(
     'Uploaded on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>',
     {
       date: escapeHtml(track.value?.creation_date ?? ''),
@@ -89,11 +87,11 @@ const subtitle = computed(() => {
   )
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('*/*/*/Noun', 'Track'),
-  download: $pgettext('Content/Track/Link/Verb', 'Download'),
-  more: $pgettext('*/*/Button.Label/Noun', 'More…')
+  title: t('Track'),
+  download: t('Download'),
+  more: t('More…')
 }))
 
 const isLoading = ref(false)
@@ -157,7 +155,7 @@ const remove = async () => {
                 class="vibrant"
                 :track="track"
               >
-                <translate translate-context="*/Queue/Button.Label/Short, Verb">
+                <translate >
                   Play
                 </translate>
               </play-button>
@@ -189,7 +187,7 @@ const remove = async () => {
                 v-model:show="showEmbedModal"
               >
                 <h4 class="header">
-                  <translate translate-context="Popup/Track/Title">
+                  <translate >
                     Embed this track on your website
                   </translate>
                 </h4>
@@ -203,7 +201,7 @@ const remove = async () => {
                 </div>
                 <div class="actions">
                   <button class="ui basic deny button">
-                    <translate translate-context="*/*/Button.Label/Verb">
+                    <translate >
                       Cancel
                     </translate>
                   </button>
@@ -228,7 +226,7 @@ const remove = async () => {
                     <i class="external icon" />
                     <translate
                       :translate-params="{domain: domain}"
-                      translate-context="Content/*/Button.Label/Verb"
+
                     >View on %{ domain }</translate>
                   </a>
                   <div
@@ -238,7 +236,7 @@ const remove = async () => {
                     @click="showEmbedModal = !showEmbedModal"
                   >
                     <i class="code icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">
+                    <translate >
                       Embed
                     </translate>
                   </div>
@@ -249,7 +247,7 @@ const remove = async () => {
                     class="basic item"
                   >
                     <i class="wikipedia w icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
+                    <translate >Search on Wikipedia</translate>
                   </a>
                   <a
                     v-if="discogsUrl"
@@ -259,7 +257,7 @@ const remove = async () => {
                     class="basic item"
                   >
                     <i class="external icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
+                    <translate >Search on Discogs</translate>
                   </a>
                   <router-link
                     v-if="track.is_local"
@@ -267,7 +265,7 @@ const remove = async () => {
                     class="basic item"
                   >
                     <i class="edit icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">
+                    <translate >
                       Edit
                     </translate>
                   </router-link>
@@ -277,12 +275,12 @@ const remove = async () => {
                     @confirm="remove()"
                   >
                     <i class="ui trash icon" />
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete…
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Channel/Title">
+                        <translate >
                           Delete this track?
                         </translate>
                       </p>
@@ -290,7 +288,7 @@ const remove = async () => {
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The track will be deleted, as well as any related files and data. This action is irreversible.
                           </translate>
                         </p>
@@ -298,7 +296,7 @@ const remove = async () => {
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -321,7 +319,7 @@ const remove = async () => {
                     :to="{name: 'manage.library.tracks.detail', params: {id: track.id}}"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link">
+                    <translate >
                       Open in moderation interface
                     </translate>
                   </router-link>
@@ -333,7 +331,7 @@ const remove = async () => {
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                    <translate >View in Django's admin</translate>&nbsp;
                   </a>
                 </div>
               </button>
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 4641cdcd3..fd6d98b6b 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -78,13 +78,13 @@ watchEffect(() => {
             <h3 class="ui header">
               <translate
                 v-if="track.artist?.content_category === 'music'"
-                translate-context="Content/*/*"
+
               >
                 Track Details
               </translate>
               <translate
                 v-else
-                translate-context="Content/*/*"
+
               >
                 Episode Details
               </translate>
@@ -93,7 +93,7 @@ watchEffect(() => {
               <tbody>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*">
+                    <translate >
                       Duration
                     </translate>
                   </td>
@@ -103,7 +103,7 @@ watchEffect(() => {
                     </template>
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -111,7 +111,7 @@ watchEffect(() => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Size
                     </translate>
                   </td>
@@ -121,7 +121,7 @@ watchEffect(() => {
                     </template>
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -129,7 +129,7 @@ watchEffect(() => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Codec
                     </translate>
                   </td>
@@ -139,7 +139,7 @@ watchEffect(() => {
                     </template>
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -147,7 +147,7 @@ watchEffect(() => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/Track/*/Noun">
+                    <translate >
                       Bitrate
                     </translate>
                   </td>
@@ -157,7 +157,7 @@ watchEffect(() => {
                     </template>
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -165,7 +165,7 @@ watchEffect(() => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*">
+                    <translate >
                       Downloads
                     </translate>
                   </td>
@@ -188,7 +188,7 @@ watchEffect(() => {
             :can-update="false"
           />
           <h2 class="ui header">
-            <translate translate-context="Content/*/*">
+            <translate >
               Release Details
             </translate>
           </h2>
@@ -196,7 +196,7 @@ watchEffect(() => {
             <tbody>
               <tr>
                 <td>
-                  <translate translate-context="*/*/*/Noun">
+                  <translate >
                     Artist
                   </translate>
                 </td>
@@ -210,13 +210,13 @@ watchEffect(() => {
                 <td>
                   <translate
                     v-if="track.album.artist.content_category === 'music'"
-                    translate-context="*/*/*/Noun"
+
                   >
                     Album
                   </translate>
                   <translate
                     v-else
-                    translate-context="*/*/*"
+
                   >
                     Serie
                   </translate>
@@ -229,7 +229,7 @@ watchEffect(() => {
               </tr>
               <tr>
                 <td>
-                  <translate translate-context="*/*/*">
+                  <translate >
                     Year
                   </translate>
                 </td>
@@ -238,7 +238,7 @@ watchEffect(() => {
                     {{ momentFormat(new Date(track.album.release_date), 'Y') }}
                   </template>
                   <template v-else>
-                    <translate translate-context="*/*/*">
+                    <translate >
                       N/A
                     </translate>
                   </template>
@@ -246,7 +246,7 @@ watchEffect(() => {
               </tr>
               <tr>
                 <td>
-                  <translate translate-context="Content/Track/*/Noun">
+                  <translate >
                     Copyright
                   </translate>
                 </td>
@@ -256,7 +256,7 @@ watchEffect(() => {
                     :title="track.copyright"
                   >{{ truncate(track.copyright, 50) }}</span>
                   <template v-else>
-                    <translate translate-context="*/*/*">
+                    <translate >
                       N/A
                     </translate>
                   </template>
@@ -264,7 +264,7 @@ watchEffect(() => {
               </tr>
               <tr>
                 <td>
-                  <translate translate-context="Content/*/*/Noun">
+                  <translate >
                     License
                   </translate>
                 </td>
@@ -277,7 +277,7 @@ watchEffect(() => {
                   >{{ license.name }}</a>
                   <translate
                     v-else
-                    translate-context="*/*/*"
+
                   >
                     N/A
                   </translate>
@@ -285,7 +285,7 @@ watchEffect(() => {
               </tr>
               <tr v-if="!track.is_local">
                 <td>
-                  <translate translate-context="Content/*/*/Noun">
+                  <translate >
                     URL
                   </translate>
                 </td>
@@ -308,10 +308,10 @@ watchEffect(() => {
             rel="noreferrer noopener"
           >
             <i class="external icon" />
-            <translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
+            <translate >View on MusicBrainz</translate>
           </a>
           <h2 class="ui header">
-            <translate translate-context="Content/*/Title/Noun">
+            <translate >
               Related Playlists
             </translate>
           </h2>
@@ -321,7 +321,7 @@ watchEffect(() => {
           />
 
           <h2 class="ui header">
-            <translate translate-context="Content/*/Title/Noun">
+            <translate >
               Related Libraries
             </translate>
           </h2>
@@ -329,7 +329,7 @@ watchEffect(() => {
             :url="`tracks/${track.id}/libraries/`"
             @loaded="emit('libraries-loaded', $event)"
           >
-            <translate translate-context="Content/Track/Paragraph">
+            <translate >
               This track is present in the following libraries:
             </translate>
           </library-widget>
diff --git a/front/src/components/library/TrackEdit.vue b/front/src/components/library/TrackEdit.vue
index 2fb26b2ba..58e08b68e 100644
--- a/front/src/components/library/TrackEdit.vue
+++ b/front/src/components/library/TrackEdit.vue
@@ -46,13 +46,13 @@ fetchLicenses()
       <h2>
         <translate
           v-if="canEdit"
-          translate-context="Content/*/Title"
+
         >
           Edit this track
         </translate>
         <translate
           key="2"
-          translate-context="Content/*/Title"
+
         >
           Suggest an edit on this track
         </translate>
@@ -61,7 +61,7 @@ fetchLicenses()
         v-if="!object.is_local"
         class="ui message"
       >
-        <translate translate-context="Content/*/Message">
+        <translate >
           This object is managed by another server, you cannot edit it.
         </translate>
       </div>
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 8ef30499b..3190eb15b 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, reactive, watch, watchEffect, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import $ from 'jquery'
@@ -51,14 +51,14 @@ const props = withDefaults(defineProps<Props>(), {
   id: 0
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const router = useRouter()
 
 const labels = computed(() => ({
-  title: $pgettext('Head/Radio/Title', 'Radio Builder'),
+  title: t('Radio Builder'),
   placeholder: {
-    description: $pgettext('Content/Radio/Input.Placeholder', 'My awesome description'),
-    name: $pgettext('Content/Radio/Input.Placeholder', 'My awesome radio')
+    description: t('My awesome description'),
+    name: t('My awesome radio')
   }
 }))
 
@@ -203,12 +203,12 @@ onMounted(() => {
     <div>
       <section>
         <h2 class="ui header">
-          <translate translate-context="Content/Radio/Title">
+          <translate >
             Builder
           </translate>
         </h2>
         <p>
-          <translate translate-context="Content/Radio/Paragraph">
+          <translate >
             You can use this interface to build your own custom radio, which will play tracks according to your criteria.
           </translate>
         </p>
@@ -219,12 +219,12 @@ onMounted(() => {
           >
             <h4 class="header">
               <template v-if="radioName">
-                <translate translate-context="Content/Radio/Message">
+                <translate >
                   Radio updated
                 </translate>
               </template>
               <template v-else>
-                <translate translate-context="Content/Radio/Message">
+                <translate >
                   Radio created
                 </translate>
               </template>
@@ -232,7 +232,7 @@ onMounted(() => {
           </div>
           <div class="">
             <div class="field">
-              <label for="name"><translate translate-context="Content/Radio/Input.Label/Noun">Radio name</translate></label>
+              <label for="name"><translate >Radio name</translate></label>
               <input
                 id="name"
                 v-model="radioName"
@@ -242,7 +242,7 @@ onMounted(() => {
               >
             </div>
             <div class="field">
-              <label for="description"><translate translate-context="*/*/*/Noun">Description</translate></label>
+              <label for="description"><translate >Description</translate></label>
               <textarea
                 id="description"
                 v-model="radioDesc"
@@ -257,7 +257,7 @@ onMounted(() => {
                 v-model="isPublic"
                 type="checkbox"
               >
-              <label for="public"><translate translate-context="Content/Radio/Checkbox.Label/Verb">Display publicly</translate></label>
+              <label for="public"><translate >Display publicly</translate></label>
             </div>
             <div class="ui hidden divider" />
             <button
@@ -265,7 +265,7 @@ onMounted(() => {
               :class="['ui', 'success', {loading: isLoading}, 'button']"
               @click="save"
             >
-              <translate translate-context="Content/*/Button.Label/Verb">
+              <translate >
                 Save
               </translate>
             </button>
@@ -281,14 +281,14 @@ onMounted(() => {
             <label
               id="radioFilterLabel"
               for="radio-filters"
-            ><translate translate-context="Content/Radio/Paragraph">Add filters to customize your radio</translate></label>
+            ><translate >Add filters to customize your radio</translate></label>
             <select
               id="radio-filters"
               v-model="currentFilterType"
               class="ui dropdown"
             >
               <option value="">
-                <translate translate-context="Content/Radio/Dropdown.Placeholder/Verb">
+                <translate >
                   Select a filter
                 </translate>
               </option>
@@ -306,7 +306,7 @@ onMounted(() => {
               class="ui button"
               @click="add"
             >
-              <translate translate-context="Content/Radio/Button.Label/Verb">
+              <translate >
                 Add filter
               </translate>
             </button>
@@ -319,27 +319,27 @@ onMounted(() => {
           <thead>
             <tr>
               <th class="two wide">
-                <translate translate-context="Content/Radio/Table.Label/Noun">
+                <translate >
                   Filter name
                 </translate>
               </th>
               <th class="one wide">
-                <translate translate-context="Content/Radio/Table.Label/Verb">
+                <translate >
                   Exclude
                 </translate>
               </th>
               <th class="six wide">
-                <translate translate-context="Content/Radio/Table.Label/Verb (Value is a List of Parameters)">
+                <translate >
                   Config
                 </translate>
               </th>
               <th class="five wide">
-                <translate translate-context="Content/Radio/Table.Label/Noun (Value is a number of Tracks)">
+                <translate >
                   Candidates
                 </translate>
               </th>
               <th class="two wide">
-                <translate translate-context="Content/*/*/Noun">
+                <translate >
                   Actions
                 </translate>
               </th>
@@ -363,7 +363,7 @@ onMounted(() => {
             class="ui header"
             :translate-n="checkResult.candidates.count"
             translate-plural="%{ count } tracks matching combined filters"
-            translate-context="Content/Radio/Table.Paragraph/Short"
+
           >
             %{ count } track matching combined filters
           </h3>
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index f70e47e85..043be6cae 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/front/src/components/library/radios/Filter.vue
@@ -124,7 +124,7 @@ watch(exclude, fetchCandidates)
           for="exclude-filter"
           class="visually-hidden"
         >
-          <translate translate-context="Popup/Radio/Title/Noun">Exclude</translate>
+          <translate >Exclude</translate>
         </label>
       </div>
     </td>
@@ -180,7 +180,7 @@ watch(exclude, fetchCandidates)
         v-model:show="showCandidadesModal"
       >
         <h4 class="header">
-          <translate translate-context="Popup/Radio/Title/Noun">
+          <translate >
             Tracks matching filter
           </translate>
         </h4>
@@ -194,7 +194,7 @@ watch(exclude, fetchCandidates)
         </div>
         <div class="actions">
           <button class="ui deny button">
-            <translate translate-context="*/*/Button.Label/Verb">
+            <translate >
               Cancel
             </translate>
           </button>
@@ -206,7 +206,7 @@ watch(exclude, fetchCandidates)
         class="ui danger button"
         @click="$emit('delete', index)"
       >
-        <translate translate-context="Content/Radio/Button.Label/Verb">
+        <translate >
           Remove
         </translate>
       </button>
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 77e2c199a..292c659c5 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -5,7 +5,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -80,10 +80,10 @@ onOrderingUpdate(fetchData)
 fetchData()
 
 const sharedLabels = useSharedLabels()
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, account…'),
-  openModeration: $pgettext('Content/Moderation/Verb', 'Open in moderation interface')
+  searchPlaceholder: t('Search by domain, name, account…'),
+  openModeration: t('Open in moderation interface')
 }))
 </script>
 
@@ -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"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="channel-search"><translate >Search</translate></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"><translate translate-context="*/*/*">Category</translate></label>
+          <label for="channel-category"><translate >Category</translate></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="">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
@@ -129,7 +129,7 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="channel-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="channel-ordering"><translate >Ordering</translate></label>
           <select
             id="channel-ordering"
             v-model="ordering"
@@ -145,19 +145,19 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="channel-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="channel-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="channel-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -182,32 +182,32 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Name
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Account
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Domain
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Albums
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Tracks
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
@@ -250,7 +250,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
             >
               <i class="home icon" />
-              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+              <translate >Local</translate>
             </a>
           </td>
           <td>
@@ -276,7 +276,7 @@ const labels = computed(() => ({
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index c2b4e568f..6fd34e9f9 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -5,7 +5,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -49,13 +49,13 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['name', 'name']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
-    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.'),
+    label: t('Delete'),
+    confirmationMessage: t('The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.'),
     isDangerous: true,
     allowAll: false,
     confirmColor: 'danger'
@@ -94,8 +94,8 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, title, artist, MusicBrainz ID…'),
-  openModeration: $pgettext('Content/Moderation/Verb', 'Open in moderation interface')
+  searchPlaceholder: t('Search by domain, title, artist, MusicBrainz ID…'),
+  openModeration: t('Open in moderation interface')
 }))
 </script>
 
@@ -104,7 +104,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
-          <label for="albums-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="albums-search"><translate >Search</translate></label>
           <form @submit.prevent="query = search.value">
             <input
               id="albums-search"
@@ -117,7 +117,7 @@ const labels = computed(() => ({
           </form>
         </div>
         <div class="field">
-          <label for="albums-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="albums-ordering"><translate >Ordering</translate></label>
           <select
             id="albums-ordering"
             v-model="ordering"
@@ -133,18 +133,18 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="albums-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="albums-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -169,32 +169,32 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Title
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Artist
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Domain
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Tracks
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Release date
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
@@ -238,7 +238,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+              <translate >Local</translate>
             </a>
           </td>
           <td>
@@ -251,7 +251,7 @@ const labels = computed(() => ({
             />
             <translate
               v-else
-              translate-context="*/*/*"
+
             >
               N/A
             </translate>
@@ -273,7 +273,7 @@ const labels = computed(() => ({
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index 5a7efbd88..b79204dce 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -5,7 +5,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { ref, computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -52,8 +52,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
-    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.'),
+    label: t('Delete'),
+    confirmationMessage: t('The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.'),
     isDangerous: true,
     allowAll: false,
     confirmColor: 'danger'
@@ -91,9 +91,9 @@ onOrderingUpdate(fetchData)
 fetchData()
 
 const sharedLabels = useSharedLabels()
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, MusicBrainz ID…')
+  searchPlaceholder: t('Search by domain, name, MusicBrainz ID…')
 }))
 
 const getUrl = (artist: { channel?: number; id: number }) => {
@@ -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"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="artists-serarch"><translate >Search</translate></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"><translate translate-context="*/*/*">Category</translate></label>
+          <label for="artists-category"><translate >Category</translate></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="">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
@@ -145,7 +145,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
           </select>
         </div>
         <div class="field">
-          <label for="artists-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="artists-ordering"><translate >Ordering</translate></label>
           <select
             id="artists-ordering"
             v-model="ordering"
@@ -161,19 +161,19 @@ const getUrl = (artist: { channel?: number; id: number }) => {
           </select>
         </div>
         <div class="field">
-          <label for="artists-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="artists-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="artists-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -198,27 +198,27 @@ const getUrl = (artist: { channel?: number; id: number }) => {
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Name
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Domain
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Albums
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Tracks
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
@@ -250,7 +250,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+              <translate >Local</translate>
             </a>
           </td>
           <td>
@@ -276,7 +276,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index e27af8d76..06231baf5 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -7,7 +7,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { ref, reactive, watch, computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { uniq } from 'lodash-es'
 
 import axios from 'axios'
@@ -139,10 +139,10 @@ watch(page, fetchData)
 onOrderingUpdate(fetchData)
 fetchData()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by account, summary, domain…')
+  searchPlaceholder: t('Search by account, summary, domain…')
 }))
 
 const handle = (type: 'delete' | 'approved', id: string, value: boolean) => {
@@ -165,7 +165,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="search-edits"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="search-edits"><translate >Search</translate></label>
           <form @submit.prevent="query = search.value">
             <input
               id="search-edits"
@@ -178,7 +178,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
           </form>
         </div>
         <div class="field">
-          <label for="edit-status"><translate translate-context="*/*/*">Status</translate></label>
+          <label for="edit-status"><translate >Status</translate></label>
           <select
             id="edit-status"
             class="ui dropdown"
@@ -186,29 +186,29 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
             @change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
             <option value="null">
-              <translate translate-context="Content/Admin/*/Noun">
+              <translate >
                 Pending review
               </translate>
             </option>
             <option value="yes">
-              <translate translate-context="Content/*/*/Short">
+              <translate >
                 Approved
               </translate>
             </option>
             <option value="no">
-              <translate translate-context="Content/Library/*/Short">
+              <translate >
                 Rejected
               </translate>
             </option>
           </select>
         </div>
         <div class="field">
-          <label for="edit-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="edit-ordering"><translate >Ordering</translate></label>
           <select
             id="edit-ordering"
             v-model="ordering"
@@ -224,19 +224,19 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
           </select>
         </div>
         <div class="field">
-          <label for="edit-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate></label>
+          <label for="edit-ordering-direction"><translate >Order</translate></label>
           <select
             id="edit-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -279,7 +279,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index dfab3cdd0..3f851169b 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -6,7 +6,7 @@ import type { OrderingField } from '~/store/ui'
 import type { PrivacyLevel } from '~/types'
 
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -49,13 +49,13 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['uploads_count', 'uploads']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
-    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected library will be removed, as well as associated uploads and follows. This action is irreversible.'),
+    label: t('Delete'),
+    confirmationMessage: t('The selected library will be removed, as well as associated uploads and follows. This action is irreversible.'),
     isDangerous: true,
     allowAll: false,
     confirmColor: 'danger'
@@ -94,7 +94,7 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, actor, name, description…')
+  searchPlaceholder: t('Search by domain, actor, name, description…')
 }))
 
 const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@@ -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"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="libraries-search"><translate >Search</translate></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"><translate translate-context="*/*/*">Visibility</translate></label>
+          <label for="libraries-visibility"><translate >Visibility</translate></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="">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
@@ -144,7 +144,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="libraries-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="libraries-ordering"><translate >Ordering</translate></label>
           <select
             id="libraries-ordering"
             v-model="ordering"
@@ -160,19 +160,19 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="libraries-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="libraries-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="libraries-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -197,37 +197,37 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Name
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Account
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Domain
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Visibility
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Uploads
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Federation/*/Noun">
+            <translate >
               Followers
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
@@ -268,7 +268,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+              <translate >Local</translate>
             </a>
           </td>
           <td>
@@ -304,7 +304,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 437b6649a..9bb115669 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -6,7 +6,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { computed, ref, watch } from 'vue'
 import { truncate } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -52,13 +52,13 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['items_count', 'items_count']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
-    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected tag will be removed and unlinked with existing content, if any. This action is irreversible.'),
+    label: t('Delete'),
+    confirmationMessage: t('The selected tag will be removed and unlinked with existing content, if any. This action is irreversible.'),
     isDangerous: true,
     allowAll: false,
     confirmColor: 'danger'
@@ -97,7 +97,7 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by name')
+  searchPlaceholder: t('Search by name')
 }))
 
 const detailedUpload = ref()
@@ -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"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="tags-search"><translate >Search</translate></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"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="tags-ordering"><translate >Ordering</translate></label>
           <select
             id="tags-ordering"
             v-model="ordering"
@@ -138,19 +138,19 @@ const showUploadDetailModal = ref(false)
           </select>
         </div>
         <div class="field">
-          <label for="tags-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="tags-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="tags-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -181,27 +181,27 @@ const showUploadDetailModal = ref(false)
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Name
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Artists
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Albums
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Tracks
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
@@ -240,7 +240,7 @@ const showUploadDetailModal = ref(false)
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 26bdd3581..2aa9ac071 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -5,7 +5,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { ref, computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -47,13 +47,13 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['creation_date', 'creation_date']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
-    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected tracks will be removed, as well as associated uploads, favorites and listening history. This action is irreversible.'),
+    label: t('Delete'),
+    confirmationMessage: t('The selected tracks will be removed, as well as associated uploads, favorites and listening history. This action is irreversible.'),
     isDangerous: true,
     allowAll: false,
     confirmColor: 'danger'
@@ -92,7 +92,7 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, title, artist, album, MusicBrainz ID…')
+  searchPlaceholder: t('Search by domain, title, artist, album, MusicBrainz ID…')
 }))
 </script>
 
@@ -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"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="tracks-search"><translate >Search</translate></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"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="tracks-ordering"><translate >Ordering</translate></label>
           <select
             id="tracks-ordering"
             v-model="ordering"
@@ -130,19 +130,19 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="tracks-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="tracks-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="tracks-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -167,32 +167,32 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Title
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Album
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Artist
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Domain
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               License
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
@@ -248,7 +248,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+              <translate >Local</translate>
             </a>
           </td>
           <td>
@@ -261,7 +261,7 @@ const labels = computed(() => ({
             >{{ scope.obj.license }}</a>
             <translate
               v-else
-              translate-context="*/*/*"
+
             >
               N/A
             </translate>
@@ -283,7 +283,7 @@ const labels = computed(() => ({
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index cacff6607..8183eec1f 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -7,7 +7,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { humanSize, truncate } from '~/utils/filters'
 import { ref, computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -54,13 +54,13 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['duration', 'duration']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
-    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected upload will be removed. This action is irreversible.'),
+    label: t('Delete'),
+    confirmationMessage: t('The selected upload will be removed. This action is irreversible.'),
     isDangerous: true,
     allowAll: false,
     confirmColor: 'danger'
@@ -99,7 +99,7 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, actor, name, reference, source…')
+  searchPlaceholder: t('Search by domain, actor, name, reference, source…')
 }))
 
 const displayName = (upload: Upload): string => {
@@ -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"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="uploads-search"><translate >Search</translate></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"><translate translate-context="*/*/*">Visibility</translate></label>
+          <label for="uploads-visibility"><translate >Visibility</translate></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="">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
@@ -160,7 +160,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="uploads-status"><translate translate-context="Content/*/*/Noun">Import status</translate></label>
+          <label for="uploads-status"><translate >Import status</translate></label>
           <select
             id="uploads-status"
             class="ui dropdown"
@@ -168,34 +168,34 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
             <option value="pending">
-              <translate translate-context="Content/Library/*/Short">
+              <translate >
                 Pending
               </translate>
             </option>
             <option value="skipped">
-              <translate translate-context="Content/Library/*">
+              <translate >
                 Skipped
               </translate>
             </option>
             <option value="errored">
-              <translate translate-context="Content/Library/Dropdown">
+              <translate >
                 Failed
               </translate>
             </option>
             <option value="finished">
-              <translate translate-context="Content/Library/*">
+              <translate >
                 Finished
               </translate>
             </option>
           </select>
         </div>
         <div class="field">
-          <label for="uploads-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="uploads-ordering"><translate >Ordering</translate></label>
           <select
             id="uploads-ordering"
             v-model="ordering"
@@ -211,19 +211,19 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </select>
         </div>
         <div class="field">
-          <label for="uploads-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="uploads-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="uploads-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -254,47 +254,47 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Name
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Library
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Account
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Domain
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Visibility
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Import status
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Size
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Accessed date
             </translate>
           </th>
@@ -346,7 +346,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+              <translate >Local</translate>
             </a>
           </td>
           <td>
@@ -380,7 +380,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>
             <translate
               v-else
-              translate-context="*/*/*"
+
             >
               N/A
             </translate>
@@ -395,7 +395,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             />
             <translate
               v-else
-              translate-context="*/*/*"
+
             >
               N/A
             </translate>
@@ -414,7 +414,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 68a1b2302..41a0fd1aa 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -5,7 +5,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { ref, computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -51,12 +51,12 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['uploads_count', 'uploads']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'purge',
-    label: $pgettext('*/*/*/Verb', 'Purge'),
+    label: t('Purge'),
     isDangerous: true
   }
 ])
@@ -93,7 +93,7 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, username, bio…')
+  searchPlaceholder: t('Search by domain, username, bio…')
 }))
 </script>
 
@@ -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"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="accounts-search"><translate >Search</translate></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"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="accounts-ordering"><translate >Ordering</translate></label>
           <select
             id="accounts-ordering"
             v-model="ordering"
@@ -131,19 +131,19 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="accounts-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="accounts-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="accounts-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -168,32 +168,32 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Name
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Domain
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Uploads
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+            <translate >
               First seen
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/Table.Label/Noun">
+            <translate >
               Last seen
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/Table.Label/Short">
+            <translate >
               Under moderation rule
             </translate>
           </th>
@@ -225,7 +225,7 @@ const labels = computed(() => ({
               @click.prevent="addSearchToken('domain', scope.obj.domain)"
             >
               <i class="home icon" />
-              <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
+              <translate >Local account</translate>
             </a>
           </td>
           <td>
@@ -241,7 +241,7 @@ const labels = computed(() => ({
             />
           </td>
           <td>
-            <span v-if="scope.obj.instance_policy"><i class="shield icon" /> <translate translate-context="*/*/*">Yes</translate></span>
+            <span v-if="scope.obj.instance_policy"><i class="shield icon" /> <translate >Yes</translate></span>
           </td>
         </template>
       </action-table>
@@ -257,7 +257,7 @@ const labels = computed(() => ({
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index 49d6db93e..d7f6cb60f 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -5,7 +5,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { watchDebounced } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -44,25 +44,25 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['outbox_activities_count', 'received_messages']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const query = ref('')
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'purge',
-    label: $pgettext('*/*/*/Verb', 'Purge'),
+    label: t('Purge'),
     isDangerous: true
   },
   {
     name: 'allow_list_add',
-    label: $pgettext('Content/Moderation/Action/Verb', 'Add to allow-list'),
+    label: t('Add to allow-list'),
     filterCheckable: (obj: { allowed: boolean }) => {
       return !obj.allowed
     }
   },
   {
     name: 'allow_list_remove',
-    label: $pgettext('Content/Moderation/Action/Verb', 'Remove from allow-list'),
+    label: t('Remove from allow-list'),
     filterCheckable: (obj: { allowed: boolean }) => {
       return obj.allowed
     }
@@ -108,8 +108,8 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by name…'),
-  allowListTitle: $pgettext('Content/Moderation/Popup', 'This domain is present in your allow-list')
+  searchPlaceholder: t('Search by name…'),
+  allowListTitle: t('This domain is present in your allow-list')
 }))
 </script>
 
@@ -118,7 +118,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="domains-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="domains-search"><translate >Search</translate></label>
           <input
             id="domains-search"
             v-model="query"
@@ -131,31 +131,31 @@ const labels = computed(() => ({
           v-if="allowListEnabled"
           class="field"
         >
-          <label for="domains-allow-list"><translate translate-context="Content/Moderation/*/Adjective">Is present on allow-list</translate></label>
+          <label for="domains-allow-list"><translate >Is present on allow-list</translate></label>
           <select
             id="domains-allow-list"
             v-model="allowed"
             class="ui dropdown"
           >
             <option :value="null">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
             <option :value="true">
-              <translate translate-context="*/*/*">
+              <translate >
                 Yes
               </translate>
             </option>
             <option :value="false">
-              <translate translate-context="*/*/*">
+              <translate >
                 No
               </translate>
             </option>
           </select>
         </div>
         <div class="field">
-          <label for="domains-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="domains-ordering"><translate >Ordering</translate></label>
           <select
             id="domains-ordering"
             v-model="ordering"
@@ -171,19 +171,19 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="domains-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <label for="domains-ordering-direction"><translate >Ordering direction</translate></label>
           <select
             id="domains-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -209,27 +209,27 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Name
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Users
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/*/Noun">
+            <translate >
               Received messages
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+            <translate >
               First seen
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Moderation/Table.Label/Short">
+            <translate >
               Under moderation rule
             </translate>
           </th>
@@ -257,7 +257,7 @@ const labels = computed(() => ({
             <human-date :date="scope.obj.creation_date" />
           </td>
           <td>
-            <span v-if="scope.obj.instance_policy"><i class="shield icon" /> <translate translate-context="*/*/*">Yes</translate></span>
+            <span v-if="scope.obj.instance_policy"><i class="shield icon" /> <translate >Yes</translate></span>
           </td>
         </template>
       </action-table>
@@ -267,7 +267,7 @@ const labels = computed(() => ({
       >
         <div class="ui icon header">
           <i class="server icon" />
-          <translate translate-context="Content/Home/Placeholder">
+          <translate >
             No other pods found
           </translate>
         </div>
@@ -284,7 +284,7 @@ const labels = computed(() => ({
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >
           Showing results %{ start }-%{ end } on %{ total }
diff --git a/front/src/components/manage/moderation/InstancePolicyCard.vue b/front/src/components/manage/moderation/InstancePolicyCard.vue
index 56a3a6f6f..17536ba68 100644
--- a/front/src/components/manage/moderation/InstancePolicyCard.vue
+++ b/front/src/components/manage/moderation/InstancePolicyCard.vue
@@ -25,22 +25,22 @@ const summary = useMarkdown(() => props.object.summary)
       <i class="user icon" />{{ object.actor }}  &nbsp;
       <template v-if="object.is_active">
         <i class="play icon" />
-        <translate translate-context="*/*/*/State of feature">
+        <translate >
           Enabled
         </translate>
       </template>
       <template v-if="!object.is_active">
         <i class="pause icon" />
-        <translate translate-context="Content/Moderation/Card.List item">
+        <translate >
           Paused
         </translate>
       </template>
     </p>
     <div>
-      <p><strong><translate translate-context="Content/Moderation/Card.Title/Noun">Rule</translate></strong></p>
+      <p><strong><translate >Rule</translate></strong></p>
       <p v-if="object.block_all">
         <i class="ban icon" />
-        <translate translate-context="Content/Moderation/*/Verb">
+        <translate >
           Block everything
         </translate>
       </p>
@@ -54,7 +54,7 @@ const summary = useMarkdown(() => props.object.summary)
         >
           <i class="feed icon" />
           <div class="content">
-            <translate translate-context="Content/Moderation/*/Verb">
+            <translate >
               Mute activity
             </translate>
           </div>
@@ -65,7 +65,7 @@ const summary = useMarkdown(() => props.object.summary)
         >
           <i class="bell icon" />
           <div class="content">
-            <translate translate-context="Content/Moderation/*/Verb">
+            <translate >
               Mute notifications
             </translate>
           </div>
@@ -76,7 +76,7 @@ const summary = useMarkdown(() => props.object.summary)
         >
           <i class="file icon" />
           <div class="content">
-            <translate translate-context="Content/Moderation/*/Verb">
+            <translate >
               Reject media
             </translate>
           </div>
@@ -85,7 +85,7 @@ const summary = useMarkdown(() => props.object.summary)
     </div>
     <div v-if="summary">
       <div class="ui hidden divider" />
-      <p><strong><translate translate-context="Content/Moderation/*/Noun">Reason</translate></strong></p>
+      <p><strong><translate >Reason</translate></strong></p>
       <sanitized-html :html="summary" />
     </div>
     <div class="ui hidden divider" />
@@ -94,7 +94,7 @@ const summary = useMarkdown(() => props.object.summary)
       @click="emit('update')"
     >
       <i class="edit icon" />
-      <translate translate-context="Content/*/Button.Label/Verb">
+      <translate >
         Edit
       </translate>
     </button>
diff --git a/front/src/components/manage/moderation/InstancePolicyForm.vue b/front/src/components/manage/moderation/InstancePolicyForm.vue
index 0a1515d1f..1dc6fe416 100644
--- a/front/src/components/manage/moderation/InstancePolicyForm.vue
+++ b/front/src/components/manage/moderation/InstancePolicyForm.vue
@@ -3,7 +3,7 @@ import type { BackendError, InstancePolicy } from '~/types'
 
 import { computed, ref, reactive } from 'vue'
 import { whenever } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -24,23 +24,23 @@ const props = withDefaults(defineProps<Props>(), {
   object: null
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  summaryHelp: $pgettext('Content/Moderation/Help text', "Explain why you're applying this policy: this will help you remember why you added this rule. Depending on your pod configuration, this may be displayed publicly to help users understand the moderation rules in place."),
-  isActiveHelp: $pgettext('Content/Moderation/Help text', 'Use this setting to temporarily enable/disable the policy without completely removing it.'),
-  blockAllHelp: $pgettext('Content/Moderation/Help text', 'Block everything from this account or domain. This will prevent any interaction with the entity, and purge related content (uploads, libraries, follows, etc.)'),
+  summaryHelp: t("Explain why you're applying this policy: this will help you remember why you added this rule. Depending on your pod configuration, this may be displayed publicly to help users understand the moderation rules in place."),
+  isActiveHelp: t('Use this setting to temporarily enable/disable the policy without completely removing it.'),
+  blockAllHelp: t('Block everything from this account or domain. This will prevent any interaction with the entity, and purge related content (uploads, libraries, follows, etc.)'),
   silenceActivity: {
-    help: $pgettext('Content/Moderation/Help text', 'Hide account or domain content, except from followers.'),
-    label: $pgettext('Content/Moderation/*/Verb', 'Mute activity')
+    help: t('Hide account or domain content, except from followers.'),
+    label: t('Mute activity')
   },
   silenceNotifications: {
-    help: $pgettext('Content/Moderation/Help text', 'Prevent account or domain from triggering notifications, except from followers.'),
-    label: $pgettext('Content/Moderation/*/Verb', 'Mute notifications')
+    help: t('Prevent account or domain from triggering notifications, except from followers.'),
+    label: t('Mute notifications')
   },
   rejectMedia: {
-    help: $pgettext('Content/Moderation/Help text', 'Do not download any media file (audio, album cover, account avatar…) from this account or domain. This will purge existing content as well.'),
-    label: $pgettext('Content/Moderation/*/Verb', 'Reject media')
+    help: t('Do not download any media file (audio, album cover, account avatar…) from this account or domain. This will purge existing content as well.'),
+    label: t('Reject media')
   }
 }))
 
@@ -124,13 +124,13 @@ const remove = async () => {
     <h3 class="ui header">
       <translate
         v-if="object"
-        translate-context="Content/Moderation/Card.Title/Verb"
+
       >
         Edit moderation rule
       </translate>
       <translate
         v-else
-        translate-context="Content/Moderation/Card.Button.Label/Verb"
+
       >
         Add a new moderation rule
       </translate>
@@ -141,7 +141,7 @@ const remove = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/Moderation/Error message.Title">
+        <translate >
           Error while creating rule
         </translate>
       </h4>
@@ -168,11 +168,11 @@ const remove = async () => {
         <label for="policy-is-active">
           <translate
             v-if="current.isActive"
-            translate-context="*/*/*/State of feature"
+
           >Enabled</translate>
           <translate
             v-else
-            translate-context="*/*/*/State of feature"
+
           >Disabled</translate>
           <tooltip :content="labels.isActiveHelp" />
         </label>
@@ -180,7 +180,7 @@ const remove = async () => {
     </div>
     <div class="field">
       <label for="policy-summary">
-        <translate translate-context="Content/Moderation/*/Noun">Reason</translate>
+        <translate >Reason</translate>
         <tooltip :content="labels.summaryHelp" />
       </label>
       <textarea
@@ -198,13 +198,13 @@ const remove = async () => {
           type="checkbox"
         >
         <label for="policy-is-active">
-          <translate translate-context="Content/Moderation/*/Verb">Block everything</translate>
+          <translate >Block everything</translate>
           <tooltip :content="labels.blockAllHelp" />
         </label>
       </div>
     </div>
     <div class="ui horizontal divider">
-      <translate translate-context="Content/Moderation/Card.Title">
+      <translate >
         Or customize your rule
       </translate>
     </div>
@@ -231,7 +231,7 @@ const remove = async () => {
       class="ui basic left floated button"
       @click.prevent="emit('cancel')"
     >
-      <translate translate-context="*/*/Button.Label/Verb">
+      <translate >
         Cancel
       </translate>
     </button>
@@ -241,13 +241,13 @@ const remove = async () => {
     >
       <translate
         v-if="object"
-        translate-context="Content/Moderation/Card.Button.Label/Verb"
+
       >
         Update
       </translate>
       <translate
         v-else
-        translate-context="Content/Moderation/Card.Button.Label/Verb"
+
       >
         Create
       </translate>
@@ -257,26 +257,26 @@ const remove = async () => {
       class="ui right floated basic danger button"
       @confirm="remove"
     >
-      <translate translate-context="*/*/*/Verb">
+      <translate >
         Delete
       </translate>
       <template #modal-header>
         <p>
-          <translate translate-context="Popup/Moderation/Title">
+          <translate >
             Delete this moderation rule?
           </translate>
         </p>
       </template>
       <template #modal-content>
         <p>
-          <translate translate-context="Popup/Moderation/Paragraph">
+          <translate >
             This action is irreversible.
           </translate>
         </p>
       </template>
       <template #modal-confirm>
         <div>
-          <translate translate-context="Popup/Moderation/Button.Label/Verb">
+          <translate >
             Delete moderation rule
           </translate>
         </div>
diff --git a/front/src/components/manage/moderation/InstancePolicyModal.vue b/front/src/components/manage/moderation/InstancePolicyModal.vue
index 265971ef0..ed4276cc7 100644
--- a/front/src/components/manage/moderation/InstancePolicyModal.vue
+++ b/front/src/components/manage/moderation/InstancePolicyModal.vue
@@ -62,7 +62,7 @@ const fetchData = async () => {
   >
     <i class="shield icon" />&nbsp;
     <slot>
-      <translate translate-context="Content/Moderation/Button.Label">
+      <translate >
         Moderation rules…
       </translate>
     </slot>
@@ -73,7 +73,7 @@ const fetchData = async () => {
       <h4 class="header">
         <translate
           :translate-params="{obj: target}"
-          translate-context="Popup/Moderation/Title/Verb"
+
         >
           Manage moderation rules for %{ obj }
         </translate>
@@ -91,7 +91,7 @@ const fetchData = async () => {
           >
             <header class="ui header">
               <h3>
-                <translate translate-context="Content/Moderation/Card.Title">
+                <translate >
                   This entity is subject to specific moderation rules
                 </translate>
               </h3>
@@ -112,7 +112,7 @@ const fetchData = async () => {
       </div>
       <div class="actions">
         <button class="ui deny button">
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Close
           </translate>
         </button>
diff --git a/front/src/components/manage/moderation/NoteForm.vue b/front/src/components/manage/moderation/NoteForm.vue
index cfd36ec31..47997e46c 100644
--- a/front/src/components/manage/moderation/NoteForm.vue
+++ b/front/src/components/manage/moderation/NoteForm.vue
@@ -3,7 +3,7 @@ import type { Note, BackendError } from '~/types'
 
 import axios from 'axios'
 import { ref, computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface Events {
   (e: 'created', note: Note): void
@@ -16,9 +16,9 @@ interface Props {
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  summaryPlaceholder: $pgettext('Content/Moderation/Placeholder', 'Describe what actions have been taken, or any other related updates…')
+  summaryPlaceholder: t('Describe what actions have been taken, or any other related updates…')
 }))
 
 const summary = ref('')
@@ -56,7 +56,7 @@ const submit = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/Moderation/Error message.Title">
+        <translate >
           Error while submitting note
         </translate>
       </h4>
@@ -83,7 +83,7 @@ const submit = async () => {
       type="submit"
       :disabled="isLoading"
     >
-      <translate translate-context="Content/Moderation/Button.Label/Verb">
+      <translate >
         Add note
       </translate>
     </button>
diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
index d864c4943..e191a079e 100644
--- a/front/src/components/manage/moderation/NotesThread.vue
+++ b/front/src/components/manage/moderation/NotesThread.vue
@@ -64,12 +64,12 @@ const remove = async (note: Note) => {
             @confirm="remove(note)"
           >
             <i class="trash icon" />
-            <translate translate-context="*/*/*/Verb">
+            <translate >
               Delete
             </translate>
             <template #modal-header>
               <p>
-                <translate translate-context="Popup/Moderation/Title">
+                <translate >
                   Delete this note?
                 </translate>
               </p>
@@ -77,7 +77,7 @@ const remove = async (note: Note) => {
             <template #modal-content>
               <div>
                 <p>
-                  <translate translate-context="Content/Moderation/Paragraph">
+                  <translate >
                     The note will be removed. This action is irreversible.
                   </translate>
                 </p>
@@ -85,7 +85,7 @@ const remove = async (note: Note) => {
             </template>
             <template #modal-confirm>
               <p>
-                <translate translate-context="*/*/*/Verb">
+                <translate >
                   Delete
                 </translate>
               </p>
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index 42bfe108a..8a28d0e96 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -2,7 +2,7 @@
 import type { Report } from '~/types'
 
 import { ref, computed, reactive } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -56,7 +56,7 @@ const targetFields = computed(() => {
   })
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actions = computed(() => {
   if (!target.value) {
     return []
@@ -66,10 +66,10 @@ const actions = computed(() => {
   const deleteUrl = typeConfig.getDeleteUrl?.(target.value)
   return deleteUrl
     ? [{
-        label: $pgettext('Content/Moderation/Button/Verb', 'Delete reported object'),
-        modalHeader: $pgettext('Content/Moderation/Popup/Header', 'Delete reported object?'),
-        modalContent: $pgettext('Content/Moderation/Popup,Paragraph', 'This will delete the object associated with this report and mark the report as resolved. The deletion is irreversible.'),
-        modalConfirmLabel: $pgettext('*/*/*/Verb', 'Delete'),
+        label: t('Delete reported object'),
+        modalHeader: t('Delete reported object?'),
+        modalContent: t('This will delete the object associated with this report and mark the report as resolved. The deletion is irreversible.'),
+        modalConfirmLabel: t('Delete'),
         icon: 'x',
         iconColor: 'danger',
         show: (obj: Report) => { return !!obj.target },
@@ -142,7 +142,7 @@ const handleRemovedNote = (uuid: string) => {
       <h4 class="header">
         <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
           <translate
-            translate-context="Content/Moderation/Card/Short"
+
             :translate-params="{id: obj.uuid.substring(0, 8)}"
           >
             Report %{ id }
@@ -161,7 +161,7 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    <translate translate-context="Content/Moderation/*">
+                    <translate >
                       Submitted by
                     </translate>
                   </td>
@@ -179,7 +179,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="*/*/*">
+                    <translate >
                       Category
                     </translate>
                   </td>
@@ -195,7 +195,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Creation date
                     </translate>
                   </td>
@@ -214,26 +214,26 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    <translate translate-context="*/*/*">
+                    <translate >
                       Status
                     </translate>
                   </td>
                   <td v-if="obj.is_handled">
                     <span v-if="obj.is_handled">
                       <i class="success check icon" />
-                      <translate translate-context="Content/*/*/Short">Resolved</translate>
+                      <translate >Resolved</translate>
                     </span>
                   </td>
                   <td v-else>
                     <i class="danger x icon" />
-                    <translate translate-context="Content/*/*/Short">
+                    <translate >
                       Unresolved
                     </translate>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/Moderation/*">
+                    <translate >
                       Assigned to
                     </translate>
                   </td>
@@ -246,7 +246,7 @@ const handleRemovedNote = (uuid: string) => {
                     </div>
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -254,7 +254,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Resolution date
                     </translate>
                   </td>
@@ -266,7 +266,7 @@ const handleRemovedNote = (uuid: string) => {
                     />
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -274,7 +274,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Internal notes
                     </translate>
                   </td>
@@ -296,7 +296,7 @@ const handleRemovedNote = (uuid: string) => {
       <div class="ui stackable two column grid">
         <div class="column">
           <h3>
-            <translate translate-context="*/*/Field.Label/Noun">
+            <translate >
               Message
             </translate>
           </h3>
@@ -310,7 +310,7 @@ const handleRemovedNote = (uuid: string) => {
         </div>
         <aside class="column">
           <h3>
-            <translate translate-context="Content/*/*/Short">
+            <translate >
               Reported object
             </translate>
           </h3>
@@ -319,7 +319,7 @@ const handleRemovedNote = (uuid: string) => {
             role="alert"
             class="ui warning message"
           >
-            <translate translate-context="Content/Moderation/Message">
+            <translate >
               The object associated with this report was deleted.
             </translate>
           </div>
@@ -329,7 +329,7 @@ const handleRemovedNote = (uuid: string) => {
             :to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
           >
             <i class="eye icon" />
-            <translate translate-context="Content/Moderation/Link">
+            <translate >
               View public page
             </translate>
           </router-link>
@@ -339,7 +339,7 @@ const handleRemovedNote = (uuid: string) => {
             :to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
           >
             <i class="wrench icon" />
-            <translate translate-context="Content/Moderation/Link">
+            <translate >
               Open in moderation interface
             </translate>
           </router-link>
@@ -347,7 +347,7 @@ const handleRemovedNote = (uuid: string) => {
             <tbody>
               <tr v-if="target">
                 <td>
-                  <translate translate-context="Content/Track/Table.Label/Noun">
+                  <translate >
                     Type
                   </translate>
                 </td>
@@ -358,7 +358,7 @@ const handleRemovedNote = (uuid: string) => {
               </tr>
               <tr v-if="obj.target_owner && (!target || target.type !== 'account')">
                 <td>
-                  <translate translate-context="*/*/*">
+                  <translate >
                     Owner
                   </translate>
                 </td>
@@ -379,7 +379,7 @@ const handleRemovedNote = (uuid: string) => {
               </tr>
               <tr v-if="target && target.type === 'account'">
                 <td>
-                  <translate translate-context="*/*/*/Noun">
+                  <translate >
                     Account
                   </translate>
                 </td>
@@ -400,13 +400,13 @@ const handleRemovedNote = (uuid: string) => {
               </tr>
               <tr v-if="obj.target_state.is_local">
                 <td>
-                  <translate translate-context="Content/Moderation/*/Noun">
+                  <translate >
                     Domain
                   </translate>
                 </td>
                 <td colspan="2">
                   <i class="home icon" />
-                  <translate translate-context="Content/Moderation/*/Short, Noun">
+                  <translate >
                     Local
                   </translate>
                 </td>
@@ -414,7 +414,7 @@ const handleRemovedNote = (uuid: string) => {
               <tr v-else-if="obj.target_state.domain">
                 <td>
                   <router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
-                    <translate translate-context="Content/Moderation/*/Noun">
+                    <translate >
                       Domain
                     </translate>
                   </router-link>
@@ -445,7 +445,7 @@ const handleRemovedNote = (uuid: string) => {
                   v-else
                   colspan="2"
                 >
-                  <translate translate-context="*/*/*">
+                  <translate >
                     N/A
                   </translate>
                 </td>
@@ -457,7 +457,7 @@ const handleRemovedNote = (uuid: string) => {
       <div class="ui stackable two column grid">
         <div class="column">
           <h3>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Internal notes
             </translate>
           </h3>
@@ -472,7 +472,7 @@ const handleRemovedNote = (uuid: string) => {
         </div>
         <div class="column">
           <h3>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Actions
             </translate>
           </h3>
@@ -483,7 +483,7 @@ const handleRemovedNote = (uuid: string) => {
               @click="resolveReport(true)"
             >
               <i class="success check icon" />&nbsp;
-              <translate translate-context="Content/*/Button.Label/Verb">
+              <translate >
                 Resolve
               </translate>
             </button>
@@ -493,7 +493,7 @@ const handleRemovedNote = (uuid: string) => {
               @click="resolveReport(false)"
             >
               <i class="warning redo icon" />&nbsp;
-              <translate translate-context="Content/*/Button.Label">
+              <translate >
                 Unresolve
               </translate>
             </button>
diff --git a/front/src/components/manage/moderation/UserRequestCard.vue b/front/src/components/manage/moderation/UserRequestCard.vue
index ad253ccc4..abe917495 100644
--- a/front/src/components/manage/moderation/UserRequestCard.vue
+++ b/front/src/components/manage/moderation/UserRequestCard.vue
@@ -68,7 +68,7 @@ const handleRemovedNote = (uuid: string) => {
       <h4 class="header">
         <router-link :to="{name: 'manage.moderation.requests.detail', params: {id: obj.uuid}}">
           <translate
-            translate-context="Content/Moderation/Card/Short"
+
             :translate-params="{id: obj.uuid.substring(0, 8)}"
           >
             Request %{ id }
@@ -87,7 +87,7 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    <translate translate-context="Content/Moderation/*">
+                    <translate >
                       Submitted by
                     </translate>
                   </td>
@@ -100,7 +100,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Creation date
                     </translate>
                   </td>
@@ -119,26 +119,26 @@ const handleRemovedNote = (uuid: string) => {
               <tbody>
                 <tr>
                   <td>
-                    <translate translate-context="*/*/*">
+                    <translate >
                       Status
                     </translate>
                   </td>
                   <td>
                     <template v-if="obj.status === 'pending'">
                       <i class="warning hourglass icon" />
-                      <translate translate-context="Content/Library/*/Short">
+                      <translate >
                         Pending
                       </translate>
                     </template>
                     <template v-else-if="obj.status === 'refused'">
                       <i class="danger x icon" />
-                      <translate translate-context="Content/*/*/Short">
+                      <translate >
                         Refused
                       </translate>
                     </template>
                     <template v-else-if="obj.status === 'approved'">
                       <i class="success check icon" />
-                      <translate translate-context="Content/*/*/Short">
+                      <translate >
                         Approved
                       </translate>
                     </template>
@@ -146,7 +146,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/Moderation/*">
+                    <translate >
                       Assigned to
                     </translate>
                   </td>
@@ -159,7 +159,7 @@ const handleRemovedNote = (uuid: string) => {
                     </div>
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -167,7 +167,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Resolution date
                     </translate>
                   </td>
@@ -179,7 +179,7 @@ const handleRemovedNote = (uuid: string) => {
                     />
                     <translate
                       v-else
-                      translate-context="*/*/*"
+
                     >
                       N/A
                     </translate>
@@ -187,7 +187,7 @@ const handleRemovedNote = (uuid: string) => {
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">
+                    <translate >
                       Internal notes
                     </translate>
                   </td>
@@ -209,12 +209,12 @@ const handleRemovedNote = (uuid: string) => {
       <div class="ui stackable two column grid">
         <div class="column">
           <h3>
-            <translate translate-context="*/*/Field.Label/Noun">
+            <translate >
               Message
             </translate>
           </h3>
           <p>
-            <translate translate-context="Content/Moderation/Paragraph">
+            <translate >
               This user wants to sign-up on your pod.
             </translate>
           </p>
@@ -230,7 +230,7 @@ const handleRemovedNote = (uuid: string) => {
               </p>
               <translate
                 v-else
-                translate-context="*/*/*"
+
               >
                 N/A
               </translate>
@@ -241,7 +241,7 @@ const handleRemovedNote = (uuid: string) => {
         <aside class="column">
           <div v-if="obj.status != 'approved'">
             <h3>
-              <translate translate-context="Content/*/*/Noun">
+              <translate >
                 Actions
               </translate>
             </h3>
@@ -252,7 +252,7 @@ const handleRemovedNote = (uuid: string) => {
                 @click="approve(true)"
               >
                 <i class="success check icon" />&nbsp;
-                <translate translate-context="Content/*/Button.Label/Verb">
+                <translate >
                   Approve
                 </translate>
               </button>
@@ -262,14 +262,14 @@ const handleRemovedNote = (uuid: string) => {
                 @click="approve(false)"
               >
                 <i class="danger x icon" />&nbsp;
-                <translate translate-context="Content/*/Button.Label">
+                <translate >
                   Refuse
                 </translate>
               </button>
             </div>
           </div>
           <h3>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Internal notes
             </translate>
           </h3>
diff --git a/front/src/components/manage/users/InvitationForm.vue b/front/src/components/manage/users/InvitationForm.vue
index 9871e2310..028c37435 100644
--- a/front/src/components/manage/users/InvitationForm.vue
+++ b/front/src/components/manage/users/InvitationForm.vue
@@ -2,7 +2,7 @@
 import type { BackendError } from '~/types'
 
 import { computed, ref, reactive } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useStore } from '~/store'
 
@@ -12,12 +12,12 @@ interface Invitation {
   code: string
 }
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const router = useRouter()
 const store = useStore()
 
 const labels = computed(() => ({
-  placeholder: $pgettext('Content/Admin/Input.Placeholder', 'Leave empty for a random code')
+  placeholder: t('Leave empty for a random code')
 }))
 
 const invitations = reactive([] as Invitation[])
@@ -56,7 +56,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
         class="ui negative message"
       >
         <h4 class="header">
-          <translate translate-context="Content/Admin/Error message.Title">
+          <translate >
             Error while creating invitation
           </translate>
         </h4>
@@ -71,7 +71,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
       </div>
       <div class="inline fields">
         <div class="ui field">
-          <label for="invitation-code"><translate translate-context="Content/*/Input.Label">Invitation code</translate></label>
+          <label for="invitation-code"><translate >Invitation code</translate></label>
           <input
             v-model="code"
             for="invitation-code"
@@ -86,7 +86,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
             :disabled="isLoading"
             type="submit"
           >
-            <translate translate-context="Content/Admin/Button.Label/Verb">
+            <translate >
               Get a new invitation
             </translate>
           </button>
@@ -99,12 +99,12 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
         <thead>
           <tr>
             <th>
-              <translate translate-context="Content/Admin/Table.Label/Noun">
+              <translate >
                 Code
               </translate>
             </th>
             <th>
-              <translate translate-context="Content/Admin/Table.Label/Noun">
+              <translate >
                 Share link
               </translate>
             </th>
@@ -129,7 +129,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
         class="ui basic button"
         @click="invitations = []"
       >
-        <translate translate-context="Content/Library/Button.Label">
+        <translate >
           Clear
         </translate>
       </button>
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index 81d93d6a6..bfe2710e2 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/front/src/components/manage/users/InvitationsTable.vue
@@ -5,7 +5,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { watchDebounced } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import moment from 'moment'
 import axios from 'axios'
@@ -43,12 +43,12 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 
 const query = ref('')
 const isOpen = ref(false)
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
+    label: t('Delete'),
     filterCheckable: (obj: { users: unknown[], expiration_date: Date }) => {
       return obj.users.length === 0 && moment().isBefore(obj.expiration_date)
     }
@@ -89,7 +89,7 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Admin/Input.Placeholder/Verb', 'Search by username, e-mail address, code…')
+  searchPlaceholder: t('Search by username, e-mail address, code…')
 }))
 </script>
 
@@ -98,7 +98,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="invitations-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="invitations-search"><translate >Search</translate></label>
           <input
             id="invitations-search"
             v-model="query"
@@ -108,7 +108,7 @@ const labels = computed(() => ({
           >
         </div>
         <div class="field">
-          <label for="invitations-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="invitations-ordering"><translate >Ordering</translate></label>
           <select
             id="invitations-ordering"
             v-model="ordering"
@@ -124,24 +124,24 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="invitations-status"><translate translate-context="*/*/*">Status</translate></label>
+          <label for="invitations-status"><translate >Status</translate></label>
           <select
             id="invitations-status"
             v-model="isOpen"
             class="ui dropdown"
           >
             <option :value="null">
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
             <option :value="true">
-              <translate translate-context="Content/Admin/Dropdown/Adjective">
+              <translate >
                 Open
               </translate>
             </option>
             <option :value="false">
-              <translate translate-context="Content/Admin/Dropdown/Adjective">
+              <translate >
                 Expired/used
               </translate>
             </option>
@@ -166,32 +166,32 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Owner
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Admin/Table.Label/Noun">
+            <translate >
               User
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Status
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Creation date
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Admin/Table.Label/Noun">
+            <translate >
               Expiration date
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Admin/Table.Label/Noun">
+            <translate >
               Code
             </translate>
           </th>
@@ -213,15 +213,15 @@ const labels = computed(() => ({
             <span
               v-if="scope.obj.users.length > 0"
               class="ui success basic label"
-            ><translate translate-context="Content/Admin/Table">Used</translate></span>
+            ><translate >Used</translate></span>
             <span
               v-else-if="moment().isAfter(scope.obj.expiration_date)"
               class="ui danger basic label"
-            ><translate translate-context="Content/Admin/Table">Expired</translate></span>
+            ><translate >Expired</translate></span>
             <span
               v-else
               class="ui basic label"
-            ><translate translate-context="Content/Admin/Table">Not used</translate></span>
+            ><translate >Not used</translate></span>
           </td>
           <td>
             <human-date :date="scope.obj.creation_date" />
@@ -246,7 +246,7 @@ const labels = computed(() => ({
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           translate-plural="Showing results %{ start } to %{ end } from %{ total }"
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
           :translate-n="result.count"
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index 7aad1c76d..875c00033 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/front/src/components/manage/users/UsersTable.vue
@@ -5,7 +5,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { watchDebounced } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -44,19 +44,19 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 const permissions = computed(() => [
   {
     code: 'library',
-    label: $pgettext('*/*/*/Noun', 'Library')
+    label: t('Library')
   },
   {
     code: 'moderation',
-    label: $pgettext('*/Moderation/*', 'Moderation')
+    label: t('Moderation')
   },
   {
     code: 'settings',
-    label: $pgettext('*/*/*/Noun', 'Settings')
+    label: t('Settings')
   }
 ])
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 
 const isLoading = ref(false)
@@ -91,7 +91,7 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by username, e-mail address, name…')
+  searchPlaceholder: t('Search by username, e-mail address, name…')
 }))
 </script>
 
@@ -100,7 +100,7 @@ const labels = computed(() => ({
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="users-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <label for="users-search"><translate >Search</translate></label>
           <input
             id="users-search"
             v-model="query"
@@ -110,7 +110,7 @@ const labels = computed(() => ({
           >
         </div>
         <div class="field">
-          <label for="users-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <label for="users-ordering"><translate >Ordering</translate></label>
           <select
             id="users-ordering"
             v-model="ordering"
@@ -126,19 +126,19 @@ const labels = computed(() => ({
           </select>
         </div>
         <div class="field">
-          <label for="users-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate></label>
+          <label for="users-ordering-direction"><translate >Order</translate></label>
           <select
             id="users-ordering-direction"
             v-model="orderingDirection"
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -163,37 +163,37 @@ const labels = computed(() => ({
       >
         <template #header-cells>
           <th>
-            <translate translate-context="Content/*/*">
+            <translate >
               Username
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Email
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Admin/Table.Label/Short, Noun">
+            <translate >
               Account status
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Admin/Table.Label/Short, Noun (Value is a date)">
+            <translate >
               Sign-up
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Profile/Table.Label/Short, Noun (Value is a date)">
+            <translate >
               Last activity
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Permissions
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Status
             </translate>
           </th>
@@ -222,11 +222,11 @@ const labels = computed(() => ({
             <span
               v-if="scope.obj.is_active"
               class="ui basic success label"
-            ><translate translate-context="Content/Admin/Table">Active</translate></span>
+            ><translate >Active</translate></span>
             <span
               v-else
               class="ui basic label"
-            ><translate translate-context="Content/Admin/Table">Inactive</translate></span>
+            ><translate >Inactive</translate></span>
           </td>
           <td>
             <human-date :date="scope.obj.date_joined" />
@@ -237,7 +237,7 @@ const labels = computed(() => ({
               :date="scope.obj.last_activity"
             />
             <template v-else>
-              <translate translate-context="*/*/*">
+              <translate >
                 N/A
               </translate>
             </template>
@@ -257,15 +257,15 @@ const labels = computed(() => ({
             <span
               v-if="scope.obj.is_superuser"
               class="ui pink label"
-            ><translate translate-context="Content/Admin/Table.User role">Admin</translate></span>
+            ><translate >Admin</translate></span>
             <span
               v-else-if="scope.obj.is_staff"
               class="ui purple label"
-            ><translate translate-context="Content/Profile/User role">Staff member</translate></span>
+            ><translate >Staff member</translate></span>
             <span
               v-else
               class="ui basic label"
-            ><translate translate-context="Content/Admin/Table, User role">Regular user</translate></span>
+            ><translate >Regular user</translate></span>
           </td>
         </template>
       </action-table>
@@ -281,7 +281,7 @@ const labels = computed(() => ({
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           translate-plural="Showing results %{ start } to %{ end } from %{ total }"
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
           :translate-n="result.count"
diff --git a/front/src/components/moderation/FilterModal.vue b/front/src/components/moderation/FilterModal.vue
index 6e326d21e..f6f595111 100644
--- a/front/src/components/moderation/FilterModal.vue
+++ b/front/src/components/moderation/FilterModal.vue
@@ -4,14 +4,14 @@ import type { BackendError } from '~/types'
 import axios from 'axios'
 
 import { computed, ref } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import SemanticModal from '~/components/semantic/Modal.vue'
 import useLogger from '~/composables/useLogger'
 
 const logger = useLogger()
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const store = useStore()
 const show = computed({
@@ -45,7 +45,7 @@ const hide = async () => {
     store.state.moderation.lastUpdate = new Date()
     store.commit('moderation/contentFilter', response.data)
     store.commit('ui/addMessage', {
-      content: $pgettext('*/Moderation/Message', 'Content filter successfully added'),
+      content: t('Content filter successfully added'),
       date: new Date()
     })
   } catch (error) {
@@ -62,7 +62,7 @@ const hide = async () => {
     <h4 class="header">
       <translate
         v-if="type === 'artist'"
-        translate-context="Popup/Moderation/Title/Verb"
+
         :translate-params="{name: target?.name}"
       >
         Do you want to hide content from artist "%{ name }"?
@@ -76,7 +76,7 @@ const hide = async () => {
           class="ui negative message"
         >
           <h4 class="header">
-            <translate translate-context="Popup/Moderation/Error message">
+            <translate >
               Error while creating filter
             </translate>
           </h4>
@@ -91,34 +91,34 @@ const hide = async () => {
         </div>
         <template v-if="type === 'artist'">
           <p>
-            <translate translate-context="Popup/Moderation/Paragraph">
+            <translate >
               You will not see tracks, albums and user activity linked to this artist any more:
             </translate>
           </p>
           <ul>
             <li>
-              <translate translate-context="Popup/Moderation/List item">
+              <translate >
                 In other users favorites and listening history
               </translate>
             </li>
             <li>
-              <translate translate-context="Popup/Moderation/List item">
+              <translate >
                 In "Recently added" widget
               </translate>
             </li>
             <li>
-              <translate translate-context="Popup/Moderation/List item">
+              <translate >
                 In artists and album listings
               </translate>
             </li>
             <li>
-              <translate translate-context="Popup/Moderation/List item">
+              <translate >
                 In radio suggestions
               </translate>
             </li>
           </ul>
           <p>
-            <translate translate-context="Popup/Moderation/Paragraph">
+            <translate >
               You can manage and update your filters any time from your account settings.
             </translate>
           </p>
@@ -127,7 +127,7 @@ const hide = async () => {
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Cancel
         </translate>
       </button>
@@ -135,7 +135,7 @@ const hide = async () => {
         :class="['ui', 'success', {loading: isLoading}, 'button']"
         @click="hide"
       >
-        <translate translate-context="Popup/*/Button.Label">
+        <translate >
           Hide content
         </translate>
       </button>
diff --git a/front/src/components/moderation/ReportCategoryDropdown.vue b/front/src/components/moderation/ReportCategoryDropdown.vue
index 0cbb6ba7a..9752128fe 100644
--- a/front/src/components/moderation/ReportCategoryDropdown.vue
+++ b/front/src/components/moderation/ReportCategoryDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { useVModel } from '@vueuse/core'
 
@@ -28,14 +28,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const value = useVModel(props, 'modelValue', emit)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const sharedLabels = useSharedLabels()
 const sharedChoices = sharedLabels.fields.report_type.choices
 
 const allCategories = computed(() => {
   const res = []
   if (props.all) {
-    res.push({ value: '', label: $pgettext('Content/*/Dropdown', 'All') })
+    res.push({ value: '', label: t('All') })
   }
 
   const choices = props.restrictTo.length === 0
@@ -59,7 +59,7 @@ const allCategories = computed(() => {
 
 <template>
   <div>
-    <label v-if="label"><translate translate-context="*/*/*">Category</translate></label>
+    <label v-if="label"><translate >Category</translate></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 d4ef9a8da..e74ac8f16 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -6,7 +6,7 @@ import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdo
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref, watchEffect } from 'vue'
 import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 interface ReportType {
   anonymous: boolean
@@ -63,7 +63,7 @@ const show = computed({
 const isLoading = ref(false)
 
 // TODO (wvffle): MOVE ALL use*() METHODS SOMEWHERE TO THE TOP
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const submit = async () => {
   isLoading.value = true
@@ -84,7 +84,7 @@ const submit = async () => {
 
     store.commit('moderation/contentFilter', response.data)
     store.commit('ui/addMessage', {
-      content: $pgettext('*/Moderation/Message', 'Report successfully submitted, thank you'),
+      content: t('Report successfully submitted, thank you'),
       date: new Date()
     })
 
@@ -110,7 +110,7 @@ watchEffect(async () => {
     reportTypes.value = response.data.metadata.reportTypes ?? []
   } catch (error) {
     store.commit('ui/addMessage', {
-      content: $pgettext('*/Moderation/Message', 'Cannot fetch Node Info: %{ error }', { error: `${error}` }),
+      content: t('Cannot fetch Node Info: %{ error }', { error: `${error}` }),
       date: new Date()
     })
   }
@@ -125,7 +125,7 @@ watchEffect(async () => {
       v-if="target"
       class="ui header"
     >
-      <translate translate-context="Popup/Moderation/Title/Verb">
+      <translate >
         Do you want to report this object?
       </translate>
       <div class="ui sub header">
@@ -140,7 +140,7 @@ watchEffect(async () => {
           class="ui negative message"
         >
           <h4 class="header">
-            <translate translate-context="Popup/Moderation/Error message">
+            <translate >
               Error while submitting report
             </translate>
           </h4>
@@ -155,7 +155,7 @@ watchEffect(async () => {
         </div>
       </div>
       <p>
-        <translate translate-context="*/Moderation/Popup,Paragraph">
+        <translate >
           Use this form to submit a report to our moderation team.
         </translate>
       </p>
@@ -179,7 +179,7 @@ watchEffect(async () => {
             class="ui eight wide required field"
           >
             <label for="report-submitter-email">
-              <translate translate-context="Content/*/*/Noun">Email</translate>
+              <translate >Email</translate>
             </label>
             <input
               id="report-submitter-email"
@@ -189,7 +189,7 @@ watchEffect(async () => {
               required
             >
             <p>
-              <translate translate-context="*/*/Field,Help">
+              <translate >
                 We'll use this e-mail address if we need to contact you regarding this report.
               </translate>
             </p>
@@ -197,10 +197,10 @@ watchEffect(async () => {
         </div>
         <div class="ui field">
           <label for="report-summary">
-            <translate translate-context="*/*/Field.Label/Noun">Message</translate>
+            <translate >Message</translate>
           </label>
           <p>
-            <translate translate-context="*/*/Field,Help">
+            <translate >
               Use this field to provide additional context to the moderator that will handle your report.
             </translate>
           </p>
@@ -224,11 +224,11 @@ watchEffect(async () => {
               <strong>
                 <translate
                   :translate-params="{domain: targetDomain}"
-                  translate-context="*/*/Field.Label/Verb"
+
                 >Forward to %{ domain} </translate>
               </strong>
               <p>
-                <translate translate-context="*/*/Field,Help">Forward an anonymized copy of your report to the server hosting this element.</translate>
+                <translate >Forward an anonymized copy of your report to the server hosting this element.</translate>
               </p>
             </label>
           </div>
@@ -245,7 +245,7 @@ watchEffect(async () => {
         class="ui warning message"
       >
         <h4 class="header">
-          <translate translate-context="Popup/Moderation/Error message">
+          <translate >
             Anonymous reports are disabled, please sign-in to submit a report.
           </translate>
         </h4>
@@ -253,7 +253,7 @@ watchEffect(async () => {
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Cancel
         </translate>
       </button>
@@ -263,7 +263,7 @@ watchEffect(async () => {
         type="submit"
         form="report-form"
       >
-        <translate translate-context="Popup/*/Button.Label">
+        <translate >
           Submit report
         </translate>
       </button>
diff --git a/front/src/components/notifications/NotificationRow.vue b/front/src/components/notifications/NotificationRow.vue
index 2c1394176..f050c6752 100644
--- a/front/src/components/notifications/NotificationRow.vue
+++ b/front/src/components/notifications/NotificationRow.vue
@@ -2,7 +2,7 @@
 import type { Notification, LibraryFollow } from '~/types'
 
 import { computed, ref, watchEffect } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -13,16 +13,16 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext, $gettext } = useGettext()
+const { t } = useI18n()
 const store = useStore()
 
 const labels = computed(() => ({
-  libraryFollowMessage: $pgettext('Content/Notifications/Paragraph', '%{ username } followed your library "%{ library }"'),
-  libraryAcceptFollowMessage: $pgettext('Content/Notifications/Paragraph', '%{ username } accepted your follow on library "%{ library }"'),
-  libraryRejectMessage: $pgettext('Content/Notifications/Paragraph', 'You rejected %{ username }&#39;s request to follow "%{ library }"'),
-  libraryPendingFollowMessage: $pgettext('Content/Notifications/Paragraph', '%{ username } wants to follow your library "%{ library }"'),
-  markRead: $pgettext('Content/Notifications/Button.Tooltip/Verb', 'Mark as read'),
-  markUnread: $pgettext('Content/Notifications/Button.Tooltip/Verb', 'Mark as unread')
+  libraryFollowMessage: t('%{ username } followed your library "%{ library }"'),
+  libraryAcceptFollowMessage: t('%{ username } accepted your follow on library "%{ library }"'),
+  libraryRejectMessage: t('You rejected %{ username }&#39;s request to follow "%{ library }"'),
+  libraryPendingFollowMessage: t('%{ username } wants to follow your library "%{ library }"'),
+  markRead: t('Mark as read'),
+  markUnread: t('Mark as unread')
 }))
 
 const item = ref(props.initialItem)
@@ -39,30 +39,30 @@ const notificationData = computed(() => {
       if (activity.related_object?.approved === null) {
         return {
           detailUrl,
-          message: $gettext(labels.value.libraryPendingFollowMessage, { username: username.value, library: activity.object.name }),
+          message: t(labels.value.libraryPendingFollowMessage, { username: username.value, library: activity.object.name }),
           acceptFollow: {
             buttonClass: 'success',
             icon: 'check',
-            label: $pgettext('Content/*/Button.Label/Verb', 'Approve'),
+            label: t('Approve'),
             handler: () => approveLibraryFollow(activity.related_object)
           },
           rejectFollow: {
             buttonClass: 'danger',
             icon: 'x',
-            label: $pgettext('Content/*/Button.Label/Verb', 'Reject'),
+            label: t('Reject'),
             handler: () => rejectLibraryFollow(activity.related_object)
           }
         }
       } else if (activity.related_object?.approved) {
         return {
           detailUrl,
-          message: $gettext(labels.value.libraryFollowMessage, { username: username.value, library: activity.object.name })
+          message: t(labels.value.libraryFollowMessage, { username: username.value, library: activity.object.name })
         }
       }
 
       return {
         detailUrl,
-        message: $gettext(labels.value.libraryRejectMessage, { username: username.value, library: activity.object.name })
+        message: t(labels.value.libraryRejectMessage, { username: username.value, library: activity.object.name })
       }
     }
   }
@@ -71,7 +71,7 @@ const notificationData = computed(() => {
     if (activity.object?.type === 'federation.LibraryFollow') {
       return {
         detailUrl: { name: 'content.remote.index' },
-        message: $gettext(labels.value.libraryAcceptFollowMessage, { username: username.value, library: activity.related_object.name })
+        message: t(labels.value.libraryAcceptFollowMessage, { username: username.value, library: activity.related_object.name })
       }
     }
   }
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 4007fc767..8c0d3cb14 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -62,7 +62,7 @@ const images = computed(() => {
     </div>
     <div class="extra content">
       <translate
-        translate-context="*/*/*"
+
         :translate-params="{count: playlist.tracks_count}"
         :translate-n="playlist.tracks_count"
         translate-plural="%{ count } tracks"
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index 03742f0ae..7012dc5d5 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Playlist, PlaylistTrack, BackendError, APIErrorResponse } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useVModels } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
@@ -49,9 +49,9 @@ const tracks = computed({
   }
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  copyTitle: $pgettext('Content/Playlist/Button.Tooltip/Verb', 'Copy the current queue to this playlist')
+  copyTitle: t('Copy the current queue to this playlist')
 }))
 
 const isLoading = ref(false)
@@ -167,20 +167,20 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       :title="undefined"
     />
     <h3 class="ui top attached header">
-      <translate translate-context="Content/Playlist/Title">
+      <translate >
         Playlist editor
       </translate>
     </h3>
     <div class="ui attached segment">
       <template v-if="status === 'loading'">
         <div class="ui active tiny inline loader" />
-        <translate translate-context="Content/Playlist/Paragraph">
+        <translate >
           Syncing changes to server…
         </translate>
       </template>
       <template v-else-if="status === 'errored'">
         <i class="dangerclose icon" />
-        <translate translate-context="Content/Playlist/Error message.Title">
+        <translate >
           An error occurred while saving your changes
         </translate>
         <div
@@ -205,7 +205,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       >
         <p
           v-translate="{playlist: playlist?.name}"
-          translate-context="Content/Playlist/Paragraph"
+
         >
           Some tracks in your queue are already in this playlist:
         </p>
@@ -222,13 +222,13 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
           class="ui small success button"
           @click="insertMany(queueTracks, true)"
         >
-          <translate translate-context="*/Playlist/Button.Label/Verb">
+          <translate >
             Add anyways
           </translate>
         </button>
       </div>
       <template v-else-if="status === 'saved'">
-        <i class="success check icon" /> <translate translate-context="Content/Playlist/Paragraph">
+        <i class="success check icon" /> <translate >
           Changes synced with server
         </translate>
       </template>
@@ -242,7 +242,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       >
         <i class="plus icon" />
         <translate
-          translate-context="Content/Playlist/Button.Label/Verb"
+
           translate-plural="Insert from queue (%{ count } tracks)"
           :translate-n="queueTracks.length"
           :translate-params="{count: queueTracks.length}"
@@ -256,13 +256,13 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
         class="ui labeled right floated danger icon button"
         :action="clearPlaylist"
       >
-        <i class="eraser icon" /> <translate translate-context="*/Playlist/Button.Label/Verb">
+        <i class="eraser icon" /> <translate >
           Clear playlist
         </translate>
         <template #modal-header>
           <p
             v-translate="{playlist: playlist?.name}"
-            translate-context="Popup/Playlist/Title"
+
             :translate-params="{playlist: playlist?.name}"
           >
             Do you want to clear the playlist "%{ playlist }"?
@@ -270,14 +270,14 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
         </template>
         <template #modal-content>
           <p>
-            <translate translate-context="Popup/Playlist/Paragraph">
+            <translate >
               This will remove all tracks from this playlist and cannot be undone.
             </translate>
           </p>
         </template>
         <template #modal-confirm>
           <div>
-            <translate translate-context="*/Playlist/Button.Label/Verb">
+            <translate >
               Clear playlist
             </translate>
           </div>
@@ -286,7 +286,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       <div class="ui hidden divider" />
       <template v-if="tracks.length > 0">
         <p>
-          <translate translate-context="Content/Playlist/Paragraph/Call to action">
+          <translate >
             Drag and drop rows to reorder tracks in the playlist
           </translate>
         </p>
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 9635b0e4d..29c9ca196 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -3,7 +3,7 @@ import type { Playlist, PrivacyLevel, BackendError } from '~/types'
 
 import { useVModels, useCurrentElement } from '@vueuse/core'
 import { ref, computed, onMounted, nextTick } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -40,9 +40,9 @@ const store = useStore()
 const name = ref(playlist.value?.name ?? '')
 const privacyLevel = ref(playlist.value?.privacy_level ?? store.state.auth.profile?.privacy_level ?? 'me')
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  placeholder: $pgettext('Content/Playlist/Input.Placeholder', 'My awesome playlist')
+  placeholder: t('My awesome playlist')
 }))
 
 const sharedLabels = useSharedLabels()
@@ -111,7 +111,7 @@ const submit = async () => {
       v-if="title"
       class="ui header"
     >
-      <translate translate-context="Popup/Playlist/Title/Verb">
+      <translate >
         Create a new playlist
       </translate>
     </h4>
@@ -121,12 +121,12 @@ const submit = async () => {
     >
       <h4 class="header">
         <template v-if="playlist">
-          <translate translate-context="Content/Playlist/Message">
+          <translate >
             Playlist updated
           </translate>
         </template>
         <template v-else>
-          <translate translate-context="Content/Playlist/Message">
+          <translate >
             Playlist created
           </translate>
         </template>
@@ -138,7 +138,7 @@ const submit = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/Playlist/Error message.Title">
+        <translate >
           The playlist could not be created
         </translate>
       </h4>
@@ -153,7 +153,7 @@ const submit = async () => {
     </div>
     <div class="three fields">
       <div class="field">
-        <label for="playlist-name"><translate translate-context="Content/Playlist/Input.Label">Playlist name</translate></label>
+        <label for="playlist-name"><translate >Playlist name</translate></label>
         <input
           id="playlist-name"
           v-model="name"
@@ -164,7 +164,7 @@ const submit = async () => {
         >
       </div>
       <div class="field">
-        <label for="playlist-visibility"><translate translate-context="Content/Playlist/Dropdown.Label">Playlist visibility</translate></label>
+        <label for="playlist-visibility"><translate >Playlist visibility</translate></label>
         <select
           id="playlist-visibility"
           v-model="privacyLevel"
@@ -186,12 +186,12 @@ const submit = async () => {
           type="submit"
         >
           <template v-if="playlist">
-            <translate translate-context="Content/Playlist/Button.Label/Verb">
+            <translate >
               Update playlist
             </translate>
           </template>
           <template v-else>
-            <translate translate-context="Content/Playlist/Button.Label/Verb">
+            <translate >
               Create playlist
             </translate>
           </template>
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 538b29d7c..72c154a8f 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -3,7 +3,7 @@ import type { BackendError, Playlist, APIErrorResponse } from '~/types'
 
 import { filter, sortBy, flow } from 'lodash-es'
 import axios from 'axios'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import PlaylistForm from '~/components/playlists/Form.vue'
 import useLogger from '~/composables/useLogger'
@@ -25,10 +25,10 @@ router.beforeEach(() => {
 const playlists = computed(() => store.state.playlists.playlists)
 const track = computed(() => store.state.playlists.modalTrack)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  addToPlaylist: $pgettext('Popup/Playlist/Table.Button.Tooltip/Verb', 'Add to this playlist'),
-  filterPlaylistField: $pgettext('Popup/Playlist/Form/Placeholder', 'Enter playlist name')
+  addToPlaylist: t('Add to this playlist'),
+  filterPlaylistField: t('Enter playlist name')
 }))
 
 const playlistNameFilter = ref('')
@@ -85,13 +85,13 @@ store.dispatch('playlists/fetchOwn')
     <h4 class="header">
       <template v-if="track">
         <h2 class="ui header">
-          <translate translate-context="Popup/Playlist/Title/Verb">
+          <translate >
             Add to playlist
           </translate>
           <div
             v-translate="{artist: track.artist?.name, title: track.title}"
             class="ui sub header"
-            translate-context="Popup/Playlist/Paragraph"
+
             :translate-params="{artist: track.artist?.name, title: track.title}"
           >
             "%{ title }", by %{ artist }
@@ -100,7 +100,7 @@ store.dispatch('playlists/fetchOwn')
       </template>
       <translate
         v-else
-        translate-context="Popup/Playlist/Title/Verb"
+
       >
         Manage playlists
       </translate>
@@ -119,7 +119,7 @@ store.dispatch('playlists/fetchOwn')
         >
           <p
             v-translate="{track: track?.title, playlist: duplicateTrackAddInfo.playlist_name}"
-            translate-context="Popup/Playlist/Paragraph"
+
             :translate-params="{track: track?.title, playlist: duplicateTrackAddInfo.playlist_name}"
           >
             <strong>%{ track }</strong> is already in <strong>%{ playlist }</strong>.
@@ -128,7 +128,7 @@ store.dispatch('playlists/fetchOwn')
             class="ui small basic cancel button"
             @click="showDuplicateTrackAddConfirmation = false"
           >
-            <translate translate-context="*/*/Button.Label/Verb">
+            <translate >
               Cancel
             </translate>
           </button>
@@ -136,7 +136,7 @@ store.dispatch('playlists/fetchOwn')
             class="ui small success button"
             @click="addToPlaylist(lastSelectedPlaylist, true)"
           >
-            <translate translate-context="*/Playlist/Button.Label/Verb">
+            <translate >
               Add anyways
             </translate>
           </button>
@@ -147,7 +147,7 @@ store.dispatch('playlists/fetchOwn')
           class="ui negative message"
         >
           <h4 class="header">
-            <translate translate-context="Popup/Playlist/Error message.Title">
+            <translate >
               The track can't be added to a playlist
             </translate>
           </h4>
@@ -161,14 +161,14 @@ store.dispatch('playlists/fetchOwn')
           </ul>
         </div>
         <h4 class="ui header">
-          <translate translate-context="Popup/Playlist/Title">
+          <translate >
             Available playlists
           </translate>
         </h4>
         <div class="ui form">
           <div class="fields">
             <div class="field">
-              <label for="playlist-name-filter"><translate translate-context="Popup/Playlist/Label">Filter</translate></label>
+              <label for="playlist-name-filter"><translate >Filter</translate></label>
               <input
                 id="playlist-name-filter"
                 v-model="playlistNameFilter"
@@ -185,19 +185,19 @@ store.dispatch('playlists/fetchOwn')
         >
           <thead>
             <tr>
-              <th><span class="visually-hidden"><translate translate-context="*/*/*/Verb">Edit</translate></span></th>
+              <th><span class="visually-hidden"><translate >Edit</translate></span></th>
               <th>
-                <translate translate-context="*/*/*/Noun">
+                <translate >
                   Name
                 </translate>
               </th>
               <th class="sorted descending">
-                <translate translate-context="Popup/Playlist/Table.Label/Short">
+                <translate >
                   Last modification
                 </translate>
               </th>
               <th>
-                <translate translate-context="*/*/*">
+                <translate >
                   Tracks
                 </translate>
               </th>
@@ -214,7 +214,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"><translate translate-context="*/*/*/Verb">Edit</translate></span>
+                  <span class="visually-hidden"><translate >Edit</translate></span>
                 </router-link>
               </td>
               <td>
@@ -234,7 +234,7 @@ store.dispatch('playlists/fetchOwn')
                   :title="labels.addToPlaylist"
                   @click.prevent="addToPlaylist(playlist.id, false)"
                 >
-                  <i class="plus icon" /> <translate translate-context="Popup/Playlist/Table.Button.Label/Verb">
+                  <i class="plus icon" /> <translate >
                     Add track
                   </translate>
                 </button>
@@ -245,7 +245,7 @@ store.dispatch('playlists/fetchOwn')
         <template v-else>
           <div class="ui small placeholder segment component-placeholder">
             <h4 class="ui header">
-              <translate translate-context="Popup/Playlist/EmptyState">
+              <translate >
                 No results matching your filter
               </translate>
             </h4>
@@ -258,7 +258,7 @@ store.dispatch('playlists/fetchOwn')
       >
         <div class="ui icon header">
           <i class="list icon" />
-          <translate translate-context="Content/Home/Placeholder">
+          <translate >
             No playlists have been created yet
           </translate>
         </div>
@@ -266,7 +266,7 @@ store.dispatch('playlists/fetchOwn')
     </div>
     <div class="actions">
       <button class="ui basic cancel button">
-        <translate translate-context="*/*/Button.Label/Verb">
+        <translate >
           Cancel
         </translate>
       </button>
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index 8872fa3fc..060f74d47 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/front/src/components/playlists/TrackPlaylistIcon.vue
@@ -2,7 +2,7 @@
 import type { QueueTrack } from '~/composables/audio/queue'
 import type { Track } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
 interface Props {
@@ -17,10 +17,10 @@ withDefaults(defineProps<Props>(), {
   border: false
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  addToPlaylist: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Add to playlist…')
+  addToPlaylist: t('Add to playlist…')
 }))
 </script>
 
@@ -31,7 +31,7 @@ const labels = computed(() => ({
     @click.stop="$store.commit('playlists/chooseTrack', track)"
   >
     <i class="list icon" />
-    <translate translate-context="Sidebar/Player/Icon.Tooltip/Verb">
+    <translate >
       Add to playlist…
     </translate>
   </button>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index c8382cda6..a300d5cd4 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -78,7 +78,7 @@ watch(
     >
       <div class="ui icon header">
         <i class="list icon" />
-        <translate translate-context="Content/Home/Placeholder">
+        <translate >
           No playlists have been created yet
         </translate>
       </div>
@@ -88,7 +88,7 @@ watch(
         @click="$store.commit('playlists/chooseTrack', null)"
       >
         <i class="list icon" />
-        <translate translate-context="Content/Home/CreatePlaylist">
+        <translate >
           Create Playlist
         </translate>
       </button>
@@ -100,7 +100,7 @@ watch(
         :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
-        <translate translate-context="*/*/Button,Label">
+        <translate >
           Show more
         </translate>
       </button>
diff --git a/front/src/components/radios/Button.vue b/front/src/components/radios/Button.vue
index f0cec52d5..983b55e1a 100644
--- a/front/src/components/radios/Button.vue
+++ b/front/src/components/radios/Button.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ObjectId, RadioConfig } from '~/store/radios'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { computed } from 'vue'
 
@@ -36,25 +36,25 @@ const running = computed(() => {
     )
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const buttonLabel = computed(() => {
   switch (props.radioConfig?.type) {
     case 'tag':
       return running.value
-        ? $pgettext('*/Player/Button.Label/Short, Verb', 'Stop tags radio')
-        : $pgettext('*/Player/Button.Label/Short, Verb', 'Start tags radio')
+        ? t('Stop tags radio')
+        : t('Start tags radio')
     case 'artist':
       return running.value
-        ? $pgettext('*/Player/Button.Label/Short, Verb', 'Stop artists radio')
-        : $pgettext('*/Player/Button.Label/Short, Verb', 'Start artists radio')
+        ? t('Stop artists radio')
+        : t('Start artists radio')
     case 'playlist':
       return running.value
-        ? $pgettext('*/Player/Button.Label/Short, Verb', 'Stop playlists radio')
-        : $pgettext('*/Player/Button.Label/Short, Verb', 'Start playlists radio')
+        ? t('Stop playlists radio')
+        : t('Start playlists radio')
     default:
       return running.value
-        ? $pgettext('*/Player/Button.Label/Short, Verb', 'Stop radio')
-        : $pgettext('*/Queue/Button.Label/Short, Verb', 'Play radio')
+        ? t('Stop radio')
+        : t('Play radio')
   }
 })
 
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index c02063e16..7268a765d 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -70,7 +70,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
         class="ui success button right floated"
         :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
       >
-        <translate translate-context="Content/*/Button.Label/Verb">
+        <translate >
           Edit
         </translate>
       </router-link>
diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index b02d54675..9071e6e6a 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -47,7 +47,7 @@ const tags = computed(() => {
       @click.prevent="honorLimit = false"
     >
       <translate
-        translate-context="Content/*/Button/Label/Verb"
+
         :translate-params="{ count: props.tags.length - tags.length }"
         :translate-n="props.tags.length - tags.length"
         translate-plural="Show %{ count } more tags"
diff --git a/front/src/components/vui/Pagination.vue b/front/src/components/vui/Pagination.vue
index 179eaf693..c0fdac415 100644
--- a/front/src/components/vui/Pagination.vue
+++ b/front/src/components/vui/Pagination.vue
@@ -2,7 +2,7 @@
 import { useVModel } from '@vueuse/core'
 import { range, clamp } from 'lodash-es'
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 const RANGE = 2
 
@@ -61,11 +61,11 @@ const setPage = (page: number) => {
   current.value = page
 }
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  pagination: $pgettext('Content/*/Hidden text/Noun', 'Pagination'),
-  previousPage: $pgettext('Content/*/Link', 'Previous Page'),
-  nextPage: $pgettext('Content/*/Link', 'Next Page')
+  pagination: t('Pagination'),
+  previousPage: t('Previous Page'),
+  nextPage: t('Next Page')
 }))
 </script>
 
diff --git a/front/src/composables/audio/usePlayOptions.ts b/front/src/composables/audio/usePlayOptions.ts
index 0bfbf92c0..6d314230f 100644
--- a/front/src/composables/audio/usePlayOptions.ts
+++ b/front/src/composables/audio/usePlayOptions.ts
@@ -3,11 +3,11 @@ import type { ContentFilter } from '~/store/moderation'
 
 import { useCurrentElement } from '@vueuse/core'
 import { computed, markRaw, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
-import { gettext } from '~/init/locale'
 
 import jQuery from 'jquery'
 import axios from 'axios'
@@ -49,16 +49,14 @@ export default (props: PlayOptionsProps) => {
   const filterableArtist = computed(() => props.track?.artist ?? props.album?.artist ?? props.artist)
   const filterArtist = async () => store.dispatch('moderation/hide', { type: 'artist', target: filterableArtist.value })
 
-  const { $npgettext } = gettext
+  const { t } = useI18n()
   const addMessage = (tracks: Track[]) => {
     if (!tracks.length) {
       return
     }
 
     store.commit('ui/addMessage', {
-      content: $npgettext('*/Queue/Message', '%{ count } track was added to your queue', '%{ count } tracks were added to your queue', tracks.length, {
-        count: tracks.length.toString()
-      }),
+      content: t('%{ count } tracks were added to your queue | %{ count } track was added to your queue | %{ count } tracks were added to your queue', tracks.length),
       date: new Date()
     })
   }
diff --git a/front/src/composables/locale/useSharedLabels.ts b/front/src/composables/locale/useSharedLabels.ts
index 418691a12..3c4d5f182 100644
--- a/front/src/composables/locale/useSharedLabels.ts
+++ b/front/src/composables/locale/useSharedLabels.ts
@@ -1,150 +1,150 @@
 import type { PrivacyLevel, ImportStatus } from '~/types'
 import type { ScopeId } from '~/composables/auth/useScopes'
 
-import { gettext } from '~/init/locale'
+import { i18n } from '~/init/locale'
 
-const { $pgettext } = gettext
+const { t } = i18n.global
 
 export default () => ({
   fields: {
     privacy_level: {
-      label: $pgettext('Content/Settings/Dropdown.Label/Noun', 'Activity visibility'),
-      help: $pgettext('Content/Settings/Dropdown.Help text', 'Determine the visibility level of your activity'),
+      label: t('Activity visibility'),
+      help: t('Determine the visibility level of your activity'),
       choices: {
-        me: $pgettext('Content/Settings/Dropdown', 'Nobody except me'),
-        instance: $pgettext('Content/Settings/Dropdown', 'Everyone on this instance'),
-        everyone: $pgettext('Content/Settings/Dropdown', 'Everyone, across all instances')
+        me: t('Nobody except me'),
+        instance: t('Everyone on this instance'),
+        everyone: t('Everyone, across all instances')
       } as Record<PrivacyLevel, string>,
       shortChoices: {
-        me: $pgettext('Content/Settings/Dropdown/Short', 'Private'),
-        instance: $pgettext('Content/Settings/Dropdown/Short', 'Instance'),
-        everyone: $pgettext('Content/Settings/Dropdown/Short', 'Everyone')
+        me: t('Private'),
+        instance: t('Instance'),
+        everyone: t('Everyone')
       } as Record<PrivacyLevel, string>
     },
     import_status: {
-      label: $pgettext('Content/Library/Link.Title', 'Click to display more information about the import process for this upload'),
+      label: t('Click to display more information about the import process for this upload'),
       choices: {
         skipped: {
-          label: $pgettext('Content/Library/*', 'Skipped'),
-          help: $pgettext('Content/Library/Help text', 'This track is already present in one of your libraries')
+          label: t('Skipped'),
+          help: t('This track is already present in one of your libraries')
         },
         draft: {
-          label: $pgettext('Content/Library/*/Short', 'Draft'),
-          help: $pgettext('Content/Library/Help text', 'This track has been uploaded, but hasn\'t been scheduled for processing yet')
+          label: t('Draft'),
+          help: t('This track has been uploaded, but hasn\'t been scheduled for processing yet')
         },
         pending: {
-          label: $pgettext('Content/Library/*/Short', 'Pending'),
-          help: $pgettext('Content/Library/Help text', 'This track has been uploaded, but hasn\'t been processed by the server yet')
+          label: t('Pending'),
+          help: t('This track has been uploaded, but hasn\'t been processed by the server yet')
         },
         errored: {
-          label: $pgettext('Content/Library/Table/Short', 'Errored'),
-          help: $pgettext('Content/Library/Help text', 'This track could not be processed, please make sure it is tagged correctly')
+          label: t('Errored'),
+          help: t('This track could not be processed, please make sure it is tagged correctly')
         },
         finished: {
-          label: $pgettext('Content/Library/*', 'Finished'),
-          help: $pgettext('Content/Library/Help text', 'Imported')
+          label: t('Finished'),
+          help: t('Imported')
         }
       } as Record<ImportStatus, { label: string, help: string }>
     },
     report_type: {
-      label: $pgettext('*/*/*', 'Category'),
+      label: t('Category'),
       choices: {
-        takedown_request: $pgettext('Content/Moderation/Dropdown', 'Takedown request'),
-        invalid_metadata: $pgettext('Popup/Import/Error.Label', 'Invalid metadata'),
-        illegal_content: $pgettext('Content/Moderation/Dropdown', 'Illegal content'),
-        offensive_content: $pgettext('Content/Moderation/Dropdown', 'Offensive content'),
-        other: $pgettext('Content/Moderation/Dropdown', 'Other')
+        takedown_request: t('Takedown request'),
+        invalid_metadata: t('Invalid metadata'),
+        illegal_content: t('Illegal content'),
+        offensive_content: t('Offensive content'),
+        other: t('Other')
       }
     },
     summary: {
-      label: $pgettext('Content/Account/*', 'Bio'),
+      label: t('Bio'),
       help: undefined
     },
     content_category: {
-      label: $pgettext('Content/*/Dropdown.Label/Noun', 'Content category'),
+      label: t('Content category'),
       choices: {
-        podcast: $pgettext('Content/*/Dropdown', 'Podcast'),
-        music: $pgettext('*/*/*', 'Music'),
-        other: $pgettext('*/*/*', 'Other')
+        podcast: t('Podcast'),
+        music: t('Music'),
+        other: t('Other')
       }
     }
   },
   filters: {
-    creation_date: $pgettext('Content/*/*/Noun', 'Creation date'),
-    release_date: $pgettext('Content/*/*/Noun', 'Release date'),
-    accessed_date: $pgettext('Content/*/*/Noun', 'Accessed date'),
-    applied_date: $pgettext('Content/*/*/Noun', 'Applied date'),
-    handled_date: $pgettext('Content/*/*/Noun', 'Handled date'),
-    first_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'First seen date'),
-    last_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'Last seen date'),
-    modification_date: $pgettext('Content/Playlist/Dropdown/Noun', 'Modification date'),
-    expiration_date: $pgettext('Content/Admin/Table.Label/Noun', 'Expiration date'),
-    track_title: $pgettext('Content/*/Dropdown/Noun', 'Track name'),
-    album_title: $pgettext('Content/*/Dropdown/Noun', 'Album name'),
-    artist_name: $pgettext('Content/*/Dropdown/Noun', 'Artist name'),
-    name: $pgettext('*/*/*/Noun', 'Name'),
-    length: $pgettext('*/*/*/Noun', 'Duration'),
-    items_count: $pgettext('*/*/*/Noun', 'Items'),
-    size: $pgettext('Content/*/*/Noun', 'Size'),
-    bitrate: $pgettext('Content/Track/*/Noun', 'Bitrate'),
-    duration: $pgettext('Content/*/*', 'Duration'),
-    date_joined: $pgettext('Content/Admin/Table.Label/Noun', 'Sign-up date'),
-    last_activity: $pgettext('Content/Profile/Table.Label/Short, Noun (Value is a date)', 'Last activity'),
-    username: $pgettext('Content/*/*', 'Username'),
-    domain: $pgettext('Content/Moderation/*/Noun', 'Domain'),
-    users: $pgettext('*/*/*/Noun', 'Users'),
-    received_messages: $pgettext('Content/Moderation/*/Noun', 'Received messages'),
-    uploads: $pgettext('*/*/*', 'Uploads'),
-    followers: $pgettext('Content/Federation/*/Noun', 'Followers')
+    creation_date: t('Creation date'),
+    release_date: t('Release date'),
+    accessed_date: t('Accessed date'),
+    applied_date: t('Applied date'),
+    handled_date: t('Handled date'),
+    first_seen: t('First seen date'),
+    last_seen: t('Last seen date'),
+    modification_date: t('Modification date'),
+    expiration_date: t('Expiration date'),
+    track_title: t('Track name'),
+    album_title: t('Album name'),
+    artist_name: t('Artist name'),
+    name: t('Name'),
+    length: t('Duration'),
+    items_count: t('Items'),
+    size: t('Size'),
+    bitrate: t('Bitrate'),
+    duration: t('Duration'),
+    date_joined: t('Sign-up date'),
+    last_activity: t('Last activity'),
+    username: t('Username'),
+    domain: t('Domain'),
+    users: t('Users'),
+    received_messages: t('Received messages'),
+    uploads: t('Uploads'),
+    followers: t('Followers')
   },
   scopes: {
     profile: {
-      label: $pgettext('Content/OAuth Scopes/Label', 'Profile'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to e-mail, username, and profile information')
+      label: t('Profile'),
+      description: t('Access to e-mail, username, and profile information')
     },
     libraries: {
-      label: $pgettext('Content/OAuth Scopes/Label', 'Libraries and uploads'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to audio files, libraries, artists, albums and tracks')
+      label: t('Libraries and uploads'),
+      description: t('Access to audio files, libraries, artists, albums and tracks')
     },
     favorites: {
-      label: $pgettext('Sidebar/Favorites/List item.Link/Noun', 'Favorites'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to favorites')
+      label: t('Favorites'),
+      description: t('Access to favorites')
     },
     listenings: {
-      label: $pgettext('*/*/*/Noun', 'Listenings'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to listening history')
+      label: t('Listenings'),
+      description: t('Access to listening history')
     },
     follows: {
-      label: $pgettext('Content/OAuth Scopes/Label', 'Follows'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to follows')
+      label: t('Follows'),
+      description: t('Access to follows')
     },
     playlists: {
-      label: $pgettext('*/*/*', 'Playlists'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to playlists')
+      label: t('Playlists'),
+      description: t('Access to playlists')
     },
     radios: {
-      label: $pgettext('*/*/*', 'Radios'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to radios')
+      label: t('Radios'),
+      description: t('Access to radios')
     },
     filters: {
-      label: $pgettext('Content/Settings/Title/Noun', 'Content filters'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to content filters')
+      label: t('Content filters'),
+      description: t('Access to content filters')
     },
     notifications: {
-      label: $pgettext('*/Notifications/*', 'Notifications'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to notifications')
+      label: t('Notifications'),
+      description: t('Access to notifications')
     },
     edits: {
-      label: $pgettext('*/Admin/*/Noun', 'Edits'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to edits')
+      label: t('Edits'),
+      description: t('Access to edits')
     },
     security: {
-      label: $pgettext('*/Admin/*/Noun', 'Security'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to security settings such as password and authorization')
+      label: t('Security'),
+      description: t('Access to security settings such as password and authorization')
     },
     reports: {
-      label: $pgettext('*/Moderation/*/Noun', 'Reports'),
-      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to moderation reports')
+      label: t('Reports'),
+      description: t('Access to moderation reports')
     }
   } as Record<ScopeId, { label: string, description: string }>
 })
diff --git a/front/src/composables/moderation/useEditConfigs.ts b/front/src/composables/moderation/useEditConfigs.ts
index e9958d5a7..5d6190bce 100644
--- a/front/src/composables/moderation/useEditConfigs.ts
+++ b/front/src/composables/moderation/useEditConfigs.ts
@@ -1,6 +1,6 @@
 import type { Album, Artist, Content, Track, Actor } from '~/types'
 
-import { gettext } from '~/init/locale'
+import { useI18n } from 'vue-i18n'
 
 export interface ConfigField {
   id: string
@@ -20,14 +20,14 @@ export type EditObject = (Partial<Artist> | Partial<Album> | Partial<Track>) & {
 export type EditObjectType = 'artist' | 'album' | 'track'
 type Configs = Record<EditObjectType, { fields: (EditableConfigField|ConfigField)[] }>
 
-const { $pgettext } = gettext
+const { t } = useI18n()
 const getContentValueRepr = (val: Content) => val.text
 
 const description: ConfigField = {
   id: 'description',
   type: 'content',
   required: true,
-  label: $pgettext('*/*/*/Noun', 'Description'),
+  label: t('Description'),
   getValue: (obj) => obj.description ?? { text: '', content_type: 'text/markdown' },
   getValueRepr: getContentValueRepr
 }
@@ -36,7 +36,7 @@ const cover: ConfigField = {
   id: 'cover',
   type: 'attachment',
   required: false,
-  label: $pgettext('Content/*/*/Noun', 'Cover'),
+  label: t('Cover'),
   getValue: (obj) => obj.cover?.uuid ?? null
 }
 
@@ -44,7 +44,7 @@ const tags: ConfigField = {
   id: 'tags',
   type: 'tags',
   required: true,
-  label: $pgettext('*/*/*/Noun', 'Tags'),
+  label: t('Tags'),
   getValue: (obj) => { return obj.tags },
   getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
 }
@@ -57,7 +57,7 @@ export default (): Configs => ({
         id: 'name',
         type: 'text',
         required: true,
-        label: $pgettext('*/*/*/Noun', 'Name'),
+        label: t('Name'),
         getValue: (artist) => (artist as Artist).name
       },
       description,
@@ -71,7 +71,7 @@ export default (): Configs => ({
         id: 'title',
         type: 'text',
         required: true,
-        label: $pgettext('*/*/*/Noun', 'Title'),
+        label: t('Title'),
         getValue: (album) => (album as Album).title
       },
       description,
@@ -79,7 +79,7 @@ export default (): Configs => ({
         id: 'release_date',
         type: 'text',
         required: false,
-        label: $pgettext('Content/*/*/Noun', 'Release date'),
+        label: t('Release date'),
         getValue: (album) => (album as Album).release_date
       },
       cover,
@@ -92,7 +92,7 @@ export default (): Configs => ({
         id: 'title',
         type: 'text',
         required: true,
-        label: $pgettext('*/*/*/Noun', 'Title'),
+        label: t('Title'),
         getValue: (track) => (track as Track).title
       },
       description,
@@ -102,21 +102,21 @@ export default (): Configs => ({
         type: 'text',
         inputType: 'number',
         required: false,
-        label: $pgettext('*/*/*/Short, Noun', 'Position'),
+        label: t('Position'),
         getValue: (track) => (track as Track).position
       },
       {
         id: 'copyright',
         type: 'text',
         required: false,
-        label: $pgettext('Content/Track/*/Noun', 'Copyright'),
+        label: t('Copyright'),
         getValue: (track) => (track as Track).copyright
       },
       {
         id: 'license',
         type: 'license',
         required: false,
-        label: $pgettext('Content/*/*/Noun', 'License'),
+        label: t('License'),
         getValue: (track) => (track as Track).license
       },
       tags
diff --git a/front/src/composables/moderation/useReport.ts b/front/src/composables/moderation/useReport.ts
index a0e90f4b8..432405cfb 100644
--- a/front/src/composables/moderation/useReport.ts
+++ b/front/src/composables/moderation/useReport.ts
@@ -1,8 +1,10 @@
 import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 
-import { gettext } from '~/init/locale'
+import { i18n } from '~/init/locale'
+
 import store from '~/store'
-const { $pgettext } = gettext
+
+const { t } = i18n.global
 
 interface Objects {
   track?: Track | null
@@ -33,26 +35,26 @@ const getReportableObjects = ({ track, album, artist, playlist, account, library
 
   if (account) {
     reportableObjs.push({
-      label: $pgettext('*/Moderation/*/Verb', 'Report @%{ username }…', { username: account.preferred_username }),
+      label: t('Report @%{ username }…', { username: account.preferred_username }),
       target: {
         type: 'account',
         _obj: account,
         full_username: account.full_username,
         label: account.full_username,
-        typeLabel: $pgettext('*/*/*/Noun', 'Account')
+        typeLabel: t('Account')
       }
     })
   }
 
   if (track) {
     reportableObjs.push({
-      label: $pgettext('*/Moderation/*/Verb', 'Report this track…'),
+      label: t('Report this track…'),
       target: {
         type: 'track',
         id: track.id,
         _obj: track,
         label: track.title,
-        typeLabel: $pgettext('*/*/*/Noun', 'Track')
+        typeLabel: t('Track')
       }
     })
 
@@ -62,13 +64,13 @@ const getReportableObjects = ({ track, album, artist, playlist, account, library
 
   if (album) {
     reportableObjs.push({
-      label: $pgettext('*/Moderation/*/Verb', 'Report this album…'),
+      label: t('Report this album…'),
       target: {
         type: 'album',
         id: album.id,
         label: album.title,
         _obj: album,
-        typeLabel: $pgettext('*/*/*', 'Album')
+        typeLabel: t('Album')
       }
     })
 
@@ -79,50 +81,50 @@ const getReportableObjects = ({ track, album, artist, playlist, account, library
 
   if (channel) {
     reportableObjs.push({
-      label: $pgettext('*/Moderation/*/Verb', 'Report this channel…'),
+      label: t('Report this channel…'),
       target: {
         type: 'channel',
         uuid: channel.uuid,
-        label: channel.artist?.name ?? $pgettext('*/*/*', 'Unknown artist'),
+        label: channel.artist?.name ?? t('Unknown artist'),
         _obj: channel,
-        typeLabel: $pgettext('*/*/*', 'Channel')
+        typeLabel: t('Channel')
       }
     })
   } else if (artist) {
     reportableObjs.push({
-      label: $pgettext('*/Moderation/*/Verb', 'Report this artist…'),
+      label: t('Report this artist…'),
       target: {
         type: 'artist',
         id: artist.id,
         label: artist.name,
         _obj: artist,
-        typeLabel: $pgettext('*/*/*/Noun', 'Artist')
+        typeLabel: t('Artist')
       }
     })
   }
 
   if (playlist) {
     reportableObjs.push({
-      label: $pgettext('*/Moderation/*/Verb', 'Report this playlist…'),
+      label: t('Report this playlist…'),
       target: {
         type: 'playlist',
         id: playlist.id,
         label: playlist.name,
         _obj: playlist,
-        typeLabel: $pgettext('*/*/*', 'Playlist')
+        typeLabel: t('Playlist')
       }
     })
   }
 
   if (library) {
     reportableObjs.push({
-      label: $pgettext('*/Moderation/*/Verb', 'Report this library…'),
+      label: t('Report this library…'),
       target: {
         type: 'library',
         uuid: library.uuid,
         label: library.name,
         _obj: library,
-        typeLabel: $pgettext('*/*/*/Noun', 'Library')
+        typeLabel: t('Library')
       }
     })
   }
diff --git a/front/src/composables/moderation/useReportConfigs.ts b/front/src/composables/moderation/useReportConfigs.ts
index cc472e2e9..15b2b0067 100644
--- a/front/src/composables/moderation/useReportConfigs.ts
+++ b/front/src/composables/moderation/useReportConfigs.ts
@@ -1,7 +1,7 @@
 import type { EntityObjectType } from '~/types'
 import type { RouteLocationRaw } from 'vue-router'
 
-import { gettext } from '~/init/locale'
+import { useI18n } from 'vue-i18n'
 
 interface ModeratedField {
   id: string
@@ -22,37 +22,37 @@ export interface Entity {
 
 type Configs = Record<EntityObjectType, Entity>
 
-const { $pgettext } = gettext
+const { t } = useI18n()
 
 const tags: ModeratedField = {
   id: 'tags',
-  label: $pgettext('*/*/*/Noun', 'Tags'),
+  label: t('Tags'),
   getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
 }
 
 const name: ModeratedField = {
   id: 'name',
-  label: $pgettext('*/*/*/Noun', 'Name')
+  label: t('Name')
 }
 
 const creationDate: ModeratedField = {
   id: 'creation_date',
-  label: $pgettext('Content/*/*/Noun', 'Creation date')
+  label: t('Creation date')
 }
 
 const musicBrainzId: ModeratedField = {
   id: 'mbid',
-  label: $pgettext('*/*/*/Noun', 'MusicBrainz ID')
+  label: t('MusicBrainz ID')
 }
 
 const visibility: ModeratedField = {
   id: 'privacy_level',
-  label: $pgettext('*/*/*', 'Visibility')
+  label: t('Visibility')
 }
 
 export default (): Configs => ({
   artist: {
-    label: $pgettext('*/*/*/Noun', 'Artist'),
+    label: t('Artist'),
     icon: 'users',
     getDeleteUrl: (obj) => {
       return `manage/library/artists/${obj.id}/`
@@ -69,7 +69,7 @@ export default (): Configs => ({
     ]
   },
   album: {
-    label: $pgettext('*/*/*', 'Album'),
+    label: t('Album'),
     icon: 'play',
     getDeleteUrl: (obj) => {
       return `manage/library/albums/${obj.id}/`
@@ -81,19 +81,19 @@ export default (): Configs => ({
     moderatedFields: [
       {
         id: 'title',
-        label: $pgettext('*/*/*/Noun', 'Title')
+        label: t('Title')
       },
       creationDate,
       {
         id: 'release_date',
-        label: $pgettext('Content/*/*/Noun', 'Release date')
+        label: t('Release date')
       },
       tags,
       musicBrainzId
     ]
   },
   track: {
-    label: $pgettext('*/*/*/Noun', 'Track'),
+    label: t('Track'),
     icon: 'music',
     getDeleteUrl: (obj) => {
       return `manage/library/tracks/${obj.id}/`
@@ -105,26 +105,26 @@ export default (): Configs => ({
     moderatedFields: [
       {
         id: 'title',
-        label: $pgettext('*/*/*/Noun', 'Title')
+        label: t('Title')
       },
       {
         id: 'position',
-        label: $pgettext('*/*/*/Short, Noun', 'Position')
+        label: t('Position')
       },
       {
         id: 'copyright',
-        label: $pgettext('Content/Track/*/Noun', 'Copyright')
+        label: t('Copyright')
       },
       {
         id: 'license',
-        label: $pgettext('Content/*/*/Noun', 'License')
+        label: t('License')
       },
       tags,
       musicBrainzId
     ]
   },
   library: {
-    label: $pgettext('*/*/*/Noun', 'Library'),
+    label: t('Library'),
     icon: 'book',
     getDeleteUrl: (obj) => {
       return `manage/library/libraries/${obj.uuid}/`
@@ -136,13 +136,13 @@ export default (): Configs => ({
       name,
       {
         id: 'description',
-        label: $pgettext('*/*/*/Noun', 'Description')
+        label: t('Description')
       },
       visibility
     ]
   },
   playlist: {
-    label: $pgettext('*/*/*', 'Playlist'),
+    label: t('Playlist'),
     icon: 'list',
     urls: {
       getDetail: (obj) => ({ name: 'library.playlists.detail', params: { id: obj.id } })
@@ -154,7 +154,7 @@ export default (): Configs => ({
     ]
   },
   account: {
-    label: $pgettext('*/*/*/Noun', 'Account'),
+    label: t('Account'),
     icon: 'user',
     urls: {
       getDetail: (obj) => ({ name: 'profile.full.overview', params: { username: obj.preferred_username, domain: obj.domain } }),
@@ -164,12 +164,12 @@ export default (): Configs => ({
       name,
       {
         id: 'summary',
-        label: $pgettext('*/*/*/Noun', 'Bio')
+        label: t('Bio')
       }
     ]
   },
   channel: {
-    label: $pgettext('*/*/*', 'Channel'),
+    label: t('Channel'),
     icon: 'stream',
     urls: {
       getDetail: (obj) => ({ name: 'channels.detail', params: { id: obj.uuid } }),
diff --git a/front/src/composables/useErrorHandler.ts b/front/src/composables/useErrorHandler.ts
index 1e9e12cc9..05331bbee 100644
--- a/front/src/composables/useErrorHandler.ts
+++ b/front/src/composables/useErrorHandler.ts
@@ -1,12 +1,12 @@
 import type { BackendError } from '~/types'
 
-import { gettext } from '~/init/locale'
 import { COOKIE } from '~/init/sentry'
+import { i18n } from '~/init/locale'
 
 import useLogger from '~/composables/useLogger'
 import store from '~/store'
 
-const { $pgettext } = gettext
+const { t } = i18n.global
 const logger = useLogger()
 
 async function useErrorHandler (error: Error | BackendError): Promise<void>
@@ -16,7 +16,7 @@ async function useErrorHandler (error: Error | BackendError, eventId?: string):
     ? 'Unexpected API error'
     : 'Unexpected error'
 
-  let content = $pgettext('App/Message/Paragraph', 'An unexpected error occurred.')
+  let content = t('An unexpected error occured.')
 
   if ('backendErrors' in error) {
     logger.error(title, error, error.backendErrors)
@@ -35,7 +35,7 @@ async function useErrorHandler (error: Error | BackendError, eventId?: string):
 
     const { get } = useCookies()
     if (get(COOKIE) === 'yes') {
-      content = $pgettext('App/Message/Paragraph', 'An unexpected error occurred. <br><sub>To help us understand why it happened, please attach a detailed description of what you did that has triggered the error.</sub>')
+      content = t('An unexpected error occurred. <br><sub>To help us understand why it happened, please attach a detailed description of what you did that has triggered the error.</sub>')
       const user = store.state.auth.authenticated
         ? {
             name: store.state.auth.username,
@@ -44,7 +44,7 @@ async function useErrorHandler (error: Error | BackendError, eventId?: string):
         : undefined
 
       actions.push({
-        text: $pgettext('App/Message/Paragraph', 'Leave feedback'),
+        text: t('Leave feedback'),
         class: 'basic red',
         click: () => Sentry.showReportDialog({
           eventId: eventId ?? Sentry.captureException(error),
diff --git a/front/src/composables/useThemeList.ts b/front/src/composables/useThemeList.ts
index cb2c25c01..d940f25a3 100644
--- a/front/src/composables/useThemeList.ts
+++ b/front/src/composables/useThemeList.ts
@@ -1,23 +1,23 @@
 import type { ThemeEntry } from '~/types'
 
-import { gettext } from '~/init/locale'
+import { i18n } from '~/init/locale'
 
-const { $pgettext } = gettext
+const { t } = i18n.global
 
 const themeList: ThemeEntry[] = [
   {
     icon: 'palette icon',
-    name: $pgettext('*/Settings/Dropdown.Label/Theme name', 'Browser default'),
+    name: t('Browser default'),
     key: 'auto'
   },
   {
     icon: 'sun icon',
-    name: $pgettext('*/Settings/Dropdown.Label/Theme name', 'Light'),
+    name: t('Light'),
     key: 'light'
   },
   {
     icon: 'moon icon',
-    name: $pgettext('*/Settings/Dropdown.Label/Theme name', 'Dark'),
+    name: t('Dark'),
     key: 'dark'
   }
 ]
diff --git a/front/src/init/axios.ts b/front/src/init/axios.ts
index 6532dca4e..55fcc597f 100644
--- a/front/src/init/axios.ts
+++ b/front/src/init/axios.ts
@@ -1,13 +1,16 @@
 import type { APIErrorResponse, BackendError, InitModule, RateLimitStatus } from '~/types'
+import type { AxiosError } from 'axios'
+
+import { parseAPIErrors } from '~/utils'
+import { i18n } from './locale'
 
 import createAuthRefreshInterceptor from 'axios-auth-refresh'
-import axios, { AxiosError } from 'axios'
 import moment from 'moment'
-import { parseAPIErrors } from '~/utils'
-import useLogger from '~/composables/useLogger'
-import { gettext } from '~/init/locale'
+import axios from 'axios'
 
-const { $pgettext, $gettext } = gettext
+import useLogger from '~/composables/useLogger'
+
+const { t } = i18n.global
 const logger = useLogger()
 
 export const install: InitModule = ({ store, router }) => {
@@ -72,10 +75,9 @@ export const install: InitModule = ({ store, router }) => {
 
         if (rateLimitStatus.availableSeconds) {
           const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
-          message = $pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again in %{ delay }')
-          message = $gettext(message, { delay: tryAgain })
+          message = t('You sent too many requests and have been rate limited, please try again in %{ delay }', { delay: tryAgain })
         } else {
-          message = $pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again later')
+          message = t('You sent too many requests and have been rate limited, please try again later')
         }
 
         error.backendErrors.push(message)
diff --git a/front/src/init/locale.ts b/front/src/init/locale.ts
index 80fbac860..c5556fbb8 100644
--- a/front/src/init/locale.ts
+++ b/front/src/init/locale.ts
@@ -1,25 +1,72 @@
 import type { InitModule } from '~/types'
 
-import { watch } from 'vue'
-import locales from '~/locales.json'
 import { usePreferredLanguages } from '@vueuse/core'
-import { createGettext } from 'vue3-gettext'
+import { nextTick, watch } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import locales from '~/locales.json'
 import store from '~/store'
 
+import useLogger from '~/composables/useLogger'
+
+import { isEqual } from 'lodash-es'
+import pl from '~/translations/pl.json'
+const many = {}
+for (const [k, v] of Object.entries(pl.pl)) {
+  const m = {}
+  const w = Object.entries(v)
+  for(let i = 1; i < w.length; i++) {
+    if (!isEqual(w[i][1], w[i - 1][1])) {
+      m[w[i - 1][0]] = w[i - 1][1]
+      m[w[i][0]] = w[i][1]
+    }
+  }
+
+  if (Object.keys(m).length) {
+    many[k] = m
+  }
+}
+console.log(many)
+
+const logger = useLogger()
+
 const defaultLanguage = store.state.ui.currentLanguage ?? 'en_US'
-export const availableLanguages = locales.reduce((map: Record<string, string>, locale) => {
+export const SUPPORTED_LOCALES = locales.reduce((map: Record<string, string>, locale) => {
   map[locale.code] = locale.label
   return map
 }, {})
 
-export const gettext = createGettext({
-  availableLanguages,
-  defaultLanguage,
-  silent: true
+export const i18n = createI18n<false>({
+  formatFallbackMessages: true,
+  globalInjection: true,
+  fallbackLocale: 'en',
+  legacy: false,
+  locale: 'en'
 })
 
-export const install: InitModule = ({ store, app }) => {
-  app.use(gettext)
+export const setI18nLanguage = async (locale: string) => {
+  if (!Object.keys(SUPPORTED_LOCALES).includes(locale)) {
+    throw new Error(`Unsupported locale: ${locale}`)
+  }
+
+  // load locale messages
+  if (!i18n.global.availableLocales.includes(locale)) {
+    try {
+      const { default: messages } = await import(`./locales/${locale}.json`)
+      i18n.global.setLocaleMessage(locale, messages)
+      await nextTick()
+    } catch (error) {
+      logger.warn(`Unsupported locale: ${locale}`)
+    }
+  }
+
+  // set locale
+  i18n.global.locale.value = locale
+  document.querySelector('html')?.setAttribute('lang', locale)
+}
+
+export const install: InitModule = async ({ store, app }) => {
+  app.use(i18n)
 
   // Set default language
   if (!store.state.ui.selectedLanguage) {
@@ -28,27 +75,25 @@ export const install: InitModule = ({ store, app }) => {
       return code.replace(/-/g, '_')
     })
 
-    let language = Object.keys(availableLanguages).find(code => {
+    let language = Object.keys(SUPPORTED_LOCALES).find(code => {
       return languages.includes(code)
     })
 
     if (!language) {
-      language = Object.keys(availableLanguages).find(code => {
+      language = Object.keys(SUPPORTED_LOCALES).find(code => {
         return languages.map(lang => lang.split('_')[0]).includes(code.split('_')[0])
       })
     }
 
-    store.commit('ui/currentLanguage', language ?? defaultLanguage)
+    await store.dispatch('ui/currentLanguage', language ?? defaultLanguage)
+    await setI18nLanguage(language ?? defaultLanguage)
   }
 
   // Handle language change
-  watch(() => store.state.ui.currentLanguage, (locale) => {
-    const htmlLocale = locale.toLowerCase().replace('_', '-')
-    document.documentElement.setAttribute('lang', htmlLocale)
-
-    if (locale === 'en_US') {
-      gettext.current = locale
-      store.commit('ui/momentLocale', 'en')
-    }
+  watch(() => store.state.ui.currentLanguage, async (locale) => {
+    await store.dispatch('ui/currentLanguage', locale)
+    await setI18nLanguage(locale)
+    // TODO (wvffle): Set moment locale
+    // store.commit('ui/momentLocale', 'en')
   }, { immediate: true })
 }
diff --git a/front/src/init/sentry.ts b/front/src/init/sentry.ts
index 54b6fd3b3..4d2d2db29 100644
--- a/front/src/init/sentry.ts
+++ b/front/src/init/sentry.ts
@@ -71,7 +71,8 @@ const initSentry = async (app: App, router: Router, store: Store<RootState>) =>
 
 export const install: InitModule = async ({ app, router, store }) => {
   if (import.meta.env.FUNKWHALE_SENTRY_DSN) {
-    const [{ useCookies }, { gettext: { $pgettext } }] = await Promise.all([
+    // @ts-expect-erro type unknown but it has all the required functions
+    const [{ useCookies }, { i18n: { global: { t } } }] = await Promise.all([
       import('@vueuse/integrations/useCookies'),
       import('~/init/locale')
     ])
@@ -88,13 +89,11 @@ export const install: InitModule = async ({ app, router, store }) => {
       const { hostname, origin } = new URL(import.meta.env.FUNKWHALE_SENTRY_DSN)
       return store.commit('ui/addMessage', {
         content: hostname === 'am.funkwhale.audio'
-          ? $pgettext(
-            'App/Message/Paragraph',
+          ? t(
             'To enhance the quality of our services, we would like to collect information about crashes during your session.<br><sub>The stack traces will be shared to <a href="%{origin}">Funkwhale\'s official Glitchtip instance</a> in order to help us understand how and when the errors occur.</sub>',
             { hostname, origin }
           )
-          : $pgettext(
-            'App/Message/Paragraph',
+          : t(
             'To enhance the quality of our services, we would like to collect information about crashes during your session.<br><sub>The stack traces will be shared to <a href="%{origin}">%{hostname}</a> in order to help us understand how and when the errors occur.</sub>',
             { hostname, origin }
           ),
@@ -104,7 +103,7 @@ export const install: InitModule = async ({ app, router, store }) => {
         classActions: 'bottom attached opaque',
         actions: [
           {
-            text: $pgettext('App/Message/Paragraph', 'Allow'),
+            text: t('Allow'),
             class: 'primary',
             click: () => {
               set(COOKIE, 'yes')
@@ -112,7 +111,7 @@ export const install: InitModule = async ({ app, router, store }) => {
             }
           },
           {
-            text: $pgettext('App/Message/Paragraph', 'Deny'),
+            text: t('Deny'),
             class: 'basic',
             click: () => set(COOKIE, 'no')
           }
diff --git a/front/src/init/serviceWorker.ts b/front/src/init/serviceWorker.ts
index f523a0cb5..78adace67 100644
--- a/front/src/init/serviceWorker.ts
+++ b/front/src/init/serviceWorker.ts
@@ -1,13 +1,13 @@
 import type { InitModule } from '~/types'
 
 import { registerSW } from 'virtual:pwa-register'
+import { i18n } from '~/init/locale'
+
 import useLogger from '~/composables/useLogger'
-import { gettext } from '~/init/locale'
 
+const { t } = i18n.global
 const logger = useLogger()
 
-const { $pgettext } = gettext
-
 export const install: InitModule = ({ store }) => {
   const updateSW = registerSW({
     onRegisterError () {
@@ -21,19 +21,19 @@ export const install: InitModule = ({ store }) => {
     },
     onNeedRefresh () {
       store.commit('ui/addMessage', {
-        content: $pgettext('App/Message/Paragraph', 'A new version of the app is available.'),
+        content: t('A new version of the app is available.'),
         date: new Date(),
         key: 'refreshApp',
         displayTime: 0,
         classActions: 'bottom attached opaque',
         actions: [
           {
-            text: $pgettext('App/Message/Paragraph', 'Update'),
+            text: t('Update'),
             class: 'primary',
             click: () => updateSW()
           },
           {
-            text: $pgettext('App/Message/Paragraph', 'Later'),
+            text: t('Later'),
             class: 'basic'
           }
         ]
diff --git a/front/src/store/ui.ts b/front/src/store/ui.ts
index fd496f33d..56ff605b8 100644
--- a/front/src/store/ui.ts
+++ b/front/src/store/ui.ts
@@ -1,6 +1,6 @@
 import type { Module } from 'vuex'
 import type { RootState } from '~/store/index'
-import type { availableLanguages } from '~/init/locale'
+import type { SUPPORTED_LOCALES } from '~/init/locale'
 
 import axios from 'axios'
 import moment from 'moment'
@@ -31,7 +31,7 @@ interface Message {
 type NotificationsKey = 'inbox' | 'pendingReviewEdits' | 'pendingReviewReports' | 'pendingReviewRequests'
 
 export interface State {
-  currentLanguage: 'en_US' | keyof typeof availableLanguages
+  currentLanguage: 'en_US' | keyof typeof SUPPORTED_LOCALES
   selectedLanguage: boolean
   queueFocused: null | 'queue' | 'player'
   momentLocale: 'en'
diff --git a/front/src/views/Notifications.vue b/front/src/views/Notifications.vue
index 3f44e7327..ba0e3d8fe 100644
--- a/front/src/views/Notifications.vue
+++ b/front/src/views/Notifications.vue
@@ -5,7 +5,7 @@ import moment from 'moment'
 import axios from 'axios'
 
 import { ref, reactive, computed, watch, markRaw } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import NotificationRow from '~/components/notifications/NotificationRow.vue'
@@ -16,14 +16,14 @@ import useMarkdown from '~/composables/useMarkdown'
 
 const store = useStore()
 const supportMessage = useMarkdown(() => store.state.instance.settings.instance.support_message.value)
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const additionalNotifications = computed(() => store.getters['ui/additionalNotifications'])
 const showInstanceSupportMessage = computed(() => store.getters['ui/showInstanceSupportMessage'])
 const showFunkwhaleSupportMessage = computed(() => store.getters['ui/showFunkwhaleSupportMessage'])
 
 const labels = computed(() => ({
-  title: $pgettext('*/Notifications/*', 'Notifications')
+  title: t('Notifications')
 }))
 
 const filters = reactive({
@@ -101,7 +101,7 @@ const markAllAsRead = async () => {
           class="ui container"
         >
           <h1 class="ui header">
-            <translate translate-context="Content/Notifications/Title">
+            <translate >
               Your messages
             </translate>
           </h1>
@@ -112,7 +112,7 @@ const markAllAsRead = async () => {
             >
               <div class="ui attached info message">
                 <h4 class="header">
-                  <translate translate-context="Content/Notifications/Header">
+                  <translate >
                     Support this Funkwhale pod
                   </translate>
                 </h4>
@@ -125,29 +125,29 @@ const markAllAsRead = async () => {
                 >
                   <div class="inline field">
                     <label for="instance-reminder-delay">
-                      <translate translate-context="Content/Notifications/Label">Remind me in:</translate>
+                      <translate >Remind me in:</translate>
                     </label>
                     <select
                       id="instance-reminder-delay"
                       v-model="instanceSupportMessageDelay"
                     >
                       <option :value="30">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           30 days
                         </translate>
                       </option>
                       <option :value="60">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           60 days
                         </translate>
                       </option>
                       <option :value="90">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           90 days
                         </translate>
                       </option>
                       <option :value="null">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Never
                         </translate>
                       </option>
@@ -156,7 +156,7 @@ const markAllAsRead = async () => {
                       type="submit"
                       class="ui right floated basic button"
                     >
-                      <translate translate-context="Content/Notifications/Button.Label">
+                      <translate >
                         Got it!
                       </translate>
                     </button>
@@ -170,12 +170,12 @@ const markAllAsRead = async () => {
             >
               <div class="ui info attached message">
                 <h4 class="header">
-                  <translate translate-context="Content/Notifications/Header">
+                  <translate >
                     Do you like Funkwhale?
                   </translate>
                 </h4>
                 <p>
-                  <translate translate-context="Content/Notifications/Paragraph">
+                  <translate >
                     We noticed you've been here for a while. If Funkwhale is useful to you, we could use your help to make it even better!
                   </translate>
                 </p>
@@ -185,7 +185,7 @@ const markAllAsRead = async () => {
                   rel="noopener"
                   class="ui primary inverted button"
                 >
-                  <translate translate-context="Content/Notifications/Button.Label/Verb">Donate</translate>
+                  <translate >Donate</translate>
                 </a>
                 <a
                   href="https://contribute.funkwhale.audio"
@@ -193,7 +193,7 @@ const markAllAsRead = async () => {
                   rel="noopener"
                   class="ui secondary inverted button"
                 >
-                  <translate translate-context="Content/Notifications/Button.Label/Verb">Discover other ways to help</translate>
+                  <translate >Discover other ways to help</translate>
                 </a>
               </div>
               <div class="ui bottom attached segment">
@@ -203,29 +203,29 @@ const markAllAsRead = async () => {
                 >
                   <div class="inline field">
                     <label for="funkwhale-reminder-delay">
-                      <translate translate-context="Content/Notifications/Label">Remind me in:</translate>
+                      <translate >Remind me in:</translate>
                     </label>
                     <select
                       id="funkwhale-reminder-delay"
                       v-model="funkwhaleSupportMessageDelay"
                     >
                       <option :value="30">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           30 days
                         </translate>
                       </option>
                       <option :value="60">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           60 days
                         </translate>
                       </option>
                       <option :value="90">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           90 days
                         </translate>
                       </option>
                       <option :value="null">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Never
                         </translate>
                       </option>
@@ -234,7 +234,7 @@ const markAllAsRead = async () => {
                       type="submit"
                       class="ui right floated basic button"
                     >
-                      <translate translate-context="Content/Notifications/Button.Label">
+                      <translate >
                         Got it!
                       </translate>
                     </button>
@@ -245,7 +245,7 @@ const markAllAsRead = async () => {
           </div>
         </div>
         <h1 class="ui header">
-          <translate translate-context="Content/Notifications/Title">
+          <translate >
             Your notifications
           </translate>
         </h1>
@@ -255,7 +255,7 @@ const markAllAsRead = async () => {
             v-model="filters.is_read"
             type="checkbox"
           >
-          <label for="show-read-notifications"><translate translate-context="Content/Notifications/Form.Label/Verb">Show read notifications</translate></label>
+          <label for="show-read-notifications"><translate >Show read notifications</translate></label>
         </div>
         <button
           v-if="filters.is_read === false && notifications.count > 0"
@@ -263,7 +263,7 @@ const markAllAsRead = async () => {
           @click.prevent="markAllAsRead"
         >
           <i class="ui check icon" />
-          <translate translate-context="Content/Notifications/Button.Label/Verb">
+          <translate >
             Mark all as read
           </translate>
         </button>
@@ -274,7 +274,7 @@ const markAllAsRead = async () => {
           :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
         >
           <div class="ui text loader">
-            <translate translate-context="Content/Notifications/Paragraph">
+            <translate >
               Loading notifications…
             </translate>
           </div>
@@ -293,7 +293,7 @@ const markAllAsRead = async () => {
           </tbody>
         </table>
         <p v-else-if="additionalNotifications === 0">
-          <translate translate-context="Content/Notifications/Paragraph">
+          <translate >
             No notification to show.
           </translate>
         </p>
diff --git a/front/src/views/Search.vue b/front/src/views/Search.vue
index 055dcb6f4..40fe38e53 100644
--- a/front/src/views/Search.vue
+++ b/front/src/views/Search.vue
@@ -3,7 +3,7 @@ import type { RadioConfig } from '~/store/radios'
 
 import { ref, reactive, computed, watch } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 
 import axios from 'axios'
@@ -52,7 +52,7 @@ const results = reactive({
 
 const paginateBy = ref(25)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 interface SearchType {
   id: QueryType
@@ -65,43 +65,43 @@ interface SearchType {
 const types = computed(() => [
   {
     id: 'artists',
-    label: $pgettext('*/*/*/Noun', 'Artists'),
+    label: t('Artists'),
     includeChannels: true,
     contentCategory: 'music'
   },
   {
     id: 'albums',
-    label: $pgettext('*/*/*', 'Albums'),
+    label: t('Albums'),
     includeChannels: true,
     contentCategory: 'music'
   },
   {
     id: 'tracks',
-    label: $pgettext('*/*/*', 'Tracks')
+    label: t('Tracks')
   },
   {
     id: 'playlists',
-    label: $pgettext('*/*/*', 'Playlists')
+    label: t('Playlists')
   },
   {
     id: 'radios',
-    label: $pgettext('*/*/*', 'Radios'),
+    label: t('Radios'),
     endpoint: 'radios/radios'
   },
   {
     id: 'tags',
-    label: $pgettext('*/*/*', 'Tags')
+    label: t('Tags')
   },
   {
     id: 'podcasts',
-    label: $pgettext('*/*/*', 'Podcasts'),
+    label: t('Podcasts'),
     endpoint: '/artists',
     contentCategory: 'podcast',
     includeChannels: true
   },
   {
     id: 'series',
-    label: $pgettext('*/*/*', 'Series'),
+    label: t('Series'),
     endpoint: '/albums',
     includeChannels: true,
     contentCategory: 'podcast'
@@ -181,11 +181,11 @@ const labels = computed(() => ({
   title: id.value
     ? (
         type.value === 'rss'
-          ? $pgettext('Head/Fetch/Title', 'Subscribe to a podcast RSS feed')
-          : $pgettext('Head/Fetch/Title', 'Search a remote object')
+          ? t('Subscribe to a podcast RSS feed')
+          : t('Search a remote object')
       )
-    : $pgettext('Content/Search/Input.Label/Noun', 'Search'),
-  submitSearch: $pgettext('Content/Search/Button.Label/Verb', 'Submit Search Query')
+    : t('Search'),
+  submitSearch: t('Submit Search Query')
 }))
 
 const radioConfig = computed(() => {
@@ -236,7 +236,7 @@ const radioConfig = computed(() => {
       >
         <h2>
           <label for="query">
-            <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
+            <translate >Search</translate>
           </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 fcfdc8adf..623a33bd5 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { humanSize, truncate } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 
@@ -17,11 +17,11 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const router = useRouter()
 
 const labels = computed(() => ({
-  statsWarning: $pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
+  statsWarning: t('Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
 }))
 
 const isLoading = ref(false)
@@ -106,7 +106,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" />
-                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+                        <translate >Local</translate>
                       </span>
                       &nbsp;
                     </template>
@@ -129,7 +129,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'channels.detail', params: {id: object.uuid }}"
                   >
                     <i class="info icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">
+                    <translate >
                       Open local profile
                     </translate>&nbsp;
                   </router-link>
@@ -147,7 +147,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                        <translate >View in Django's admin</translate>&nbsp;
                       </a>
                       <fetch-button
                         v-if="!object.actor.is_local"
@@ -156,7 +156,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        <translate translate-context="Content/Moderation/Button/Verb">
+                        <translate >
                           Refresh from remote server
                         </translate>&nbsp;
                       </fetch-button>
@@ -167,7 +167,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
+                        <translate >Open remote profile</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -177,12 +177,12 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Library/Title">
+                        <translate >
                           Delete this channel?
                         </translate>
                       </p>
@@ -190,7 +190,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The channel will be removed, as well as associated uploads, tracks, and albums. This action is irreversible.
                           </translate>
                         </p>
@@ -198,7 +198,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -217,7 +217,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Channel data
                   </translate>
                 </div>
@@ -226,7 +226,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Name
                       </translate>
                     </td>
@@ -237,7 +237,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Category
                         </translate>
                       </router-link>
@@ -249,7 +249,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 }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Account
                         </translate>
                       </router-link>
@@ -261,7 +261,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 }}">
-                        <translate translate-context="Content/Moderation/*/Noun">
+                        <translate >
                           Domain
                         </translate>
                       </router-link>
@@ -272,7 +272,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.artist.description">
                     <td>
-                      <translate translate-context="'*/*/*/Noun">
+                      <translate >
                         Description
                       </translate>
                     </td>
@@ -283,7 +283,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.actor.url">
                     <td>
-                      <translate translate-context="'Content/*/*/Noun">
+                      <translate >
                         URL
                       </translate>
                     </td>
@@ -297,7 +297,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.rss_url">
                     <td>
-                      <translate translate-context="'*/*/*">
+                      <translate >
                         RSS Feed
                       </translate>
                     </td>
@@ -318,7 +318,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -340,7 +340,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -350,7 +350,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Listenings
                       </translate>
                     </td>
@@ -360,7 +360,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Favorited tracks
                       </translate>
                     </td>
@@ -370,7 +370,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Playlists
                       </translate>
                     </td>
@@ -381,7 +381,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}`) }}">
-                        <translate translate-context="Content/Moderation/Table.Label/Noun">
+                        <translate >
                           Linked reports
                         </translate>
                       </router-link>
@@ -393,7 +393,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)}}">
-                        <translate translate-context="*/Admin/*/Noun">
+                        <translate >
                           Edits
                         </translate>
                       </router-link>
@@ -411,7 +411,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -433,7 +433,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -443,7 +443,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label">
+                      <translate >
                         Total size
                       </translate>
                     </td>
@@ -454,7 +454,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Uploads
                         </translate>
                       </router-link>
@@ -466,7 +466,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Albums
                         </translate>
                       </router-link>
@@ -478,7 +478,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Tracks
                         </translate>
                       </router-link>
diff --git a/front/src/views/admin/CommonList.vue b/front/src/views/admin/CommonList.vue
index 7f5bdd061..d48d5a3c3 100644
--- a/front/src/views/admin/CommonList.vue
+++ b/front/src/views/admin/CommonList.vue
@@ -12,7 +12,7 @@ import UploadsTable from '~/components/manage/library/UploadsTable.vue'
 import UsersTable from '~/components/manage/users/UsersTable.vue'
 
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 type ViewType = 'accounts' | 'albums' | 'artists' | 'channels' | 'invitations' | 'libraries' | 'tags' | 'tracks' | 'uploads' | 'users'
 
@@ -25,18 +25,18 @@ const props = withDefaults(defineProps<Props>(), {
   defaultQuery: ''
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  accounts: $pgettext('*/Moderation/Title', 'Accounts'),
-  albums: $pgettext('*/*/*', 'Albums'),
-  artists: $pgettext('*/*/*/Noun', 'Artists'),
-  channels: $pgettext('*/*/*', 'Channels'),
-  invitations: $pgettext('*/Admin/*/Noun', 'Invitations'),
-  libraries: $pgettext('*/*/*/Noun', 'Libraries'),
-  tags: $pgettext('*/*/*/Noun', 'Tags'),
-  tracks: $pgettext('*/*/*', 'Tracks'),
-  uploads: $pgettext('*/*/*', 'Uploads'),
-  users: $pgettext('*/*/*/Noun', 'Users')
+  accounts: t('Accounts'),
+  albums: t('Albums'),
+  artists: t('Artists'),
+  channels: t('Channels'),
+  invitations: t('Invitations'),
+  libraries: t('Libraries'),
+  tags: t('Tags'),
+  tracks: t('Tracks'),
+  uploads: t('Uploads'),
+  users: t('Users')
 }))
 
 const title = computed(() => labels.value[props.type])
diff --git a/front/src/views/admin/Settings.vue b/front/src/views/admin/Settings.vue
index 6cdc74db1..06ac5c5a9 100644
--- a/front/src/views/admin/Settings.vue
+++ b/front/src/views/admin/Settings.vue
@@ -6,7 +6,7 @@ import $ from 'jquery'
 
 import { ref, nextTick, onMounted, computed, watch } from 'vue'
 import { useCurrentElement } from '@vueuse/core'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 import SettingsGroup from '~/components/admin/SettingsGroup.vue'
@@ -16,11 +16,11 @@ import useErrorHandler from '~/composables/useErrorHandler'
 const current = ref()
 const settingsData = ref()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const groups = computed(() => [
   {
-    label: $pgettext('Content/Admin/Menu', 'Instance information'),
+    label: t('Instance information'),
     id: 'instance',
     settings: [
       { name: 'instance__name' },
@@ -34,7 +34,7 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('*/*/*/Noun', 'Sign-ups'),
+    label: t('Sign-ups'),
     id: 'signup',
     settings: [
       { name: 'users__registration_enabled' },
@@ -43,7 +43,7 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('*/*/*/Noun', 'Security'),
+    label: t('Security'),
     id: 'security',
     settings: [
       { name: 'common__api_authentication_required' },
@@ -52,7 +52,7 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('*/*/*/Noun', 'Music'),
+    label: t('Music'),
     id: 'music',
     settings: [
       { name: 'music__transcoding_enabled' },
@@ -60,7 +60,7 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('*/*/*', 'Channels'),
+    label: t('Channels'),
     id: 'channels',
     settings: [
       { name: 'audio__channels_enabled' },
@@ -68,14 +68,14 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('*/*/*', 'Playlists'),
+    label: t('Playlists'),
     id: 'playlists',
     settings: [
       { name: 'playlists__max_tracks' }
     ]
   },
   {
-    label: $pgettext('*/Moderation/*', 'Moderation'),
+    label: t('Moderation'),
     id: 'moderation',
     settings: [
       { name: 'moderation__allow_list_enabled' },
@@ -84,7 +84,7 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('*/*/*', 'Federation'),
+    label: t('Federation'),
     id: 'federation',
     settings: [
       { name: 'federation__enabled' },
@@ -95,14 +95,14 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('Content/Admin/Menu', 'Subsonic'),
+    label: t('Subsonic'),
     id: 'subsonic',
     settings: [
       { name: 'subsonic__enabled' }
     ]
   },
   {
-    label: $pgettext('Content/Home/Header', 'Statistics'),
+    label: t('Statistics'),
     id: 'ui',
     settings: [
       { name: 'ui__custom_css' },
@@ -110,7 +110,7 @@ const groups = computed(() => [
     ]
   },
   {
-    label: $pgettext('Content/Admin/Menu', 'User Interface'),
+    label: t('User Interface'),
     id: 'statistics',
     settings: [
       { name: 'instance__nodeinfo_stats_enabled' },
@@ -120,7 +120,7 @@ const groups = computed(() => [
 ] as SettingsGroupType[])
 
 const labels = computed(() => ({
-  settings: $pgettext('Head/Admin/Title', 'Instance settings')
+  settings: t('Instance settings')
 }))
 
 const scrollTo = (id: string) => {
@@ -186,7 +186,7 @@ await nextTick()
           <div class="four wide column">
             <div class="ui sticky vertical secondary menu">
               <div class="header item">
-                <translate translate-context="Content/Admin/Menu.Title">
+                <translate >
                   Sections
                 </translate>
               </div>
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index ba35026af..350523bd6 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { humanSize, truncate } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 
@@ -17,11 +17,11 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const router = useRouter()
 
 const labels = computed(() => ({
-  statsWarning: $pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
+  statsWarning: t('Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
 }))
 
 const isLoading = ref(false)
@@ -106,7 +106,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" />
-                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+                        <translate >Local</translate>
                       </span>
                       &nbsp;
                     </template>
@@ -130,7 +130,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.albums.detail', params: {id: object.id }}"
                   >
                     <i class="info icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">
+                    <translate >
                       Open local profile
                     </translate>&nbsp;
                   </router-link>
@@ -148,7 +148,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                        <translate >View in Django's admin</translate>&nbsp;
                       </a>
                       <a
                         v-if="object.mbid"
@@ -158,7 +158,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open on MusicBrainz</translate>&nbsp;
+                        <translate >Open on MusicBrainz</translate>&nbsp;
                       </a>
                       <fetch-button
                         v-if="!object.is_local"
@@ -167,7 +167,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        <translate translate-context="Content/Moderation/Button/Verb">
+                        <translate >
                           Refresh from remote server
                         </translate>&nbsp;
                       </fetch-button>
@@ -178,7 +178,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
+                        <translate >Open remote profile</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -190,7 +190,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     class="ui labeled icon button"
                   >
                     <i class="edit icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">
+                    <translate >
                       Edit
                     </translate>
                   </router-link>
@@ -200,12 +200,12 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Library/Title">
+                        <translate >
                           Delete this album?
                         </translate>
                       </p>
@@ -213,7 +213,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The album will be removed, as well as associated uploads, tracks, favorites and listening history. This action is irreversible.
                           </translate>
                         </p>
@@ -221,7 +221,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -240,7 +240,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Album data
                   </translate>
                 </div>
@@ -249,7 +249,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Title
                       </translate>
                     </td>
@@ -260,7 +260,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists.detail', params: {id: object.artist.id }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Artist
                         </translate>
                       </router-link>
@@ -272,7 +272,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 }}">
-                        <translate translate-context="Content/Moderation/*/Noun">
+                        <translate >
                           Domain
                         </translate>
                       </router-link>
@@ -283,7 +283,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.description">
                     <td>
-                      <translate translate-context="'*/*/*/Noun">
+                      <translate >
                         Description
                       </translate>
                     </td>
@@ -301,7 +301,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -323,7 +323,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -333,7 +333,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Listenings
                       </translate>
                     </td>
@@ -343,7 +343,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Favorited tracks
                       </translate>
                     </td>
@@ -353,7 +353,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Playlists
                       </translate>
                     </td>
@@ -364,7 +364,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}`) }}">
-                        <translate translate-context="Content/Moderation/Table.Label/Noun">
+                        <translate >
                           Linked reports
                         </translate>
                       </router-link>
@@ -376,7 +376,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)}}">
-                        <translate translate-context="*/Admin/*/Noun">
+                        <translate >
                           Edits
                         </translate>
                       </router-link>
@@ -394,7 +394,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -416,7 +416,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -426,7 +426,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label">
+                      <translate >
                         Total size
                       </translate>
                     </td>
@@ -438,7 +438,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) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Libraries
                         </translate>
                       </router-link>
@@ -450,7 +450,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Uploads
                         </translate>
                       </router-link>
@@ -462,7 +462,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Tracks
                         </translate>
                       </router-link>
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 9bad1cb18..253a0d941 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { humanSize, truncate } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 
@@ -17,11 +17,11 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const router = useRouter()
 
 const labels = computed(() => ({
-  statsWarning: $pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
+  statsWarning: t('Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
 }))
 
 const isLoading = ref(false)
@@ -106,7 +106,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" />
-                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+                        <translate >Local</translate>
                       </span>
                       &nbsp;
                     </template>
@@ -129,7 +129,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.artists.detail', params: {id: object.id }}"
                   >
                     <i class="info icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">
+                    <translate >
                       Open local profile
                     </translate>&nbsp;
                   </router-link>
@@ -147,7 +147,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                        <translate >View in Django's admin</translate>&nbsp;
                       </a>
                       <a
                         v-if="object.mbid"
@@ -157,7 +157,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open on MusicBrainz</translate>&nbsp;
+                        <translate >Open on MusicBrainz</translate>&nbsp;
                       </a>
                       <fetch-button
                         v-if="!object.is_local"
@@ -166,7 +166,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        <translate translate-context="Content/Moderation/Button/Verb">
+                        <translate >
                           Refresh from remote server
                         </translate>&nbsp;
                       </fetch-button>
@@ -177,7 +177,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
+                        <translate >Open remote profile</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -189,7 +189,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     class="ui labeled icon button"
                   >
                     <i class="edit icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">
+                    <translate >
                       Edit
                     </translate>
                   </router-link>
@@ -199,12 +199,12 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Library/Title">
+                        <translate >
                           Delete this artist?
                         </translate>
                       </p>
@@ -212,7 +212,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.
                           </translate>
                         </p>
@@ -220,7 +220,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -239,7 +239,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Artist data
                   </translate>
                 </div>
@@ -248,7 +248,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Name
                       </translate>
                     </td>
@@ -259,7 +259,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Category
                         </translate>
                       </router-link>
@@ -271,7 +271,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 }}">
-                        <translate translate-context="Content/Moderation/*/Noun">
+                        <translate >
                           Domain
                         </translate>
                       </router-link>
@@ -282,7 +282,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="object.description">
                     <td>
-                      <translate translate-context="'*/*/*/Noun">
+                      <translate >
                         Description
                       </translate>
                     </td>
@@ -300,7 +300,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -322,7 +322,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -332,7 +332,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Listenings
                       </translate>
                     </td>
@@ -342,7 +342,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Favorited tracks
                       </translate>
                     </td>
@@ -352,7 +352,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Playlists
                       </translate>
                     </td>
@@ -363,7 +363,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}`) }}">
-                        <translate translate-context="Content/Moderation/Table.Label/Noun">
+                        <translate >
                           Linked reports
                         </translate>
                       </router-link>
@@ -375,7 +375,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)}}">
-                        <translate translate-context="*/Admin/*/Noun">
+                        <translate >
                           Edits
                         </translate>
                       </router-link>
@@ -393,7 +393,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -415,7 +415,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -425,7 +425,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label">
+                      <translate >
                         Total size
                       </translate>
                     </td>
@@ -437,7 +437,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) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Libraries
                         </translate>
                       </router-link>
@@ -449,7 +449,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Uploads
                         </translate>
                       </router-link>
@@ -461,7 +461,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Albums
                         </translate>
                       </router-link>
@@ -473,7 +473,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Tracks
                         </translate>
                       </router-link>
diff --git a/front/src/views/admin/library/Base.vue b/front/src/views/admin/library/Base.vue
index 4b50bea0d..5e6a92881 100644
--- a/front/src/views/admin/library/Base.vue
+++ b/front/src/views/admin/library/Base.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/Admin/Title', 'Manage library'),
-  secondaryMenu: $pgettext('Menu/*/Hidden text', 'Secondary menu')
+  title: t('Manage library'),
+  secondaryMenu: t('Secondary menu')
 }))
 </script>
 
@@ -23,7 +23,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.edits'}"
       >
-        <translate translate-context="*/Admin/*/Noun">
+        <translate >
           Edits
         </translate>
       </router-link>
@@ -31,7 +31,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.channels'}"
       >
-        <translate translate-context="*/*/*">
+        <translate >
           Channels
         </translate>
       </router-link>
@@ -39,7 +39,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.artists'}"
       >
-        <translate translate-context="*/*/*/Noun">
+        <translate >
           Artists
         </translate>
       </router-link>
@@ -47,7 +47,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.albums'}"
       >
-        <translate translate-context="*/*/*">
+        <translate >
           Albums
         </translate>
       </router-link>
@@ -55,7 +55,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.tracks'}"
       >
-        <translate translate-context="*/*/*">
+        <translate >
           Tracks
         </translate>
       </router-link>
@@ -63,7 +63,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.libraries'}"
       >
-        <translate translate-context="*/*/*/Noun">
+        <translate >
           Libraries
         </translate>
       </router-link>
@@ -71,7 +71,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.uploads'}"
       >
-        <translate translate-context="*/*/*">
+        <translate >
           Uploads
         </translate>
       </router-link>
@@ -79,7 +79,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.library.tags'}"
       >
-        <translate translate-context="*/*/*/Noun">
+        <translate >
           Tags
         </translate>
       </router-link>
diff --git a/front/src/views/admin/library/EditsList.vue b/front/src/views/admin/library/EditsList.vue
index 12c707c9d..7026f0063 100644
--- a/front/src/views/admin/library/EditsList.vue
+++ b/front/src/views/admin/library/EditsList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
 import EditsCardList from '~/components/manage/library/EditsCardList.vue'
@@ -12,9 +12,9 @@ withDefaults(defineProps<Props>(), {
   defaultQuery: ''
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('*/Admin/*/Noun', 'Edits')
+  title: t('Edits')
 }))
 </script>
 
@@ -26,7 +26,7 @@ const labels = computed(() => ({
         :default-query="defaultQuery"
       >
         <h2 class="ui header">
-          <translate translate-context="Content/Admin/Title/Noun">
+          <translate >
             Library edits
           </translate>
         </h2>
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index 33a0846f2..5a970eff5 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -2,7 +2,7 @@
 import type { PrivacyLevel } from '~/types'
 
 import { humanSize, truncate } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 
@@ -20,14 +20,14 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const sharedLabels = useSharedLabels()
 const router = useRouter()
 const logger = useLogger()
 
 const labels = computed(() => ({
-  statsWarning: $pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
+  statsWarning: t('Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
 }))
 
 const isLoading = ref(false)
@@ -117,7 +117,7 @@ const updateObj = async (attr: string) => {
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+                        <translate >Local</translate>
                       </span>
                       &nbsp;
                     </template>
@@ -134,7 +134,7 @@ const updateObj = async (attr: string) => {
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                    <translate >View in Django's admin</translate>&nbsp;
                   </a>
                   <button
                     v-dropdown
@@ -150,7 +150,7 @@ const updateObj = async (attr: string) => {
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                        <translate >View in Django's admin</translate>&nbsp;
                       </a>
                       <a
                         class="basic item"
@@ -159,7 +159,7 @@ const updateObj = async (attr: string) => {
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
+                        <translate >Open remote profile</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -169,12 +169,12 @@ const updateObj = async (attr: string) => {
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Library/Title">
+                        <translate >
                           Delete this library?
                         </translate>
                       </p>
@@ -182,7 +182,7 @@ const updateObj = async (attr: string) => {
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The library will be removed, as well as associated uploads, and follows. This action is irreversible.
                           </translate>
                         </p>
@@ -190,7 +190,7 @@ const updateObj = async (attr: string) => {
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -209,7 +209,7 @@ const updateObj = async (attr: string) => {
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Library data
                   </translate>
                 </div>
@@ -218,7 +218,7 @@ const updateObj = async (attr: string) => {
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Name
                       </translate>
                     </td>
@@ -229,7 +229,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('privacy_level', object.privacy_level) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Visibility
                         </translate>
                       </router-link>
@@ -258,7 +258,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: object.actor.full_username }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Account
                         </translate>
                       </router-link>
@@ -270,7 +270,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 }}">
-                        <translate translate-context="Content/Moderation/*/Noun">
+                        <translate >
                           Domain
                         </translate>
                       </router-link>
@@ -281,7 +281,7 @@ const updateObj = async (attr: string) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Description
                       </translate>
                     </td>
@@ -298,7 +298,7 @@ const updateObj = async (attr: string) => {
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -320,7 +320,7 @@ const updateObj = async (attr: string) => {
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -330,7 +330,7 @@ const updateObj = async (attr: string) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Federation/*/Noun">
+                      <translate >
                         Followers
                       </translate>
                     </td>
@@ -341,7 +341,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `library:${object.uuid}`) }}">
-                        <translate translate-context="Content/Moderation/Table.Label/Noun">
+                        <translate >
                           Linked reports
                         </translate>
                       </router-link>
@@ -359,7 +359,7 @@ const updateObj = async (attr: string) => {
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -381,7 +381,7 @@ const updateObj = async (attr: string) => {
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -391,7 +391,7 @@ const updateObj = async (attr: string) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label">
+                      <translate >
                         Total size
                       </translate>
                     </td>
@@ -402,7 +402,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('library_id', object.id) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Artists
                         </translate>
                       </router-link>
@@ -414,7 +414,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('library_id', object.id) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Albums
                         </translate>
                       </router-link>
@@ -426,7 +426,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('library_id', object.id) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Tracks
                         </translate>
                       </router-link>
@@ -438,7 +438,7 @@ const updateObj = async (attr: string) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('library_id', object.id) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Uploads
                         </translate>
                       </router-link>
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
index 5827d1233..04266988b 100644
--- a/front/src/views/admin/library/TagDetail.vue
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -77,7 +77,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.tags.detail', params: {id: object.name }}"
                   >
                     <i class="info icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">
+                    <translate >
                       Open local profile
                     </translate>&nbsp;
                   </router-link>
@@ -95,7 +95,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                        <translate >View in Django's admin</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -105,12 +105,12 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Library/Title">
+                        <translate >
                           Delete this tag?
                         </translate>
                       </p>
@@ -118,7 +118,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The tag will be removed and unlinked from any existing entity. This action is irreversible.
                           </translate>
                         </p>
@@ -126,7 +126,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -145,7 +145,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Tag data
                   </translate>
                 </div>
@@ -154,7 +154,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Name
                       </translate>
                     </td>
@@ -171,7 +171,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                 </div>
@@ -180,7 +180,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -197,7 +197,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                 </div>
@@ -207,7 +207,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('tag', object.name) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Artists
                         </translate>
                       </router-link>
@@ -219,7 +219,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('tag', object.name) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Albums
                         </translate>
                       </router-link>
@@ -231,7 +231,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('tag', object.name) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Tracks
                         </translate>
                       </router-link>
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 6123e8427..a05561fce 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { humanSize, truncate } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { ref, computed } from 'vue'
 
@@ -17,9 +17,9 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  statsWarning: $pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
+  statsWarning: t('Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
 }))
 
 const track = ref()
@@ -105,7 +105,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" />
-                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+                        <translate >Local</translate>
                       </span>
                       &nbsp;
                     </template>
@@ -129,7 +129,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :to="{name: 'library.tracks.detail', params: {id: track.id }}"
                   >
                     <i class="info icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">
+                    <translate >
                       Open local profile
                     </translate>&nbsp;
                   </router-link>
@@ -147,7 +147,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                        <translate >View in Django's admin</translate>&nbsp;
                       </a>
                       <a
                         v-if="track.mbid"
@@ -157,7 +157,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open on MusicBrainz</translate>&nbsp;
+                        <translate >Open on MusicBrainz</translate>&nbsp;
                       </a>
                       <fetch-button
                         v-if="!track.is_local"
@@ -166,7 +166,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         @refresh="fetchData"
                       >
                         <i class="refresh icon" />&nbsp;
-                        <translate translate-context="Content/Moderation/Button/Verb">
+                        <translate >
                           Refresh from remote server
                         </translate>&nbsp;
                       </fetch-button>
@@ -177,7 +177,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
+                        <translate >Open remote profile</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -189,7 +189,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     class="ui labeled icon button"
                   >
                     <i class="edit icon" />
-                    <translate translate-context="Content/*/Button.Label/Verb">
+                    <translate >
                       Edit
                     </translate>
                   </router-link>
@@ -199,12 +199,12 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Library/Title">
+                        <translate >
                           Delete this track?
                         </translate>
                       </p>
@@ -212,7 +212,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The track will be removed, as well as associated uploads, favorites and listening history. This action is irreversible.
                           </translate>
                         </p>
@@ -220,7 +220,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -239,7 +239,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Track data
                   </translate>
                 </div>
@@ -248,7 +248,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Title
                       </translate>
                     </td>
@@ -259,7 +259,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 }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Album
                         </translate>
                       </router-link>
@@ -272,7 +272,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists.detail', params: {id: track.artist.id }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Artist
                         </translate>
                       </router-link>
@@ -284,7 +284,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 }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Album artist
                         </translate>
                       </router-link>
@@ -295,7 +295,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Short, Noun">
+                      <translate >
                         Position
                       </translate>
                     </td>
@@ -305,7 +305,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="track.disc_number">
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Disc number
                       </translate>
                     </td>
@@ -315,7 +315,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="track.copyright">
                     <td>
-                      <translate translate-context="Content/Track/*/Noun">
+                      <translate >
                         Copyright
                       </translate>
                     </td>
@@ -323,7 +323,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="track.license">
                     <td>
-                      <translate translate-context="Content/*/*/Noun">
+                      <translate >
                         License
                       </translate>
                     </td>
@@ -336,7 +336,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 }}">
-                        <translate translate-context="Content/Moderation/*/Noun">
+                        <translate >
                           Domain
                         </translate>
                       </router-link>
@@ -347,7 +347,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr v-if="track.description">
                     <td>
-                      <translate translate-context="'*/*/*/Noun">
+                      <translate >
                         Description
                       </translate>
                     </td>
@@ -365,7 +365,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -387,7 +387,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -397,7 +397,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Listenings
                       </translate>
                     </td>
@@ -407,7 +407,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Favorited tracks
                       </translate>
                     </td>
@@ -417,7 +417,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Playlists
                       </translate>
                     </td>
@@ -428,7 +428,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}`) }}">
-                        <translate translate-context="Content/Moderation/Table.Label/Noun">
+                        <translate >
                           Linked reports
                         </translate>
                       </router-link>
@@ -440,7 +440,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)}}">
-                        <translate translate-context="*/Admin/*/Noun">
+                        <translate >
                           Edits
                         </translate>
                       </router-link>
@@ -458,7 +458,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -480,7 +480,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -490,7 +490,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label">
+                      <translate >
                         Total size
                       </translate>
                     </td>
@@ -502,7 +502,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) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Libraries
                         </translate>
                       </router-link>
@@ -514,7 +514,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) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Uploads
                         </translate>
                       </router-link>
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index 38461595e..697d20eeb 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -89,7 +89,7 @@ const showUploadDetailModal = ref(false)
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
+                        <translate >Local</translate>
                       </span>
                       &nbsp;
                     </template>
@@ -106,7 +106,7 @@ const showUploadDetailModal = ref(false)
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                    <translate >View in Django's admin</translate>&nbsp;
                   </a>
                   <button
                     v-dropdown
@@ -122,7 +122,7 @@ const showUploadDetailModal = ref(false)
                         rel="noopener noreferrer"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                        <translate >View in Django's admin</translate>&nbsp;
                       </a>
                       <a
                         class="basic item"
@@ -131,7 +131,7 @@ const showUploadDetailModal = ref(false)
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
+                        <translate >Open remote profile</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -145,7 +145,7 @@ const showUploadDetailModal = ref(false)
                     rel="noopener noreferrer"
                   >
                     <i class="download icon" />
-                    <translate translate-context="Content/Track/Link/Verb">Download</translate>
+                    <translate >Download</translate>
                   </a>
                 </div>
                 <div class="ui buttons">
@@ -153,12 +153,12 @@ const showUploadDetailModal = ref(false)
                     :class="['ui', {loading: isLoading}, 'basic danger button']"
                     :action="remove"
                   >
-                    <translate translate-context="*/*/*/Verb">
+                    <translate >
                       Delete
                     </translate>
                     <template #modal-header>
                       <p>
-                        <translate translate-context="Popup/Library/Title">
+                        <translate >
                           Delete this upload?
                         </translate>
                       </p>
@@ -166,7 +166,7 @@ const showUploadDetailModal = ref(false)
                     <template #modal-content>
                       <div>
                         <p>
-                          <translate translate-context="Content/Moderation/Paragraph">
+                          <translate >
                             The upload will be removed. This action is irreversible.
                           </translate>
                         </p>
@@ -174,7 +174,7 @@ const showUploadDetailModal = ref(false)
                     </template>
                     <template #modal-confirm>
                       <p>
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete
                         </translate>
                       </p>
@@ -193,7 +193,7 @@ const showUploadDetailModal = ref(false)
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Upload data
                   </translate>
                 </div>
@@ -202,7 +202,7 @@ const showUploadDetailModal = ref(false)
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Name
                       </translate>
                     </td>
@@ -213,7 +213,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('privacy_level', object.library.privacy_level) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Visibility
                         </translate>
                       </router-link>
@@ -225,7 +225,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: object.library.actor.full_username }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Account
                         </translate>
                       </router-link>
@@ -237,7 +237,7 @@ const showUploadDetailModal = ref(false)
                   <tr v-if="!object.is_local">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        <translate translate-context="Content/Moderation/*/Noun">
+                        <translate >
                           Domain
                         </translate>
                       </router-link>
@@ -249,7 +249,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('status', object.import_status) }}">
-                        <translate translate-context="Content/*/*/Noun">
+                        <translate >
                           Import status
                         </translate>
                       </router-link>
@@ -268,7 +268,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries.detail', params: {id: object.library.uuid }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Library
                         </translate>
                       </router-link>
@@ -286,7 +286,7 @@ const showUploadDetailModal = ref(false)
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                 </div>
@@ -295,7 +295,7 @@ const showUploadDetailModal = ref(false)
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -305,7 +305,7 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/*/*/Noun">
+                      <translate >
                         Accessed date
                       </translate>
                     </td>
@@ -316,7 +316,7 @@ const showUploadDetailModal = ref(false)
                       />
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         N/A
                       </translate>
@@ -331,7 +331,7 @@ const showUploadDetailModal = ref(false)
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                 </div>
@@ -341,7 +341,7 @@ const showUploadDetailModal = ref(false)
                   <tr v-if="object.track">
                     <td>
                       <router-link :to="{name: 'manage.library.tracks.detail', params: {id: object.track.id }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Track
                         </translate>
                       </router-link>
@@ -352,7 +352,7 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -362,7 +362,7 @@ const showUploadDetailModal = ref(false)
                       </template>
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         N/A
                       </translate>
@@ -370,7 +370,7 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/*/*/Noun">
+                      <translate >
                         Size
                       </translate>
                     </td>
@@ -380,7 +380,7 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Track/*/Noun">
+                      <translate >
                         Bitrate
                       </translate>
                     </td>
@@ -390,7 +390,7 @@ const showUploadDetailModal = ref(false)
                       </template>
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         N/A
                       </translate>
@@ -398,7 +398,7 @@ const showUploadDetailModal = ref(false)
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/*/*">
+                      <translate >
                         Duration
                       </translate>
                     </td>
@@ -408,7 +408,7 @@ const showUploadDetailModal = ref(false)
                       </template>
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         N/A
                       </translate>
@@ -417,7 +417,7 @@ const showUploadDetailModal = ref(false)
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('type', object.mimetype) }}">
-                        <translate translate-context="Content/Track/Table.Label/Noun">
+                        <translate >
                           Type
                         </translate>
                       </router-link>
@@ -428,7 +428,7 @@ const showUploadDetailModal = ref(false)
                       </template>
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         N/A
                       </translate>
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 78f5ea66b..c4333bdc8 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -4,7 +4,7 @@ import type { InstancePolicy } from '~/types'
 import { computed, ref, reactive, nextTick, watch } from 'vue'
 import { useCurrentElement } from '@vueuse/core'
 import { humanSize } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import $ from 'jquery'
@@ -21,19 +21,19 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const logger = useLogger()
 
 const labels = computed(() => ({
-  statsWarning: $pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object'),
-  uploadQuota: $pgettext('Content/Moderation/Help text', 'Determine how much content the user can upload. Leave empty to use the default value of the instance.')
+  statsWarning: t('Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object'),
+  uploadQuota: t('Determine how much content the user can upload. Leave empty to use the default value of the instance.')
 }))
 
 const allPermissions = computed(() => [
-  { code: 'library', label: $pgettext('*/*/*/Noun', 'Library') },
-  { code: 'moderation', label: $pgettext('*/Moderation/*', 'Moderation') },
-  { code: 'settings', label: $pgettext('*/*/*/Noun', 'Settings') }
+  { code: 'library', label: t('Library') },
+  { code: 'moderation', label: t('Moderation') },
+  { code: 'settings', label: t('Settings') }
 ])
 
 const isLoadingPolicy = ref(false)
@@ -167,7 +167,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                     <template v-if="object.user">
                       <span class="ui tiny accent label">
                         <i class="home icon" />
-                        <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
+                        <translate >Local account</translate>
                       </span>
                       &nbsp;
                     </template>
@@ -176,7 +176,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <translate translate-context="Content/Moderation/Link/Verb">Open profile</translate>&nbsp;
+                      <translate >Open profile</translate>&nbsp;
                       <i class="external icon" />
                     </a>
                   </div>
@@ -192,7 +192,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                    <translate >View in Django's admin</translate>&nbsp;
                   </a>
                   <a
                     v-else-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
@@ -202,7 +202,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                    <translate >View in Django's admin</translate>&nbsp;
                   </a>
                   <button
                     v-dropdown
@@ -217,7 +217,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                         rel="noopener noreferrer"
                       >
                         <i class="external icon" />
-                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
+                        <translate >Open remote profile</translate>&nbsp;
                       </a>
                     </div>
                   </button>
@@ -243,13 +243,13 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 <header class="ui header">
                   <h3>
                     <i class="shield icon" />
-                    <translate translate-context="Content/Moderation/Card.Title">
+                    <translate >
                       You don't have any rule in place for this account.
                     </translate>
                   </h3>
                 </header>
                 <p>
-                  <translate translate-context="Content/Moderation/Card.Paragraph">
+                  <translate >
                     Moderation policies help you control how your instance interact with a given domain or account.
                   </translate>
                 </p>
@@ -257,7 +257,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   class="ui primary button"
                   @click="showPolicyForm = true"
                 >
-                  <translate translate-context="Content/Moderation/Button/Verb">
+                  <translate >
                     Add a moderation policy
                   </translate>
                 </button>
@@ -269,7 +269,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               >
                 <header class="ui header">
                   <h3>
-                    <translate translate-context="Content/Moderation/Card.Title">
+                    <translate >
                       This domain is subject to specific moderation rules
                     </translate>
                   </h3>
@@ -295,7 +295,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Account data
                   </translate>
                 </div>
@@ -304,7 +304,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/*/*">
+                      <translate >
                         Username
                       </translate>
                     </td>
@@ -315,7 +315,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr v-if="!object.user">
                     <td>
                       <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        <translate translate-context="Content/Moderation/*/Noun">
+                        <translate >
                           Domain
                         </translate>
                       </router-link>
@@ -326,7 +326,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="'Content/*/*/Noun'">
+                      <translate >
                         Display name
                       </translate>
                     </td>
@@ -336,7 +336,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      <translate translate-context="Content/*/*">
+                      <translate >
                         Email address
                       </translate>
                     </td>
@@ -346,7 +346,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      <translate translate-context="Content/*/*/Noun">
+                      <translate >
                         Login status
                       </translate>
                     </td>
@@ -364,23 +364,23 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                         <label for="is-active">
                           <translate
                             v-if="object.user.is_active"
-                            translate-context="*/*/*/State of feature"
+
                           >Enabled</translate>
                           <translate
                             v-else
-                            translate-context="*/*/*/State of feature"
+
                           >Disabled</translate>
                         </label>
                       </div>
                       <translate
                         v-else-if="object.user.is_active"
-                        translate-context="*/*/*/State of feature"
+
                       >
                         Enabled
                       </translate>
                       <translate
                         v-else
-                        translate-context="*/*/*/State of feature"
+
                       >
                         Disabled
                       </translate>
@@ -388,7 +388,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      <translate translate-context="Content/*/*/Noun">
+                      <translate >
                         Permissions
                       </translate>
                     </td>
@@ -412,7 +412,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Track/Table.Label/Noun">
+                      <translate >
                         Type
                       </translate>
                     </td>
@@ -422,7 +422,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="!object.user">
                     <td>
-                      <translate translate-context="Content/*/Table.Label">
+                      <translate >
                         Last checked
                       </translate>
                     </td>
@@ -433,7 +433,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                       />
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         N/A
                       </translate>
@@ -441,7 +441,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      <translate translate-context="Content/Admin/Table.Label/Noun">
+                      <translate >
                         Sign-up date
                       </translate>
                     </td>
@@ -451,7 +451,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      <translate translate-context="Content/Profile/Table.Label/Short, Noun (Value is a date)">
+                      <translate >
                         Last activity
                       </translate>
                     </td>
@@ -468,7 +468,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -490,7 +490,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 <tbody>
                   <tr v-if="!object.user">
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -500,7 +500,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Emitted messages
                       </translate>
                     </td>
@@ -510,7 +510,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Received library follows
                       </translate>
                     </td>
@@ -520,7 +520,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Emitted library follows
                       </translate>
                     </td>
@@ -531,7 +531,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object.full_username}`) }}">
-                        <translate translate-context="Content/Moderation/Table.Label/Noun">
+                        <translate >
                           Linked reports
                         </translate>
                       </router-link>
@@ -543,7 +543,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object.full_username}`) }}">
-                        <translate translate-context="Content/Moderation/Table.Label/Noun">
+                        <translate >
                           Requests
                         </translate>
                       </router-link>
@@ -561,7 +561,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -583,7 +583,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 <tbody>
                   <tr v-if="!object.user">
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -593,7 +593,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr v-if="object.user">
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Upload quota
                       </translate>
                       <span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
@@ -608,7 +608,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                           @change="updateUser('upload_quota', true)"
                         >
                         <div class="ui basic label">
-                          <translate translate-context="Content/*/*/Unit">
+                          <translate >
                             MB
                           </translate>&#32;
                         </div>
@@ -622,7 +622,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label">
+                      <translate >
                         Total size
                       </translate>
                     </td>
@@ -633,7 +633,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.channels', query: {q: getQuery('account', object.full_username) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Channels
                         </translate>
                       </router-link>
@@ -645,7 +645,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('account', object.full_username) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Libraries
                         </translate>
                       </router-link>
@@ -657,7 +657,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('account', object.full_username) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Uploads
                         </translate>
                       </router-link>
@@ -668,7 +668,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*/Noun">
+                      <translate >
                         Artists
                       </translate>
                     </td>
@@ -678,7 +678,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Albums
                       </translate>
                     </td>
@@ -688,7 +688,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="*/*/*">
+                      <translate >
                         Tracks
                       </translate>
                     </td>
diff --git a/front/src/views/admin/moderation/Base.vue b/front/src/views/admin/moderation/Base.vue
index b74e90641..d95664045 100644
--- a/front/src/views/admin/moderation/Base.vue
+++ b/front/src/views/admin/moderation/Base.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { get } from 'lodash-es'
 
 import axios from 'axios'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const allowListEnabled = ref(false)
 const labels = computed(() => ({
-  moderation: $pgettext('*/Moderation/*', 'Moderation'),
-  secondaryMenu: $pgettext('Menu/*/Hidden text', 'Secondary menu')
+  moderation: t('Moderation'),
+  secondaryMenu: t('Secondary menu')
 }))
 
 const fetchNodeInfo = async () => {
@@ -35,7 +35,7 @@ fetchNodeInfo()
         class="ui item"
         :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
       >
-        <translate translate-context="*/Moderation/*/Noun">
+        <translate >
           Reports
         </translate>
         <div
@@ -49,7 +49,7 @@ fetchNodeInfo()
         class="ui item"
         :to="{name: 'manage.moderation.requests.list', query: {q: 'status:pending'}}"
       >
-        <translate translate-context="*/Moderation/*/Noun">
+        <translate >
           User Requests
         </translate>
         <div
@@ -63,7 +63,7 @@ fetchNodeInfo()
         class="ui item"
         :to="{name: 'manage.moderation.domains.list'}"
       >
-        <translate translate-context="*/Moderation/*/Noun">
+        <translate >
           Domains
         </translate>
       </router-link>
@@ -71,7 +71,7 @@ fetchNodeInfo()
         class="ui item"
         :to="{name: 'manage.moderation.accounts.list'}"
       >
-        <translate translate-context="*/Moderation/Title">
+        <translate >
           Accounts
         </translate>
       </router-link>
diff --git a/front/src/views/admin/moderation/DomainsDetail.vue b/front/src/views/admin/moderation/DomainsDetail.vue
index 4b1eac0b9..bd9dbe9df 100644
--- a/front/src/views/admin/moderation/DomainsDetail.vue
+++ b/front/src/views/admin/moderation/DomainsDetail.vue
@@ -2,7 +2,7 @@
 import type { InstancePolicy } from '~/types'
 
 import { humanSize } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { get } from 'lodash-es'
 
@@ -20,10 +20,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  statsWarning: $pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
+  statsWarning: t('Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object')
 }))
 
 const isLoadingPolicy = ref(false)
@@ -133,7 +133,7 @@ const setAllowList = async (value: boolean) => {
                       rel="noopener noreferrer"
                       class="logo-wrapper"
                     >
-                      <translate translate-context="Content/Moderation/Link/Verb">Open website</translate>&nbsp;
+                      <translate >Open website</translate>&nbsp;
                       <i class="external icon" />
                     </a>
                   </div>
@@ -149,7 +149,7 @@ const setAllowList = async (value: boolean) => {
                     rel="noopener noreferrer"
                   >
                     <i class="wrench icon" />
-                    <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                    <translate >View in Django's admin</translate>&nbsp;
                   </a>
                 </div>
                 <div
@@ -162,7 +162,7 @@ const setAllowList = async (value: boolean) => {
                     @click.prevent="setAllowList(false)"
                   >
                     <i class="x icon" />
-                    <translate translate-context="Content/Moderation/Action/Verb">
+                    <translate >
                       Remove from allow-list
                     </translate>
                   </button>
@@ -172,7 +172,7 @@ const setAllowList = async (value: boolean) => {
                     @click.prevent="setAllowList(true)"
                   >
                     <i class="check icon" />
-                    <translate translate-context="Content/Moderation/Action/Verb">
+                    <translate >
                       Add to allow-list
                     </translate>
                   </button>
@@ -195,13 +195,13 @@ const setAllowList = async (value: boolean) => {
                 <header class="ui header">
                   <h3>
                     <i class="shield icon" />
-                    <translate translate-context="Content/Moderation/Card.Title">
+                    <translate >
                       You don't have any rule in place for this domain.
                     </translate>
                   </h3>
                 </header>
                 <p>
-                  <translate translate-context="Content/Moderation/Card.Paragraph">
+                  <translate >
                     Moderation policies help you control how your instance interact with a given domain or account.
                   </translate>
                 </p>
@@ -219,7 +219,7 @@ const setAllowList = async (value: boolean) => {
               >
                 <header class="ui header">
                   <h3>
-                    <translate translate-context="Content/Moderation/Card.Title">
+                    <translate >
                       This domain is subject to specific moderation rules
                     </translate>
                   </h3>
@@ -245,7 +245,7 @@ const setAllowList = async (value: boolean) => {
               <h3 class="ui header">
                 <i class="info icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Instance data
                   </translate>
                 </div>
@@ -254,20 +254,20 @@ const setAllowList = async (value: boolean) => {
                 <tbody>
                   <tr v-if="allowListEnabled">
                     <td>
-                      <translate translate-context="Content/Moderation/*/Adjective">
+                      <translate >
                         Is present on allow-list
                       </translate>
                     </td>
                     <td>
                       <translate
                         v-if="object.allowed"
-                        translate-context="*/*/*"
+
                       >
                         Yes
                       </translate>
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         No
                       </translate>
@@ -275,7 +275,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/*/Table.Label">
+                      <translate >
                         Last checked
                       </translate>
                     </td>
@@ -286,7 +286,7 @@ const setAllowList = async (value: boolean) => {
                       />
                       <translate
                         v-else
-                        translate-context="*/*/*"
+
                       >
                         N/A
                       </translate>
@@ -296,44 +296,44 @@ const setAllowList = async (value: boolean) => {
                   <template v-if="object.nodeinfo && object.nodeinfo.status === 'ok'">
                     <tr>
                       <td>
-                        <translate translate-context="Content/Moderation/Table.Label">
+                        <translate >
                           Software
                         </translate>
                       </td>
                       <td>
-                        {{ get(object, 'nodeinfo.payload.software.name', $pgettext('*/*/*', 'N/A')) }} ({{ get(object, 'nodeinfo.payload.software.version', $pgettext('*/*/*', 'N/A')) }})
+                        {{ get(object, 'nodeinfo.payload.software.name', t('N/A')) }} ({{ get(object, 'nodeinfo.payload.software.version', t('N/A')) }})
                       </td>
                     </tr>
                     <tr>
                       <td>
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Name
                         </translate>
                       </td>
                       <td>
-                        {{ get(object, 'nodeinfo.payload.metadata.nodeName', $pgettext('*/*/*', 'N/A')) }}
+                        {{ get(object, 'nodeinfo.payload.metadata.nodeName', t('N/A')) }}
                       </td>
                     </tr>
                     <tr>
                       <td>
-                        <translate translate-context="Content/*/*">
+                        <translate >
                           Total users
                         </translate>
                       </td>
                       <td>
-                        {{ get(object, 'nodeinfo.payload.usage.users.total', $pgettext('*/*/*', 'N/A')) }}
+                        {{ get(object, 'nodeinfo.payload.usage.users.total', t('N/A')) }}
                       </td>
                     </tr>
                   </template>
                   <template v-if="object.nodeinfo && object.nodeinfo.status === 'error'">
                     <tr>
                       <td>
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Status
                         </translate>
                       </td>
                       <td>
-                        <translate translate-context="Content/Moderation/Table">
+                        <translate >
                           Error while fetching node info
                         </translate>&nbsp;
 
@@ -348,7 +348,7 @@ const setAllowList = async (value: boolean) => {
                 :url="'manage/federation/domains/' + object.name + '/nodeinfo/'"
                 @action-done="refreshNodeInfo"
               >
-                <translate translate-context="Content/Moderation/Button.Label/Verb">
+                <translate >
                   Refresh node info
                 </translate>
               </ajax-button>
@@ -359,7 +359,7 @@ const setAllowList = async (value: boolean) => {
               <h3 class="ui header">
                 <i class="feed icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Activity
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -381,7 +381,7 @@ const setAllowList = async (value: boolean) => {
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">
+                      <translate >
                         First seen
                       </translate>
                     </td>
@@ -394,7 +394,7 @@ const setAllowList = async (value: boolean) => {
                       <router-link
                         :to="{name: 'manage.moderation.accounts.list', query: {q: 'domain:' + object.name }}"
                       >
-                        <translate translate-context="Content/Moderation/Table.Label.Link">
+                        <translate >
                           Known accounts
                         </translate>
                       </router-link>
@@ -405,7 +405,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Emitted messages
                       </translate>
                     </td>
@@ -415,7 +415,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Received library follows
                       </translate>
                     </td>
@@ -425,7 +425,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Emitted library follows
                       </translate>
                     </td>
@@ -442,7 +442,7 @@ const setAllowList = async (value: boolean) => {
               <h3 class="ui header">
                 <i class="music icon" />
                 <div class="content">
-                  <translate translate-context="Content/Moderation/Title">
+                  <translate >
                     Audio content
                   </translate>&nbsp;
                   <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
@@ -464,7 +464,7 @@ const setAllowList = async (value: boolean) => {
                 <tbody>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label/Noun">
+                      <translate >
                         Cached size
                       </translate>
                     </td>
@@ -474,7 +474,7 @@ const setAllowList = async (value: boolean) => {
                   </tr>
                   <tr>
                     <td>
-                      <translate translate-context="Content/Moderation/Table.Label">
+                      <translate >
                         Total size
                       </translate>
                     </td>
@@ -485,7 +485,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.channels', query: {q: getQuery('domain', object.name) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Channels
                         </translate>
                       </router-link>
@@ -497,7 +497,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('domain', object.name) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Libraries
                         </translate>
                       </router-link>
@@ -509,7 +509,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('domain', object.name) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Uploads
                         </translate>
                       </router-link>
@@ -521,7 +521,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('domain', object.name) }}">
-                        <translate translate-context="*/*/*/Noun">
+                        <translate >
                           Artists
                         </translate>
                       </router-link>
@@ -533,7 +533,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('domain', object.name) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Albums
                         </translate>
                       </router-link>
@@ -545,7 +545,7 @@ const setAllowList = async (value: boolean) => {
                   <tr>
                     <td>
                       <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('domain', object.name) }}">
-                        <translate translate-context="*/*/*">
+                        <translate >
                           Tracks
                         </translate>
                       </router-link>
diff --git a/front/src/views/admin/moderation/DomainsList.vue b/front/src/views/admin/moderation/DomainsList.vue
index 08cefbe90..9dae75126 100644
--- a/front/src/views/admin/moderation/DomainsList.vue
+++ b/front/src/views/admin/moderation/DomainsList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BackendError } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 
@@ -15,12 +15,12 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const router = useRouter()
 
 const labels = computed(() => ({
-  domains: $pgettext('*/Moderation/*/Noun', 'Domains')
+  domains: t('Domains')
 }))
 
 const domainName = ref('')
@@ -50,7 +50,7 @@ const createDomain = async () => {
   <main v-title="labels.domains">
     <section class="ui vertical stripe segment">
       <h2 class="ui left floated header">
-        <translate translate-context="*/Moderation/*/Noun">
+        <translate >
           Domains
         </translate>
       </h2>
@@ -64,7 +64,7 @@ const createDomain = async () => {
           class="ui negative message"
         >
           <h4 class="header">
-            <translate translate-context="Content/Moderation/Message.Title">
+            <translate >
               Error while creating domain
             </translate>
           </h4>
@@ -79,7 +79,7 @@ const createDomain = async () => {
         </div>
         <div class="inline fields">
           <div class="field">
-            <label for="add-domain"><translate translate-context="Content/Moderation/Form.Label/Verb">Add a domain</translate></label>
+            <label for="add-domain"><translate >Add a domain</translate></label>
             <input
               id="add-domain"
               v-model="domainName"
@@ -97,7 +97,7 @@ const createDomain = async () => {
               type="checkbox"
               name="allowed"
             >
-            <label for="allowed"><translate translate-context="Content/Moderation/Action/Verb">Add to allow-list</translate></label>
+            <label for="allowed"><translate >Add to allow-list</translate></label>
           </div>
           <div class="field">
             <button
@@ -105,7 +105,7 @@ const createDomain = async () => {
               type="submit"
               :disabled="isCreating"
             >
-              <translate translate-context="Content/Moderation/Button/Verb">
+              <translate >
                 Add
               </translate>
             </button>
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index 5baf6087c..3837fb0ad 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -6,7 +6,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -87,11 +87,11 @@ watch([page, query], fetchData)
 onOrderingUpdate(fetchData)
 fetchData()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by account, summary, domain…'),
-  reports: $pgettext('*/Moderation/*/Noun', 'Reports')
+  searchPlaceholder: t('Search by account, summary, domain…'),
+  reports: t('Reports')
 }))
 </script>
 
@@ -99,7 +99,7 @@ const labels = computed(() => ({
   <main v-title="labels.reports">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate translate-context="*/Moderation/*/Noun">
+        <translate >
           Reports
         </translate>
       </h2>
@@ -107,7 +107,7 @@ const labels = computed(() => ({
       <div class="ui inline form">
         <div class="fields">
           <div class="ui field">
-            <label for="reports-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+            <label for="reports-search"><translate >Search</translate></label>
             <form @submit.prevent="query = search.value">
               <input
                 id="reports-search"
@@ -120,7 +120,7 @@ const labels = computed(() => ({
             </form>
           </div>
           <div class="field">
-            <label for="reports-status"><translate translate-context="*/*/*">Status</translate></label>
+            <label for="reports-status"><translate >Status</translate></label>
             <select
               id="reports-status"
               class="ui dropdown"
@@ -128,17 +128,17 @@ const labels = computed(() => ({
               @change="addSearchToken('resolved', ($event.target as HTMLSelectElement).value)"
             >
               <option value="">
-                <translate translate-context="Content/*/Dropdown">
+                <translate >
                   All
                 </translate>
               </option>
               <option value="yes">
-                <translate translate-context="Content/*/*/Short">
+                <translate >
                   Resolved
                 </translate>
               </option>
               <option value="no">
-                <translate translate-context="Content/*/*/Short">
+                <translate >
                   Unresolved
                 </translate>
               </option>
@@ -152,7 +152,7 @@ const labels = computed(() => ({
             @update:model-value="addSearchToken('category', $event)"
           />
           <div class="field">
-            <label for="reports-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+            <label for="reports-ordering"><translate >Ordering</translate></label>
             <select
               id="reports-ordering"
               v-model="ordering"
@@ -168,19 +168,19 @@ const labels = computed(() => ({
             </select>
           </div>
           <div class="field">
-            <label for="reports-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate></label>
+            <label for="reports-ordering-direction"><translate >Order</translate></label>
             <select
               id="reports-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 8bae4e96e..6755d2209 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/front/src/views/admin/moderation/RequestsList.vue
@@ -6,7 +6,7 @@ import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
 import { ref, computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -83,11 +83,11 @@ watch([page, query], fetchData)
 onOrderingUpdate(fetchData)
 fetchData()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by username…'),
-  reports: $pgettext('*/Moderation/*/Noun', 'User Requests')
+  searchPlaceholder: t('Search by username…'),
+  reports: t('User Requests')
 }))
 </script>
 
@@ -95,7 +95,7 @@ const labels = computed(() => ({
   <main v-title="labels.reports">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate translate-context="*/Moderation/*/Noun">
+        <translate >
           User Requests
         </translate>
       </h2>
@@ -103,7 +103,7 @@ const labels = computed(() => ({
       <div class="ui inline form">
         <div class="fields">
           <div class="ui field">
-            <label for="requests-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+            <label for="requests-search"><translate >Search</translate></label>
             <form @submit.prevent="query = search.value">
               <input
                 id="requests-search"
@@ -116,7 +116,7 @@ const labels = computed(() => ({
             </form>
           </div>
           <div class="field">
-            <label for="requests-status"><translate translate-context="*/*/*">Status</translate></label>
+            <label for="requests-status"><translate >Status</translate></label>
             <select
               id="requests-status"
               class="ui dropdown"
@@ -124,29 +124,29 @@ const labels = computed(() => ({
               @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
             >
               <option value="">
-                <translate translate-context="Content/*/Dropdown">
+                <translate >
                   All
                 </translate>
               </option>
               <option value="pending">
-                <translate translate-context="Content/Library/*/Short">
+                <translate >
                   Pending
                 </translate>
               </option>
               <option value="approved">
-                <translate translate-context="Content/*/*/Short">
+                <translate >
                   Approved
                 </translate>
               </option>
               <option value="refused">
-                <translate translate-context="Content/*/*/Short">
+                <translate >
                   Refused
                 </translate>
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="requests-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+            <label for="requests-ordering"><translate >Ordering</translate></label>
             <select
               id="requests-ordering"
               v-model="ordering"
@@ -162,19 +162,19 @@ const labels = computed(() => ({
             </select>
           </div>
           <div class="field">
-            <label for="requests-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate></label>
+            <label for="requests-ordering-direction"><translate >Order</translate></label>
             <select
               id="requests-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
diff --git a/front/src/views/admin/users/Base.vue b/front/src/views/admin/users/Base.vue
index bfb673a22..a42ea8b82 100644
--- a/front/src/views/admin/users/Base.vue
+++ b/front/src/views/admin/users/Base.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  manageUsers: $pgettext('Head/Admin/Title', 'Manage users'),
-  secondaryMenu: $pgettext('Menu/*/Hidden text', 'Secondary menu')
+  manageUsers: t('Manage users'),
+  secondaryMenu: t('Secondary menu')
 }))
 </script>
 
@@ -24,7 +24,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.users.users.list'}"
       >
-        <translate translate-context="*/*/*/Noun">
+        <translate >
           Users
         </translate>
       </router-link>
@@ -32,7 +32,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'manage.users.invitations.list'}"
       >
-        <translate translate-context="*/Admin/*/Noun">
+        <translate >
           Invitations
         </translate>
       </router-link>
diff --git a/front/src/views/auth/Callback.vue b/front/src/views/auth/Callback.vue
index 6003af600..e42f24517 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>
-              <translate translate-context="*/Login/*">
+              <translate >
                 Logging in…
               </translate>
             </h2>
diff --git a/front/src/views/auth/EmailConfirm.vue b/front/src/views/auth/EmailConfirm.vue
index 58fd27efd..0d8049b65 100644
--- a/front/src/views/auth/EmailConfirm.vue
+++ b/front/src/views/auth/EmailConfirm.vue
@@ -2,7 +2,7 @@
 import type { BackendError } from '~/types'
 
 import { computed, ref, onMounted } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
@@ -12,10 +12,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  confirm: $pgettext('Head/Signup/Title', 'Confirm your e-mail address')
+  confirm: t('Confirm your e-mail address')
 }))
 
 const errors = ref([] as string[])
@@ -60,7 +60,7 @@ onMounted(() => {
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Signup/Paragraph">
+              <translate >
                 Could not confirm your e-mail address
               </translate>
             </h4>
@@ -74,7 +74,7 @@ onMounted(() => {
             </ul>
           </div>
           <div class="field">
-            <label for="confirmation-code"><translate translate-context="Content/Signup/Form.Label">Confirmation code</translate></label>
+            <label for="confirmation-code"><translate >Confirmation code</translate></label>
             <input
               id="confirmation-code"
               v-model="key"
@@ -84,7 +84,7 @@ onMounted(() => {
             >
           </div>
           <router-link :to="{path: '/login'}">
-            <translate translate-context="Content/Signup/Link/Verb">
+            <translate >
               Return to login
             </translate>
           </router-link>
@@ -100,17 +100,17 @@ onMounted(() => {
           class="ui positive message"
         >
           <h4 class="header">
-            <translate translate-context="Content/Signup/Message">
+            <translate >
               E-mail address confirmed
             </translate>
           </h4>
           <p>
-            <translate translate-context="Content/Signup/Paragraph">
+            <translate >
               You can now use the service without limitations.
             </translate>
           </p>
           <router-link :to="{name: 'login'}">
-            <translate translate-context="Content/Signup/Link/Verb">
+            <translate >
               Proceed to login
             </translate>
           </router-link>
diff --git a/front/src/views/auth/Login.vue b/front/src/views/auth/Login.vue
index b3e23f219..a9abfeef1 100644
--- a/front/src/views/auth/Login.vue
+++ b/front/src/views/auth/Login.vue
@@ -4,7 +4,7 @@ import type { RouteLocationRaw } from 'vue-router'
 import LoginForm from '~/components/auth/LoginForm.vue'
 import { useRouter } from 'vue-router'
 import { computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { whenever } from '@vueuse/core'
 
@@ -16,9 +16,9 @@ const props = withDefaults(defineProps<Props>(), {
   next: '/library'
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/Login/Title', 'Log In')
+  title: t('Log In')
 }))
 
 const store = useStore()
@@ -37,7 +37,7 @@ whenever(() => store.state.auth.authenticated, () => {
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          <translate translate-context="Content/Login/Title/Verb">
+          <translate >
             Log in to your Funkwhale account
           </translate>
         </h2>
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index b8788995f..6217e8a92 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -2,7 +2,7 @@
 import type { BackendError } from '~/types'
 
 import { computed, ref, onMounted } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import axios from 'axios'
@@ -13,13 +13,13 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const router = useRouter()
 
 const labels = computed(() => ({
-  placeholder: $pgettext('Content/Signup/Input.Placeholder', 'Enter the e-mail address linked to your account'),
-  reset: $pgettext('*/Login/*/Verb', 'Reset your password')
+  placeholder: t('Enter the e-mail address linked to your account'),
+  reset: t('Reset your password')
 }))
 
 const email = ref(props.defaultEmail)
@@ -51,7 +51,7 @@ onMounted(() => emailInput.value.focus())
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          <translate translate-context="*/Login/*/Verb">
+          <translate >
             Reset your password
           </translate>
         </h2>
@@ -65,7 +65,7 @@ onMounted(() => emailInput.value.focus())
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Signup/Card.Title">
+              <translate >
                 Error while asking for a password reset
               </translate>
             </h4>
@@ -79,12 +79,12 @@ onMounted(() => emailInput.value.focus())
             </ul>
           </div>
           <p>
-            <translate translate-context="Content/Signup/Paragraph">
+            <translate >
               Use this form to request a password reset. We will send an e-mail to the given address with instructions to reset your password.
             </translate>
           </p>
           <div class="field">
-            <label for="account-email"><translate translate-context="Content/Signup/Input.Label">Account's e-mail address</translate></label>
+            <label for="account-email"><translate >Account's e-mail address</translate></label>
             <input
               id="account-email"
               ref="emailInput"
@@ -97,7 +97,7 @@ onMounted(() => emailInput.value.focus())
             >
           </div>
           <router-link :to="{path: '/login'}">
-            <translate translate-context="Content/Signup/Link">
+            <translate >
               Back to login
             </translate>
           </router-link>
@@ -105,7 +105,7 @@ onMounted(() => emailInput.value.focus())
             :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
             type="submit"
           >
-            <translate translate-context="Content/Signup/Button.Label/Verb">
+            <translate >
               Ask for a password reset
             </translate>
           </button>
diff --git a/front/src/views/auth/PasswordResetConfirm.vue b/front/src/views/auth/PasswordResetConfirm.vue
index 1b7ce3333..5cd0c3615 100644
--- a/front/src/views/auth/PasswordResetConfirm.vue
+++ b/front/src/views/auth/PasswordResetConfirm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BackendError } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 
 import axios from 'axios'
@@ -15,10 +15,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  changePassword: $pgettext('*/Signup/Title', 'Change your password')
+  changePassword: t('Change your password')
 }))
 
 const newPassword = ref('')
@@ -68,7 +68,7 @@ const submit = async () => {
             class="ui negative message"
           >
             <h4 class="header">
-              <translate translate-context="Content/Signup/Card.Title">
+              <translate >
                 Error while changing your password
               </translate>
             </h4>
@@ -83,14 +83,14 @@ const submit = async () => {
           </div>
           <template v-if="token && uid">
             <div class="field">
-              <label for="password-field"><translate translate-context="Content/Settings/Input.Label">New password</translate></label>
+              <label for="password-field"><translate >New password</translate></label>
               <password-input
                 v-model="newPassword"
                 field-id="password-field"
               />
             </div>
             <router-link :to="{path: '/login'}">
-              <translate translate-context="Content/Signup/Link">
+              <translate >
                 Back to login
               </translate>
             </router-link>
@@ -98,14 +98,14 @@ const submit = async () => {
               :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
               type="submit"
             >
-              <translate translate-context="Content/Signup/Button.Label">
+              <translate >
                 Update your password
               </translate>
             </button>
           </template>
           <template v-else>
             <p>
-              <translate translate-context="Content/Signup/Paragraph">
+              <translate >
                 If the e-mail address provided in the previous step is valid and linked to a user account, you should receive an e-mail with reset instructions in the next couple of minutes.
               </translate>
             </p>
@@ -116,17 +116,17 @@ const submit = async () => {
           class="ui positive message"
         >
           <h4 class="header">
-            <translate translate-context="Content/Signup/Card.Title">
+            <translate >
               Password updated successfully
             </translate>
           </h4>
           <p>
-            <translate translate-context="Content/Signup/Card.Paragraph">
+            <translate >
               Your password has been updated successfully.
             </translate>
           </p>
           <router-link :to="{name: 'login'}">
-            <translate translate-context="Content/Signup/Link/Verb">
+            <translate >
               Proceed to login
             </translate>
           </router-link>
diff --git a/front/src/views/auth/Plugins.vue b/front/src/views/auth/Plugins.vue
index 9bffebea6..79f071e2f 100644
--- a/front/src/views/auth/Plugins.vue
+++ b/front/src/views/auth/Plugins.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 
 import axios from 'axios'
@@ -8,10 +8,10 @@ import PluginForm from '~/components/auth/Plugin.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  title: $pgettext('Head/Login/Title', 'Manage plugins')
+  title: t('Manage plugins')
 }))
 
 const isLoading = ref(false)
diff --git a/front/src/views/auth/ProfileActivity.vue b/front/src/views/auth/ProfileActivity.vue
index 7fe4ba95b..6918d80a6 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">
-        <translate translate-context="Content/Home/Title">
+        <translate >
           Recently listened
         </translate>
       </h2>
@@ -41,7 +41,7 @@ const recentActivity = ref(0)
     <div class="ui hidden divider" />
     <div>
       <h2 class="ui header">
-        <translate translate-context="Content/Home/Title">
+        <translate >
           Recently favorited
         </translate>
       </h2>
@@ -54,7 +54,7 @@ const recentActivity = ref(0)
     <div class="ui hidden divider" />
     <div>
       <h2 class="ui header">
-        <translate translate-context="*/*/*">
+        <translate >
           Playlists
         </translate>
       </h2>
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 5a747c03f..fe32cf08f 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -3,7 +3,7 @@ import type { Actor } from '~/types'
 
 import { onBeforeRouteUpdate } from 'vue-router'
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -41,9 +41,9 @@ const routerParams = computed(() => props.domain
   : { username: props.username }
 )
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  usernameProfile: $pgettext('Head/Profile/Title', "%{ username }'s profile", { username: props.username })
+  usernameProfile: t("%{ username }'s profile", { username: props.username })
 }))
 
 onBeforeRouteUpdate((to) => {
@@ -102,7 +102,7 @@ watch(props, fetchData, { immediate: true })
                 <i class="external icon" />
                 <translate
                   :translate-params="{domain: object.domain}"
-                  translate-context="Content/*/Button.Label/Verb"
+
                 >View on %{ domain }</translate>
               </a>
               <div
@@ -122,7 +122,7 @@ watch(props, fetchData, { immediate: true })
                 :to="{name: 'manage.moderation.accounts.detail', params: {id: object.full_username}}"
               >
                 <i class="wrench icon" />
-                <translate translate-context="Content/Moderation/Link">
+                <translate >
                   Open in moderation interface
                 </translate>
               </router-link>
@@ -153,7 +153,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">
-                <translate translate-context="Content/Profile/Button.Paragraph">
+                <translate >
                   This is you!
                 </translate>
               </div>
@@ -178,7 +178,7 @@ watch(props, fetchData, { immediate: true })
                   class="item"
                   :to="{name: 'profile.overview', params: routerParams}"
                 >
-                  <translate translate-context="Content/Profile/Link">
+                  <translate >
                     Overview
                   </translate>
                 </router-link>
@@ -186,7 +186,7 @@ watch(props, fetchData, { immediate: true })
                   class="item"
                   :to="{name: 'profile.activity', params: routerParams}"
                 >
-                  <translate translate-context="Content/Profile/*">
+                  <translate >
                     Activity
                   </translate>
                 </router-link>
diff --git a/front/src/views/auth/ProfileOverview.vue b/front/src/views/auth/ProfileOverview.vue
index 022e00366..8749b5c79 100644
--- a/front/src/views/auth/ProfileOverview.vue
+++ b/front/src/views/auth/ProfileOverview.vue
@@ -42,7 +42,7 @@ const createForm = ref()
     </div>
     <div>
       <h2 class="ui with-actions header">
-        <translate translate-context="*/*/*">
+        <translate >
           Channels
         </translate>
         <div
@@ -54,13 +54,13 @@ const createForm = ref()
             @click.stop.prevent="showCreateModal = true"
           >
             <i class="plus icon" />
-            <translate translate-context="Content/Profile/Button">Add new</translate>
+            <translate >Add new</translate>
           </a>
         </div>
       </h2>
       <channels-widget :filters="{scope: `actor:${object.full_username}`}" />
       <h2 class="ui with-actions header">
-        <translate translate-context="Content/Profile/Header">
+        <translate >
           User Libraries
         </translate>
         <div
@@ -69,7 +69,7 @@ const createForm = ref()
         >
           <router-link :to="{name: 'content.libraries.index'}">
             <i class="plus icon" />
-            <translate translate-context="Content/Profile/Button">
+            <translate >
               Add new
             </translate>
           </router-link>
@@ -77,7 +77,7 @@ const createForm = ref()
       </h2>
       <library-widget :url="`federation/actors/${object.full_username}/libraries/`">
         <template #title>
-          <translate translate-context="Content/Profile/Paragraph">
+          <translate >
             This user shared the following libraries
           </translate>
         </template>
@@ -88,19 +88,19 @@ const createForm = ref()
       <h4 class="header">
         <translate
           v-if="step === 1"
-          translate-context="Content/Channel/*/Verb"
+
         >
           Create channel
         </translate>
         <translate
           v-else-if="category === 'podcast'"
-          translate-context="Content/Channel/*"
+
         >
           Podcast channel
         </translate>
         <translate
           v-else
-          translate-context="Content/Channel/*"
+
         >
           Artist channel
         </translate>
@@ -126,7 +126,7 @@ const createForm = ref()
           v-if="step === 1"
           class="ui basic deny button"
         >
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Cancel
           </translate>
         </button>
@@ -135,7 +135,7 @@ const createForm = ref()
           class="ui basic button"
           @click.stop.prevent="step -= 1"
         >
-          <translate translate-context="*/*/Button.Label/Verb">
+          <translate >
             Previous step
           </translate>
         </button>
@@ -144,7 +144,7 @@ const createForm = ref()
           class="ui primary button"
           @click.stop.prevent="step += 1"
         >
-          <translate translate-context="*/*/Button.Label">
+          <translate >
             Next step
           </translate>
         </button>
@@ -155,7 +155,7 @@ const createForm = ref()
           :disabled="!submittable && !loading"
           @click.prevent.stop="createForm.submit"
         >
-          <translate translate-context="*/Channels/Button.Label">
+          <translate >
             Create channel
           </translate>
         </button>
diff --git a/front/src/views/auth/Signup.vue b/front/src/views/auth/Signup.vue
index 4b16abbd1..d32e1ca95 100644
--- a/front/src/views/auth/Signup.vue
+++ b/front/src/views/auth/Signup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
 import SignupForm from '~/components/auth/SignupForm.vue'
@@ -16,10 +16,10 @@ withDefaults(defineProps<Props>(), {
   next: '/'
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  title: $pgettext('*/Signup/Title', 'Sign Up')
+  title: t('Sign Up')
 }))
 </script>
 
@@ -31,7 +31,7 @@ const labels = computed(() => ({
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          <translate translate-context="Content/Signup/Title">
+          <translate >
             Create a Funkwhale account
           </translate>
         </h2>
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 9b6162454..fc4e452f1 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -3,7 +3,7 @@ import type { Channel } from '~/types'
 
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 import { computed, ref, reactive, watch, watchEffect } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -53,9 +53,9 @@ const externalDomain = computed(() => {
   return parser.hostname
 })
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('*/*/*', 'Channel')
+  title: t('Channel')
 }))
 
 onBeforeRouteUpdate((to) => {
@@ -169,7 +169,7 @@ const updateSubscriptionCount = (delta: number) => {
                   <div class="ui hidden very small divider" />
                   <translate
                     v-if="object.artist?.content_category === 'podcast'"
-                    translate-context="Content/Channel/Paragraph"
+
                     translate-plural="%{ count } episodes"
                     :translate-n="totalTracks"
                     :translate-params="{count: totalTracks}"
@@ -178,7 +178,7 @@ const updateSubscriptionCount = (delta: number) => {
                   </translate>
                   <translate
                     v-else
-                    translate-context="*/*/*"
+
                     :translate-params="{count: totalTracks}"
                     :translate-n="totalTracks"
                     translate-plural="%{ count } tracks"
@@ -188,7 +188,7 @@ const updateSubscriptionCount = (delta: number) => {
                 </template>
                 <template v-if="object.attributed_to.full_username === $store.state.auth.fullUsername || $store.getters['channels/isSubscribed'](object.uuid)">
                   <br><translate
-                    translate-context="Content/Channel/Paragraph"
+
                     translate-plural="%{ count } subscribers"
                     :translate-n="object?.subscriptions_count"
                     :translate-params="{count: object?.subscriptions_count}"
@@ -196,7 +196,7 @@ const updateSubscriptionCount = (delta: number) => {
                     %{ count } subscriber
                   </translate>
                   <br><translate
-                    translate-context="Content/Channel/Paragraph"
+
                     translate-plural="%{ count } listenings"
                     :translate-n="object?.downloads_count"
                     :translate-params="{count: object?.downloads_count}"
@@ -216,7 +216,7 @@ const updateSubscriptionCount = (delta: number) => {
                   class="tiny"
                 >
                   <h4 class="header">
-                    <translate translate-context="Popup/Channel/Title/Verb">
+                    <translate >
                       Subscribe to this channel
                     </translate>
                   </h4>
@@ -225,7 +225,7 @@ const updateSubscriptionCount = (delta: number) => {
                       <template v-if="$store.state.auth.authenticated">
                         <h3>
                           <i class="user icon" />
-                          <translate translate-context="Content/Channels/Header">
+                          <translate >
                             Subscribe on Funkwhale
                           </translate>
                         </h3>
@@ -238,12 +238,12 @@ const updateSubscriptionCount = (delta: number) => {
                       <template v-if="object.rss_url">
                         <h3>
                           <i class="feed icon" />
-                          <translate translate-context="Content/Channels/Header">
+                          <translate >
                             Subscribe via RSS
                           </translate>
                         </h3>
                         <p>
-                          <translate translate-context="Content/Channels/Label">
+                          <translate >
                             Copy-paste the following URL in your favorite podcatcher:
                           </translate>
                         </p>
@@ -252,12 +252,12 @@ const updateSubscriptionCount = (delta: number) => {
                       <template v-if="object.actor">
                         <h3>
                           <i class="bell icon" />
-                          <translate translate-context="Content/Channels/Header">
+                          <translate >
                             Subscribe on the Fediverse
                           </translate>
                         </h3>
                         <p>
-                          <translate translate-context="Content/Channels/Label">
+                          <translate >
                             If you're using Mastodon or other fediverse applications, you can subscribe to this account:
                           </translate>
                         </p>
@@ -270,7 +270,7 @@ const updateSubscriptionCount = (delta: number) => {
                   </div>
                   <div class="actions">
                     <button class="ui basic deny button">
-                      <translate translate-context="*/*/Button.Label/Verb">
+                      <translate >
                         Cancel
                       </translate>
                     </button>
@@ -290,7 +290,7 @@ const updateSubscriptionCount = (delta: number) => {
                       @click.prevent="showEmbedModal = !showEmbedModal"
                     >
                       <i class="code icon" />
-                      <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
+                      <translate >Embed</translate>
                     </a>
                     <a
                       v-if="object.actor && object.actor.domain != $store.getters['instance/domain']"
@@ -301,7 +301,7 @@ const updateSubscriptionCount = (delta: number) => {
                       <i class="external icon" />
                       <translate
                         :translate-params="{domain: object.actor.domain}"
-                        translate-context="Content/*/Button.Label/Verb"
+
                       >View on %{ domain }</translate>
                     </a>
                     <div class="divider" />
@@ -323,7 +323,7 @@ const updateSubscriptionCount = (delta: number) => {
                         @click.stop.prevent="showEditModal = true"
                       >
                         <i class="edit icon" />
-                        <translate translate-context="*/*/*/Verb">Edit…</translate>
+                        <translate >Edit…</translate>
                       </a>
                       <dangerous-button
                         v-if="object"
@@ -331,12 +331,12 @@ const updateSubscriptionCount = (delta: number) => {
                         @confirm="remove()"
                       >
                         <i class="ui trash icon" />
-                        <translate translate-context="*/*/*/Verb">
+                        <translate >
                           Delete…
                         </translate>
                         <template #modal-header>
                           <p>
-                            <translate translate-context="Popup/Channel/Title">
+                            <translate >
                               Delete this Channel?
                             </translate>
                           </p>
@@ -344,7 +344,7 @@ const updateSubscriptionCount = (delta: number) => {
                         <template #modal-content>
                           <div>
                             <p>
-                              <translate translate-context="Content/Moderation/Paragraph">
+                              <translate >
                                 The channel will be deleted, as well as any related files and data. This action is irreversible.
                               </translate>
                             </p>
@@ -352,7 +352,7 @@ const updateSubscriptionCount = (delta: number) => {
                         </template>
                         <template #modal-confirm>
                           <p>
-                            <translate translate-context="*/*/*/Verb">
+                            <translate >
                               Delete
                             </translate>
                           </p>
@@ -366,7 +366,7 @@ const updateSubscriptionCount = (delta: number) => {
                         :to="{name: 'manage.channels.detail', params: {id: object.uuid}}"
                       >
                         <i class="wrench icon" />
-                        <translate translate-context="Content/Moderation/Link">
+                        <translate >
                           Open in moderation interface
                         </translate>
                       </router-link>
@@ -401,7 +401,7 @@ const updateSubscriptionCount = (delta: number) => {
                     <i class="external link icon" />
                     <translate
                       :translate-params="{domain: externalDomain}"
-                      translate-context="Content/Channel/Paragraph"
+
                     >Mirrored from %{ domain }</translate>
                   </a>
                 </div>
@@ -417,7 +417,7 @@ const updateSubscriptionCount = (delta: number) => {
                   @click.prevent.stop="$store.commit('channels/showUploadModal', {show: true, config: {channel: object}})"
                 >
                   <i class="upload icon" />
-                  <translate translate-context="Content/Channels/Button.Label/Verb">
+                  <translate >
                     Upload
                   </translate>
                 </button>
@@ -428,7 +428,7 @@ const updateSubscriptionCount = (delta: number) => {
                   class="vibrant"
                   :artist="object.artist"
                 >
-                  <translate translate-context="Content/Channels/Button.Label/Verb">
+                  <translate >
                     Play
                   </translate>
                 </play-button>
@@ -446,7 +446,7 @@ const updateSubscriptionCount = (delta: number) => {
                 v-model:show="showEmbedModal"
               >
                 <h4 class="header">
-                  <translate translate-context="Popup/Artist/Title/Verb">
+                  <translate >
                     Embed this artist work on your website
                   </translate>
                 </h4>
@@ -460,7 +460,7 @@ const updateSubscriptionCount = (delta: number) => {
                 </div>
                 <div class="actions">
                   <button class="ui basic deny button">
-                    <translate translate-context="*/*/Button.Label/Verb">
+                    <translate >
                       Cancel
                     </translate>
                   </button>
@@ -473,13 +473,13 @@ const updateSubscriptionCount = (delta: number) => {
                 <h4 class="header">
                   <translate
                     v-if="object.artist?.content_category === 'podcast'"
-                    translate-context="Content/Channel/*"
+
                   >
                     Podcast channel
                   </translate>
                   <translate
                     v-else
-                    translate-context="Content/Channel/*"
+
                   >
                     Artist channel
                   </translate>
@@ -496,7 +496,7 @@ const updateSubscriptionCount = (delta: number) => {
                 </div>
                 <div class="actions">
                   <button class="ui left floated basic deny button">
-                    <translate translate-context="*/*/Button.Label/Verb">
+                    <translate >
                       Cancel
                     </translate>
                   </button>
@@ -505,7 +505,7 @@ const updateSubscriptionCount = (delta: number) => {
                     :disabled="!edit.submittable"
                     @click.stop="editForm?.submit"
                   >
-                    <translate translate-context="*/Channels/Button.Label">
+                    <translate >
                       Update channel
                     </translate>
                   </button>
@@ -528,7 +528,7 @@ const updateSubscriptionCount = (delta: number) => {
 
                 :to="{name: 'channels.detail', params: {id: id}}"
               >
-                <translate translate-context="Content/Channels/Link">
+                <translate >
                   Overview
                 </translate>
               </router-link>
@@ -539,13 +539,13 @@ const updateSubscriptionCount = (delta: number) => {
               >
                 <translate
                   v-if="isPodcast"
-                  translate-context="Content/Channels/*"
+
                 >
                   All Episodes
                 </translate>
                 <translate
                   v-else
-                  translate-context="*/*/*"
+
                 >
                   Tracks
                 </translate>
diff --git a/front/src/views/channels/DetailOverview.vue b/front/src/views/channels/DetailOverview.vue
index 9a1ecbd9a..eea8e36b4 100644
--- a/front/src/views/channels/DetailOverview.vue
+++ b/front/src/views/channels/DetailOverview.vue
@@ -101,19 +101,19 @@ const albumModal = ref()
           @click="pendingUploads.length = 0"
         />
         <h3 class="ui header">
-          <translate translate-context="Content/Channel/Header">
+          <translate >
             Uploads published successfully
           </translate>
         </h3>
         <p>
-          <translate translate-context="Content/Channel/Paragraph">
+          <translate >
             Processed uploads:
           </translate> {{ processedUploads.length }}/{{ pendingUploads.length }}
         </p>
       </template>
       <template v-else-if="isOver">
         <h3 class="ui header">
-          <translate translate-context="Content/Channel/Header">
+          <translate >
             Some uploads couldn't be published
           </translate>
         </h3>
@@ -123,7 +123,7 @@ const albumModal = ref()
           class="ui basic button"
           :to="{name: 'content.libraries.files', query: {q: 'status:skipped'}}"
         >
-          <translate translate-context="Content/Channel/Button">
+          <translate >
             View skipped uploads
           </translate>
         </router-link>
@@ -132,7 +132,7 @@ const albumModal = ref()
           class="ui basic button"
           :to="{name: 'content.libraries.files', query: {q: 'status:errored'}}"
         >
-          <translate translate-context="Content/Channel/Button">
+          <translate >
             View errored uploads
           </translate>
         </router-link>
@@ -140,17 +140,17 @@ const albumModal = ref()
       <template v-else>
         <div class="ui inline right floated active loader" />
         <h3 class="ui header">
-          <translate translate-context="Content/Channel/Header">
+          <translate >
             Uploads are being processed
           </translate>
         </h3>
         <p>
-          <translate translate-context="Content/Channel/Paragraph">
+          <translate >
             Your uploads are being processed by Funkwhale and will be live very soon.
           </translate>
         </p>
         <p>
-          <translate translate-context="Content/Channel/Paragraph">
+          <translate >
             Processed uploads:
           </translate> {{ processedUploads.length }}/{{ pendingUploads.length }}
         </p>
@@ -174,13 +174,13 @@ const albumModal = ref()
       <h2 class="ui header">
         <translate
           v-if="isPodcast"
-          translate-context="Content/Channel/Paragraph"
+
         >
           Latest episodes
         </translate>
         <translate
           v-else
-          translate-context="Content/Channel/Paragraph"
+
         >
           Latest tracks
         </translate>
@@ -195,13 +195,13 @@ const albumModal = ref()
       <h2 class="ui with-actions header">
         <translate
           v-if="isPodcast"
-          translate-context="Content/Channel/Paragraph"
+
         >
           Series
         </translate>
         <translate
           v-else
-          translate-context="*/*/*"
+
         >
           Albums
         </translate>
@@ -211,7 +211,7 @@ const albumModal = ref()
         >
           <a @click.stop.prevent="albumModal.show = true">
             <i class="plus icon" />
-            <translate translate-context="Content/Profile/Button">Add new</translate>
+            <translate >Add new</translate>
           </a>
         </div>
       </h2>
diff --git a/front/src/views/channels/SubscriptionsList.vue b/front/src/views/channels/SubscriptionsList.vue
index 3e14aa0b6..899eebff5 100644
--- a/front/src/views/channels/SubscriptionsList.vue
+++ b/front/src/views/channels/SubscriptionsList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Channel } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { ref, computed } from 'vue'
 
 import axios from 'axios'
@@ -23,10 +23,10 @@ const props = withDefaults(defineProps<Props>(), {
 const query = ref(props.defaultQuery)
 const widgetKey = ref(new Date().toLocaleString())
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Content/Subscriptions/Header', 'Subscribed Channels'),
-  searchPlaceholder: $pgettext('Content/Subscriptions/Form.Placeholder', 'Filter by name…')
+  title: t('Subscribed Channels'),
+  searchPlaceholder: t('Filter by name…')
 }))
 
 const previousPage = ref()
@@ -66,7 +66,7 @@ const showSubscribeModal = ref(false)
         <div class="actions">
           <a @click.stop.prevent="showSubscribeModal = true">
             <i class="plus icon" />
-            <translate translate-context="Content/Profile/Button">Add new</translate>
+            <translate >Add new</translate>
           </a>
         </div>
       </h1>
@@ -76,7 +76,7 @@ const showSubscribeModal = ref(false)
         :fullscreen="false"
       >
         <h2 class="header">
-          <translate translate-context="*/*/*/Noun">
+          <translate >
             Subscription
           </translate>
         </h2>
@@ -94,7 +94,7 @@ const showSubscribeModal = ref(false)
         </div>
         <div class="actions">
           <button class="ui basic deny button">
-            <translate translate-context="*/*/Button.Label/Verb">
+            <translate >
               Cancel
             </translate>
           </button>
@@ -104,7 +104,7 @@ const showSubscribeModal = ref(false)
             class="ui primary button"
           >
             <i class="bookmark icon" />
-            <translate translate-context="*/*/*/Verb">
+            <translate >
               Subscribe
             </translate>
           </button>
diff --git a/front/src/views/content/Base.vue b/front/src/views/content/Base.vue
index 796438a3f..07ba9d2eb 100644
--- a/front/src/views/content/Base.vue
+++ b/front/src/views/content/Base.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  secondaryMenu: $pgettext('Menu/*/Hidden text', 'Secondary menu'),
-  title: $pgettext('*/Library/*/Verb', 'Add content')
+  secondaryMenu: t('Secondary menu'),
+  title: t('Add content')
 }))
 </script>
 
@@ -24,7 +24,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'content.libraries.index'}"
       >
-        <translate translate-context="*/*/*/Noun">
+        <translate >
           Libraries
         </translate>
       </router-link>
@@ -32,7 +32,7 @@ const labels = computed(() => ({
         class="ui item"
         :to="{name: 'content.libraries.files'}"
       >
-        <translate translate-context="*/*/*">
+        <translate >
           Tracks
         </translate>
       </router-link>
diff --git a/front/src/views/content/Home.vue b/front/src/views/content/Home.vue
index 420f5a299..553018f39 100644
--- a/front/src/views/content/Home.vue
+++ b/front/src/views/content/Home.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { humanSize } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { useStore } from '~/store'
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  title: $pgettext('Content/Library/Title/Verb', 'Add and manage content')
+  title: t('Add and manage content')
 }))
 
 const store = useStore()
@@ -24,22 +24,22 @@ const defaultQuota = computed(() => humanSize(quota.value * 1e6))
       <h1>{{ labels.title }}</h1>
       <p>
         <strong><translate
-          translate-context="Content/Library/Paragraph"
+
           :translate-params="{quota: defaultQuota}"
         >This instance offers up to %{quota} of storage space for every user.</translate></strong>
       </p>
       <div class="ui segment">
         <h2>
           <i class="feed icon" />&nbsp;
-          <translate translate-context="Content/Library/Title/Verb">
+          <translate >
             Publish your work in a channel
           </translate>
         </h2>
         <p>
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             If you are a musician or a podcaster, channels are designed for you!
           </translate>&#32;
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Share your work publicly and get subscribers on Funkwhale, the Fediverse or any podcasting application.
           </translate>
         </p>
@@ -47,7 +47,7 @@ const defaultQuota = computed(() => humanSize(quota.value * 1e6))
           :to="{name: 'profile.overview', params: {username: store.state.auth.username}, hash: '#channels'}"
           class="ui primary button"
         >
-          <translate translate-context="Content/Library/Button.Label/Verb">
+          <translate >
             Get started
           </translate>
         </router-link>
@@ -55,12 +55,12 @@ const defaultQuota = computed(() => humanSize(quota.value * 1e6))
       <div class="ui segment">
         <h2>
           <i class="cloud icon" />&nbsp;
-          <translate translate-context="Content/Library/Title/Verb">
+          <translate >
             Upload third-party content in a library
           </translate>
         </h2>
         <p>
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Upload your personal music library to Funkwhale to enjoy it from anywhere and share it with friends and family.
           </translate>
         </p>
@@ -68,7 +68,7 @@ const defaultQuota = computed(() => humanSize(quota.value * 1e6))
           :to="{name: 'content.libraries.index'}"
           class="ui primary button"
         >
-          <translate translate-context="Content/Library/Button.Label/Verb">
+          <translate >
             Get started
           </translate>
         </router-link>
@@ -76,12 +76,12 @@ const defaultQuota = computed(() => humanSize(quota.value * 1e6))
       <div class="ui segment">
         <h2>
           <i class="download icon" />&nbsp;
-          <translate translate-context="Content/Library/Title/Verb">
+          <translate >
             Follow remote libraries
           </translate>
         </h2>
         <p>
-          <translate translate-context="Content/Library/Paragraph">
+          <translate >
             Follow libraries from other users to get access to new music. Public libraries can be followed immediately, while following a private library requires approval from its owner.
           </translate>
         </p>
@@ -89,7 +89,7 @@ const defaultQuota = computed(() => humanSize(quota.value * 1e6))
           :to="{name: 'content.remote.index'}"
           class="ui primary button"
         >
-          <translate translate-context="Content/Library/Button.Label/Verb">
+          <translate >
             Get started
           </translate>
         </router-link>
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 477112c99..b1a5c7aca 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -2,7 +2,7 @@
 import type { Library, PrivacyLevel } from '~/types'
 
 import { humanSize } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -13,11 +13,11 @@ interface Props {
 
 defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const sharedLabels = useSharedLabels()
 
-const sizeLabel = computed(() => $pgettext('Content/Library/Card.Help text', 'Total size of the files in this library'))
+const sizeLabel = computed(() => t('Total size of the files in this library'))
 
 const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fields.privacy_level.choices[level].toLowerCase()}`
 </script>
@@ -70,7 +70,7 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
         </span>
         <i class="music icon" />
         <translate
-          translate-context="*/*/*"
+
           :translate-params="{count: library.uploads_count}"
           :translate-n="library.uploads_count"
           translate-plural="%{ count } tracks"
@@ -84,7 +84,7 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
         :to="{name: 'library.detail.upload', params: {id: library.uuid}}"
         class="ui button"
       >
-        <translate translate-context="Content/Library/Card.Button.Label/Verb">
+        <translate >
           Upload
         </translate>
       </router-link>
@@ -92,7 +92,7 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
         :to="{name: 'library.detail', params: {id: library.uuid}}"
         class="ui button"
       >
-        <translate translate-context="Content/Library/Card.Button.Label/Noun">
+        <translate >
           Library Details
         </translate>
       </router-link>
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index 953c5251c..a2171878d 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -7,7 +7,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { humanSize, truncate } from '~/utils/filters'
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 
 import time from '~/utils/time'
 import axios from 'axios'
@@ -65,19 +65,19 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['artist_name', 'artist_name']
 ]
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
 const actions = computed(() => [
   {
     name: 'delete',
-    label: $pgettext('*/*/*/Verb', 'Delete'),
+    label: t('Delete'),
     isDangerous: true,
     allowAll: true,
     confirmColor: 'danger'
   },
   {
     name: 'relaunch_import',
-    label: $pgettext('Content/Library/Dropdown/Verb', 'Restart import'),
+    label: t('Restart import'),
     isDangerous: true,
     allowAll: true,
     filterCheckable: (filter: { import_status: ImportStatus }) => {
@@ -120,8 +120,8 @@ fetchData()
 
 const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
-  searchPlaceholder: $pgettext('Content/Library/Input.Placeholder', 'Search by title, artist, album…'),
-  showStatus: $pgettext('Content/Library/Button.Label/Verb', 'Show information about the upload status for this track')
+  searchPlaceholder: t('Search by title, artist, album…'),
+  showStatus: t('Show information about the upload status for this track')
 }))
 
 const detailedUpload = ref()
@@ -138,7 +138,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
       <div class="fields">
         <div class="ui six wide field">
           <label for="files-search">
-            <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
+            <translate >Search</translate>
           </label>
           <form @submit.prevent="query = search.value">
             <input
@@ -153,7 +153,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
         </div>
         <div class="field">
           <label for="import-status">
-            <translate translate-context="Content/*/*/Noun">Import status</translate>
+            <translate >Import status</translate>
           </label>
           <select
             id="import-status"
@@ -162,32 +162,32 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
           >
             <option value>
-              <translate translate-context="Content/*/Dropdown">
+              <translate >
                 All
               </translate>
             </option>
             <option value="draft">
-              <translate translate-context="Content/Library/*/Short">
+              <translate >
                 Draft
               </translate>
             </option>
             <option value="pending">
-              <translate translate-context="Content/Library/*/Short">
+              <translate >
                 Pending
               </translate>
             </option>
             <option value="skipped">
-              <translate translate-context="Content/Library/*">
+              <translate >
                 Skipped
               </translate>
             </option>
             <option value="errored">
-              <translate translate-context="Content/Library/Dropdown">
+              <translate >
                 Failed
               </translate>
             </option>
             <option value="finished">
-              <translate translate-context="Content/Library/*">
+              <translate >
                 Finished
               </translate>
             </option>
@@ -195,7 +195,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
         </div>
         <div class="field">
           <label for="ordering-select">
-            <translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate>
+            <translate >Ordering</translate>
           </label>
           <select
             id="ordering-select"
@@ -213,7 +213,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
         </div>
         <div class="field">
           <label for="ordering-direction">
-            <translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate>
+            <translate >Ordering direction</translate>
           </label>
           <select
             id="ordering-direction"
@@ -221,12 +221,12 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             class="ui dropdown"
           >
             <option value="+">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Ascending
               </translate>
             </option>
             <option value="-">
-              <translate translate-context="Content/Search/Dropdown">
+              <translate >
                 Descending
               </translate>
             </option>
@@ -253,7 +253,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
         <div class="ui icon header">
           <i class="upload icon" />
           <translate
-            translate-context="Content/Home/Placeholder"
+
           >
             No tracks have been added to this library yet
           </translate>
@@ -274,37 +274,37 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
       >
         <template #header-cells>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Title
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Artist
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Album
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*/Noun">
+            <translate >
               Upload date
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Import status
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*">
+            <translate >
               Duration
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/*/*/Noun">
+            <translate >
               Size
             </translate>
           </th>
@@ -364,7 +364,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             {{ time.parse(scope.obj.duration) }}
           </td>
           <td v-else>
-            <translate translate-context="*/*/*">
+            <translate >
               N/A
             </translate>
           </td>
@@ -372,7 +372,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
             {{ humanSize(scope.obj.size) }}
           </td>
           <td v-else>
-            <translate translate-context="*/*/*">
+            <translate >
               N/A
             </translate>
           </td>
@@ -390,7 +390,7 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
 
       <span v-if="result && result.results.length > 0">
         <translate
-          translate-context="Content/*/Paragraph"
+
           :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
         >Showing results %{ start }-%{ end } on %{ total }</translate>
       </span>
diff --git a/front/src/views/content/libraries/Form.vue b/front/src/views/content/libraries/Form.vue
index 030ef437c..44e8d019b 100644
--- a/front/src/views/content/libraries/Form.vue
+++ b/front/src/views/content/libraries/Form.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Library, BackendError, PrivacyLevel } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
 
@@ -24,14 +24,14 @@ interface Props {
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const sharedLabels = useSharedLabels()
 const store = useStore()
 
 const labels = computed(() => ({
-  descriptionPlaceholder: $pgettext('Content/Library/Input.Placeholder', 'This library contains my personal music, I hope you like it.'),
-  namePlaceholder: $pgettext('Content/Library/Input.Placeholder', 'My awesome library')
+  descriptionPlaceholder: t('This library contains my personal music, I hope you like it.'),
+  namePlaceholder: t('My awesome library')
 }))
 
 const currentVisibilityLevel = ref(props.library?.privacy_level ?? 'me')
@@ -59,8 +59,8 @@ const submit = async () => {
 
     store.commit('ui/addMessage', {
       content: props.library
-        ? $pgettext('Content/Library/Message', 'Library updated')
-        : $pgettext('Content/Library/Message', 'Library created'),
+        ? t('Library updated')
+        : t('Library created'),
       date: new Date()
     })
   } catch (error) {
@@ -77,7 +77,7 @@ const remove = async () => {
     await axios.delete(`libraries/${props.library?.uuid}/`)
     emit('deleted')
     store.commit('ui/addMessage', {
-      content: $pgettext('Content/Library/Message', 'Library deleted'),
+      content: t('Library deleted'),
       date: new Date()
     })
   } catch (error) {
@@ -94,7 +94,7 @@ const remove = async () => {
     @submit.prevent="submit"
   >
     <p v-if="!library">
-      <translate translate-context="Content/Library/Paragraph">
+      <translate >
         Libraries help you organize and share your music collections. You can upload your own music collection to Funkwhale and share it with your friends and family.
       </translate>
     </p>
@@ -104,7 +104,7 @@ const remove = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/*/Error message.Title">
+        <translate >
           Error
         </translate>
       </h4>
@@ -118,7 +118,7 @@ const remove = async () => {
       </ul>
     </div>
     <div class="required field">
-      <label for="current-name"><translate translate-context="*/*/*/Noun">Name</translate></label>
+      <label for="current-name"><translate >Name</translate></label>
       <input
         id="current-name"
         v-model="currentName"
@@ -129,7 +129,7 @@ const remove = async () => {
       >
     </div>
     <div class="field">
-      <label for="current-description"><translate translate-context="*/*/*/Noun">Description</translate></label>
+      <label for="current-description"><translate >Description</translate></label>
       <textarea
         id="current-description"
         v-model="currentDescription"
@@ -138,9 +138,9 @@ const remove = async () => {
       />
     </div>
     <div class="field">
-      <label for="visibility-level"><translate translate-context="*/*/*">Visibility</translate></label>
+      <label for="visibility-level"><translate >Visibility</translate></label>
       <p>
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           You are able to share your library with other people, regardless of its visibility.
         </translate>
       </p>
@@ -164,13 +164,13 @@ const remove = async () => {
     >
       <translate
         v-if="library"
-        translate-context="Content/Library/Button.Label/Verb"
+
       >
         Update library
       </translate>
       <translate
         v-else
-        translate-context="Content/Library/Button.Label/Verb"
+
       >
         Create library
       </translate>
@@ -181,26 +181,26 @@ const remove = async () => {
       class="ui right floated basic danger button"
       @confirm="remove"
     >
-      <translate translate-context="*/*/*/Verb">
+      <translate >
         Delete
       </translate>
       <template #modal-header>
         <p>
-          <translate translate-context="Popup/Library/Title">
+          <translate >
             Delete this library?
           </translate>
         </p>
       </template>
       <template #modal-content>
         <p>
-          <translate translate-context="Popup/Library/Paragraph">
+          <translate >
             The library and all its tracks will be deleted. This can not be undone.
           </translate>
         </p>
       </template>
       <template #modal-confirm>
         <div>
-          <translate translate-context="Popup/Library/Button.Label/Verb">
+          <translate >
             Delete library
           </translate>
         </div>
diff --git a/front/src/views/content/libraries/Home.vue b/front/src/views/content/libraries/Home.vue
index 7b8c64c11..4deae8a74 100644
--- a/front/src/views/content/libraries/Home.vue
+++ b/front/src/views/content/libraries/Home.vue
@@ -46,7 +46,7 @@ const libraryCreated = (library: Library) => {
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Loading Libraries…
         </translate>
       </div>
@@ -56,13 +56,13 @@ const libraryCreated = (library: Library) => {
       class="ui text container"
     >
       <h1 class="ui header">
-        <translate translate-context="Content/Library/Title">
+        <translate >
           My libraries
         </translate>
       </h1>
 
       <p v-if="libraries.length == 0">
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Looks like you don't have a library, it's time to create one.
         </translate>
       </p>
@@ -79,7 +79,7 @@ const libraryCreated = (library: Library) => {
           v-else
           class="minus icon"
         />
-        <translate translate-context="Content/Library/Link/Verb">Create a new library</translate>
+        <translate >Create a new library</translate>
       </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 40a66befa..343bfa88b 100644
--- a/front/src/views/content/libraries/Quota.vue
+++ b/front/src/views/content/libraries/Quota.vue
@@ -53,7 +53,7 @@ const purgeErroredFiles = () => purge('errored')
 <template>
   <div class="ui segment">
     <h3 class="ui header">
-      <translate translate-context="Content/Library/Title">
+      <translate >
         Current usage
       </translate>
     </h3>
@@ -62,7 +62,7 @@ const purgeErroredFiles = () => purge('errored')
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Loading usage data…
         </translate>
       </div>
@@ -84,7 +84,7 @@ const purgeErroredFiles = () => purge('errored')
         class="label"
       >
         <translate
-          translate-context="Content/Library/Paragraph"
+
           :translate-params="{max: humanSize(quotaStatus.max * 1000 * 1000), current: humanSize(quotaStatus.current * 1000 * 1000)}"
         >
           %{ current } used on %{ max } allowed
@@ -105,7 +105,7 @@ const purgeErroredFiles = () => purge('errored')
             {{ humanSize(quotaStatus.pending * 1000 * 1000) }}
           </div>
           <div class="label">
-            <translate translate-context="Content/Library/Label">
+            <translate >
               Pending files
             </translate>
           </div>
@@ -115,7 +115,7 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic primary tiny button"
             :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}"
           >
-            <translate translate-context="Content/Library/Link/Verb">
+            <translate >
               View files
             </translate>
           </router-link>
@@ -124,26 +124,26 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic tiny button"
             :action="purgePendingFiles"
           >
-            <translate translate-context="*/*/*/Verb">
+            <translate >
               Purge
             </translate>
             <template #modal-header>
               <p>
-                <translate translate-context="Popup/Library/Title">
+                <translate >
                   Purge pending files?
                 </translate>
               </p>
             </template>
             <template #modal-content>
               <p>
-                <translate translate-context="Popup/Library/Paragraph">
+                <translate >
                   Removes uploaded but yet to be processed tracks completely, adding the corresponding data to your quota.
                 </translate>
               </p>
             </template>
             <template #modal-confirm>
               <div>
-                <translate translate-context="*/*/*/Verb">
+                <translate >
                   Purge
                 </translate>
               </div>
@@ -160,7 +160,7 @@ const purgeErroredFiles = () => purge('errored')
             {{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
           </div>
           <div class="label">
-            <translate translate-context="Content/Library/Label">
+            <translate >
               Skipped files
             </translate>
           </div>
@@ -170,7 +170,7 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic primary tiny button"
             :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'skipped'}])}}"
           >
-            <translate translate-context="Content/Library/Link/Verb">
+            <translate >
               View files
             </translate>
           </router-link>
@@ -178,26 +178,26 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic tiny button"
             :action="purgeSkippedFiles"
           >
-            <translate translate-context="*/*/*/Verb">
+            <translate >
               Purge
             </translate>
             <template #modal-header>
               <p>
-                <translate translate-context="Popup/Library/Title">
+                <translate >
                   Purge skipped files?
                 </translate>
               </p>
             </template>
             <template #modal-content>
               <p>
-                <translate translate-context="Popup/Library/Paragraph">
+                <translate >
                   Removes uploaded tracks skipped during the import processes completely, adding the corresponding data to your quota.
                 </translate>
               </p>
             </template>
             <template #modal-confirm>
               <div>
-                <translate translate-context="*/*/*/Verb">
+                <translate >
                   Purge
                 </translate>
               </div>
@@ -214,7 +214,7 @@ const purgeErroredFiles = () => purge('errored')
             {{ humanSize(quotaStatus.errored * 1000 * 1000) }}
           </div>
           <div class="label">
-            <translate translate-context="Content/Library/Label">
+            <translate >
               Errored files
             </translate>
           </div>
@@ -224,7 +224,7 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic primary tiny button"
             :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'errored'}])}}"
           >
-            <translate translate-context="Content/Library/Link/Verb">
+            <translate >
               View files
             </translate>
           </router-link>
@@ -232,26 +232,26 @@ const purgeErroredFiles = () => purge('errored')
             class="ui basic tiny button"
             :action="purgeErroredFiles"
           >
-            <translate translate-context="*/*/*/Verb">
+            <translate >
               Purge
             </translate>
             <template #modal-header>
               <p>
-                <translate translate-context="Popup/Library/Title">
+                <translate >
                   Purge errored files?
                 </translate>
               </p>
             </template>
             <template #modal-content>
               <p>
-                <translate translate-context="Popup/Library/Paragraph">
+                <translate >
                   Removes uploaded tracks that could not be processed by the server completely, adding the corresponding data to your quota.
                 </translate>
               </p>
             </template>
             <template #modal-confirm>
               <div>
-                <translate translate-context="*/*/*/Verb">
+                <translate >
                   Purge
                 </translate>
               </div>
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index ee69032fa..5e90442bd 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -3,7 +3,7 @@ import type { Library } from '~/types'
 
 import { useTimeoutFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -47,11 +47,11 @@ const radioPlayable = computed(() => (
   && (library.value.privacy_level === 'everyone' || library.value.follow?.approved)
 ))
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
   tooltips: {
-    me: $pgettext('Content/Library/Card.Help text', 'This library is private and your approval from its owner is needed to access its content'),
-    everyone: $pgettext('Content/Library/Card.Help text', 'This library is public and you can access its content freely')
+    me: t('This library is private and your approval from its owner is needed to access its content'),
+    everyone: t('This library is public and you can access its content freely')
   }
 }))
 
@@ -65,8 +65,8 @@ const launchScan = async () => {
     store.commit('ui/addMessage', {
       date: new Date(),
       content: response.data.status === 'skipped'
-        ? $pgettext('Content/Library/Message', 'Scan skipped (previous scan is too recent)')
-        : $pgettext('Content/Library/Message', 'Scan launched')
+        ? t('Scan skipped (previous scan is too recent)')
+        : t('Scan launched')
     })
   } catch (error) {
     useErrorHandler(error as Error)
@@ -194,7 +194,7 @@ watch(showScan, (shouldShow) => {
       <div class="meta">
         <i class="music icon" />
         <translate
-          translate-context="*/*/*"
+
           :translate-params="{count: library.uploads_count}"
           :translate-n="library.uploads_count"
           translate-plural="%{ count } tracks"
@@ -208,14 +208,14 @@ watch(showScan, (shouldShow) => {
       >
         <template v-if="latestScan.status === 'pending'">
           <i class="hourglass icon" />
-          <translate translate-context="Content/Library/Card.List item">
+          <translate >
             Scan pending
           </translate>
         </template>
         <template v-if="latestScan.status === 'scanning'">
           <i class="loading spinner icon" />
           <translate
-            translate-context="Content/Library/Card.List item"
+
             :translate-params="{progress: scanProgress}"
           >
             Scanning… (%{ progress }%)
@@ -223,19 +223,19 @@ watch(showScan, (shouldShow) => {
         </template>
         <template v-else-if="latestScan.status === 'errored'">
           <i class="dangerdownload icon" />
-          <translate translate-context="Content/Library/Card.List item">
+          <translate >
             Problem during scanning
           </translate>
         </template>
         <template v-else-if="latestScan.status === 'finished' && latestScan.errored_files === 0">
           <i class="success download icon" />
-          <translate translate-context="Content/Library/Card.List item">
+          <translate >
             Scanned
           </translate>
         </template>
         <template v-else-if="latestScan.status === 'finished' && latestScan.errored_files > 0">
           <i class="warning download icon" />
-          <translate translate-context="Content/Library/Card.List item">
+          <translate >
             Scanned with errors
           </translate>
         </template>
@@ -244,7 +244,7 @@ watch(showScan, (shouldShow) => {
           class="link right floated"
           @click.prevent="showScan = !showScan"
         >
-          <translate translate-context="Content/Library/Card.Button.Label/Noun">Details</translate>
+          <translate >Details</translate>
           <i
             v-if="showScan"
             class="angle down icon"
@@ -256,11 +256,11 @@ watch(showScan, (shouldShow) => {
         </a>
         <div v-if="showScan">
           <template v-if="latestScan.modification_date">
-            <translate translate-context="Content/Library/Card.List item/Noun">
+            <translate >
               Last update:
             </translate><human-date :date="latestScan.modification_date" /><br>
           </template>
-          <translate translate-context="Content/Library/Card.List item/Noun">
+          <translate >
             Failed tracks:
           </translate> {{ latestScan.errored_files }}
         </div>
@@ -274,7 +274,7 @@ watch(showScan, (shouldShow) => {
           class="right floated link"
           @click.prevent="launchScan"
         >
-          <translate translate-context="Content/Library/Card.Button.Label/Verb">Scan now</translate> <i class="paper plane icon" />
+          <translate >Scan now</translate> <i class="paper plane icon" />
         </a>
       </div>
     </div>
@@ -290,7 +290,7 @@ watch(showScan, (shouldShow) => {
     >
       <div class="ui form">
         <div class="field">
-          <label :for="library.fid"><translate translate-context="Content/Library/Title">Sharing link</translate></label>
+          <label :for="library.fid"><translate >Sharing link</translate></label>
           <copy-input
             :id="library.fid"
             :button-classes="'basic'"
@@ -314,7 +314,7 @@ watch(showScan, (shouldShow) => {
           :class="['ui', 'success', {'loading': isLoadingFollow}, 'button']"
           @click="follow()"
         >
-          <translate translate-context="Content/Library/Card.Button.Label/Verb">
+          <translate >
             Follow
           </translate>
         </button>
@@ -323,7 +323,7 @@ watch(showScan, (shouldShow) => {
             class="ui disabled button"
           >
             <i class="hourglass icon" />
-            <translate translate-context="Content/Library/Card.Paragraph">
+            <translate >
               Follow request pending approval
             </translate>
           </button>
@@ -331,7 +331,7 @@ watch(showScan, (shouldShow) => {
             class="ui button"
             @click="unfollow"
           >
-            <translate translate-context="Content/Library/Card.Paragraph">
+            <translate >
               Cancel follow request
             </translate>
           </button>
@@ -341,12 +341,12 @@ watch(showScan, (shouldShow) => {
             :class="['ui', 'button']"
             :action="unfollow"
           >
-            <translate translate-context="*/Library/Button.Label/Verb">
+            <translate >
               Unfollow
             </translate>
             <template #modal-header>
               <p>
-                <translate translate-context="Popup/Library/Title">
+                <translate >
                   Unfollow this library?
                 </translate>
               </p>
@@ -354,7 +354,7 @@ watch(showScan, (shouldShow) => {
             <template #modal-content>
               <div>
                 <p>
-                  <translate translate-context="Popup/Library/Paragraph">
+                  <translate >
                     By unfollowing this library, you loose access to its content.
                   </translate>
                 </p>
@@ -362,7 +362,7 @@ watch(showScan, (shouldShow) => {
             </template>
             <template #modal-confirm>
               <div>
-                <translate translate-context="*/Library/Button.Label/Verb">
+                <translate >
                   Unfollow
                 </translate>
               </div>
diff --git a/front/src/views/content/remote/Home.vue b/front/src/views/content/remote/Home.vue
index a831746ac..1e1587dee 100644
--- a/front/src/views/content/remote/Home.vue
+++ b/front/src/views/content/remote/Home.vue
@@ -47,7 +47,7 @@ const scanResult = ref()
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Loading remote libraries…
         </translate>
       </div>
@@ -57,12 +57,12 @@ const scanResult = ref()
       class="ui text container"
     >
       <h1 class="ui header">
-        <translate translate-context="Content/Library/Title/Noun">
+        <translate >
           Remote libraries
         </translate>
       </h1>
       <p>
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Remote libraries are owned by other users on the network. You can access them as long as they are public or you are granted access.
         </translate>
       </p>
@@ -80,7 +80,7 @@ const scanResult = ref()
       </div>
       <template v-if="existingFollows && existingFollows.count > 0">
         <h2>
-          <translate translate-context="Content/Library/Title">
+          <translate >
             Known libraries
           </translate>
         </h2>
@@ -89,7 +89,7 @@ const scanResult = ref()
           class="discrete link"
           @click.prevent="fetchData"
         >
-          <i :class="['ui', 'circular', 'refresh', 'icon']" /> <translate translate-context="Content/*/Button.Label/Short, Verb">Refresh</translate>
+          <i :class="['ui', 'circular', 'refresh', 'icon']" /> <translate >Refresh</translate>
         </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 7446dc443..c7ea1dc02 100644
--- a/front/src/views/content/remote/ScanForm.vue
+++ b/front/src/views/content/remote/ScanForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BackendError } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 
 import axios from 'axios'
@@ -12,11 +12,11 @@ interface Events {
 
 const emit = defineEmits<Events>()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 
 const labels = computed(() => ({
-  placeholder: $pgettext('Content/Library/Input.Placeholder', 'Enter a library URL'),
-  submitLibrarySearch: $pgettext('Content/Library/Input.Label', 'Submit search')
+  placeholder: t('Enter a library URL'),
+  submitLibrarySearch: t('Submit search')
 }))
 
 const errors = ref([] as string[])
@@ -49,7 +49,7 @@ const scan = async () => {
       class="ui negative message"
     >
       <h4 class="header">
-        <translate translate-context="Content/Library/Error message.Title">
+        <translate >
           Could not fetch remote library
         </translate>
       </h4>
@@ -63,7 +63,7 @@ const scan = async () => {
       </ul>
     </div>
     <div class="ui field">
-      <label for="library-search"><translate translate-context="Content/Library/Input.Label/Verb">Search a remote library</translate></label>
+      <label for="library-search"><translate >Search a remote library</translate></label>
       <div :class="['ui', 'action', {loading: isLoading}, 'input']">
         <input
           id="library-search"
diff --git a/front/src/views/library/DetailAlbums.vue b/front/src/views/library/DetailAlbums.vue
index 2d3be6ac5..cb4dbcb83 100644
--- a/front/src/views/library/DetailAlbums.vue
+++ b/front/src/views/library/DetailAlbums.vue
@@ -25,13 +25,13 @@ defineProps<Props>()
           <p>
             <translate
               v-if="isOwner"
-              translate-context="*/*/*"
+
             >
               This library is empty, you should upload something in it!
             </translate>
             <translate
               v-else
-              translate-context="*/*/*"
+
             >
               You may need to follow this library to see its content.
             </translate>
diff --git a/front/src/views/library/DetailOverview.vue b/front/src/views/library/DetailOverview.vue
index b1672c06f..46b4241bc 100644
--- a/front/src/views/library/DetailOverview.vue
+++ b/front/src/views/library/DetailOverview.vue
@@ -34,13 +34,13 @@ defineProps<Props>()
           <p>
             <translate
               v-if="isOwner"
-              translate-context="*/*/*"
+
             >
               This library is empty, you should upload something in it!
             </translate>
             <translate
               v-else
-              translate-context="*/*/*"
+
             >
               You may need to follow this library to see its content.
             </translate>
diff --git a/front/src/views/library/DetailTracks.vue b/front/src/views/library/DetailTracks.vue
index 8983a0991..21a252e60 100644
--- a/front/src/views/library/DetailTracks.vue
+++ b/front/src/views/library/DetailTracks.vue
@@ -24,13 +24,13 @@ defineProps<Props>()
           <p>
             <translate
               v-if="isOwner"
-              translate-context="*/*/*"
+
             >
               This library is empty, you should upload something in it!
             </translate>
             <translate
               v-else
-              translate-context="*/*/*"
+
             >
               You may need to follow this library to see its content.
             </translate>
diff --git a/front/src/views/library/Edit.vue b/front/src/views/library/Edit.vue
index 8563c0143..865b5287d 100644
--- a/front/src/views/library/Edit.vue
+++ b/front/src/views/library/Edit.vue
@@ -59,7 +59,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
     />
     <div class="ui hidden divider" />
     <h2 class="ui header">
-      <translate translate-context="*/*/*">
+      <translate >
         Library contents
       </translate>
     </h2>
@@ -67,7 +67,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
 
     <div class="ui hidden divider" />
     <h2 class="ui header">
-      <translate translate-context="Content/Federation/*/Noun">
+      <translate >
         Followers
       </translate>
     </h2>
@@ -76,7 +76,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
       :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
-        <translate translate-context="Content/Library/Paragraph">
+        <translate >
           Loading followers…
         </translate>
       </div>
@@ -88,22 +88,22 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
       <thead>
         <tr>
           <th>
-            <translate translate-context="Content/Library/Table.Label">
+            <translate >
               User
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Library/Table.Label">
+            <translate >
               Date
             </translate>
           </th>
           <th>
-            <translate translate-context="*/*/*">
+            <translate >
               Status
             </translate>
           </th>
           <th>
-            <translate translate-context="Content/Library/Table.Label">
+            <translate >
               Action
             </translate>
           </th>
@@ -120,19 +120,19 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
             v-if="follow.approved === null"
             :class="['ui', 'warning', 'basic', 'label']"
           >
-            <translate translate-context="Content/Library/Table/Short">Pending approval</translate>
+            <translate >Pending approval</translate>
           </span>
           <span
             v-else-if="follow.approved === true"
             :class="['ui', 'success', 'basic', 'label']"
           >
-            <translate translate-context="Content/Library/Table/Short">Accepted</translate>
+            <translate >Accepted</translate>
           </span>
           <span
             v-else-if="follow.approved === false"
             :class="['ui', 'danger', 'basic', 'label']"
           >
-            <translate translate-context="Content/Library/*/Short">Rejected</translate>
+            <translate >Rejected</translate>
           </span>
         </td>
         <td>
@@ -141,7 +141,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
             :class="['ui', 'mini', 'icon', 'labeled', 'success', 'button']"
             @click="updateApproved(follow, true)"
           >
-            <i class="ui check icon" /> <translate translate-context="Content/Library/Button.Label">
+            <i class="ui check icon" /> <translate >
               Accept
             </translate>
           </button>
@@ -150,7 +150,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
             :class="['ui', 'mini', 'icon', 'labeled', 'danger', 'button']"
             @click="updateApproved(follow, false)"
           >
-            <i class="ui x icon" /> <translate translate-context="Content/Library/Button.Label">
+            <i class="ui x icon" /> <translate >
               Reject
             </translate>
           </button>
@@ -158,7 +158,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
       </tr>
     </table>
     <p v-else>
-      <translate translate-context="Content/Library/Paragraph">
+      <translate >
         Nobody is following this library
       </translate>
     </p>
diff --git a/front/src/views/library/LibraryBase.vue b/front/src/views/library/LibraryBase.vue
index 59f6729a4..9a1b28718 100644
--- a/front/src/views/library/LibraryBase.vue
+++ b/front/src/views/library/LibraryBase.vue
@@ -4,7 +4,7 @@ import type { Library } from '~/types'
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 import { computed, ref, watch, watchEffect } from 'vue'
 import { humanSize } from '~/utils/filters'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
@@ -34,18 +34,18 @@ const isPlayable = computed(() => (object.value?.uploads_count ?? 0) > 0 && (
     || (store.getters['libraries/follow'](object.value?.uuid) || {}).approved === true
 ))
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('*/*/*', 'Library'),
+  title: t('Library'),
   visibility: {
-    me: $pgettext('Content/Library/Card.Help text', 'Private'),
-    instance: $pgettext('Content/Library/Card.Help text', 'Restricted'),
-    everyone: $pgettext('Content/Library/Card.Help text', 'Public')
+    me: t('Private'),
+    instance: t('Restricted'),
+    everyone: t('Public')
   },
   tooltips: {
-    me: $pgettext('Content/Library/Card.Help text', 'This library is private and your approval from its owner is needed to access its content'),
-    instance: $pgettext('Content/Library/Card.Help text', 'This library is restricted to users on this pod only'),
-    everyone: $pgettext('Content/Library/Card.Help text', 'This library is public and you can access its content freely')
+    me: t('This library is private and your approval from its owner is needed to access its content'),
+    instance: t('This library is restricted to users on this pod only'),
+    everyone: t('This library is public and you can access its content freely')
   }
 }))
 
@@ -112,7 +112,7 @@ const updateUploads = (count: number) => {
                 <i class="external icon" />
                 <translate
                   :translate-params="{domain: object.actor.domain}"
-                  translate-context="Content/*/Button.Label/Verb"
+
                 >View on %{ domain }</translate>
               </a>
               <div
@@ -132,7 +132,7 @@ const updateUploads = (count: number) => {
                 :to="{name: 'manage.library.libraries.detail', params: {id: object.uuid}}"
               >
                 <i class="wrench icon" />
-                <translate translate-context="Content/Moderation/Link">
+                <translate >
                   Open in moderation interface
                 </translate>
               </router-link>
@@ -154,7 +154,7 @@ const updateUploads = (count: number) => {
                   :truncate-length="0"
                 >
                   <translate
-                    translate-context="*/*/*"
+
                     :translate-params="{username: object.actor.full_username}"
                   >
                     Owned by %{ username }
@@ -187,7 +187,7 @@ const updateUploads = (count: number) => {
             </span> ·
             <i class="music icon" />
             <translate
-              translate-context="*/*/*"
+
               :translate-params="{count: object.uploads_count}"
               :translate-n="object.uploads_count"
               translate-plural="%{ count } tracks"
@@ -230,10 +230,10 @@ const updateUploads = (count: number) => {
           <div class="ui form">
             <div class="field">
               <label for="copy-input">
-                <translate translate-context="Content/Library/Title">Sharing link</translate>
+                <translate >Sharing link</translate>
               </label>
               <p>
-                <translate translate-context="Content/Library/Paragraph">
+                <translate >
                   Share this link with other users so they can request access to this library by copy-pasting it in their pod search bar.
                 </translate>
               </p>
@@ -250,7 +250,7 @@ const updateUploads = (count: number) => {
 
                   :to="{name: 'library.detail'}"
                 >
-                  <translate translate-context="*/*/*">
+                  <translate >
                     Artists
                   </translate>
                 </router-link>
@@ -259,7 +259,7 @@ const updateUploads = (count: number) => {
 
                   :to="{name: 'library.detail.albums'}"
                 >
-                  <translate translate-context="*/*/*">
+                  <translate >
                     Albums
                   </translate>
                 </router-link>
@@ -268,7 +268,7 @@ const updateUploads = (count: number) => {
 
                   :to="{name: 'library.detail.tracks'}"
                 >
-                  <translate translate-context="*/*/*">
+                  <translate >
                     Tracks
                   </translate>
                 </router-link>
@@ -279,7 +279,7 @@ const updateUploads = (count: number) => {
                   :to="{name: 'library.detail.upload'}"
                 >
                   <i class="upload icon" />
-                  <translate translate-context="Content/Library/Card.Button.Label/Verb">
+                  <translate >
                     Upload
                   </translate>
                 </router-link>
@@ -290,7 +290,7 @@ const updateUploads = (count: number) => {
                   :to="{name: 'library.detail.edit'}"
                 >
                   <i class="pencil icon" />
-                  <translate translate-context="Content/*/Button.Label/Verb">
+                  <translate >
                     Edit
                   </translate>
                 </router-link>
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index a1d87c5d5..428fb0c00 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PlaylistTrack, Playlist } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
@@ -36,9 +36,9 @@ const showEmbedModal = ref(false)
 
 const tracks = computed(() => playlistTracks.value.map(({ track }, index) => ({ ...track, position: index + 1 })))
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  playlist: $pgettext('*/*/*', 'Playlist')
+  playlist: t('Playlist')
 }))
 
 const isLoading = ref(false)
@@ -97,7 +97,7 @@ const deletePlaylist = async () => {
                 translate-plural="Playlist containing %{ count } tracks, by %{ username }"
                 :translate-n="playlist.tracks_count"
                 :translate-params="{count: playlist.tracks_count, username: playlist.user.username}"
-                translate-context="Content/Playlist/Header.Subtitle"
+
               >
                 Playlist containing %{ count } track, by %{ username }
               </translate><br>
@@ -113,7 +113,7 @@ const deletePlaylist = async () => {
               :is-playable="playlist.is_playable"
               :tracks="tracks"
             >
-              <translate translate-context="Content/Queue/Button.Label/Short, Verb">
+              <translate >
                 Play all
               </translate>
             </play-button>
@@ -126,12 +126,12 @@ const deletePlaylist = async () => {
             >
               <i class="pencil icon" />
               <template v-if="edit">
-                <translate translate-context="Content/Playlist/Button.Label/Verb">
+                <translate >
                   Stop Editing
                 </translate>
               </template>
               <template v-else>
-                <translate translate-context="Content/*/Button.Label/Verb">
+                <translate >
                   Edit
                 </translate>
               </template>
@@ -144,7 +144,7 @@ const deletePlaylist = async () => {
               @click="showEmbedModal = !showEmbedModal"
             >
               <i class="code icon" />
-              <translate translate-context="Content/*/Button.Label/Verb">
+              <translate >
                 Embed
               </translate>
             </button>
@@ -153,13 +153,13 @@ const deletePlaylist = async () => {
               class="ui labeled danger icon button"
               :action="deletePlaylist"
             >
-              <i class="trash icon" /> <translate translate-context="*/*/*/Verb">
+              <i class="trash icon" /> <translate >
                 Delete
               </translate>
               <template #modal-header>
                 <p
                   v-translate="{playlist: playlist.name}"
-                  translate-context="Popup/Playlist/Title/Call to action"
+
                   :translate-params="{playlist: playlist.name}"
                 >
                   Do you want to delete the playlist "%{ playlist }"?
@@ -167,14 +167,14 @@ const deletePlaylist = async () => {
               </template>
               <template #modal-content>
                 <p>
-                  <translate translate-context="Popup/Playlist/Paragraph">
+                  <translate >
                     This will completely delete this playlist and cannot be undone.
                   </translate>
                 </p>
               </template>
               <template #modal-confirm>
                 <div>
-                  <translate translate-context="Popup/Playlist/Button.Label/Verb">
+                  <translate >
                     Delete playlist
                   </translate>
                 </div>
@@ -187,7 +187,7 @@ const deletePlaylist = async () => {
           v-model:show="showEmbedModal"
         >
           <h4 class="header">
-            <translate translate-context="Popup/Album/Title/Verb">
+            <translate >
               Embed this playlist on your website
             </translate>
           </h4>
@@ -201,7 +201,7 @@ const deletePlaylist = async () => {
           </div>
           <div class="actions">
             <button class="ui basic deny button">
-              <translate translate-context="*/*/Button.Label/Verb">
+              <translate >
                 Cancel
               </translate>
             </button>
@@ -218,7 +218,7 @@ const deletePlaylist = async () => {
       </template>
       <template v-else-if="tracks.length > 0">
         <h2>
-          <translate translate-context="*/*/*">
+          <translate >
             Tracks
           </translate>
         </h2>
@@ -234,7 +234,7 @@ const deletePlaylist = async () => {
       >
         <div class="ui icon header">
           <i class="list icon" />
-          <translate translate-context="Content/Home/Placeholder">
+          <translate >
             There are no tracks in this playlist yet
           </translate>
         </div>
@@ -243,7 +243,7 @@ const deletePlaylist = async () => {
           @click="edit = !edit"
         >
           <i class="pencil icon" />
-          <translate translate-context="Content/Home/CreatePlaylist">
+          <translate >
             Edit
           </translate>
         </button>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 47e75cad3..569bd56cb 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -6,7 +6,7 @@ import type { OrderingField } from '~/store/ui'
 
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
 
@@ -95,10 +95,10 @@ onOrderingUpdate(() => {
 
 onMounted(() => $('.ui.dropdown').dropdown())
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  playlists: $pgettext('*/*/*', 'Playlists'),
-  searchPlaceholder: $pgettext('Content/Playlist/Placeholder/Call to action', 'Enter playlist name…')
+  playlists: t('Playlists'),
+  searchPlaceholder: t('Enter playlist name…')
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
@@ -108,7 +108,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
   <main v-title="labels.playlists">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate translate-context="Content/Playlist/Title">
+        <translate >
           Browsing playlists
         </translate>
       </h2>
@@ -117,7 +117,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           class="ui success button"
           @click="$store.commit('playlists/showModal', true)"
         >
-          <translate translate-context="Content/Playlist/Button.Label/Verb">
+          <translate >
             Manage your playlists
           </translate>
         </button>
@@ -129,7 +129,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="fields">
           <div class="field">
-            <label for="playlists-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+            <label for="playlists-search"><translate >Search</translate></label>
             <div class="ui action input">
               <input
                 id="playlists-search"
@@ -141,14 +141,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
               <button
                 class="ui icon button"
                 type="submit"
-                :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')"
+                :aria-label="t('Search')"
               >
                 <i class="search icon" />
               </button>
             </div>
           </div>
           <div class="field">
-            <label for="playlists-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+            <label for="playlists-ordering"><translate >Ordering</translate></label>
             <select
               id="playlists-ordering"
               v-model="ordering"
@@ -164,26 +164,26 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </select>
           </div>
           <div class="field">
-            <label for="playlists-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate></label>
+            <label for="playlists-ordering-direction"><translate >Order</translate></label>
             <select
               id="playlists-ordering-direction"
               v-model="orderingDirection"
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Ascending
                 </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">
+                <translate >
                   Descending
                 </translate>
               </option>
             </select>
           </div>
           <div class="field">
-            <label for="playlists-results"><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
+            <label for="playlists-results"><translate >Results per page</translate></label>
             <select
               id="playlists-results"
               v-model="paginateBy"
@@ -212,7 +212,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div class="ui icon header">
           <i class="list icon" />
-          <translate translate-context="Content/Playlists/Placeholder">
+          <translate >
             No results matching your query
           </translate>
         </div>
@@ -222,7 +222,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           @click="$store.commit('playlists/chooseTrack', null)"
         >
           <i class="list icon" />
-          <translate translate-context="Content/*/Verb">
+          <translate >
             Create a playlist
           </translate>
         </button>
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 82ced8f97..3dcb313a4 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -2,7 +2,7 @@
 import type { Track, Radio } from '~/types'
 
 import { ref, computed, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import axios from 'axios'
@@ -24,9 +24,9 @@ const tracks = ref([] as Track[])
 const totalTracks = ref(0)
 const page = ref(1)
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  title: $pgettext('Head/Radio/Title', 'Radio')
+  title: t('Radio')
 }))
 
 const isLoading = ref(false)
@@ -108,7 +108,7 @@ const deleteRadio = async () => {
             <template #modal-header>
               <p
                 v-translate="{radio: radio.name}"
-                translate-context="Popup/Radio/Title"
+
                 :translate-params="{radio: radio.name}"
               >
                 Do you want to delete the radio "%{ radio }"?
@@ -116,14 +116,14 @@ const deleteRadio = async () => {
             </template>
             <template #modal-content>
               <p>
-                <translate translate-context="Popup/Radio/Paragraph">
+                <translate >
                   This will completely delete this radio and cannot be undone.
                 </translate>
               </p>
             </template>
             <template #modal-confirm>
               <p>
-                <translate translate-context="Popup/Radio/Button.Label/Verb">
+                <translate >
                   Delete radio
                 </translate>
               </p>
@@ -137,7 +137,7 @@ const deleteRadio = async () => {
       class="ui vertical stripe segment"
     >
       <h2>
-        <translate translate-context="*/*/*">
+        <translate >
           Tracks
         </translate>
       </h2>
@@ -158,7 +158,7 @@ const deleteRadio = async () => {
       <div class="ui icon header">
         <i class="rss icon" />
         <translate
-          translate-context="Content/Radios/Placeholder"
+
         >
           No tracks have been added to this radio yet
         </translate>
diff --git a/front/test/specs/views/admin/library.test.ts b/front/test/specs/views/admin/library.test.ts
index d3d2800b4..ab17613cb 100644
--- a/front/test/specs/views/admin/library.test.ts
+++ b/front/test/specs/views/admin/library.test.ts
@@ -6,7 +6,6 @@ import HumanDate from '~/components/common/HumanDate.vue'
 import moxios from 'moxios'
 
 import { shallowMount } from '@vue/test-utils'
-import { gettext } from '~/init/locale'
 import { sleep } from '?/utils'
 
 import router from '~/router'
@@ -39,7 +38,7 @@ describe('views/admin/library', () => {
         },
         global: {
           stubs: { DangerousButton, HumanDate, SanitizedHtml },
-          plugins: [gettext, router, store]
+          plugins: [router, store]
         }
       })
 
diff --git a/front/tsconfig.json b/front/tsconfig.json
index a20177540..767184e85 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -10,7 +10,6 @@
       "vitest/globals",
       "vite/client",
       "vue/ref-macros",
-      "vue-gettext/types",
       "vite-plugin-pwa/client"
     ],
     "paths": {
diff --git a/front/yarn.lock b/front/yarn.lock
index 8a00ac4eb..ec9a34599 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -36,7 +36,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
   integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==
 
-"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.17.8":
+"@babel/core@^7.11.1", "@babel/core@^7.17.8":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.2.tgz#8dc9b1620a673f92d3624bd926dc49a52cf25b92"
   integrity sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==
@@ -276,7 +276,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.16.4", "@babel/parser@^7.18.10", "@babel/parser@^7.20.1", "@babel/parser@^7.20.2", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
+"@babel/parser@^7.16.4", "@babel/parser@^7.18.10", "@babel/parser@^7.20.1", "@babel/parser@^7.20.2":
   version "7.20.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
   integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==
@@ -935,7 +935,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.4.4", "@babel/types@^7.6.1", "@babel/types@^7.9.6":
+"@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.4.4":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.2.tgz#67ac09266606190f496322dbaff360fdaa5e7842"
   integrity sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==
@@ -1722,7 +1722,7 @@
     "@vue/compiler-core" "3.2.45"
     "@vue/shared" "3.2.45"
 
-"@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.0.0", "@vue/compiler-sfc@^3.2.40":
+"@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.2.40":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
   integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==
@@ -1882,13 +1882,6 @@ abab@^2.0.6:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-acorn-class-fields@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/acorn-class-fields/-/acorn-class-fields-0.3.7.tgz#a35122f3cc6ad2bb33b1857e79215677fcfdd720"
-  integrity sha512-jdUWSFce0fuADUljmExz4TWpPkxmRW/ZCPRqeeUzbGf0vFUcpQYbyq52l75qGd0oSwwtAepeL6hgb/naRgvcKQ==
-  dependencies:
-    acorn-private-class-elements "^0.2.7"
-
 acorn-globals@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
@@ -1902,44 +1895,11 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-private-class-elements@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/acorn-private-class-elements/-/acorn-private-class-elements-0.2.7.tgz#b14902c705bcff267adede1c9f61c1a317ef95d2"
-  integrity sha512-+GZH2wOKNZOBI4OOPmzpo4cs6mW297sn6fgIk1dUI08jGjhAaEwvC39mN2gJAg2lmAQJ1rBkFqKWonL3Zz6PVA==
-
-acorn-private-methods@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/acorn-private-methods/-/acorn-private-methods-0.3.3.tgz#724414ce5b2fec733089d73a5cbba8f7beff75b1"
-  integrity sha512-46oeEol3YFvLSah5m9hGMlNpxDBCEkdceJgf01AjqKYTK9r6HexKs2rgSbLK81pYjZZMonhftuUReGMlbbv05w==
-  dependencies:
-    acorn-private-class-elements "^0.2.7"
-
-acorn-stage3@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-stage3/-/acorn-stage3-4.0.0.tgz#e8b98ae2a9991be0ba1745b5b626211086b435a8"
-  integrity sha512-BR+LaADtA6GTB5prkNqWmlmCLYmkyW0whvSxdHhbupTaro2qBJ95fJDEiRLPUmiACGHPaYyeH9xmNJWdGfXRQw==
-  dependencies:
-    acorn-class-fields "^0.3.7"
-    acorn-private-methods "^0.3.3"
-    acorn-static-class-features "^0.2.4"
-
-acorn-static-class-features@^0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/acorn-static-class-features/-/acorn-static-class-features-0.2.4.tgz#a0f5261dd483f25196716854f2d7652a1deb39ee"
-  integrity sha512-5X4mpYq5J3pdndLmIB0+WtFd/mKWnNYpuTlTzj32wUu/PMmEGOiayQ5UrqgwdBNiaZBtDDh5kddpP7Yg2QaQYA==
-  dependencies:
-    acorn-private-class-elements "^0.2.7"
-
-acorn-walk@^8.0.0, acorn-walk@^8.0.2, acorn-walk@^8.2.0:
+acorn-walk@^8.0.2, acorn-walk@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^7.1.1, acorn@^7.4.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
 acorn@^8.1.0, acorn@^8.5.0, acorn@^8.8.0, acorn@^8.8.1:
   version "8.8.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
@@ -2035,16 +1995,6 @@ array.prototype.flat@^1.2.5:
     es-abstract "^1.20.4"
     es-shim-unscopables "^1.0.0"
 
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
-
-assert-never@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/assert-never/-/assert-never-1.2.1.tgz#11f0e363bf146205fb08193b5c7b90f4d1cf44fe"
-  integrity sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==
-
 assertion-error@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
@@ -2111,13 +2061,6 @@ babel-plugin-polyfill-regenerator@^0.4.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.3"
 
-babel-walk@3.0.0-canary-5:
-  version "3.0.0-canary-5"
-  resolved "https://registry.yarnpkg.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz#f66ecd7298357aee44955f235a6ef54219104b11"
-  integrity sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==
-  dependencies:
-    "@babel/types" "^7.9.6"
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -2189,11 +2132,6 @@ builtins@^5.0.1:
   dependencies:
     semver "^7.0.0"
 
-buntis@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/buntis/-/buntis-0.2.1.tgz#a043aabc7d64f2243bfaa53e34e999c2dd790e82"
-  integrity sha512-5wszfQlsqJmZrfxpPkO5yQcEoBAmfUYlXxXU/IM6PhPZ8DMnMMJQ9rvAHfe5WZmnB6E1IoJYylFfTaf1e2FJbQ==
-
 butterchurn-presets@3.0.0-beta.4:
   version "3.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/butterchurn-presets/-/butterchurn-presets-3.0.0-beta.4.tgz#393d3f7863d546bdef2c52aec90da76bdbcacd3b"
@@ -2282,43 +2220,11 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-character-parser@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
-  integrity sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==
-  dependencies:
-    is-regex "^1.0.3"
-
 check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
 
-cheerio-select@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
-  integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
-  dependencies:
-    boolbase "^1.0.0"
-    css-select "^5.1.0"
-    css-what "^6.1.0"
-    domelementtype "^2.3.0"
-    domhandler "^5.0.3"
-    domutils "^3.0.1"
-
-cheerio@^1.0.0-rc.3:
-  version "1.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
-  integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
-  dependencies:
-    cheerio-select "^2.1.0"
-    dom-serializer "^2.0.0"
-    domhandler "^5.0.3"
-    domutils "^3.0.1"
-    htmlparser2 "^8.0.1"
-    parse5 "^7.0.0"
-    parse5-htmlparser2-tree-adapter "^7.0.0"
-
 "chokidar@>=3.0.0 <4.0.0":
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -2413,14 +2319,6 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-constantinople@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-4.0.1.tgz#0def113fa0e4dc8de83331a5cf79c8b325213151"
-  integrity sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==
-  dependencies:
-    "@babel/parser" "^7.6.0"
-    "@babel/types" "^7.6.1"
-
 convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -2463,27 +2361,11 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-select@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
-  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^6.1.0"
-    domhandler "^5.0.2"
-    domutils "^3.0.1"
-    nth-check "^2.0.1"
-
 css-selector-parser@^1.3:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.4.1.tgz#03f9cb8a81c3e5ab2c51684557d5aaf6d2569759"
   integrity sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==
 
-css-what@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
-  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -2607,11 +2489,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-doctypes@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
-  integrity sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==
-
 dom-serializer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
@@ -2633,7 +2510,7 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
-domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
+domhandler@^5.0.1, domhandler@^5.0.2:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
   integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
@@ -2654,25 +2531,6 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.1"
 
-easygettext@2.17.0:
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/easygettext/-/easygettext-2.17.0.tgz#af55ec030b9aabf514aadf0e32383a6f45cc43af"
-  integrity sha512-QmMWIu6l83SW2QuEFd4GIDrTey0qOn0haTOMt4NdPKPHEBihAqdo9HHYRDHiPg/msZSKaye7qDOLAcqHlmfo+g==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    acorn "^7.4.0"
-    acorn-stage3 "^4.0.0"
-    acorn-walk "^8.0.0"
-    buntis "0.2.1"
-    cheerio "^1.0.0-rc.3"
-    estree-walker "^2.0.1"
-    flow-remove-types "^2.135.0"
-    minimist "^1.2.5"
-    pofile "^1.1.0"
-  optionalDependencies:
-    "@vue/compiler-sfc" "^3.0.0"
-    pug "^3.0.2"
-
 ecma-proposal-math-extensions@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/ecma-proposal-math-extensions/-/ecma-proposal-math-extensions-0.0.2.tgz#a6a3d64819db70cee0d2e1976b6315d00e4714a0"
@@ -3185,7 +3043,7 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.1, estree-walker@^2.0.2:
+estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -3277,20 +3135,6 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-flow-parser@^0.193.0:
-  version "0.193.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.193.0.tgz#8d705fc2d6b378a24bae189014f6f0320d040c4f"
-  integrity sha512-x7ZoArE1UO3Nk2rkq/KK/Tkp714QDMVzEsxIyK2+p7Alx+88LY7KgqmeQZuiAG8TCHucmYuHefbk3KsVFVjouA==
-
-flow-remove-types@^2.135.0:
-  version "2.193.0"
-  resolved "https://registry.yarnpkg.com/flow-remove-types/-/flow-remove-types-2.193.0.tgz#af999a205aae15641ac2357ddcb8a67dff758a46"
-  integrity sha512-yRY6/WWiGQs31TC9CYrMhgXgI/KseNpi4KewUp8zuvaEAOvCDy3s6c7wCCd9s65C4vayO4oD7GA17NOQzpVLeA==
-  dependencies:
-    flow-parser "^0.193.0"
-    pirates "^3.0.2"
-    vlq "^0.2.1"
-
 focus-trap@7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.1.0.tgz#3226e977d76b1fd555c2e4f7ff91f10371f0f2cc"
@@ -3689,14 +3533,6 @@ is-date-object@^1.0.1:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-expression@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-4.0.0.tgz#c33155962abf21d0afd2552514d67d2ec16fd2ab"
-  integrity sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==
-  dependencies:
-    acorn "^7.1.1"
-    object-assign "^4.1.1"
-
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -3751,12 +3587,7 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-promise@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
-  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
-
-is-regex@^1.0.3, is-regex@^1.1.4:
+is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -3868,11 +3699,6 @@ js-sdsl@^4.1.4:
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
   integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
 
-js-stringify@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
-  integrity sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==
-
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3978,14 +3804,6 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-jstransformer@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
-  integrity sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==
-  dependencies:
-    is-promise "^2.0.0"
-    promise "^7.0.1"
-
 just-extend@^4.0.2:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.2.1.tgz#ef5e589afb61e5d66b24eca749409a8939a8c744"
@@ -4153,7 +3971,7 @@ minimatch@^5.0.1, minimatch@^5.1.0:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
@@ -4219,11 +4037,6 @@ nise@^5.1.2:
     just-extend "^4.0.2"
     path-to-regexp "^1.7.0"
 
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-  integrity sha512-JMaRS9L4wSRIR+6PTVEikTrq/lMGEZR43a48ETeilY0Q0iMwVnccMFrUM1k+tNzmYuIU0Vh710bCUqHX+/+ctQ==
-
 node-releases@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
@@ -4246,11 +4059,6 @@ nwsapi@^2.2.2:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
   integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
 
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
-
 object-inspect@^1.12.2, object-inspect@^1.9.0:
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
@@ -4349,20 +4157,12 @@ parse5-htmlparser2-tree-adapter@^6.0.1:
   dependencies:
     parse5 "^6.0.1"
 
-parse5-htmlparser2-tree-adapter@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
-  integrity sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==
-  dependencies:
-    domhandler "^5.0.2"
-    parse5 "^7.0.0"
-
 "parse5@5 - 6", parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
-parse5@^7.0.0, parse5@^7.1.1:
+parse5@^7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
   integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
@@ -4416,19 +4216,12 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pirates@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-3.0.2.tgz#7e6f85413fd9161ab4e12b539b06010d85954bb9"
-  integrity sha512-c5CgUJq6H2k6MJz72Ak1F5sN9n9wlSlJyEnwvpm9/y3WB4E3pHBDT2c6PEiS1vyJvq2bUxUAIu0EGf8Cx4Ic7Q==
-  dependencies:
-    node-modules-regexp "^1.0.0"
-
 pofile@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pofile/-/pofile-1.0.11.tgz#35aff58c17491d127a07336d5522ebc9df57c954"
   integrity sha512-Vy9eH1dRD9wHjYt/QqXcTz+RnX/zg53xK+KljFSX30PvdDMb2z+c6uDUeblUGqqJgz3QFsdlA0IJvHziPmWtQg==
 
-pofile@^1.1.0, pofile@^1.1.3:
+pofile@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/pofile/-/pofile-1.1.3.tgz#e2c0d4052b9829f171b888bfb35c87791dbea297"
   integrity sha512-sk96pUvpNwDV6PLrnhr68Uu1S5NohsxqLKz0GuracgrDo40BdF/r1RhHnjakUk6Q4Z0OKIybOQ7GevLKGN1iYw==
@@ -4470,13 +4263,6 @@ pretty-bytes@^6.0.0:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.0.0.tgz#928be2ad1f51a2e336add8ba764739f9776a8140"
   integrity sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==
 
-promise@^7.0.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
-  dependencies:
-    asap "~2.0.3"
-
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
@@ -4487,109 +4273,6 @@ psl@^1.1.33:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
-pug-attrs@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-3.0.0.tgz#b10451e0348165e31fad1cc23ebddd9dc7347c41"
-  integrity sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==
-  dependencies:
-    constantinople "^4.0.1"
-    js-stringify "^1.0.2"
-    pug-runtime "^3.0.0"
-
-pug-code-gen@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-3.0.2.tgz#ad190f4943133bf186b60b80de483100e132e2ce"
-  integrity sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==
-  dependencies:
-    constantinople "^4.0.1"
-    doctypes "^1.1.0"
-    js-stringify "^1.0.2"
-    pug-attrs "^3.0.0"
-    pug-error "^2.0.0"
-    pug-runtime "^3.0.0"
-    void-elements "^3.1.0"
-    with "^7.0.0"
-
-pug-error@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-2.0.0.tgz#5c62173cb09c34de2a2ce04f17b8adfec74d8ca5"
-  integrity sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==
-
-pug-filters@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-4.0.0.tgz#d3e49af5ba8472e9b7a66d980e707ce9d2cc9b5e"
-  integrity sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==
-  dependencies:
-    constantinople "^4.0.1"
-    jstransformer "1.0.0"
-    pug-error "^2.0.0"
-    pug-walk "^2.0.0"
-    resolve "^1.15.1"
-
-pug-lexer@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-5.0.1.tgz#ae44628c5bef9b190b665683b288ca9024b8b0d5"
-  integrity sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==
-  dependencies:
-    character-parser "^2.2.0"
-    is-expression "^4.0.0"
-    pug-error "^2.0.0"
-
-pug-linker@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-4.0.0.tgz#12cbc0594fc5a3e06b9fc59e6f93c146962a7708"
-  integrity sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==
-  dependencies:
-    pug-error "^2.0.0"
-    pug-walk "^2.0.0"
-
-pug-load@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-3.0.0.tgz#9fd9cda52202b08adb11d25681fb9f34bd41b662"
-  integrity sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==
-  dependencies:
-    object-assign "^4.1.1"
-    pug-walk "^2.0.0"
-
-pug-parser@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-6.0.0.tgz#a8fdc035863a95b2c1dc5ebf4ecf80b4e76a1260"
-  integrity sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==
-  dependencies:
-    pug-error "^2.0.0"
-    token-stream "1.0.0"
-
-pug-runtime@^3.0.0, pug-runtime@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-3.0.1.tgz#f636976204723f35a8c5f6fad6acda2a191b83d7"
-  integrity sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==
-
-pug-strip-comments@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz#f94b07fd6b495523330f490a7f554b4ff876303e"
-  integrity sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==
-  dependencies:
-    pug-error "^2.0.0"
-
-pug-walk@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-2.0.0.tgz#417aabc29232bb4499b5b5069a2b2d2a24d5f5fe"
-  integrity sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==
-
-pug@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pug/-/pug-3.0.2.tgz#f35c7107343454e43bc27ae0ff76c731b78ea535"
-  integrity sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==
-  dependencies:
-    pug-code-gen "^3.0.2"
-    pug-filters "^4.0.0"
-    pug-lexer "^5.0.1"
-    pug-linker "^4.0.0"
-    pug-load "^3.0.0"
-    pug-parser "^6.0.0"
-    pug-runtime "^3.0.1"
-    pug-strip-comments "^2.0.0"
-
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -4701,7 +4384,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.10.1, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1, resolve@^1.3.0:
+resolve@^1.10.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1, resolve@^1.3.0:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -5093,11 +4776,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-token-stream@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
-  integrity sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==
-
 tough-cookie@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
@@ -5361,16 +5039,6 @@ vitest@0.25.3:
     tinyspy "^1.0.2"
     vite "^3.0.0"
 
-vlq@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
-  integrity sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==
-
-void-elements@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
-  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
-
 vue-demi@*:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
@@ -5570,16 +5238,6 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-with@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/with/-/with-7.0.2.tgz#ccee3ad542d25538a7a7a80aad212b9828495bac"
-  integrity sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==
-  dependencies:
-    "@babel/parser" "^7.9.6"
-    "@babel/types" "^7.9.6"
-    assert-never "^1.2.1"
-    babel-walk "3.0.0-canary-5"
-
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"