From b7d66232f64d4d5f2cf315b9acb9f6d441308cab Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sat, 30 Apr 2022 22:46:37 +0200
Subject: [PATCH] Remove vue 2 filters

Fixes #1759
---
 front/package.json                            |   1 -
 front/src/components/About.vue                |   2 +-
 front/src/components/AboutPod.vue             |   7 +-
 front/src/components/Home.vue                 |   2 +-
 front/src/components/audio/ChannelCard.vue    |   2 +-
 front/src/components/audio/album/Card.vue     |   6 +-
 front/src/components/audio/artist/Card.vue    |   6 +-
 front/src/components/audio/track/Table.vue    |   6 +-
 front/src/components/channels/UploadForm.vue  |   8 +-
 front/src/components/channels/UploadModal.vue |   6 +-
 front/src/components/common/ActorLink.vue     |  92 +++++++-----
 front/src/components/common/Duration.vue      |  33 +++--
 front/src/components/common/HumanDate.vue     |  46 +++---
 front/src/components/common/HumanDuration.vue |  22 ++-
 front/src/components/library/AlbumBase.vue    |   6 +-
 front/src/components/library/FileUpload.vue   |  12 +-
 front/src/components/library/TrackBase.vue    |   2 +-
 front/src/components/library/TrackDetail.vue  |  17 ++-
 .../components/manage/library/TagsTable.vue   |   6 +-
 .../manage/library/UploadsTable.vue           |   8 +-
 front/src/components/tags/List.vue            |  75 ++++++----
 front/src/init/filters.ts                     | 140 ------------------
 front/src/types.ts                            |   8 +
 front/src/utils/filters.ts                    |  38 +++++
 front/src/views/admin/ChannelDetail.vue       |  10 +-
 front/src/views/admin/library/AlbumDetail.vue |  10 +-
 .../src/views/admin/library/ArtistDetail.vue  |  10 +-
 .../src/views/admin/library/LibraryDetail.vue |  10 +-
 front/src/views/admin/library/TagDetail.vue   |   6 +-
 front/src/views/admin/library/TrackDetail.vue |  10 +-
 .../src/views/admin/library/UploadDetail.vue  |  15 +-
 .../views/admin/moderation/AccountsDetail.vue |   8 +-
 .../views/admin/moderation/DomainsDetail.vue  |   8 +-
 front/src/views/content/Home.vue              |   2 +-
 front/src/views/content/libraries/Card.vue    |   6 +-
 .../views/content/libraries/FilesTable.vue    |  17 ++-
 front/src/views/content/libraries/Quota.vue   |   2 +-
 front/src/views/library/DetailBase.vue        |   6 +-
 .../unit/specs/components/common.spec.js      |   2 +-
 .../tests/unit/specs/filters/filters.spec.js  |  47 +-----
 front/tests/unit/specs/store/auth.spec.js     |   2 +-
 .../tests/unit/specs/store/favorites.spec.js  |   2 +-
 front/tests/unit/specs/store/instance.spec.js |   2 +-
 front/tests/unit/specs/store/player.spec.js   |   2 +-
 .../tests/unit/specs/store/playlists.spec.js  |   2 +-
 front/tests/unit/specs/store/queue.spec.js    |   2 +-
 front/tests/unit/specs/store/radios.spec.js   |   2 +-
 front/yarn.lock                               |  16 +-
 48 files changed, 368 insertions(+), 382 deletions(-)
 delete mode 100644 front/src/init/filters.ts
 create mode 100644 front/src/utils/filters.ts

diff --git a/front/package.json b/front/package.json
index 44d3112ec..34231d27b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -82,7 +82,6 @@
     "vite": "2.8.6",
     "vite-plugin-pwa": "0.12.0",
     "vue-jest": "3.0.7",
-    "vue-template-compiler": "2.6.14",
     "workbox-core": "6.5.3",
     "workbox-precaching": "6.5.3",
     "workbox-routing": "6.5.3",
diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index ece6baf24..d954a9e2e 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -252,7 +252,7 @@
 import { mapState } from 'vuex'
 import { get } from 'lodash-es'
 import showdown from 'showdown'
-import { humanSize } from '~/init/filters'
+import { humanSize } from '~/utils/filters'
 
 import SignupForm from '~/components/auth/SignupForm.vue'
 import LogoText from '~/components/LogoText.vue'
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index f94308cae..4c3d0dfdd 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -278,7 +278,7 @@ We render some markdown to html here, the content is set by the admin so we shou
                           class="right aligned"
                         >
                           <span class="features-status ui text">
-                            {{ defaultUploadQuota * 1000 * 1000 | humanSize }}
+                            {{ humanSize(defaultUploadQuota * 1000 * 1000) }}
                           </span>
                         </td>
                         <td
@@ -436,10 +436,15 @@ We render some markdown to html here, the content is set by the admin so we shou
 import { mapState } from 'vuex'
 import { get } from 'lodash-es'
 import showdown from 'showdown'
+import { humanSize } from '~/utils/filters'
 
 export default {
+  setup () {
+    return { humanSize }
+  },
   data () {
     return {
+      // TODO (wvffle): Remove v-html
       markdown: new showdown.Converter(),
       showAllowedDomains: false
     }
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index 04563c0ee..6a61ca4f5 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -332,7 +332,7 @@ import AlbumWidget from '~/components/audio/album/Widget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import LoginForm from '~/components/auth/LoginForm.vue'
 import SignupForm from '~/components/auth/SignupForm.vue'
-import { humanSize } from '~/init/filters'
+import { humanSize } from '~/utils/filters'
 
 export default {
   components: {
diff --git a/front/src/components/audio/ChannelCard.vue b/front/src/components/audio/ChannelCard.vue
index 9f025774f..68210a30a 100644
--- a/front/src/components/audio/ChannelCard.vue
+++ b/front/src/components/audio/ChannelCard.vue
@@ -78,7 +78,7 @@
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
-import { momentFormat } from '~/init/filters'
+import { momentFormat } from '~/utils/filters'
 import moment from 'moment'
 
 export default {
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index d5a3c4d18..bce8291f2 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -37,7 +37,7 @@
       </div>
     </div>
     <div class="extra content">
-      <span v-if="album.release_date">{{ album.release_date | moment('Y') }} · </span>
+      <span v-if="album.release_date">{{ momentFormat(album.release_date, 'Y') }} · </span>
       <translate
         translate-context="*/*/*"
         :translate-params="{count: album.tracks_count}"
@@ -59,6 +59,7 @@
 
 <script>
 import PlayButton from '~/components/audio/PlayButton.vue'
+import { momentFormat} from '~/utils/filters'
 
 export default {
   components: {
@@ -67,6 +68,9 @@ export default {
   props: {
     album: { type: Object, required: true }
   },
+  setup () {
+    return { momentFormat }
+  },
   computed: {
     imageUrl () {
       if (this.album.cover && this.album.cover.urls.original) {
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index dcfc3c031..f4e00b0f8 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -22,7 +22,7 @@
           class="discrete link"
           :to="{name: 'library.artists.detail', params: {id: artist.id}}"
         >
-          {{ artist.name|truncate(30) }}
+          {{ truncate(artist.name, 30) }}
         </router-link>
       </strong>
 
@@ -67,6 +67,7 @@
 <script>
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
+import { truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -74,6 +75,9 @@ export default {
     TagsList
   },
   props: { artist: { type: Object, required: true } },
+  setup () {
+    return { truncate }
+  },
   data () {
     return {
       initialAlbums: 30,
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index c190ccdbe..22c16db51 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -158,12 +158,12 @@
 </template>
 
 <script>
-import { clone } from 'lodash-es'
+import { clone, uniqBy } from 'lodash-es'
 import axios from 'axios'
 import TrackRow from '~/components/audio/track/Row.vue'
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
 import Pagination from '~/components/Pagination.vue'
-import { unique } from '~/init/filters'
+import { unique } from '~/utils/filters'
 
 export default {
   components: {
@@ -205,7 +205,7 @@ export default {
   computed: {
     allTracks () {
       const tracks = (this.tracks || []).concat(this.additionalTracks)
-      return unique(tracks, 'id')
+      return uniqBy(tracks, 'id')
     },
 
     labels () {
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index 3987adc53..cbdced7be 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -137,7 +137,7 @@
               </template>
               <div class="sub header">
                 <template v-if="file.response.uuid">
-                  {{ file.size | humanSize }}
+                  {{ humanSize(file.size) }}
                   <template v-if="file.response.duration">
                     · <human-duration :duration="file.response.duration" />
                   </template>
@@ -164,7 +164,7 @@
                   >
                     Pending
                   </translate>
-                  · {{ file.size | humanSize }}
+                  · {{ humanSize(file.size) }}
                   · {{ parseInt(file.progress) }}%
                 </template>
                 · <a @click.stop.prevent="remove(file)">
@@ -243,6 +243,7 @@ import LicenseSelect from '~/components/channels/LicenseSelect.vue'
 import AlbumSelect from '~/components/channels/AlbumSelect.vue'
 import FileUploadWidget from '~/components/library/FileUploadWidget.vue'
 import UploadMetadataForm from '~/components/channels/UploadMetadataForm.vue'
+import { humanSize } from '~/utils/filters'
 
 function setIfEmpty (obj, k, v) {
   if (obj[k] !== undefined) {
@@ -261,6 +262,9 @@ export default {
   props: {
     channel: { type: Object, default: null, required: false }
   },
+  setup () {
+    return { humanSize }
+  },
   data () {
     return {
       availableChannels: {
diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index 02d666318..a3f1ec8c3 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -55,7 +55,7 @@
           <translate translate-context="Content/Library/Paragraph">
             Remaining storage space:
           </translate>
-          {{ (statusData.quotaStatus.remaining * 1000 * 1000) - statusData.uploadedSize | humanSize }}
+          {{ (statusData.quotaStatus.remaining * 1000 * 1000) - humanSize(statusData.uploadedSize) }}
         </template>
       </div>
       <div class="ui hidden clearing divider mobile-only" />
@@ -144,7 +144,7 @@
 <script>
 import Modal from '~/components/semantic/Modal.vue'
 import ChannelUploadForm from '~/components/channels/UploadForm.vue'
-import { humanSize } from '~/init/filters'
+import { humanSize } from '~/utils/filters'
 import {onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'
 
 export default {
@@ -159,6 +159,8 @@ export default {
 
     onBeforeRouteUpdate(guard)
     onBeforeRouteLeave(guard)
+
+    return { humanSize }
   },
   data () {
     return {
diff --git a/front/src/components/common/ActorLink.vue b/front/src/components/common/ActorLink.vue
index a30c717ca..1a4a8f236 100644
--- a/front/src/components/common/ActorLink.vue
+++ b/front/src/components/common/ActorLink.vue
@@ -1,42 +1,64 @@
+<script setup lang="ts">
+import { toRefs } from '@vueuse/core'
+import { computed } from 'vue'
+import { truncate } from '~/utils/filters'
+import { Actor } from '~/types'
+
+interface Props {
+  actor: Actor
+  avatar?: boolean
+  admin?: boolean
+  displayName?: boolean
+  truncateLength?: number
+}
+
+const { displayName, actor, truncateLength, admin, avatar } = toRefs(withDefaults(
+  defineProps<Props>(),
+  {
+    avatar: true,
+    admin: false,
+    displayName: false,
+    truncateLength: 30
+  }
+))
+
+const repr = computed(() => {
+  const name = displayName.value || actor.value.is_local
+    ? actor.value.preferred_username
+    : actor.value.full_username
+
+  return truncate(name, truncateLength.value)
+})
+
+const url = computed(() => {
+  if (admin.value) {
+    return { name: 'manage.moderation.accounts.detail', params: { id: actor.value.full_username } }
+  }
+
+  if (actor.value.is_local) {
+    return { name: 'profile.overview', params: { username: actor.value.preferred_username } }
+  }
+
+  return {
+    name: 'profile.full.overview',
+    params: {
+      username: actor.value.preferred_username,
+      domain: actor.value.domain
+    }
+  }
+})
+</script>
+
 <template>
   <router-link
     :to="url"
     :title="actor.full_username"
   >
-    <template v-if="avatar">
-      <actor-avatar :actor="actor" /><span>&nbsp;</span>
-    </template><slot>{{ repr | truncate(truncateLength) }}</slot>
+    <actor-avatar
+      v-if="avatar"
+      :actor="actor"
+    />
+    <span>&nbsp;</span>
+    <slot>{{ repr }}</slot>
   </router-link>
 </template>
-
-<script>
-
-export default {
-  props: {
-    actor: { type: Object, required: true },
-    avatar: { type: Boolean, default: true },
-    admin: { type: Boolean, default: false },
-    displayName: { type: Boolean, default: false },
-    truncateLength: { type: Number, default: 30 }
-  },
-  computed: {
-    url () {
-      if (this.admin) {
-        return { name: 'manage.moderation.accounts.detail', params: { id: this.actor.full_username } }
-      }
-      if (this.actor.is_local) {
-        return { name: 'profile.overview', params: { username: this.actor.preferred_username } }
-      } else {
-        return { name: 'profile.full.overview', params: { username: this.actor.preferred_username, domain: this.actor.domain } }
-      }
-    },
-    repr () {
-      if (this.displayName || this.actor.is_local) {
-        return this.actor.preferred_username
-      } else {
-        return this.actor.full_username
-      }
-    }
-  }
-}
-</script>
diff --git a/front/src/components/common/Duration.vue b/front/src/components/common/Duration.vue
index 92b8725c4..5983bae3e 100644
--- a/front/src/components/common/Duration.vue
+++ b/front/src/components/common/Duration.vue
@@ -1,26 +1,29 @@
+<script setup lang="ts">
+import moment from 'moment'
+import { computed } from 'vue'
+
+interface Props {
+  seconds?: number
+}
+
+const props = defineProps<Props>()
+const duration = computed(() => {
+  const { minutes, hours } = moment.duration(props.seconds, 'seconds')
+  return { minutes: minutes(), hours: hours() }
+})
+</script>
+
 <template>
   <span>
     <translate
-      v-if="durationData.hours > 0"
+      v-if="duration.hours > 0"
       translate-context="Content/*/Paragraph"
-      :translate-params="{minutes: durationData.minutes, hours: durationData.hours}"
+      :translate-params="duration"
     >%{ hours } h %{ minutes } min</translate>
     <translate
       v-else
       translate-context="Content/*/Paragraph"
-      :translate-params="{minutes: durationData.minutes}"
+      :translate-params="duration"
     >%{ minutes } min</translate>
   </span>
 </template>
-<script>
-import { secondsToObject } from '~/init/filters'
-
-export default {
-  props: { seconds: { type: Number, default: null } },
-  computed: {
-    durationData () {
-      return secondsToObject(this.seconds)
-    }
-  }
-}
-</script>
diff --git a/front/src/components/common/HumanDate.vue b/front/src/components/common/HumanDate.vue
index 5dc267adf..93b20751e 100644
--- a/front/src/components/common/HumanDate.vue
+++ b/front/src/components/common/HumanDate.vue
@@ -1,32 +1,32 @@
+<script setup lang="ts">
+import { momentFormat } from '~/utils/filters'
+import { useTimeAgo } from '@vueuse/core'
+import { computed } from 'vue'
+
+interface Props {
+  date: string,
+  icon?: boolean
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  { icon: false }
+)
+
+const date = computed(() => new Date(props.date))
+// TODO (wvffle): Translate useTimeAgo
+const realDate = useTimeAgo(date)
+</script>
+
 <template>
   <time
     :datetime="date"
-    :title="date | moment"
+    :title="momentFormat(date)"
   >
     <i
-      v-if="icon"
+      v-if="props.icon"
       class="outline clock icon"
     />
-    {{ realDate | ago($store.state.ui.momentLocale) }}
+    {{ realDate }}
   </time>
 </template>
-<script>
-import { mapState } from 'vuex'
-export default {
-  props: {
-    date: { type: String, required: true },
-    icon: { type: Boolean, required: false, default: false }
-  },
-  computed: {
-    ...mapState({
-      lastDate: state => state.ui.lastDate
-    }),
-    realDate () {
-      if (this.lastDate) {
-        // dummy code to trigger a recompute to update the ago render
-      }
-      return this.date
-    }
-  }
-}
-</script>
diff --git a/front/src/components/common/HumanDuration.vue b/front/src/components/common/HumanDuration.vue
index 83119c82e..8505a6f91 100644
--- a/front/src/components/common/HumanDuration.vue
+++ b/front/src/components/common/HumanDuration.vue
@@ -1,12 +1,18 @@
+<script setup lang="ts">
+import { toRefs } from '@vueuse/core'
+import { computed } from 'vue'
+import time from '~/utils/time'
+
+interface Props {
+  duration: number
+}
+
+const { duration } = toRefs(defineProps<Props>())
+const parsedDuration = computed(() => time.parse(duration.value))
+</script>
+
 <template>
   <time :datetime="`${duration}s`">
-    {{ duration | duration }}
+    {{ parsedDuration }}
   </time>
 </template>
-<script>
-export default {
-  props: {
-    duration: { type: Number, required: true }
-  }
-}
-</script>
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 9d69e79b0..6b6ff7daf 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -141,7 +141,7 @@
                 v-if="object.release_date || (totalTracks > 0)"
                 class="ui small hidden divider"
               />
-              <span v-if="object.release_date">{{ object.release_date | moment('Y') }} · </span>
+              <span v-if="object.release_date">{{ momentFormat(object.release_date, 'Y') }} · </span>
               <template v-if="totalTracks > 0">
                 <translate
                   v-if="isSerie"
@@ -254,6 +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'
 
 function groupByDisc (initial) {
   function inner (acc, track) {
@@ -276,6 +277,9 @@ export default {
     AlbumDropdown
   },
   props: { id: { type: [String, Number], required: true } },
+  setup () {
+    return { momentFormat }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index af38f8bf0..2a517e42f 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -61,13 +61,13 @@
             </translate>
           </div>
           <div class="value">
-            {{ remainingSpace * 1000 * 1000 | humanSize }}
+            {{ humanSize(remainingSpace * 1000 * 1000) }}
           </div>
         </div>
         <div class="ui divider" />
         <h2 class="ui header">
           <translate translate-context="Content/Library/Title/Verb">
-            Upload music from your local storage
+            Upload music from '~/your local storage
           </translate>
         </h2>
         <div class="ui message">
@@ -174,9 +174,9 @@
               :key="file.id"
             >
               <td :title="file.name">
-                {{ file.name | truncate(60) }}
+                {{ truncate(file.name, 60) }}
               </td>
-              <td>{{ file.size | humanSize }}</td>
+              <td>{{ humanSize(file.size) }}</td>
               <td>
                 <span
                   v-if="file.error"
@@ -318,6 +318,7 @@ import FsBrowser from './FsBrowser.vue'
 import FsLogs from './FsLogs.vue'
 import LibraryFilesTable from '~/views/content/libraries/FilesTable.vue'
 import moment from 'moment'
+import { humanSize, truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -330,6 +331,9 @@ export default {
     library: { type: Object, required: true },
     defaultImportReference: { type: String, required: false, default: '' }
   },
+  setup () {
+    return { humanSize, truncate }
+  },
   data () {
     const importReference = this.defaultImportReference || moment().format()
     // Since $router.replace is pushing the same route, it raises NavigationDuplicated
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 0eca827ee..54711f03a 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -228,7 +228,7 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import Modal from '~/components/semantic/Modal.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import ReportMixin from '~/components/mixins/Report.vue'
-import { momentFormat } from '~/init/filters'
+import { momentFormat } from '~/utils/filters'
 import updateQueryString from '~/composables/updateQueryString'
 import useLogger from '~/composables/useLogger'
 
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 3bf6f4216..60cb2e038 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -48,7 +48,7 @@
                   </td>
                   <td class="right aligned">
                     <template v-if="upload.duration">
-                      {{ upload.duration | duration }}
+                      {{ time.parse(upload.duration) }}
                     </template>
                     <translate
                       v-else
@@ -66,7 +66,7 @@
                   </td>
                   <td class="right aligned">
                     <template v-if="upload.size">
-                      {{ upload.size | humanSize }}
+                      {{ humanSize(upload.size) }}
                     </template>
                     <translate
                       v-else
@@ -102,7 +102,7 @@
                   </td>
                   <td class="right aligned">
                     <template v-if="upload.bitrate">
-                      {{ upload.bitrate | humanSize }}/s
+                      {{ humanSize(upload.bitrate) }}/s
                     </template>
                     <translate
                       v-else
@@ -186,7 +186,7 @@
                 </td>
                 <td class="right aligned">
                   <template v-if="track.album && track.album.release_date">
-                    {{ track.album.release_date | moment('Y') }}
+                    {{ momentFormat(track.album.release_date, 'Y') }}
                   </template>
                   <template v-else>
                     <translate translate-context="*/*/*">
@@ -205,7 +205,7 @@
                   <span
                     v-if="track.copyright"
                     :title="track.copyright"
-                  >{{ track.copyright|truncate(50) }}</span>
+                  >{{ truncate(track.copyright, 50) }}</span>
                   <template v-else>
                     <translate translate-context="*/*/*">
                       N/A
@@ -246,7 +246,7 @@
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {{ track.fid|truncate(65) }}
+                    {{ truncate(track.fid, 65) }}
                   </a>
                 </td>
               </tr>
@@ -298,6 +298,8 @@ import axios from 'axios'
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import TagsList from '~/components/tags/List.vue'
 import PlaylistWidget from '~/components/playlists/Widget.vue'
+import { humanSize, momentFormat, truncate } from '~/utils/filters'
+import time from '~/utils/time'
 
 export default {
   components: {
@@ -309,6 +311,9 @@ export default {
     track: { type: Object, required: true },
     libraries: { type: Array, default: null }
   },
+  setup () {
+    return { humanSize, momentFormat, time, truncate }
+  },
   data () {
     return {
       id: this.track.id,
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index bed13fb7c..9246feb71 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -105,7 +105,7 @@
         >
           <td>
             <router-link :to="{name: 'manage.library.tags.detail', params: {id: scope.obj.name }}">
-              {{ scope.obj.name|truncate(30, "…", true) }}
+              {{ truncate(scope.obj.name, 30, undefined, true) }}
             </router-link>
           </td>
           <td>
@@ -156,6 +156,7 @@ import OrderingMixin from '~/components/mixins/Ordering.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
+import { truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -167,6 +168,9 @@ export default {
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    return { truncate }
+  },
   data () {
     return {
       detailedUpload: {},
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 9fb52d32d..9196841b2 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -196,7 +196,7 @@
               :title="scope.obj.library.name"
               @click.prevent="addSearchToken('library_id', scope.obj.library.id)"
             >
-              {{ scope.obj.library.name | truncate(20) }}
+              {{ truncate(scope.obj.library.name, 20) }}
             </a>
           </td>
           <td>
@@ -258,7 +258,7 @@
             </button>
           </td>
           <td>
-            <span v-if="scope.obj.size">{{ scope.obj.size | humanSize }}</span>
+            <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>
             <translate
               v-else
               translate-context="*/*/*"
@@ -317,6 +317,7 @@ import OrderingMixin from '~/components/mixins/Ordering.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
+import { humanSize, truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -328,6 +329,9 @@ export default {
   props: {
     filters: { type: Object, required: false, default: function () { return {} } }
   },
+  setup () {
+    return { humanSize, truncate }
+  },
   data () {
     return {
       detailedUpload: {},
diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index e9f695fca..fcab10983 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -1,23 +1,59 @@
+<script setup lang="ts">
+import { truncate } from '~/utils/filters'
+import { computed, ref } from 'vue'
+
+interface Props {
+  tags: string[]
+  showMore?: boolean
+  truncateSize?: number
+  limit?: number
+  labelClasses?: string
+  detailRoute?: string
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    showMore: true,
+    truncateSize: 25,
+    limit: 5,
+    labelClasses: '',
+    detailRoute: 'library.tags.detail'
+  }
+)
+
+const honorLimit = ref(true)
+
+const tags = computed(() => {
+  if (!honorLimit.value) {
+    return props.tags
+  }
+
+  return props.tags.slice(0, props.limit)
+})
+
+</script>
+
 <template>
   <div class="component-tags-list">
     <router-link
-      v-for="tag in toDisplay"
+      v-for="tag in tags"
       :key="tag"
-      :to="{name: detailRoute, params: {id: tag}}"
-      :class="['ui', 'circular', 'hashtag', 'label', labelClasses]"
+      :to="{name: props.detailRoute, params: { id: tag } }"
+      :class="['ui', 'circular', 'hashtag', 'label', props.labelClasses]"
     >
-      #{{ tag|truncate(truncateSize) }}
+      #{{ truncate(tag, props.truncateSize) }}
     </router-link>
     <div
-      v-if="showMore && toDisplay.length < tags.length"
+      v-if="props.showMore && tags.length < props.tags.length"
       role="button"
       class="ui circular inverted accent label"
       @click.prevent="honorLimit = false"
     >
       <translate
         translate-context="Content/*/Button/Label/Verb"
-        :translate-params="{count: tags.length - toDisplay.length}"
-        :translate-n="tags.length - toDisplay.length"
+        :translate-params="{ count: props.tags.length - tags.length }"
+        :translate-n="props.tags.length - tags.length"
         translate-plural="Show %{ count } more tags"
       >
         Show 1 more tag
@@ -25,28 +61,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    tags: { type: Array, required: true },
-    showMore: { type: Boolean, default: true },
-    truncateSize: { type: Number, default: 25 },
-    limit: { type: Number, default: 5 },
-    labelClasses: { type: String, default: '' },
-    detailRoute: { type: String, default: 'library.tags.detail' }
-  },
-  data () {
-    return {
-      honorLimit: true
-    }
-  },
-  computed: {
-    toDisplay () {
-      if (!this.honorLimit) {
-        return this.tags
-      }
-      return (this.tags || []).slice(0, this.limit)
-    }
-  }
-}
-</script>
diff --git a/front/src/init/filters.ts b/front/src/init/filters.ts
deleted file mode 100644
index e9382f094..000000000
--- a/front/src/init/filters.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { InitModule } from '~/types'
-
-import Vue from 'vue'
-import time from '~/utils/time'
-import moment from 'moment'
-
-export function truncate (str: string, max = 100, ellipsis = '…', middle = false) {
-  if (max === 0) {
-    return ''
-  }
-
-  if (str.length <= max) {
-    return str
-  }
-
-  if (middle) {
-    const sepLen = 1
-    const charsToShow = max - sepLen
-    const frontChars = Math.ceil(charsToShow / 2)
-    const backChars = Math.floor(charsToShow / 2)
-
-    return str.substr(0, frontChars) +
-           ellipsis +
-           str.substr(str.length - backChars)
-  } else {
-    return str.slice(0, max) + ellipsis
-  }
-}
-
-export function ago (date: Date, locale: string) {
-  locale = locale || 'en'
-  const m = moment(date)
-  m.locale(locale)
-  return m.calendar(null, {
-    sameDay: 'LT',
-    nextDay: 'L',
-    nextWeek: 'L',
-    lastDay: 'L',
-    lastWeek: 'L',
-    sameElse: 'L'
-  })
-}
-
-export function fromNow (date: Date, locale: string) {
-  locale = 'en'
-  moment.locale('en', {
-    relativeTime: {
-      future: 'in %s',
-      past: '%s ago',
-      s: 'seconds',
-      ss: '%ss',
-      m: 'a minute',
-      mm: '%dm',
-      h: 'an hour',
-      hh: '%dh',
-      d: 'a day',
-      dd: '%dd',
-      M: 'a month',
-      MM: '%dM',
-      y: 'a year',
-      yy: '%dY'
-    }
-  })
-  const m = moment(date)
-  m.locale(locale)
-  return m.fromNow(true)
-}
-
-export function secondsToObject (seconds: number) {
-  const m = moment.duration(seconds, 'seconds')
-  return {
-    seconds: m.seconds(),
-    minutes: m.minutes(),
-    hours: m.hours()
-  }
-}
-
-export function padDuration (duration: string) {
-  let s = String(duration)
-  while (s.length < 2) { s = '0' + s }
-  return s
-}
-
-export function duration (seconds: string) {
-  return time.parse(+seconds)
-}
-
-export function momentFormat (date: Date, format: string) {
-  format = format || 'lll'
-  return moment(date).format(format)
-}
-
-export function year (date: Date) {
-  return moment(date).year()
-}
-
-export function capitalize (str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-export function humanSize (bytes: number) {
-  const si = true
-  const thresh = si ? 1000 : 1024
-  if (Math.abs(bytes) < thresh) {
-    return bytes + ' B'
-  }
-  const units = si
-    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
-  let u = -1
-  do {
-    bytes /= thresh
-    ++u
-  } while (Math.abs(bytes) >= thresh && u < units.length - 1)
-  return bytes.toFixed(1) + ' ' + units[u]
-}
-
-// Remove duplicates from a list
-export function unique (list: Record<string, unknown>[], property: string) {
-  property = property || 'id'
-  const unique: Record<string, unknown>[] = []
-  list.map(x => unique.filter(a => a[property] === x[property]).length > 0 ? null : unique.push(x))
-  return unique
-}
-
-// TODO (wvffle): Migrate to Vue 3
-//                Replace filters with computed values
-export const install: InitModule = () => {
-  Vue.filter('humanSize', humanSize)
-  Vue.filter('unique', unique)
-  Vue.filter('capitalize', capitalize)
-  Vue.filter('moment', momentFormat)
-  Vue.filter('year', year)
-  Vue.filter('duration', duration)
-  Vue.filter('padDuration', padDuration)
-  Vue.filter('secondsToObject', secondsToObject)
-  Vue.filter('fromNow', fromNow)
-  Vue.filter('ago', ago)
-  Vue.filter('truncate', truncate)
-}
diff --git a/front/src/types.ts b/front/src/types.ts
index 6f0dde11c..d5e2a4259 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -70,3 +70,11 @@ export interface ListenWSEvent {
 }
 
 export type WebSocketEvent = PendingReviewEditsWSEvent | PendingReviewReportsWSEvent | PendingReviewRequestsWSEvent | ListenWSEvent
+
+// Yet uncategorized stuff
+export interface Actor {
+  preferred_username: string
+  full_username: string
+  is_local: boolean
+  domain: string
+}
diff --git a/front/src/utils/filters.ts b/front/src/utils/filters.ts
new file mode 100644
index 000000000..cf3fb8957
--- /dev/null
+++ b/front/src/utils/filters.ts
@@ -0,0 +1,38 @@
+import moment from 'moment'
+
+export function truncate (str: string, max = 100, ellipsis = '…', middle = false) {
+  if (max === 0) return ''
+  if (str.length <= max) return str
+  if (!middle) return str.slice(0, max) + ellipsis
+
+  const charsToShow = max - ellipsis.length
+  return str.slice(0, Math.ceil(charsToShow / 2)) +
+    ellipsis +
+    str.slice(-Math.floor(charsToShow / 2))
+}
+
+export function momentFormat (date: Date, format = 'lll') {
+  return moment(date).format(format)
+}
+
+const HUMAN_UNITS = {
+  SI: ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+  powerOf2: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+}
+
+export function humanSize (bytes: number, isSI = true) {
+  const threshold = isSI ? 1000 : 1024
+
+  if (Math.abs(bytes) < threshold) {
+    return `${bytes} B`
+  }
+
+  const units = HUMAN_UNITS[isSI ? 'SI' : 'powerOf2']
+  let u = -1
+  do {
+    bytes /= threshold
+    ++u
+  } while (Math.abs(bytes) >= threshold && u < units.length - 1)
+
+  return `${bytes.toFixed(1)} ${units[u]}`
+}
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index 03a7c253c..b96c8d546 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -26,7 +26,7 @@
                   src="../../assets/audio/default-cover.png"
                 >
                 <div class="content">
-                  {{ object.artist.name | truncate(100) }}
+                  {{ truncate(object.artist.name) }}
                   <div class="sub header">
                     <template v-if="object.artist.is_local">
                       <span class="ui tiny accent label">
@@ -354,7 +354,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_downloaded_size | humanSize }}
+                      {{ humanSize(stats.media_downloaded_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -364,7 +364,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_total_size | humanSize }}
+                      {{ humanSize(stats.media_total_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -418,6 +418,7 @@ import axios from 'axios'
 
 import TagsList from '~/components/tags/List.vue'
 import FetchButton from '~/components/federation/FetchButton.vue'
+import { humanSize, truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -425,6 +426,9 @@ export default {
     TagsList
   },
   props: { id: { type: String, required: true } },
+  setup () {
+    return { humanSize, truncate }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index b17eb37bf..9d2e81087 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -26,7 +26,7 @@
                   src="../../../assets/audio/default-cover.png"
                 >
                 <div class="content">
-                  {{ object.title | truncate(100) }}
+                  {{ truncate(object.title) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
@@ -337,7 +337,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_downloaded_size | humanSize }}
+                      {{ humanSize(stats.media_downloaded_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -347,7 +347,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_total_size | humanSize }}
+                      {{ humanSize(stats.media_total_size) }}
                     </td>
                   </tr>
 
@@ -401,6 +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'
 
 export default {
   components: {
@@ -408,6 +409,9 @@ export default {
     TagsList
   },
   props: { id: { type: Number, required: true } },
+  setup () {
+    return { humanSize, truncate }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 6220a0bee..af4fad31d 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -26,7 +26,7 @@
                   src="../../../assets/audio/default-cover.png"
                 >
                 <div class="content">
-                  {{ object.name | truncate(100) }}
+                  {{ truncate(object.name) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
@@ -336,7 +336,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_downloaded_size | humanSize }}
+                      {{ humanSize(stats.media_downloaded_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -346,7 +346,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_total_size | humanSize }}
+                      {{ humanSize(stats.media_total_size) }}
                     </td>
                   </tr>
 
@@ -413,6 +413,7 @@ import axios from 'axios'
 
 import TagsList from '~/components/tags/List.vue'
 import FetchButton from '~/components/federation/FetchButton.vue'
+import { humanSize, truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -420,6 +421,9 @@ export default {
     TagsList
   },
   props: { id: { type: Number, required: true } },
+  setup () {
+    return { humanSize, truncate }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index a69e1814d..4f582046b 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -17,7 +17,7 @@
               <h2 class="ui header">
                 <i class="circular inverted book icon" />
                 <div class="content">
-                  {{ object.name | truncate(100) }}
+                  {{ truncate(object.name) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
@@ -285,7 +285,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_downloaded_size | humanSize }}
+                      {{ humanSize(stats.media_downloaded_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -295,7 +295,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_total_size | humanSize }}
+                      {{ humanSize(stats.media_total_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -360,6 +360,7 @@
 import axios from 'axios'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import useLogger from '~/composables/useLogger'
+import { humanSize, truncate} from '~/utils/filters'
 
 const logger = useLogger()
 
@@ -368,6 +369,9 @@ export default {
     TranslationsMixin
   ],
   props: { id: { type: String, required: true } },
+  setup () {
+    return { humanSize, truncate }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
index b6becc046..d99e671c5 100644
--- a/front/src/views/admin/library/TagDetail.vue
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -17,7 +17,7 @@
               <h2 class="ui header">
                 <i class="circular inverted hashtag icon" />
                 <div class="content">
-                  {{ object.name | truncate(100) }}
+                  {{ truncate(object.name) }}
                 </div>
               </h2>
               <div class="header-buttons">
@@ -210,9 +210,13 @@
 
 <script>
 import axios from 'axios'
+import { truncate} from '~/utils/filters'
 
 export default {
   props: { id: { type: Number, required: true } },
+  setup () {
+    return { truncate }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 1cbd75057..036056001 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -26,7 +26,7 @@
                   src="../../../assets/audio/default-cover.png"
                 >
                 <div class="content">
-                  {{ object.title | truncate(100) }}
+                  {{ truncate(object.title) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
@@ -402,7 +402,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_downloaded_size | humanSize }}
+                      {{ humanSize(stats.media_downloaded_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -412,7 +412,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_total_size | humanSize }}
+                      {{ humanSize(stats.media_total_size) }}
                     </td>
                   </tr>
 
@@ -454,6 +454,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'
 
 export default {
   components: {
@@ -461,6 +462,9 @@ export default {
     TagsList
   },
   props: { id: { type: Number, required: true } },
+  setup () {
+    return { humanSize, truncate }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index 0c9796319..bf4a52348 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -21,7 +21,7 @@
               <h2 class="ui header">
                 <i class="circular inverted file icon" />
                 <div class="content">
-                  {{ displayName(object) | truncate(100) }}
+                  {{ truncate(displayName(object)) }}
                   <div class="sub header">
                     <template v-if="object.is_local">
                       <span class="ui tiny accent label">
@@ -289,7 +289,7 @@
                     </td>
                     <td>
                       <template v-if="object.audio_file">
-                        {{ object.size | humanSize }}
+                        {{ humanSize(object.size) }}
                       </template>
                       <translate
                         v-else
@@ -306,7 +306,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ object.size | humanSize }}
+                      {{ humanSize(object.size) }}
                     </td>
                   </tr>
                   <tr>
@@ -317,7 +317,7 @@
                     </td>
                     <td>
                       <template v-if="object.bitrate">
-                        {{ object.bitrate | humanSize }}/s
+                        {{ humanSize(object.bitrate) }}/s
                       </template>
                       <translate
                         v-else
@@ -335,7 +335,7 @@
                     </td>
                     <td>
                       <template v-if="object.duration">
-                        {{ object.duration | duration }}
+                        {{ time.parse(object.duration) }}
                       </template>
                       <translate
                         v-else
@@ -380,6 +380,7 @@ import axios from 'axios'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import time from '~/utils/time'
+import { humanSize, truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -389,9 +390,11 @@ export default {
     TranslationsMixin
   ],
   props: { id: { type: Number, required: true } },
+  setup () {
+    return { humanSize, time, truncate }
+  },
   data () {
     return {
-      time,
       detailedUpload: {},
       showUploadDetailModal: false,
       isLoading: true,
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 577814e4e..176ec39b2 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -447,7 +447,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_downloaded_size | humanSize }}
+                      {{ humanSize(stats.media_downloaded_size) }}
                     </td>
                   </tr>
                   <tr v-if="object.user">
@@ -486,7 +486,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_total_size | humanSize }}
+                      {{ humanSize(stats.media_total_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -572,6 +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'
 
 const logger = useLogger()
 
@@ -581,6 +582,9 @@ export default {
     InstancePolicyCard
   },
   props: { id: { type: Number, required: true } },
+  setup () {
+    return { humanSize }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/views/admin/moderation/DomainsDetail.vue b/front/src/views/admin/moderation/DomainsDetail.vue
index 13f1911d5..a5a4fb59e 100644
--- a/front/src/views/admin/moderation/DomainsDetail.vue
+++ b/front/src/views/admin/moderation/DomainsDetail.vue
@@ -361,7 +361,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_downloaded_size | humanSize }}
+                      {{ humanSize(stats.media_downloaded_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -371,7 +371,7 @@
                       </translate>
                     </td>
                     <td>
-                      {{ stats.media_total_size | humanSize }}
+                      {{ humanSize(stats.media_total_size) }}
                     </td>
                   </tr>
                   <tr>
@@ -462,6 +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'
 
 export default {
   components: {
@@ -469,6 +470,9 @@ export default {
     InstancePolicyCard
   },
   props: { id: { type: String, required: true }, allowListEnabled: { type: Boolean, required: true } },
+  setup () {
+    return { humanSize }
+  },
   data () {
     return {
       get,
diff --git a/front/src/views/content/Home.vue b/front/src/views/content/Home.vue
index 635a70d57..7e5b13104 100644
--- a/front/src/views/content/Home.vue
+++ b/front/src/views/content/Home.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script>
-import { humanSize } from '~/init/filters'
+import { humanSize } from '~/utils/filters'
 
 export default {
   computed: {
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 03214f6d4..36ab89f3e 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -42,7 +42,7 @@
           :data-tooltip="size_label"
         >
           <i class="database icon" />
-          {{ library.size | humanSize }}
+          {{ humanSize(library.size) }}
         </span>
         <i class="music icon" />
         <translate
@@ -79,10 +79,14 @@
 
 <script>
 import TranslationsMixin from '~/components/mixins/Translations.vue'
+import { humanSize} from '~/utils/filters'
 
 export default {
   mixins: [TranslationsMixin],
   props: { library: { type: Object, required: true } },
+  setup () {
+    return { humanSize }
+  },
   computed: {
     size_label () {
       return this.$pgettext('Content/Library/Card.Help text', 'Total size of the files in this library')
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index 014a279f6..b29b76761 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -181,7 +181,7 @@
           <template v-if="scope.obj.track">
             <td>
               <router-link :to="{name: 'library.tracks.detail', params: {id: scope.obj.track.id }}">
-                {{ scope.obj.track.title|truncate(25) }}
+                {{ truncate(scope.obj.track.title, 25) }}
               </router-link>
             </td>
             <td>
@@ -189,7 +189,7 @@
                 href=""
                 class="discrete link"
                 @click.prevent="addSearchToken('artist', scope.obj.track.artist.name)"
-              >{{ scope.obj.track.artist.name|truncate(20) }}</a>
+              >{{ truncate(scope.obj.track.artist.name, 20) }}</a>
             </td>
             <td>
               <a
@@ -197,12 +197,12 @@
                 href=""
                 class="discrete link"
                 @click.prevent="addSearchToken('album', scope.obj.track.album.title)"
-              >{{ scope.obj.track.album.title|truncate(20) }}</a>
+              >{{ truncate(scope.obj.track.album.title, 20) }}</a>
             </td>
           </template>
           <template v-else>
             <td :title="scope.obj.source">
-              {{ scope.obj.source | truncate(25) }}
+              {{ truncate(scope.obj.source, 25) }}
             </td>
             <td />
             <td />
@@ -227,7 +227,7 @@
             </button>
           </td>
           <td v-if="scope.obj.duration">
-            {{ scope.obj.duration | duration }}
+            {{ time.parse(scope.obj.duration) }}
           </td>
           <td v-else>
             <translate translate-context="*/*/*">
@@ -235,7 +235,7 @@
             </translate>
           </td>
           <td v-if="scope.obj.size">
-            {{ scope.obj.size | humanSize }}
+            {{ humanSize(scope.obj.size) }}
           </td>
           <td v-else>
             <translate translate-context="*/*/*">
@@ -277,6 +277,7 @@ import OrderingMixin from '~/components/mixins/Ordering.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
+import { humanSize, truncate } from '~/utils/filters'
 
 export default {
   components: {
@@ -296,9 +297,11 @@ export default {
       }
     }
   },
+  setup () {
+    return { humanSize, time, truncate }
+  },
   data () {
     return {
-      time,
       detailedUpload: {},
       showUploadDetailModal: false,
       isLoading: false,
diff --git a/front/src/views/content/libraries/Quota.vue b/front/src/views/content/libraries/Quota.vue
index f1e8d8414..57bd2082b 100644
--- a/front/src/views/content/libraries/Quota.vue
+++ b/front/src/views/content/libraries/Quota.vue
@@ -194,7 +194,7 @@
 </template>
 <script>
 import axios from 'axios'
-import { humanSize } from '~/init/filters'
+import { humanSize } from '~/utils/filters'
 import { compileTokens } from '~/search'
 
 export default {
diff --git a/front/src/views/library/DetailBase.vue b/front/src/views/library/DetailBase.vue
index 259ad63b4..ff497fdf7 100644
--- a/front/src/views/library/DetailBase.vue
+++ b/front/src/views/library/DetailBase.vue
@@ -111,7 +111,7 @@
             </translate>
             <span v-if="object.size">
               · <i class="database icon" />
-              {{ object.size | humanSize }}
+              {{ humanSize(object.size) }}
             </span>
           </p>
 
@@ -230,6 +230,7 @@ import axios from 'axios'
 import LibraryFollowButton from '~/components/audio/LibraryFollowButton.vue'
 import ReportMixin from '~/components/mixins/Report.vue'
 import RadioButton from '~/components/radios/Button.vue'
+import { humanSize } from '~/utils/filters'
 
 export default {
   components: {
@@ -242,6 +243,9 @@ export default {
     next()
   },
   props: { id: { type: String, required: true } },
+  setup () {
+    return { humanSize }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/tests/unit/specs/components/common.spec.js b/front/tests/unit/specs/components/common.spec.js
index 32101b75c..ed4f528ad 100644
--- a/front/tests/unit/specs/components/common.spec.js
+++ b/front/tests/unit/specs/components/common.spec.js
@@ -2,7 +2,7 @@ import {expect} from 'chai'
 
 import Username from '~/components/common/Username.vue'
 
-import { render } from '../../utils'
+import { render } from '~/utils'
 
 describe('Username', () => {
   it('displays username', () => {
diff --git a/front/tests/unit/specs/filters/filters.spec.js b/front/tests/unit/specs/filters/filters.spec.js
index b08146384..b5747669e 100644
--- a/front/tests/unit/specs/filters/filters.spec.js
+++ b/front/tests/unit/specs/filters/filters.spec.js
@@ -1,59 +1,22 @@
-import {expect} from 'chai'
-import moment from 'moment'
-import {truncate, ago, capitalize, year, unique} from '~/init/filters'
+import { expect } from 'chai'
+import { truncate } from '~/filters'
 
 describe('filters', () => {
   describe('truncate', () => {
     it('leave strings as it if correct size', () => {
       const input = 'Hello world'
-      let output = truncate(input, 100)
+      const output = truncate(input, 100)
       expect(output).to.equal(input)
     })
     it('returns shorter string with character', () => {
       const input = 'Hello world'
-      let output = truncate(input, 5)
+      const output = truncate(input, 5)
       expect(output).to.equal('Hello…')
     })
     it('custom ellipsis', () => {
       const input = 'Hello world'
-      let output = truncate(input, 5, ' pouet')
+      const output = truncate(input, 5, ' pouet')
       expect(output).to.equal('Hello pouet')
     })
   })
-  describe('ago', () => {
-    it('works', () => {
-      const input = new Date()
-      let output = ago(input)
-      let expected = moment(input).calendar(input, {
-        sameDay: 'LT',
-        nextDay: 'L',
-        nextWeek: 'L',
-        lastDay: 'L',
-        lastWeek: 'L',
-        sameElse: 'L'
-    })
-      expect(output).to.equal(expected)
-    })
-  })
-  describe('year', () => {
-    it('works', () => {
-      const input = '2017-07-13'
-      let output = year(input)
-      expect(output).to.equal(2017)
-    })
-  })
-  describe('capitalize', () => {
-    it('works', () => {
-      const input = 'hello world'
-      let output = capitalize(input)
-      expect(output).to.deep.equal('Hello world')
-    })
-  })
-  describe('unique', () => {
-    it('works', () => {
-      const list = [{id: 1}, {id: 2}, {id: 3}, {id: 1}]
-      const dedupedList = unique(list, 'id')
-      expect(dedupedList).to.have.deep.members([{id: 1}, {id: 3}, {id: 2}])
-    })
-  })
 })
diff --git a/front/tests/unit/specs/store/auth.spec.js b/front/tests/unit/specs/store/auth.spec.js
index 8291e7d32..aa30a3e87 100644
--- a/front/tests/unit/specs/store/auth.spec.js
+++ b/front/tests/unit/specs/store/auth.spec.js
@@ -4,7 +4,7 @@ import {expect} from 'chai'
 import moxios from 'moxios'
 import store from '~/store/auth'
 
-import { testAction } from '../../utils'
+import { testAction } from '~/utils'
 
 describe('store/auth', () => {
   var sandbox
diff --git a/front/tests/unit/specs/store/favorites.spec.js b/front/tests/unit/specs/store/favorites.spec.js
index 3f8d53c58..546fd651b 100644
--- a/front/tests/unit/specs/store/favorites.spec.js
+++ b/front/tests/unit/specs/store/favorites.spec.js
@@ -2,7 +2,7 @@ import {expect} from 'chai'
 
 import store from '~/store/favorites'
 
-import { testAction } from '../../utils'
+import { testAction } from '~/utils'
 
 describe('store/favorites', () => {
   describe('mutations', () => {
diff --git a/front/tests/unit/specs/store/instance.spec.js b/front/tests/unit/specs/store/instance.spec.js
index 10cad8070..9df3288fd 100644
--- a/front/tests/unit/specs/store/instance.spec.js
+++ b/front/tests/unit/specs/store/instance.spec.js
@@ -3,7 +3,7 @@ var sinon = require('sinon')
 import axios from 'axios'
 import moxios from 'moxios'
 import store from '~/store/instance'
-import { testAction } from '../../utils'
+import { testAction } from '~/utils'
 
 describe('store/instance', () => {
   var sandbox
diff --git a/front/tests/unit/specs/store/player.spec.js b/front/tests/unit/specs/store/player.spec.js
index e11082e2b..1481e014b 100644
--- a/front/tests/unit/specs/store/player.spec.js
+++ b/front/tests/unit/specs/store/player.spec.js
@@ -2,7 +2,7 @@ import {expect} from 'chai'
 
 import store from '~/store/player'
 
-import { testAction } from '../../utils'
+import { testAction } from '~/utils'
 
 describe('store/player', () => {
   describe('mutations', () => {
diff --git a/front/tests/unit/specs/store/playlists.spec.js b/front/tests/unit/specs/store/playlists.spec.js
index d5353787e..d7176f7c5 100644
--- a/front/tests/unit/specs/store/playlists.spec.js
+++ b/front/tests/unit/specs/store/playlists.spec.js
@@ -3,7 +3,7 @@ var sinon = require('sinon')
 import moxios from 'moxios'
 import store from '~/store/playlists'
 
-import { testAction } from '../../utils'
+import { testAction } from '~/utils'
 
 describe('store/playlists', () => {
   var sandbox
diff --git a/front/tests/unit/specs/store/queue.spec.js b/front/tests/unit/specs/store/queue.spec.js
index 7aa777c0a..ab5f6fdb1 100644
--- a/front/tests/unit/specs/store/queue.spec.js
+++ b/front/tests/unit/specs/store/queue.spec.js
@@ -3,7 +3,7 @@ import {expect} from 'chai'
 import * as _ from 'lodash-es'
 
 import store from '~/store/queue'
-import { testAction } from '../../utils'
+import { testAction } from '~/utils'
 
 describe('store/queue', () => {
   var sandbox
diff --git a/front/tests/unit/specs/store/radios.spec.js b/front/tests/unit/specs/store/radios.spec.js
index 835cf9b6b..598714ab0 100644
--- a/front/tests/unit/specs/store/radios.spec.js
+++ b/front/tests/unit/specs/store/radios.spec.js
@@ -3,7 +3,7 @@ import {expect} from 'chai'
 
 import moxios from 'moxios'
 import store from '~/store/radios'
-import { testAction } from '../../utils'
+import { testAction } from '~/utils'
 
 describe('store/radios', () => {
   var sandbox
diff --git a/front/yarn.lock b/front/yarn.lock
index af5b3092b..9acf70eb8 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -2909,11 +2909,14 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+<<<<<<< HEAD
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
+=======
+>>>>>>> 25ad51a8 (Remove vue 2 filters)
 deasync@^0.1.15:
   version "0.1.28"
   resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.28.tgz#9b447b79b3f822432f0ab6a8614c0062808b5ad2"
@@ -4068,11 +4071,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-he@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
 howler@2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.3.tgz#a2eff9b08b586798e7a2ee17a602a90df28715da"
@@ -6764,14 +6762,6 @@ vue-router@4.0.14:
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
-vue-template-compiler@2.6.14:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
-  integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.1.0"
-
 vue-template-es2015-compiler@^1.6.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"