From 57aef1001e12ce8cefa8243894eaa5f0e90be6b1 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sun, 1 May 2022 16:15:57 +0200
Subject: [PATCH] Remove deprecated slot syntax

---
 front/.eslintrc.js                            |   1 -
 front/src/components/audio/ChannelForm.vue    |   5 +-
 front/src/components/auth/Settings.vue        | 195 ++++++++++--------
 .../src/components/auth/SubsonicTokenForm.vue |  72 ++++---
 .../channels/UploadMetadataForm.vue           |   5 +-
 front/src/components/common/ActionTable.vue   |  63 +++---
 .../src/components/common/AttachmentInput.vue |   2 +-
 .../components/federation/LibraryWidget.vue   |   2 +-
 front/src/components/library/AlbumDetail.vue  |   5 +-
 .../src/components/library/AlbumDropdown.vue  |  24 ++-
 front/src/components/library/ArtistDetail.vue |   5 +-
 front/src/components/library/EditCard.vue     |  34 +--
 front/src/components/library/EditForm.vue     |  16 +-
 front/src/components/library/EditList.vue     |   2 +-
 front/src/components/library/TrackBase.vue    |  34 +--
 front/src/components/library/TrackDetail.vue  |   5 +-
 .../manage/moderation/InstancePolicyForm.vue  |  36 ++--
 .../manage/moderation/NotesThread.vue         |  34 +--
 .../manage/moderation/ReportCard.vue          |  20 +-
 front/src/components/playlists/Editor.vue     |  41 ++--
 front/src/views/admin/ChannelDetail.vue       |  34 +--
 front/src/views/admin/library/AlbumDetail.vue |  34 +--
 .../src/views/admin/library/ArtistDetail.vue  |  34 +--
 .../src/views/admin/library/LibraryDetail.vue |  34 +--
 front/src/views/admin/library/TagDetail.vue   |  34 +--
 front/src/views/admin/library/TrackDetail.vue |  34 +--
 .../src/views/admin/library/UploadDetail.vue  |  34 +--
 front/src/views/auth/ProfileOverview.vue      |  11 +-
 front/src/views/channels/DetailBase.vue       |  34 +--
 front/src/views/content/libraries/Form.vue    |  36 ++--
 front/src/views/content/libraries/Quota.vue   | 108 ++++++----
 front/src/views/content/remote/Card.vue       |  34 +--
 front/src/views/library/DetailAlbums.vue      |  38 ++--
 front/src/views/library/DetailOverview.vue    |  38 ++--
 front/src/views/library/DetailTracks.vue      |  38 ++--
 front/src/views/playlists/Detail.vue          |  41 ++--
 front/src/views/radios/Detail.vue             |  41 ++--
 37 files changed, 707 insertions(+), 551 deletions(-)

diff --git a/front/.eslintrc.js b/front/.eslintrc.js
index 7749e1d1b..7ee26a281 100644
--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@@ -36,7 +36,6 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': 'off',
 
     // TODO (wvffle): Enable typescript rules later
-    'vue/require-explicit-emits': 'off',
     '@typescript-eslint/no-this-alias': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
diff --git a/front/src/components/audio/ChannelForm.vue b/front/src/components/audio/ChannelForm.vue
index 1259074fe..6823cd6da 100644
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@@ -99,10 +99,7 @@
             :image-class="newValues.content_category === 'podcast' ? '' : 'circular'"
             @delete="newValues.cover = null"
           >
-            <translate
-              slot="label"
-              translate-context="Content/Channel/*"
-            >
+            <translate translate-context="Content/Channel/*">
               Channel Picture
             </translate>
           </attachment-input>
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 3daeb9001..3196b5bc4 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -117,10 +117,7 @@
             @input="submitAvatar($event)"
             @delete="avatar = {uuid: null}"
           >
-            <translate
-              slot="label"
-              translate-context="Content/Channel/*"
-            >
+            <translate translate-context="Content/Channel/*">
               Avatar
             </translate>
           </attachment-input>
@@ -186,35 +183,41 @@
             <translate translate-context="Content/Settings/Button.Label">
               Change password
             </translate>
-            <p slot="modal-header">
-              <translate translate-context="Popup/Settings/Title">
-                Change your password?
-              </translate>
-            </p>
-            <div slot="modal-content">
+            <template #modal-header>
               <p>
-                <translate translate-context="Popup/Settings/Paragraph">
-                  Changing your password will have the following consequences:
+                <translate translate-context="Popup/Settings/Title">
+                  Change your password?
                 </translate>
               </p>
-              <ul>
-                <li>
-                  <translate translate-context="Popup/Settings/List item">
-                    You will be logged out from this session and have to log in with the new one
+            </template>
+            <template #modal-content>
+              <div>
+                <p>
+                  <translate translate-context="Popup/Settings/Paragraph">
+                    Changing your password will have the following consequences:
                   </translate>
-                </li>
-                <li>
-                  <translate translate-context="Popup/Settings/List item">
-                    Your Subsonic password will be changed to a new, random one, logging you out from devices that used the old Subsonic password
-                  </translate>
-                </li>
-              </ul>
-            </div>
-            <div slot="modal-confirm">
-              <translate translate-context="Popup/Settings/Button.Label">
-                Disable access
-              </translate>
-            </div>
+                </p>
+                <ul>
+                  <li>
+                    <translate translate-context="Popup/Settings/List item">
+                      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">
+                      Your Subsonic password will be changed to a new, random one, logging you out from devices that used the old Subsonic password
+                    </translate>
+                  </li>
+                </ul>
+              </div>
+            </template>
+            <template #modal-confirm>
+              <div>
+                <translate translate-context="Popup/Settings/Button.Label">
+                  Disable access
+                </translate>
+              </div>
+            </template>
           </dangerous-button>
         </form>
         <div class="ui hidden divider" />
@@ -362,35 +365,39 @@
                   <translate translate-context="*/*/*/Verb">
                     Revoke
                   </translate>
-                  <p
-                    slot="modal-header"
-                    v-translate="{application: app.name}"
-                    translate-context="Popup/Settings/Title"
-                  >
-                    Revoke access for application "%{ application }"?
-                  </p>
-                  <p slot="modal-content">
-                    <translate translate-context="Popup/Settings/Paragraph">
-                      This will prevent this application from accessing the service on your behalf.
-                    </translate>
-                  </p>
-                  <div slot="modal-confirm">
-                    <translate translate-context="*/Settings/Button.Label/Verb">
-                      Revoke access
-                    </translate>
-                  </div>
+                  <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">
+                        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">
+                        Revoke access
+                      </translate>
+                    </div>
+                  </template>
                 </dangerous-button>
               </td>
             </tr>
           </tbody>
         </table>
         <empty-state v-else>
-          <translate
-            slot="title"
-            translate-context="Content/Applications/Paragraph"
-          >
-            You don't have any application connected with your account.
-          </translate>
+          <template #title>
+            <translate translate-context="Content/Applications/Paragraph">
+              You don't have any application connected with your account.
+            </translate>
+          </template>
           <translate translate-context="Content/Applications/Paragraph">
             If you authorize third-party applications to access your data, those applications will be listed here.
           </translate>
@@ -478,35 +485,39 @@
                   <translate translate-context="*/*/*/Verb">
                     Remove
                   </translate>
-                  <p
-                    slot="modal-header"
-                    v-translate="{application: app.name}"
-                    translate-context="Popup/Settings/Title"
-                  >
-                    Remove application "%{ application }"?
-                  </p>
-                  <p slot="modal-content">
-                    <translate translate-context="Popup/Settings/Paragraph">
-                      This will permanently remove the application and all the associated tokens.
-                    </translate>
-                  </p>
-                  <div slot="modal-confirm">
-                    <translate translate-context="*/Settings/Button.Label/Verb">
-                      Remove application
-                    </translate>
-                  </div>
+                  <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">
+                        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">
+                        Remove application
+                      </translate>
+                    </div>
+                  </template>
                 </dangerous-button>
               </td>
             </tr>
           </tbody>
         </table>
         <empty-state v-else>
-          <translate
-            slot="title"
-            translate-context="Content/Applications/Paragraph"
-          >
-            You don't have registered any application yet.
-          </translate>
+          <template #title>
+            <translate translate-context="Content/Applications/Paragraph">
+              You don't have registered any application yet.
+            </translate>
+          </template>
           <translate translate-context="Content/Applications/Paragraph">
             Register one to integrate Funkwhale with third-party applications.
           </translate>
@@ -671,23 +682,29 @@
             <translate translate-context="*/*/Button.Label">
               Delete my account…
             </translate>
-            <p slot="modal-header">
-              <translate translate-context="Popup/Settings/Title">
-                Do you want to delete your account?
-              </translate>
-            </p>
-            <div slot="modal-content">
+            <template #modal-header>
               <p>
-                <translate translate-context="Popup/Settings/Paragraph">
-                  This is irreversible and will permanently remove your data from our servers. You will we immediatly logged out.
+                <translate translate-context="Popup/Settings/Title">
+                  Do you want to delete your account?
                 </translate>
               </p>
-            </div>
-            <div slot="modal-confirm">
-              <translate translate-context="*/*/Button.Label">
-                Delete my account
-              </translate>
-            </div>
+            </template>
+            <template #modal-content>
+              <div>
+                <p>
+                  <translate translate-context="Popup/Settings/Paragraph">
+                    This is irreversible and will permanently remove your data from our servers. You will we immediatly logged out.
+                  </translate>
+                </p>
+              </div>
+            </template>
+            <template #modal-confirm>
+              <div>
+                <translate translate-context="*/*/Button.Label">
+                  Delete my account
+                </translate>
+              </div>
+            </template>
           </dangerous-button>
         </div>
       </section>
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index afc73a305..6a47e9c01 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -89,21 +89,27 @@
         <translate translate-context="*/Settings/Button.Label/Verb">
           Request a new password
         </translate>
-        <p slot="modal-header">
-          <translate translate-context="Popup/Settings/Title">
-            Request a new Subsonic API password?
-          </translate>
-        </p>
-        <p slot="modal-content">
-          <translate translate-context="Popup/Settings/Paragraph">
-            This will log you out from existing devices that use the current password.
-          </translate>
-        </p>
-        <div slot="modal-confirm">
-          <translate translate-context="*/Settings/Button.Label/Verb">
-            Request a new password
-          </translate>
-        </div>
+        <template #modal-header>
+          <p>
+            <translate translate-context="Popup/Settings/Title">
+              Request a new Subsonic API password?
+            </translate>
+          </p>
+        </template>
+        <template #modal-content>
+          <p>
+            <translate translate-context="Popup/Settings/Paragraph">
+              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">
+              Request a new password
+            </translate>
+          </div>
+        </template>
       </dangerous-button>
       <button
         v-else
@@ -123,21 +129,27 @@
         <translate translate-context="Content/Settings/Button.Label/Verb">
           Disable Subsonic access
         </translate>
-        <p slot="modal-header">
-          <translate translate-context="Popup/Settings/Title">
-            Disable Subsonic API access?
-          </translate>
-        </p>
-        <p slot="modal-content">
-          <translate translate-context="Popup/Settings/Paragraph">
-            This will completely disable access to the Subsonic API using from account.
-          </translate>
-        </p>
-        <div slot="modal-confirm">
-          <translate translate-context="Popup/Settings/Button.Label">
-            Disable access
-          </translate>
-        </div>
+        <template #modal-header>
+          <p>
+            <translate translate-context="Popup/Settings/Title">
+              Disable Subsonic API access?
+            </translate>
+          </p>
+        </template>
+        <template #modal-content>
+          <p>
+            <translate translate-context="Popup/Settings/Paragraph">
+              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">
+              Disable access
+            </translate>
+          </div>
+        </template>
       </dangerous-button>
     </template>
   </form>
diff --git a/front/src/components/channels/UploadMetadataForm.vue b/front/src/components/channels/UploadMetadataForm.vue
index b59321056..17d676d8d 100644
--- a/front/src/components/channels/UploadMetadataForm.vue
+++ b/front/src/components/channels/UploadMetadataForm.vue
@@ -14,10 +14,7 @@
       :required="false"
       @delete="newValues.cover = null"
     >
-      <translate
-        slot="label"
-        translate-context="Content/Channel/*"
-      >
+      <translate translate-context="Content/Channel/*">
         Track Picture
       </translate>
     </attachment-input>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index 68a0c8594..b8ef8f170 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -53,36 +53,39 @@
                     <translate translate-context="Content/*/Button.Label/Short, Verb">
                       Go
                     </translate>
-                    <p slot="modal-header">
-                      <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?"
-                      >
-                        Do you want to launch %{ action } on %{ count } element?
-                      </translate>
-                    </p>
-                    <p slot="modal-content">
-                      <template v-if="currentAction.confirmationMessage">
-                        {{ currentAction.confirmationMessage }}
-                      </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>
-                    </p>
-                    <div
-                      slot="modal-confirm"
-                      :aria-label="labels.performAction"
-                    >
-                      <translate translate-context="Modal/*/Button.Label/Short, Verb">
-                        Launch
-                      </translate>
-                    </div>
+                    <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?"
+                        >
+                          Do you want to launch %{ action } on %{ count } element?
+                        </translate>
+                      </p>
+                    </template>
+                    <template #modal-content>
+                      <p>
+                        <template v-if="currentAction.confirmationMessage">
+                          {{ currentAction.confirmationMessage }}
+                        </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>
+                      </p>
+                    </template>
+                    <template #modal-confirm>
+                      <div :aria-label="labels.performAction">
+                        <translate translate-context="Modal/*/Button.Label/Short, Verb">
+                          Launch
+                        </translate>
+                      </div>
+                    </template>
                   </dangerous-button>
                   <button
                     v-else
diff --git a/front/src/components/common/AttachmentInput.vue b/front/src/components/common/AttachmentInput.vue
index 0a52dcbb2..64931b990 100644
--- a/front/src/components/common/AttachmentInput.vue
+++ b/front/src/components/common/AttachmentInput.vue
@@ -21,7 +21,7 @@
     </div>
     <div class="ui field">
       <span id="avatarLabel">
-        <slot name="label" />
+        <slot />
       </span>
       <div class="ui stackable grid row">
         <div class="three wide column">
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index f99d79ef3..74dbcbde5 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -10,7 +10,7 @@
       v-if="!isLoading && libraries.length > 0"
       class="ui subtitle"
     >
-      <slot name="subtitle" />
+      <slot />
     </p>
     <p
       v-if="!isLoading && libraries.length === 0"
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index f39507b41..9be1f886a 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -79,10 +79,7 @@
         :url="'albums/' + object.id + '/libraries/'"
         @loaded="$emit('libraries-loaded', $event)"
       >
-        <translate
-          slot="subtitle"
-          translate-context="Content/Album/Paragraph"
-        >
+        <translate translate-context="Content/Album/Paragraph">
           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 4af7dd386..c5db98ee9 100644
--- a/front/src/components/library/AlbumDropdown.vue
+++ b/front/src/components/library/AlbumDropdown.vue
@@ -87,11 +87,25 @@
         >
           <i class="ui trash icon" />
           <translate translate-context="*/*/*/Verb">Delete…</translate>
-          <p slot="modal-header"><translate translate-context="Popup/Channel/Title">Delete this album?</translate></p>
-          <div slot="modal-content">
-            <p><translate translate-context="Content/Moderation/Paragraph">The album will be deleted, as well as any related files and data. This action is irreversible.</translate></p>
-          </div>
-          <p slot="modal-confirm"><translate translate-context="*/*/*/Verb">Delete</translate></p>
+          <template #modal-header>
+            <p>
+              <translate translate-context="Popup/Channel/Title">Delete this album?</translate>
+            </p>
+          </template>
+          <template #modal-content>
+            <div>
+              <p>
+                <translate translate-context="Content/Moderation/Paragraph">
+                  The album will be deleted, as well as any related files and data. This action is irreversible.
+                </translate>
+              </p>
+            </div>
+          </template>
+          <template #modal-confirm>
+            <p>
+              <translate translate-context="*/*/*/Verb">Delete</translate>
+            </p>
+          </template>
         </dangerous-button>
         <div class="divider" />
         <div
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index d2a271d19..ff1f610b1 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -92,10 +92,7 @@
         :url="'artists/' + object.id + '/libraries/'"
         @loaded="$emit('libraries-loaded', $event)"
       >
-        <translate
-          slot="subtitle"
-          translate-context="Content/Artist/Paragraph"
-        >
+        <translate translate-context="Content/Artist/Paragraph">
           This artist is present in the following libraries:
         </translate>
       </library-widget>
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index 76c668d79..9149c8707 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -189,23 +189,29 @@
         <translate translate-context="*/*/*/Verb">
           Delete
         </translate>
-        <p slot="modal-header">
-          <translate translate-context="Popup/Library/Title">
-            Delete this suggestion?
-          </translate>
-        </p>
-        <div slot="modal-content">
+        <template #modal-header>
           <p>
-            <translate translate-context="Popup/Library/Paragraph">
-              The suggestion will be completely removed, this action is irreversible.
+            <translate translate-context="Popup/Library/Title">
+              Delete this suggestion?
             </translate>
           </p>
-        </div>
-        <p slot="modal-confirm">
-          <translate translate-context="*/*/*/Verb">
-            Delete
-          </translate>
-        </p>
+        </template>
+        <template #modal-content>
+          <div>
+            <p>
+              <translate translate-context="Popup/Library/Paragraph">
+                The suggestion will be completely removed, this action is irreversible.
+              </translate>
+            </p>
+          </div>
+        </template>
+        <template #modal-confirm>
+          <p>
+            <translate translate-context="*/*/*/Verb">
+              Delete
+            </translate>
+          </p>
+        </template>
       </dangerous-button>
     </div>
   </div>
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index 665182043..68870b734 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -27,7 +27,7 @@
       :obj="object"
       :current-state="currentState"
     >
-      <div slot="title">
+      <div>
         <template v-if="showPendingReview">
           <translate translate-context="Content/Library/Paragraph">
             Recent edits awaiting review
@@ -55,11 +55,13 @@
           </button>
         </template>
       </div>
-      <empty-state slot="empty-state">
-        <translate translate-context="Content/Library/Paragraph">
-          Suggest a change using the form below.
-        </translate>
-      </empty-state>
+      <template #empty-state>
+        <empty-state>
+          <translate translate-context="Content/Library/Paragraph">
+            Suggest a change using the form below.
+          </translate>
+        </empty-state>
+      </template>
     </edit-list>
     <form
       class="ui form"
@@ -160,7 +162,7 @@
             :name="fieldConfig.id"
             @delete="values[fieldConfig.id] = initialValues[fieldConfig.id]"
           >
-            <span slot="label">{{ fieldConfig.label }}</span>
+            <span>{{ fieldConfig.label }}</span>
           </attachment-input>
         </template>
         <template v-else-if="fieldConfig.type === 'tags'">
diff --git a/front/src/components/library/EditList.vue b/front/src/components/library/EditList.vue
index 8e5c3b87b..ac46a28fc 100644
--- a/front/src/components/library/EditList.vue
+++ b/front/src/components/library/EditList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <h3 class="ui header">
-      <slot name="title" />
+      <slot />
     </h3>
     <slot
       v-if="!isLoading && objects.length === 0"
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index e9bf17dba..06846e2b9 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -151,23 +151,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete…
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Channel/Title">
-                        Delete this track?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The track will be deleted, as well as any related files and data. This action is irreversible.
+                        <translate translate-context="Popup/Channel/Title">
+                          Delete this track?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The track will be deleted, as well as any related files and data. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                   <div class="divider" />
                   <div
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 60cb2e038..477f2fa01 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -280,10 +280,7 @@
             :url="'tracks/' + id + '/libraries/'"
             @loaded="$emit('libraries-loaded', $event)"
           >
-            <translate
-              slot="subtitle"
-              translate-context="Content/Track/Paragraph"
-            >
+            <translate translate-context="Content/Track/Paragraph">
               This track is present in the following libraries:
             </translate>
           </library-widget>
diff --git a/front/src/components/manage/moderation/InstancePolicyForm.vue b/front/src/components/manage/moderation/InstancePolicyForm.vue
index d0b5a5573..b7fb5c545 100644
--- a/front/src/components/manage/moderation/InstancePolicyForm.vue
+++ b/front/src/components/manage/moderation/InstancePolicyForm.vue
@@ -148,21 +148,27 @@
       <translate translate-context="*/*/*/Verb">
         Delete
       </translate>
-      <p slot="modal-header">
-        <translate translate-context="Popup/Moderation/Title">
-          Delete this moderation rule?
-        </translate>
-      </p>
-      <p slot="modal-content">
-        <translate translate-context="Popup/Moderation/Paragraph">
-          This action is irreversible.
-        </translate>
-      </p>
-      <div slot="modal-confirm">
-        <translate translate-context="Popup/Moderation/Button.Label/Verb">
-          Delete moderation rule
-        </translate>
-      </div>
+      <template #modal-header>
+        <p>
+          <translate translate-context="Popup/Moderation/Title">
+            Delete this moderation rule?
+          </translate>
+        </p>
+      </template>
+      <template #modal-content>
+        <p>
+          <translate translate-context="Popup/Moderation/Paragraph">
+            This action is irreversible.
+          </translate>
+        </p>
+      </template>
+      <template #modal-confirm>
+        <div>
+          <translate translate-context="Popup/Moderation/Button.Label/Verb">
+            Delete moderation rule
+          </translate>
+        </div>
+      </template>
     </dangerous-button>
   </form>
 </template>
diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
index 12acc07eb..59f2dd8b6 100644
--- a/front/src/components/manage/moderation/NotesThread.vue
+++ b/front/src/components/manage/moderation/NotesThread.vue
@@ -32,23 +32,29 @@
             <translate translate-context="*/*/*/Verb">
               Delete
             </translate>
-            <p slot="modal-header">
-              <translate translate-context="Popup/Moderation/Title">
-                Delete this note?
-              </translate>
-            </p>
-            <div slot="modal-content">
+            <template #modal-header>
               <p>
-                <translate translate-context="Content/Moderation/Paragraph">
-                  The note will be removed. This action is irreversible.
+                <translate translate-context="Popup/Moderation/Title">
+                  Delete this note?
                 </translate>
               </p>
-            </div>
-            <p slot="modal-confirm">
-              <translate translate-context="*/*/*/Verb">
-                Delete
-              </translate>
-            </p>
+            </template>
+            <template #modal-content>
+              <div>
+                <p>
+                  <translate translate-context="Content/Moderation/Paragraph">
+                    The note will be removed. This action is irreversible.
+                  </translate>
+                </p>
+              </div>
+            </template>
+            <template #modal-confirm>
+              <p>
+                <translate translate-context="*/*/*/Verb">
+                  Delete
+                </translate>
+              </p>
+            </template>
           </dangerous-button>
         </div>
       </div>
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index cf03c39ab..a01dc88ae 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -370,15 +370,17 @@
               >
                 <i :class="[action.iconColor, action.icon, 'icon']" />&nbsp;
                 {{ action.label }}
-                <p slot="modal-header">
-                  {{ action.modalHeader }}
-                </p>
-                <div slot="modal-content">
-                  <p>{{ action.modalContent }}</p>
-                </div>
-                <p slot="modal-confirm">
-                  {{ action.modalConfirmLabel }}
-                </p>
+                <template #modal-header>
+                  <p>{{ action.modalHeader }}</p>
+                </template>
+                <template #modal-content>
+                  <div>
+                    <p>{{ action.modalContent }}</p>
+                  </div>
+                </template>
+                <template #modal-confirm>
+                  <p>{{ action.modalConfirmLabel }}</p>
+                </template>
               </dangerous-button>
             </template>
           </div>
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index 53094eec8..127f1255c 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -98,24 +98,29 @@
         <i class="eraser icon" /> <translate translate-context="*/Playlist/Button.Label/Verb">
           Clear playlist
         </translate>
-        <p
-          slot="modal-header"
-          v-translate="{playlist: playlist.name}"
-          translate-context="Popup/Playlist/Title"
-          :translate-params="{playlist: playlist.name}"
-        >
-          Do you want to clear the playlist "%{ playlist }"?
-        </p>
-        <p slot="modal-content">
-          <translate translate-context="Popup/Playlist/Paragraph">
-            This will remove all tracks from this playlist and cannot be undone.
-          </translate>
-        </p>
-        <div slot="modal-confirm">
-          <translate translate-context="*/Playlist/Button.Label/Verb">
-            Clear playlist
-          </translate>
-        </div>
+        <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 }"?
+          </p>
+        </template>
+        <template #modal-content>
+          <p>
+            <translate translate-context="Popup/Playlist/Paragraph">
+              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">
+              Clear playlist
+            </translate>
+          </div>
+        </template>
       </dangerous-button>
       <div class="ui hidden divider" />
       <template v-if="plts.length > 0">
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index b96c8d546..22dccb41c 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -105,23 +105,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Library/Title">
-                        Delete this channel?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The channel will be removed, as well as associated uploads, tracks, and albums. This action is irreversible.
+                        <translate translate-context="Popup/Library/Title">
+                          Delete this channel?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The channel will be removed, as well as associated uploads, tracks, and albums. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                 </div>
               </div>
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index 15673f2b7..5f994c502 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -128,23 +128,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Library/Title">
-                        Delete this album?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The album will be removed, as well as associated uploads, tracks, favorites and listening history. This action is irreversible.
+                        <translate translate-context="Popup/Library/Title">
+                          Delete this album?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The album will be removed, as well as associated uploads, tracks, favorites and listening history. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                 </div>
               </div>
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index af4fad31d..b0fad2549 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -127,23 +127,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Library/Title">
-                        Delete this artist?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.
+                        <translate translate-context="Popup/Library/Title">
+                          Delete this artist?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                 </div>
               </div>
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index c63c7f062..e86732ac0 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -77,23 +77,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Library/Title">
-                        Delete this library?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The library will be removed, as well as associated uploads, and follows. This action is irreversible.
+                        <translate translate-context="Popup/Library/Title">
+                          Delete this library?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The library will be removed, as well as associated uploads, and follows. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                 </div>
               </div>
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
index 3be754ccf..16e394d81 100644
--- a/front/src/views/admin/library/TagDetail.vue
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -58,23 +58,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Library/Title">
-                        Delete this tag?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The tag will be removed and unlinked from any existing entity. This action is irreversible.
+                        <translate translate-context="Popup/Library/Title">
+                          Delete this tag?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The tag will be removed and unlinked from any existing entity. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                 </div>
               </div>
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 036056001..b1a632b13 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -128,23 +128,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Library/Title">
-                        Delete this track?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The track will be removed, as well as associated uploads, favorites and listening history. This action is irreversible.
+                        <translate translate-context="Popup/Library/Title">
+                          Delete this track?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The track will be removed, as well as associated uploads, favorites and listening history. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                 </div>
               </div>
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index d80d571aa..84832bd24 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -93,23 +93,29 @@
                     <translate translate-context="*/*/*/Verb">
                       Delete
                     </translate>
-                    <p slot="modal-header">
-                      <translate translate-context="Popup/Library/Title">
-                        Delete this upload?
-                      </translate>
-                    </p>
-                    <div slot="modal-content">
+                    <template #modal-header>
                       <p>
-                        <translate translate-context="Content/Moderation/Paragraph">
-                          The upload will be removed. This action is irreversible.
+                        <translate translate-context="Popup/Library/Title">
+                          Delete this upload?
                         </translate>
                       </p>
-                    </div>
-                    <p slot="modal-confirm">
-                      <translate translate-context="*/*/*/Verb">
-                        Delete
-                      </translate>
-                    </p>
+                    </template>
+                    <template #modal-content>
+                      <div>
+                        <p>
+                          <translate translate-context="Content/Moderation/Paragraph">
+                            The upload will be removed. This action is irreversible.
+                          </translate>
+                        </p>
+                      </div>
+                    </template>
+                    <template #modal-confirm>
+                      <p>
+                        <translate translate-context="*/*/*/Verb">
+                          Delete
+                        </translate>
+                      </p>
+                    </template>
                   </dangerous-button>
                 </div>
               </div>
diff --git a/front/src/views/auth/ProfileOverview.vue b/front/src/views/auth/ProfileOverview.vue
index 6e2c8149f..39659defb 100644
--- a/front/src/views/auth/ProfileOverview.vue
+++ b/front/src/views/auth/ProfileOverview.vue
@@ -46,12 +46,11 @@
         </div>
       </h2>
       <library-widget :url="`federation/actors/${object.full_username}/libraries/`">
-        <translate
-          slot="title"
-          translate-context="Content/Profile/Paragraph"
-        >
-          This user shared the following libraries
-        </translate>
+        <template #title>
+          <translate translate-context="Content/Profile/Paragraph">
+            This user shared the following libraries
+          </translate>
+        </template>
       </library-widget>
     </div>
 
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index bfcc7aa0c..67aa374c7 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -208,23 +208,29 @@
                         <translate translate-context="*/*/*/Verb">
                           Delete…
                         </translate>
-                        <p slot="modal-header">
-                          <translate translate-context="Popup/Channel/Title">
-                            Delete this Channel?
-                          </translate>
-                        </p>
-                        <div slot="modal-content">
+                        <template #modal-header>
                           <p>
-                            <translate translate-context="Content/Moderation/Paragraph">
-                              The channel will be deleted, as well as any related files and data. This action is irreversible.
+                            <translate translate-context="Popup/Channel/Title">
+                              Delete this Channel?
                             </translate>
                           </p>
-                        </div>
-                        <p slot="modal-confirm">
-                          <translate translate-context="*/*/*/Verb">
-                            Delete
-                          </translate>
-                        </p>
+                        </template>
+                        <template #modal-content>
+                          <div>
+                            <p>
+                              <translate translate-context="Content/Moderation/Paragraph">
+                                The channel will be deleted, as well as any related files and data. This action is irreversible.
+                              </translate>
+                            </p>
+                          </div>
+                        </template>
+                        <template #modal-confirm>
+                          <p>
+                            <translate translate-context="*/*/*/Verb">
+                              Delete
+                            </translate>
+                          </p>
+                        </template>
                       </dangerous-button>
                     </template>
                     <template v-if="$store.state.auth.availablePermissions['library']">
diff --git a/front/src/views/content/libraries/Form.vue b/front/src/views/content/libraries/Form.vue
index 2219753aa..a816cc77e 100644
--- a/front/src/views/content/libraries/Form.vue
+++ b/front/src/views/content/libraries/Form.vue
@@ -94,21 +94,27 @@
       <translate translate-context="*/*/*/Verb">
         Delete
       </translate>
-      <p slot="modal-header">
-        <translate translate-context="Popup/Library/Title">
-          Delete this library?
-        </translate>
-      </p>
-      <p slot="modal-content">
-        <translate translate-context="Popup/Library/Paragraph">
-          The library and all its tracks will be deleted. This can not be undone.
-        </translate>
-      </p>
-      <div slot="modal-confirm">
-        <translate translate-context="Popup/Library/Button.Label/Verb">
-          Delete library
-        </translate>
-      </div>
+      <template #modal-header>
+        <p>
+          <translate translate-context="Popup/Library/Title">
+            Delete this library?
+          </translate>
+        </p>
+      </template>
+      <template #modal-content>
+        <p>
+          <translate translate-context="Popup/Library/Paragraph">
+            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">
+            Delete library
+          </translate>
+        </div>
+      </template>
     </dangerous-button>
   </form>
 </template>
diff --git a/front/src/views/content/libraries/Quota.vue b/front/src/views/content/libraries/Quota.vue
index 57bd2082b..d9c35fb4c 100644
--- a/front/src/views/content/libraries/Quota.vue
+++ b/front/src/views/content/libraries/Quota.vue
@@ -75,21 +75,27 @@
             <translate translate-context="*/*/*/Verb">
               Purge
             </translate>
-            <p slot="modal-header">
-              <translate translate-context="Popup/Library/Title">
-                Purge pending files?
-              </translate>
-            </p>
-            <p slot="modal-content">
-              <translate translate-context="Popup/Library/Paragraph">
-                Removes uploaded but yet to be processed tracks completely, adding the corresponding data to your quota.
-              </translate>
-            </p>
-            <div slot="modal-confirm">
-              <translate translate-context="*/*/*/Verb">
-                Purge
-              </translate>
-            </div>
+            <template #modal-header>
+              <p>
+                <translate translate-context="Popup/Library/Title">
+                  Purge pending files?
+                </translate>
+              </p>
+            </template>
+            <template #modal-content>
+              <p>
+                <translate translate-context="Popup/Library/Paragraph">
+                  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">
+                  Purge
+                </translate>
+              </div>
+            </template>
           </dangerous-button>
         </div>
       </div>
@@ -123,21 +129,27 @@
             <translate translate-context="*/*/*/Verb">
               Purge
             </translate>
-            <p slot="modal-header">
-              <translate translate-context="Popup/Library/Title">
-                Purge skipped files?
-              </translate>
-            </p>
-            <p slot="modal-content">
-              <translate translate-context="Popup/Library/Paragraph">
-                Removes uploaded tracks skipped during the import processes completely, adding the corresponding data to your quota.
-              </translate>
-            </p>
-            <div slot="modal-confirm">
-              <translate translate-context="*/*/*/Verb">
-                Purge
-              </translate>
-            </div>
+            <template #modal-header>
+              <p>
+                <translate translate-context="Popup/Library/Title">
+                  Purge skipped files?
+                </translate>
+              </p>
+            </template>
+            <template #modal-content>
+              <p>
+                <translate translate-context="Popup/Library/Paragraph">
+                  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">
+                  Purge
+                </translate>
+              </div>
+            </template>
           </dangerous-button>
         </div>
       </div>
@@ -171,21 +183,27 @@
             <translate translate-context="*/*/*/Verb">
               Purge
             </translate>
-            <p slot="modal-header">
-              <translate translate-context="Popup/Library/Title">
-                Purge errored files?
-              </translate>
-            </p>
-            <p slot="modal-content">
-              <translate translate-context="Popup/Library/Paragraph">
-                Removes uploaded tracks that could not be processed by the server completely, adding the corresponding data to your quota.
-              </translate>
-            </p>
-            <div slot="modal-confirm">
-              <translate translate-context="*/*/*/Verb">
-                Purge
-              </translate>
-            </div>
+            <template #modal-header>
+              <p>
+                <translate translate-context="Popup/Library/Title">
+                  Purge errored files?
+                </translate>
+              </p>
+            </template>
+            <template #modal-content>
+              <p>
+                <translate translate-context="Popup/Library/Paragraph">
+                  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">
+                  Purge
+                </translate>
+              </div>
+            </template>
           </dangerous-button>
         </div>
       </div>
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index 3972707b4..f160d19f6 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -199,23 +199,29 @@
             <translate translate-context="*/Library/Button.Label/Verb">
               Unfollow
             </translate>
-            <p slot="modal-header">
-              <translate translate-context="Popup/Library/Title">
-                Unfollow this library?
-              </translate>
-            </p>
-            <div slot="modal-content">
+            <template #modal-header>
               <p>
-                <translate translate-context="Popup/Library/Paragraph">
-                  By unfollowing this library, you loose access to its content.
+                <translate translate-context="Popup/Library/Title">
+                  Unfollow this library?
                 </translate>
               </p>
-            </div>
-            <div slot="modal-confirm">
-              <translate translate-context="*/Library/Button.Label/Verb">
-                Unfollow
-              </translate>
-            </div>
+            </template>
+            <template #modal-content>
+              <div>
+                <p>
+                  <translate translate-context="Popup/Library/Paragraph">
+                    By unfollowing this library, you loose access to its content.
+                  </translate>
+                </p>
+              </div>
+            </template>
+            <template #modal-confirm>
+              <div>
+                <translate translate-context="*/Library/Button.Label/Verb">
+                  Unfollow
+                </translate>
+              </div>
+            </template>
           </dangerous-button>
         </template>
       </template>
diff --git a/front/src/views/library/DetailAlbums.vue b/front/src/views/library/DetailAlbums.vue
index 784cbf7c4..15248a9cb 100644
--- a/front/src/views/library/DetailAlbums.vue
+++ b/front/src/views/library/DetailAlbums.vue
@@ -7,24 +7,26 @@
       :controls="false"
       :filters="{playable: true, ordering: '-creation_date', library: object.uuid}"
     >
-      <empty-state slot="empty-state">
-        <p>
-          <translate
-            v-if="isOwner"
-            key="1"
-            translate-context="*/*/*"
-          >
-            This library is empty, you should upload something in it!
-          </translate>
-          <translate
-            v-else
-            key="2"
-            translate-context="*/*/*"
-          >
-            You may need to follow this library to see its content.
-          </translate>
-        </p>
-      </empty-state>
+      <template #empty-state>
+        <empty-state>
+          <p>
+            <translate
+              v-if="isOwner"
+              key="1"
+              translate-context="*/*/*"
+            >
+              This library is empty, you should upload something in it!
+            </translate>
+            <translate
+              v-else
+              key="2"
+              translate-context="*/*/*"
+            >
+              You may need to follow this library to see its content.
+            </translate>
+          </p>
+        </empty-state>
+      </template>
     </album-widget>
   </section>
 </template>
diff --git a/front/src/views/library/DetailOverview.vue b/front/src/views/library/DetailOverview.vue
index 7316bc1a5..a6dad29ad 100644
--- a/front/src/views/library/DetailOverview.vue
+++ b/front/src/views/library/DetailOverview.vue
@@ -16,24 +16,26 @@
       :controls="false"
       :filters="{playable: true, ordering: '-creation_date', library: object.uuid}"
     >
-      <empty-state slot="empty-state">
-        <p>
-          <translate
-            v-if="isOwner"
-            key="1"
-            translate-context="*/*/*"
-          >
-            This library is empty, you should upload something in it!
-          </translate>
-          <translate
-            v-else
-            key="2"
-            translate-context="*/*/*"
-          >
-            You may need to follow this library to see its content.
-          </translate>
-        </p>
-      </empty-state>
+      <template #empty-state>
+        <empty-state>
+          <p>
+            <translate
+              v-if="isOwner"
+              key="1"
+              translate-context="*/*/*"
+            >
+              This library is empty, you should upload something in it!
+            </translate>
+            <translate
+              v-else
+              key="2"
+              translate-context="*/*/*"
+            >
+              You may need to follow this library to see its content.
+            </translate>
+          </p>
+        </empty-state>
+      </template>
     </artist-widget>
   </section>
 </template>
diff --git a/front/src/views/library/DetailTracks.vue b/front/src/views/library/DetailTracks.vue
index b808a291f..50a3773e6 100644
--- a/front/src/views/library/DetailTracks.vue
+++ b/front/src/views/library/DetailTracks.vue
@@ -6,24 +6,26 @@
       :search="true"
       :filters="{playable: true, library: object.uuid, ordering: '-creation_date'}"
     >
-      <empty-state slot="empty-state">
-        <p>
-          <translate
-            v-if="isOwner"
-            key="1"
-            translate-context="*/*/*"
-          >
-            This library is empty, you should upload something in it!
-          </translate>
-          <translate
-            v-else
-            key="2"
-            translate-context="*/*/*"
-          >
-            You may need to follow this library to see its content.
-          </translate>
-        </p>
-      </empty-state>
+      <template #empty-state>
+        <empty-state>
+          <p>
+            <translate
+              v-if="isOwner"
+              key="1"
+              translate-context="*/*/*"
+            >
+              This library is empty, you should upload something in it!
+            </translate>
+            <translate
+              v-else
+              key="2"
+              translate-context="*/*/*"
+            >
+              You may need to follow this library to see its content.
+            </translate>
+          </p>
+        </empty-state>
+      </template>
     </track-table>
   </section>
 </template>
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 93e99523a..5fc264e76 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -81,24 +81,29 @@
               <i class="trash icon" /> <translate translate-context="*/*/*/Verb">
                 Delete
               </translate>
-              <p
-                slot="modal-header"
-                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 }"?
-              </p>
-              <p slot="modal-content">
-                <translate translate-context="Popup/Playlist/Paragraph">
-                  This will completely delete this playlist and cannot be undone.
-                </translate>
-              </p>
-              <div slot="modal-confirm">
-                <translate translate-context="Popup/Playlist/Button.Label/Verb">
-                  Delete playlist
-                </translate>
-              </div>
+              <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 }"?
+                </p>
+              </template>
+              <template #modal-content>
+                <p>
+                  <translate translate-context="Popup/Playlist/Paragraph">
+                    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">
+                    Delete playlist
+                  </translate>
+                </div>
+              </template>
             </dangerous-button>
           </div>
         </div>
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index bfa432110..3c7751b95 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -41,24 +41,29 @@
             :action="deleteRadio"
           >
             <i class="trash icon" /> Delete
-            <p
-              slot="modal-header"
-              v-translate="{radio: radio.name}"
-              translate-context="Popup/Radio/Title"
-              :translate-params="{radio: radio.name}"
-            >
-              Do you want to delete the radio "%{ radio }"?
-            </p>
-            <p slot="modal-content">
-              <translate translate-context="Popup/Radio/Paragraph">
-                This will completely delete this radio and cannot be undone.
-              </translate>
-            </p>
-            <p slot="modal-confirm">
-              <translate translate-context="Popup/Radio/Button.Label/Verb">
-                Delete radio
-              </translate>
-            </p>
+            <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 }"?
+              </p>
+            </template>
+            <template #modal-content>
+              <p>
+                <translate translate-context="Popup/Radio/Paragraph">
+                  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">
+                  Delete radio
+                </translate>
+              </p>
+            </template>
           </dangerous-button>
         </template>
       </div>