diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index 6a61ca4f5..fddf12f47 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -297,7 +297,7 @@
         :filters="{playable: true, ordering: '-creation_date'}"
         :limit="10"
       >
-        <template slot="title">
+        <template #title>
           <translate translate-context="Content/Home/Title">
             Recently added albums
           </translate>
diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
index 99ff4d2ea..dd4dd6ecd 100644
--- a/front/src/components/SetInstanceModal.vue
+++ b/front/src/components/SetInstanceModal.vue
@@ -117,7 +117,7 @@ export default {
   props: { show: { type: Boolean, required: true } },
   setup (props) {
     // TODO (wvffle): Add defineEmits when rewriting to <script setup>
-    const showRef = useVModel(props, 'show'/*, emit*/)
+    const showRef = useVModel(props, 'show'/*, emit */)
     return { showRef }
   },
   data () {
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 0fdf9c4d5..6a7281460 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -159,8 +159,8 @@
         />
         <modal
           ref="languageModal"
-          :fullscreen="false"
           v-model:show="showLanguageModal"
+          :fullscreen="false"
         >
           <i
             role="button"
@@ -190,8 +190,8 @@
         </modal>
         <modal
           ref="themeModal"
-          :fullscreen="false"
           v-model:show="showThemeModal"
+          :fullscreen="false"
         >
           <i
             role="button"
@@ -526,7 +526,7 @@ export default {
   },
   computed: {
     ...mapState({
-      queue: state => state.queue,
+      queue: state => state.queue
     }),
     ...mapGetters({
       additionalNotifications: 'ui/additionalNotifications'
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index bce8291f2..8ac0f7447 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -59,7 +59,7 @@
 
 <script>
 import PlayButton from '~/components/audio/PlayButton.vue'
-import { momentFormat} from '~/utils/filters'
+import { momentFormat } from '~/utils/filters'
 
 export default {
   components: {
diff --git a/front/src/components/audio/podcast/Modal.vue b/front/src/components/audio/podcast/Modal.vue
index cd9538291..01af2045f 100644
--- a/front/src/components/audio/podcast/Modal.vue
+++ b/front/src/components/audio/podcast/Modal.vue
@@ -242,7 +242,7 @@ export default {
   },
   setup (props) {
     // TODO (wvffle): Add defineEmits when rewriting to <script setup>
-    const showRef = useVModel(props, 'show'/*, emit*/)
+    const showRef = useVModel(props, 'show'/*, emit */)
     return { showRef }
   },
   data () {
diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index 436030ab1..56228500b 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -244,7 +244,7 @@ export default {
   },
   setup (props) {
     // TODO (wvffle): Add defineEmits when rewriting to <script setup>
-    const showRef = useVModel(props, 'show'/*, emit*/)
+    const showRef = useVModel(props, 'show'/*, emit */)
     return { showRef }
   },
   data () {
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index 63bb0ebf9..9299dd418 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -218,7 +218,7 @@ export default {
   },
   setup (props) {
     // TODO (wvffle): Add defineEmits when rewriting to <script setup>
-    const showRef = useVModel(props, 'show'/*, emit*/)
+    const showRef = useVModel(props, 'show'/*, emit */)
     return {
       showRef,
       theme: useTheme(),
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 6b6ff7daf..80fa5af90 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -254,7 +254,7 @@ import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 import ArtistLabel from '~/components/audio/ArtistLabel.vue'
 import AlbumDropdown from './AlbumDropdown.vue'
-import { momentFormat} from '~/utils/filters'
+import { momentFormat } from '~/utils/filters'
 
 function groupByDisc (initial) {
   function inner (acc, track) {
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index 7e546d2c6..d2a271d19 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -72,7 +72,7 @@
         :track-only="true"
         :tracks="tracks.slice(0,5)"
       >
-        <template slot="header">
+        <template #header>
           <h2>
             <translate translate-context="Content/Artist/Title">
               New tracks by this artist
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index e3b18ff49..db7a0112e 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -10,7 +10,7 @@
             :url="'history/listenings/'"
             :filters="{scope: scope, ordering: '-creation_date'}"
           >
-            <template slot="title">
+            <template #title>
               <translate translate-context="Content/Home/Title">
                 Recently listened
               </translate>
@@ -22,7 +22,7 @@
             :url="'favorites/tracks/'"
             :filters="{scope: scope, ordering: '-creation_date'}"
           >
-            <template slot="title">
+            <template #title>
               <translate translate-context="Content/Home/Title">
                 Recently favorited
               </translate>
@@ -34,7 +34,7 @@
             :url="'playlists/'"
             :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
           >
-            <template slot="title">
+            <template #title>
               <translate translate-context="*/*/*">
                 Playlists
               </translate>
@@ -46,7 +46,7 @@
       <div class="ui stackable one column grid">
         <div class="column">
           <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
-            <template slot="title">
+            <template #title>
               <translate translate-context="Content/Home/Title">
                 Recently added
               </translate>
diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 37c1900a3..7cde22360 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -28,7 +28,7 @@
           :controls="false"
           :filters="{playable: true, ordering: '-creation_date', tag: id, include_channels: 'false'}"
         >
-          <template slot="title">
+          <template #title>
             <router-link :to="{name: 'library.artists.browse', query: {tag: id}}">
               <translate translate-context="*/*/*/Noun">
                 Artists
@@ -57,7 +57,7 @@
           :controls="false"
           :filters="{playable: true, ordering: '-creation_date', tag: id}"
         >
-          <template slot="title">
+          <template #title>
             <router-link :to="{name: 'library.albums.browse', query: {tag: id}}">
               <translate translate-context="*/*/*">
                 Albums
@@ -76,7 +76,7 @@
           :is-activity="false"
           :filters="{playable: true, ordering: '-creation_date', tag: id}"
         >
-          <template slot="title">
+          <template #title>
             <translate translate-context="*/*/*">
               Tracks
             </translate>
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index b6b636312..7dc663fd0 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -91,7 +91,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Name
@@ -124,8 +124,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.channels.detail', params: {id: scope.obj.actor.full_username }}">
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 8846e97bb..23ecf23a5 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -66,7 +66,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Title
@@ -99,8 +99,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.id }}">
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index d3420027b..3d6a8e295 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -91,7 +91,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Name
@@ -119,8 +119,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="getUrl(scope.obj)">
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index ae39a6925..838de0d2c 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -91,7 +91,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Name
@@ -129,8 +129,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.uuid }}">
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 9246feb71..ce4b9824b 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -53,8 +53,8 @@
       </div>
     </div>
     <import-status-modal
+      v-model:show="showUploadDetailModal"
       :upload="detailedUpload"
-      :show.sync="showUploadDetailModal"
     />
     <div class="dimmable">
       <div
@@ -72,7 +72,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Name
@@ -100,8 +100,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.library.tags.detail', params: {id: scope.obj.name }}">
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 06cb17059..d6f6fb174 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -67,7 +67,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Title
@@ -100,8 +100,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.library.tracks.detail', params: {id: scope.obj.id }}">
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 9196841b2..e2475ac1a 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -112,8 +112,8 @@
       </div>
     </div>
     <import-status-modal
+      v-model:show="showUploadDetailModal"
       :upload="detailedUpload"
-      :show.sync="showUploadDetailModal"
     />
     <div class="dimmable">
       <div
@@ -130,7 +130,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Name
@@ -178,8 +178,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.library.uploads.detail', params: {id: scope.obj.uuid }}">
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 5a9ead7e3..5992ccaf8 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -67,7 +67,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Name
@@ -100,8 +100,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.full_username }}">
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index d4402fb06..46c793949 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -92,7 +92,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Name
@@ -120,8 +120,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.name }}">
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index 3c26aa544..cdb7e4992 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/front/src/components/manage/users/InvitationsTable.vue
@@ -69,7 +69,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*">
               Owner
@@ -97,8 +97,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link :to="{name: 'manage.users.users.detail', params: {id: scope.obj.id }}">
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index 9c39126b5..fac5bde43 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/front/src/components/manage/users/UsersTable.vue
@@ -64,7 +64,7 @@
         :filters="actionFilters"
         @action-launched="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="Content/*/*">
               Username
@@ -102,8 +102,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <td>
             <router-link
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index 824d3a555..53094eec8 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -129,8 +129,8 @@
             <draggable
               v-model:list="plts"
               tag="tbody"
-              @update="reorder"
               item-key="_id"
+              @update="reorder"
             >
               <template #item="{ element: plt, index }">
                 <tr>
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index 9d2e81087..15673f2b7 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -401,7 +401,7 @@
 import axios from 'axios'
 import FetchButton from '~/components/federation/FetchButton.vue'
 import TagsList from '~/components/tags/List.vue'
-import { humanSize, truncate} from '~/utils/filters'
+import { humanSize, truncate } from '~/utils/filters'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index 4f582046b..c63c7f062 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -360,7 +360,7 @@
 import axios from 'axios'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import useLogger from '~/composables/useLogger'
-import { humanSize, truncate} from '~/utils/filters'
+import { humanSize, truncate } from '~/utils/filters'
 
 const logger = useLogger()
 
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
index d99e671c5..3be754ccf 100644
--- a/front/src/views/admin/library/TagDetail.vue
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -210,7 +210,7 @@
 
 <script>
 import axios from 'axios'
-import { truncate} from '~/utils/filters'
+import { truncate } from '~/utils/filters'
 
 export default {
   props: { id: { type: Number, required: true } },
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index bf4a52348..d80d571aa 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -8,8 +8,8 @@
     </div>
     <template v-if="object">
       <import-status-modal
+        v-model:show="showUploadDetailModal"
         :upload="object"
-        :show.sync="showUploadDetailModal"
       />
       <section
         v-title="displayName(object)"
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 176ec39b2..3b9d9b105 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -572,7 +572,7 @@ import $ from 'jquery'
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
 import useLogger from '~/composables/useLogger'
-import { humanSize} from '~/utils/filters'
+import { humanSize } from '~/utils/filters'
 
 const logger = useLogger()
 
diff --git a/front/src/views/admin/moderation/DomainsDetail.vue b/front/src/views/admin/moderation/DomainsDetail.vue
index a5a4fb59e..4c54b7c81 100644
--- a/front/src/views/admin/moderation/DomainsDetail.vue
+++ b/front/src/views/admin/moderation/DomainsDetail.vue
@@ -462,7 +462,7 @@ import { get } from 'lodash-es'
 
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
-import { humanSize} from '~/utils/filters'
+import { humanSize } from '~/utils/filters'
 
 export default {
   components: {
diff --git a/front/src/views/channels/SubscriptionsList.vue b/front/src/views/channels/SubscriptionsList.vue
index fe49a4362..ebbf2b135 100644
--- a/front/src/views/channels/SubscriptionsList.vue
+++ b/front/src/views/channels/SubscriptionsList.vue
@@ -14,8 +14,8 @@
         </div>
       </h1>
       <modal
-        class="tiny"
         v-model:show="showSubscribeModal"
+        class="tiny"
         :fullscreen="false"
       >
         <h2 class="header">
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 5f3144b34..3d0db82f5 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -78,7 +78,7 @@
 
 <script>
 import TranslationsMixin from '~/components/mixins/Translations.vue'
-import { humanSize} from '~/utils/filters'
+import { humanSize } from '~/utils/filters'
 
 export default {
   mixins: [TranslationsMixin],
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index b29b76761..c726f42bf 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -101,8 +101,8 @@
       </div>
     </div>
     <import-status-modal
+      v-model:show="showUploadDetailModal"
       :upload="detailedUpload"
-      :show.sync="showUploadDetailModal"
     />
     <div class="dimmable">
       <div
@@ -137,7 +137,7 @@
         @action-launched="fetchData"
         @refresh="fetchData"
       >
-        <template slot="header-cells">
+        <template #header-cells>
           <th>
             <translate translate-context="*/*/*/Noun">
               Title
@@ -175,8 +175,7 @@
           </th>
         </template>
         <template
-          slot="row-cells"
-          slot-scope="scope"
+          #row-cells="scope"
         >
           <template v-if="scope.obj.track">
             <td>