diff --git a/TRANSLATORS.rst b/TRANSLATORS.rst
index 7fea7e399..4a896408d 100644
--- a/TRANSLATORS.rst
+++ b/TRANSLATORS.rst
@@ -28,7 +28,7 @@ Submitting a new language
 
 1. Pull the latest version of ``develop``
 2. Create a new branch, e.g ``git checkout -b translations-new-fr-ca``
-3. Add your new language code and name in ``front/src/locales.js``. Use the native language name, as it is what appears in the UI selector.
+3. Add your new language code and name in ``front/src/locales.ts``. Use the native language name, as it is what appears in the UI selector.
 4. Create the ``po`` file from template:
 
 .. code-block:: shell
diff --git a/front/.eslintrc.js b/front/.eslintrc.js
index 6173dd055..039099f69 100644
--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@@ -24,6 +24,8 @@ module.exports = {
     'vue/no-v-html': 'off', // TODO: tackle this properly
     'vue/no-use-v-if-with-v-for': 'off',
 
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'no-undef': 'off',
     // TODO: Enable typescript rules later
     '@typescript-eslint/no-this-alias': 'off',
     '@typescript-eslint/no-empty-function': 'off'
diff --git a/front/index.html b/front/index.html
index ace99da15..2cee400cf 100644
--- a/front/index.html
+++ b/front/index.html
@@ -8,7 +8,6 @@
   <meta name="generator" content="Funkwhale">
   <link rel="icon" href="/favicon.png">
   <title>Funkwhale</title>
-  <script type="module" src="/src/main.js"></script>
   <style>
     #fake-app {
       width: 100vw;
@@ -86,9 +85,8 @@
       </div>
     </div>
   </div>
-  <div id="app">
-  </div>
-  <!-- built files will be auto injected -->
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
 </body>
 
 </html>
diff --git a/front/package.json b/front/package.json
index 908ef0bd8..5430152da 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@vue/composition-api": "1.4.9",
-    "@vueuse/core": "8.2.6",
+    "@vueuse/core": "8.2.5",
     "axios": "0.26.1",
     "axios-auth-refresh": "3.2.2",
     "diff": "5.0.0",
@@ -26,10 +26,10 @@
     "fomantic-ui-css": "2.8.8",
     "howler": "2.2.3",
     "js-logger": "1.6.1",
-    "lodash": "4.17.21",
     "moment": "2.29.3",
     "qs": "6.10.5",
     "pinia": "^2.0.13",
+    "lodash-es": "4.17.21",
     "register-service-worker": "1.7.2",
     "sanitize-html": "2.7.0",
     "sass": "1.49.11",
@@ -42,6 +42,7 @@
     "vue-router": "3.5.4",
     "vue-upload-component": "2.8.22",
     "vuedraggable": "2.24.3",
+    "vuex": "3.6.2",
     "vuex-persistedstate": "4.1.0",
     "vuex-router-sync": "5.0.0"
   },
@@ -49,6 +50,8 @@
     "@babel/core": "7.17.12",
     "@babel/plugin-transform-runtime": "7.17.12",
     "@babel/preset-env": "7.16.11",
+    "@types/jquery": "^3.5.14",
+    "@types/lodash-es": "^4.17.6",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
@@ -60,7 +63,6 @@
     "easygettext": "2.17.0",
     "eslint": "8.11.0",
     "eslint-config-standard": "16.0.3",
-    "eslint-config-standard-with-typescript": "^21.0.1",
     "eslint-plugin-html": "6.2.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-node": "11.1.0",
@@ -71,9 +73,8 @@
     "moxios": "0.4.0",
     "sinon": "13.0.2",
     "typescript": "^4.6.3",
-    "unplugin-vue-components": "^0.19.3",
     "unplugin-vue2-script-setup": "^0.10.2",
-    "vite": "2.9.5",
+    "vite": "2.8.6",
     "vite-plugin-vue2": "1.9.3",
     "vue-jest": "3.0.7",
     "vue-template-compiler": "2.6.14"
diff --git a/front/scripts/i18n-compile.sh b/front/scripts/i18n-compile.sh
index 0b90bfd42..ed6673e60 100755
--- a/front/scripts/i18n-compile.sh
+++ b/front/scripts/i18n-compile.sh
@@ -3,7 +3,7 @@
 cd "$(dirname $0)/.." # change into base directory
 source scripts/utils.sh
 
-locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | grep -v 'en_US' | xargs echo)
+locales=$(tail -n +3 src/locales.ts | sed -E 's/^[^[]+\[] =//' | jq -r '.[].code' | grep -v 'en_US')
 mkdir -p src/translations
 
 for locale in $locales; do
diff --git a/front/scripts/i18n-extract.sh b/front/scripts/i18n-extract.sh
index 63b79b164..c3b5b58cb 100755
--- a/front/scripts/i18n-extract.sh
+++ b/front/scripts/i18n-extract.sh
@@ -3,7 +3,7 @@
 cd "$(dirname $0)/.." # change into base directory
 source scripts/utils.sh
 
-locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
+locales=$(tail -n +3 src/locales.ts | sed -E 's/^[^[]+\[] =//' | jq -r '.[].code')
 locales_dir="locales"
 sources=$(find src -name '*.vue' -o -name '*.html' 2> /dev/null)
 js_sources=$(find src -name '*.vue' -o -name '*.js')
diff --git a/front/scripts/i18n-populate-contextualized-strings.sh b/front/scripts/i18n-populate-contextualized-strings.sh
index 37f0b1871..9b5598efa 100755
--- a/front/scripts/i18n-populate-contextualized-strings.sh
+++ b/front/scripts/i18n-populate-contextualized-strings.sh
@@ -11,7 +11,7 @@ cd "$(dirname $0)/.." # change into base directory
 old_locales_dir=$1
 new_locales_dir=$2
 
-locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
+locales=$(tail -n +3 src/locales.ts | sed -E 's/^[^[]+\[] =//' | jq -r '.[].code')
 
 # Generate .po files for each available language.
 echo $locales
diff --git a/front/src/App.vue b/front/src/App.vue
index f35939351..1f4311749 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -1,9 +1,164 @@
+<script setup lang="ts">
+import AudioPlayer from '@/components/audio/Player.vue'
+import Queue from '@/components/Queue.vue'
+import PlaylistModal from '@/components/playlists/PlaylistModal.vue'
+import ChannelUploadModal from '@/components/channels/UploadModal.vue'
+import Sidebar from '@/components/Sidebar.vue'
+import ServiceMessages from '@/components/ServiceMessages.vue'
+import SetInstanceModal from '@/components/SetInstanceModal.vue'
+import ShortcutsModal from '@/components/ShortcutsModal.vue'
+import FilterModal from '@/components/moderation/FilterModal.vue'
+import ReportModal from '@/components/moderation/ReportModal.vue'
+import {useIntervalFn, useWindowSize} from '@vueuse/core'
+import GlobalEvents from '@/components/utils/global-events.vue'
+
+import { computed, nextTick, onMounted, ref, watchEffect } from '@vue/composition-api'
+import store from '@/store'
+import { PendingReviewReports, Track } from '@/types'
+import useWebSocketHandler from '~/composables/useWebSocketHandler'
+import { getClientOnlyRadio } from '@/radios'
+
+// Tracks
+const currentTrack = computed(() => store.getters['queue/currentTrack'])
+const getTrackInformationText = (track: Track | undefined) => {
+  if (!track) {
+    return null
+  }
+
+  const artist = track.artist ?? track.album?.artist
+  return `♫ ${track.title} – ${artist?.name} ♫`
+}
+
+// Update title
+const initialTitle = document.title
+watchEffect(() => {
+  const parts = [
+    getTrackInformationText(currentTrack.value),
+    store.state.ui.pageTitle,
+    initialTitle || 'Funkwhale'
+  ]
+
+  document.title = parts.filter(i => i).join(' – ')
+})
+
+// Styles
+const customStylesheets = computed(() => {
+  return store.state.instance?.frontSettings?.additionalStylesheets ?? []
+})
+
+// Fake content
+onMounted(async () => {
+  await nextTick()
+  document.getElementById('fake-content')?.classList.add('loaded')
+})
+
+// WebSocket handlers
+useWebSocketHandler('inbox.item_added', () => {
+  store.commit('ui/incrementNotifications', { type: 'inbox', count: 1 })
+})
+
+useWebSocketHandler('mutation.created', (event) => {
+  store.commit('ui/incrementNotifications', { type: 'pendingReviewEdits', value: event.pending_review_count })
+})
+
+useWebSocketHandler('mutation.updated', (event) => {
+  store.commit('ui/incrementNotifications', { type: 'pendingReviewEdits', value: event.pending_review_count })
+})
+
+useWebSocketHandler('report.created', (event) => {
+  store.commit('ui/incrementNotifications', { type: 'pendingReviewReports', value: event.unresolved_count })
+})
+
+useWebSocketHandler('user_request.created', (event) => {
+  store.commit('ui/incrementNotifications', { type: 'pendingReviewRequests', value: event.pending_count })
+})
+
+useWebSocketHandler('Listen', (event) => {
+  if (store.state.radios.current && store.state.radios.running) {
+    const { current } = store.state.radios
+
+    if (current.clientOnly && current.type === 'account') {
+      getClientOnlyRadio(current).handleListen(current, event, store)
+    }
+  }
+})
+
+// Time ago
+useIntervalFn(() => {
+  // used to redraw ago dates every minute
+  store.commit('ui/computeLastDate')
+}, 1000 * 60)
+
+const { width } = useWindowSize()
+const player = ref()
+const showShortcutsModal = ref(false)
+const showSetInstanceModal = ref(false)
+// export default {
+//   computed: {
+//     ...mapState({
+//       serviceWorker: state => state.ui.serviceWorker
+//     }),
+//   },
+//   watch: {
+//     'serviceWorker.updateAvailable': {
+//       handler (v) {
+//         if (!v) {
+//           return
+//         }
+//         const self = this
+//         this.$store.commit('ui/addMessage', {
+//           content: this.$pgettext('App/Message/Paragraph', 'A new version of the app is available.'),
+//           date: new Date(),
+//           key: 'refreshApp',
+//           displayTime: 0,
+//           classActions: 'bottom attached opaque',
+//           actions: [
+//             {
+//               text: this.$pgettext('App/Message/Paragraph', 'Update'),
+//               class: 'primary',
+//               click: function () {
+//                 self.updateApp()
+//               }
+//             },
+//             {
+//               text: this.$pgettext('App/Message/Paragraph', 'Later'),
+//               class: 'basic'
+//             }
+//           ]
+//         })
+//       },
+//       immediate: true
+//     }
+//   },
+//   async created () {
+//     if (navigator.serviceWorker) {
+//       navigator.serviceWorker.addEventListener(
+//         'controllerchange', () => {
+//           if (this.serviceWorker.refreshing) return
+//           this.$store.commit('ui/serviceWorker', {
+//             refreshing: true
+//           })
+//           window.location.reload()
+//         }
+//       )
+//     }
+//   },
+//   methods: {
+//     updateApp () {
+//       this.$store.commit('ui/serviceWorker', { updateAvailable: false })
+//       if (!this.serviceWorker.registration || !this.serviceWorker.registration.waiting) { return }
+//       this.serviceWorker.registration.waiting.postMessage({ command: 'skipWaiting' })
+//     },
+//   }
+// }
+</script>
+
 <template>
   <div
     id="app"
-    :key="String($store.state.instance.instanceUrl)"
-    :class="[$store.state.ui.queueFocused ? 'queue-focused' : '',
-             {'has-bottom-player': $store.state.queue.tracks.length > 0}]"
+    :key="String(store.state.instance.instanceUrl)"
+    :class="[store.state.ui.queueFocused ? 'queue-focused' : '',
+             {'has-bottom-player': store.state.queue.tracks.length > 0}]"
   >
     <!-- here, we display custom stylesheets, if any -->
     <link
@@ -25,18 +180,18 @@
     <service-messages />
     <transition name="queue">
       <queue
-        v-if="$store.state.ui.queueFocused"
-        @touch-progress="$refs.player.setCurrentTime($event)"
+        v-if="store.state.ui.queueFocused"
+        @touch-progress="player.setCurrentTime($event)"
       />
     </transition>
     <router-view
       role="main"
-      :class="{hidden: $store.state.ui.queueFocused}"
+      :class="{hidden: store.state.ui.queueFocused}"
     />
-    <player ref="player" />
-    <playlist-modal v-if="$store.state.auth.authenticated" />
-    <channel-upload-modal v-if="$store.state.auth.authenticated" />
-    <filter-modal v-if="$store.state.auth.authenticated" />
+    <audio-player ref="player" />
+    <playlist-modal v-if="store.state.auth.authenticated" />
+    <channel-upload-modal v-if="store.state.auth.authenticated" />
+    <filter-modal v-if="store.state.auth.authenticated" />
     <report-modal />
     <shortcuts-modal
       :show="showShortcutsModal"
@@ -46,414 +201,6 @@
   </div>
 </template>
 
-<script>
-import axios from 'axios'
-import _ from 'lodash'
-import { mapState, mapGetters } from 'vuex'
-import { useWebSocket, whenever } from '@vueuse/core'
-import GlobalEvents from '@/components/utils/global-events.vue'
-import locales from './locales'
-import { getClientOnlyRadio } from '@/radios'
-
-import Player from '@/components/audio/Player.vue'
-import Queue from '@/components/Queue.vue'
-import PlaylistModal from '@/components/playlists/PlaylistModal.vue'
-import ChannelUploadModal from '@/components/channels/UploadModal.vue'
-import Sidebar from '@/components/Sidebar.vue'
-import ServiceMessages from '@/components/ServiceMessages.vue'
-import SetInstanceModal from '@/components/SetInstanceModal.vue'
-import ShortcutsModal from '@/components/ShortcutsModal.vue'
-import FilterModal from '@/components/moderation/FilterModal.vue'
-import ReportModal from '@/components/moderation/ReportModal.vue'
-import { watch, watchEffect } from '@vue/composition-api'
-
-export default {
-  name: 'App',
-  components: {
-    Player,
-    Queue,
-    PlaylistModal,
-    ChannelUploadModal,
-    Sidebar,
-    ServiceMessages,
-    SetInstanceModal,
-    ShortcutsModal,
-    FilterModal,
-    ReportModal,
-    GlobalEvents
-  },
-  setup (props, { root }) {
-    const store = root.$store
-
-    const url = store.getters['instance/absoluteUrl']('api/v1/activity')
-      .replace(/^http/, 'ws')
-
-    const { data, status, open, close } = useWebSocket(url, {
-      autoReconnect: true,
-      immediate: false
-    })
-
-    watch(() => store.state.auth.authenticated, (authenticated) => {
-      if (authenticated) return open()
-      close()
-    })
-
-    whenever(data, () => {
-      store.dispatch('ui/websocketEvent', JSON.parse(data.value))
-    })
-
-    watchEffect(() => {
-      console.log('Websocket status:', status.value)
-    })
-  },
-  data () {
-    return {
-      instanceUrl: null,
-      showShortcutsModal: false,
-      showSetInstanceModal: false,
-      initialTitle: document.title,
-      width: window.innerWidth
-    }
-  },
-  computed: {
-    ...mapState({
-      messages: state => state.ui.messages,
-      nodeinfo: state => state.instance.nodeinfo,
-      playing: state => state.player.playing,
-      bufferProgress: state => state.player.bufferProgress,
-      isLoadingAudio: state => state.player.isLoadingAudio,
-      serviceWorker: state => state.ui.serviceWorker
-    }),
-    ...mapGetters({
-      hasNext: 'queue/hasNext',
-      currentTrack: 'queue/currentTrack',
-      progress: 'player/progress'
-    }),
-    labels () {
-      const play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play track')
-      const pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause track')
-      const next = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Next track')
-      const expandQueue = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue')
-      return {
-        play,
-        pause,
-        next,
-        expandQueue
-      }
-    },
-    suggestedInstances () {
-      const instances = this.$store.state.instance.knownInstances.slice(0)
-      if (this.$store.state.instance.frontSettings.defaultServerUrl) {
-        let serverUrl = this.$store.state.instance.frontSettings.defaultServerUrl
-        if (!serverUrl.endsWith('/')) {
-          serverUrl = serverUrl + '/'
-        }
-        instances.push(serverUrl)
-      }
-      instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio/')
-      return _.uniq(instances.filter((e) => { return e }))
-    },
-    version () {
-      if (!this.nodeinfo) {
-        return null
-      }
-      return _.get(this.nodeinfo, 'software.version')
-    },
-    customStylesheets () {
-      if (this.$store.state.instance.frontSettings) {
-        return this.$store.state.instance.frontSettings.additionalStylesheets || []
-      }
-      return null
-    },
-    matchDarkColorScheme () {
-      if (window.matchMedia) {
-        return window.matchMedia('(prefers-color-scheme: dark)')
-      }
-      return null
-    }
-  },
-  watch: {
-    '$store.state.instance.instanceUrl' (v) {
-      this.$store.dispatch('instance/fetchSettings')
-      this.fetchNodeInfo()
-    },
-    '$store.state.ui.theme': {
-      immediate: true,
-      handler (newValue) {
-        const matchesDark = this.matchDarkColorScheme
-        if (matchesDark) {
-          if (newValue === 'system') {
-            newValue = matchesDark.matches ? 'dark' : 'light'
-            matchesDark.addEventListener('change', this.handleThemeChange)
-          } else {
-            matchesDark.removeEventListener('change', this.handleThemeChange)
-          }
-        } else {
-          if (newValue === 'system') {
-            newValue = 'light'
-          }
-        }
-        this.setTheme(newValue)
-      }
-    },
-    '$store.state.ui.currentLanguage': {
-      immediate: true,
-      handler (newValue) {
-        const self = this
-        const htmlLocale = newValue.toLowerCase().replace('_', '-')
-        document.documentElement.setAttribute('lang', htmlLocale)
-        if (newValue === 'en_US') {
-          self.$language.current = 'noop'
-          self.$language.current = newValue
-          return self.$store.commit('ui/momentLocale', 'en')
-        }
-      }
-    },
-    currentTrack: {
-      immediate: true,
-      handler (newValue) {
-        this.updateDocumentTitle()
-      }
-    },
-    '$store.state.ui.pageTitle': {
-      immediate: true,
-      handler (newValue) {
-        this.updateDocumentTitle()
-      }
-    },
-    'serviceWorker.updateAvailable': {
-      handler (v) {
-        if (!v) {
-          return
-        }
-        const self = this
-        this.$store.commit('ui/addMessage', {
-          content: this.$pgettext('App/Message/Paragraph', 'A new version of the app is available.'),
-          date: new Date(),
-          key: 'refreshApp',
-          displayTime: 0,
-          classActions: 'bottom attached opaque',
-          actions: [
-            {
-              text: this.$pgettext('App/Message/Paragraph', 'Update'),
-              class: 'primary',
-              click: function () {
-                self.updateApp()
-              }
-            },
-            {
-              text: this.$pgettext('App/Message/Paragraph', 'Later'),
-              class: 'basic'
-            }
-          ]
-        })
-      },
-      immediate: true
-    }
-  },
-  async created () {
-    if (navigator.serviceWorker) {
-      navigator.serviceWorker.addEventListener(
-        'controllerchange', () => {
-          if (this.serviceWorker.refreshing) return
-          this.$store.commit('ui/serviceWorker', {
-            refreshing: true
-          })
-          window.location.reload()
-        }
-      )
-    }
-    window.addEventListener('resize', this.handleResize)
-    this.handleResize()
-    const self = this
-    if (!this.$store.state.ui.selectedLanguage) {
-      this.autodetectLanguage()
-    }
-    setInterval(() => {
-      // used to redraw ago dates every minute
-      self.$store.commit('ui/computeLastDate')
-    }, 1000 * 60)
-    const urlParams = new URLSearchParams(window.location.search)
-    const serverUrl = urlParams.get('_server')
-    if (serverUrl) {
-      this.$store.commit('instance/instanceUrl', serverUrl)
-    }
-    const url = urlParams.get('_url')
-    if (url) {
-      await this.$router.replace(url)
-    } else if (!this.$store.state.instance.instanceUrl) {
-      // we have several way to guess the API server url. By order of precedence:
-      // 1. use the url provided in settings.json, if any
-      // 2. use the url specified when building via VUE_APP_INSTANCE_URL
-      // 3. use the current url
-      const defaultInstanceUrl =
-        this.$store.state.instance.frontSettings.defaultServerUrl ||
-        import.meta.env.VUE_APP_INSTANCE_URL || this.$store.getters['instance/defaultUrl']()
-      this.$store.commit('instance/instanceUrl', defaultInstanceUrl)
-    } else {
-      // needed to trigger initialization of axios / service worker
-      this.$store.commit('instance/instanceUrl', this.$store.state.instance.instanceUrl)
-    }
-    await this.fetchNodeInfo()
-    this.$store.dispatch('instance/fetchSettings')
-    this.$store.commit('ui/addWebsocketEventHandler', {
-      eventName: 'inbox.item_added',
-      id: 'sidebarCount',
-      handler: this.incrementNotificationCountInSidebar
-    })
-    this.$store.commit('ui/addWebsocketEventHandler', {
-      eventName: 'mutation.created',
-      id: 'sidebarReviewEditCount',
-      handler: this.incrementReviewEditCountInSidebar
-    })
-    this.$store.commit('ui/addWebsocketEventHandler', {
-      eventName: 'mutation.updated',
-      id: 'sidebarReviewEditCount',
-      handler: this.incrementReviewEditCountInSidebar
-    })
-    this.$store.commit('ui/addWebsocketEventHandler', {
-      eventName: 'report.created',
-      id: 'sidebarPendingReviewReportCount',
-      handler: this.incrementPendingReviewReportsCountInSidebar
-    })
-    this.$store.commit('ui/addWebsocketEventHandler', {
-      eventName: 'user_request.created',
-      id: 'sidebarPendingReviewRequestCount',
-      handler: this.incrementPendingReviewRequestsCountInSidebar
-    })
-    this.$store.commit('ui/addWebsocketEventHandler', {
-      eventName: 'Listen',
-      id: 'handleListen',
-      handler: this.handleListen
-    })
-  },
-  mounted () {
-    const self = this
-    // slight hack to allow use to have internal links in <translate> tags
-    // while preserving router behaviour
-    document.documentElement.addEventListener('click', function (event) {
-      if (!event.target.matches('a.internal')) return
-      self.$router.push(event.target.getAttribute('href'))
-      event.preventDefault()
-    }, false)
-    this.$nextTick(() => {
-      document.getElementById('fake-content').classList.add('loaded')
-    })
-  },
-  destroyed () {
-    this.$store.commit('ui/removeWebsocketEventHandler', {
-      eventName: 'inbox.item_added',
-      id: 'sidebarCount'
-    })
-    this.$store.commit('ui/removeWebsocketEventHandler', {
-      eventName: 'mutation.created',
-      id: 'sidebarReviewEditCount'
-    })
-    this.$store.commit('ui/removeWebsocketEventHandler', {
-      eventName: 'mutation.updated',
-      id: 'sidebarReviewEditCount'
-    })
-    this.$store.commit('ui/removeWebsocketEventHandler', {
-      eventName: 'mutation.updated',
-      id: 'sidebarPendingReviewReportCount'
-    })
-    this.$store.commit('ui/removeWebsocketEventHandler', {
-      eventName: 'user_request.created',
-      id: 'sidebarPendingReviewRequestCount'
-    })
-    this.$store.commit('ui/removeWebsocketEventHandler', {
-      eventName: 'Listen',
-      id: 'handleListen'
-    })
-  },
-  methods: {
-    incrementNotificationCountInSidebar (event) {
-      this.$store.commit('ui/incrementNotifications', { type: 'inbox', count: 1 })
-    },
-    incrementReviewEditCountInSidebar (event) {
-      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewEdits', value: event.pending_review_count })
-    },
-    incrementPendingReviewReportsCountInSidebar (event) {
-      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewReports', value: event.unresolved_count })
-    },
-    incrementPendingReviewRequestsCountInSidebar (event) {
-      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewRequests', value: event.pending_count })
-    },
-    handleListen (event) {
-      if (this.$store.state.radios.current && this.$store.state.radios.running) {
-        const current = this.$store.state.radios.current
-        if (current.clientOnly && current.type === 'account') {
-          getClientOnlyRadio(current).handleListen(current, event, this.$store)
-        }
-      }
-    },
-    async fetchNodeInfo () {
-      const response = await axios.get('instance/nodeinfo/2.0/')
-      this.$store.commit('instance/nodeinfo', response.data)
-    },
-    autodetectLanguage () {
-      const userLanguage = navigator.language || navigator.userLanguage
-      const available = locales.locales.map(e => { return e.code })
-      let candidate
-      const matching = available.filter((a) => {
-        return userLanguage.replace('-', '_') === a
-      })
-      const almostMatching = available.filter((a) => {
-        return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
-      })
-      if (matching.length > 0) {
-        candidate = matching[0]
-      } else if (almostMatching.length > 0) {
-        candidate = almostMatching[0]
-      } else {
-        return
-      }
-      this.$store.commit('ui/currentLanguage', candidate)
-    },
-    getTrackInformationText (track) {
-      const trackTitle = track.title
-      const albumArtist = (track.album) ? track.album.artist.name : null
-      const artistName = (
-        (track.artist) ? track.artist.name : albumArtist)
-      const text = `♫ ${trackTitle} – ${artistName} ♫`
-      return text
-    },
-    updateDocumentTitle () {
-      const parts = []
-      const currentTrackPart = (
-        (this.currentTrack)
-          ? this.getTrackInformationText(this.currentTrack)
-          : null)
-      if (currentTrackPart) {
-        parts.push(currentTrackPart)
-      }
-      if (this.$store.state.ui.pageTitle) {
-        parts.push(this.$store.state.ui.pageTitle)
-      }
-      parts.push(this.initialTitle || 'Funkwhale')
-      document.title = parts.join(' – ')
-    },
-
-    updateApp () {
-      this.$store.commit('ui/serviceWorker', { updateAvailable: false })
-      if (!this.serviceWorker.registration || !this.serviceWorker.registration.waiting) { return }
-      this.serviceWorker.registration.waiting.postMessage({ command: 'skipWaiting' })
-    },
-    handleResize () {
-      this.width = window.innerWidth
-    },
-    handleThemeChange (event) {
-      this.setTheme(event.matches ? 'dark' : 'light')
-    },
-    setTheme (theme) {
-      const oldTheme = (theme === 'light') ? 'dark' : 'light'
-      document.body.classList.remove(`theme-${oldTheme}`)
-      document.body.classList.add(`theme-${theme}`)
-    }
-  }
-}
-</script>
-
 <style lang="scss">
 @import "style/_main";
 
diff --git a/front/src/AppOld.vue b/front/src/AppOld.vue
new file mode 100644
index 000000000..f65823a8c
--- /dev/null
+++ b/front/src/AppOld.vue
@@ -0,0 +1,460 @@
+<template>
+  <div
+    id="app"
+    :key="String($store.state.instance.instanceUrl)"
+    :class="[$store.state.ui.queueFocused ? 'queue-focused' : '',
+             {'has-bottom-player': $store.state.queue.tracks.length > 0}]"
+  >
+    <!-- here, we display custom stylesheets, if any -->
+    <link
+      v-for="url in customStylesheets"
+      :key="url"
+      rel="stylesheet"
+      property="stylesheet"
+      :href="url"
+    >
+    <sidebar
+      :width="width"
+      @show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
+      @show:shortcuts-modal="showShortcutsModal = !showShortcutsModal"
+    />
+    <set-instance-modal
+      :show="showSetInstanceModal"
+      @update:show="showSetInstanceModal = $event"
+    />
+    <service-messages />
+    <transition name="queue">
+      <queue
+        v-if="$store.state.ui.queueFocused"
+        @touch-progress="$refs.player.setCurrentTime($event)"
+      />
+    </transition>
+    <router-view
+      role="main"
+      :class="{hidden: $store.state.ui.queueFocused}"
+    />
+    <player ref="player" />
+    <playlist-modal v-if="$store.state.auth.authenticated" />
+    <channel-upload-modal v-if="$store.state.auth.authenticated" />
+    <filter-modal v-if="$store.state.auth.authenticated" />
+    <report-modal />
+    <shortcuts-modal
+      :show="showShortcutsModal"
+      @update:show="showShortcutsModal = $event"
+    />
+    <GlobalEvents @keydown.h.exact="showShortcutsModal = !showShortcutsModal" />
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { uniq, get } from 'lodash-es'
+import { mapState, mapGetters } from 'vuex'
+import { useWebSocket, whenever } from '@vueuse/core'
+import GlobalEvents from '@/components/utils/global-events.vue'
+import locales from './locales'
+import { getClientOnlyRadio } from '@/radios'
+
+import Player from '@/components/audio/Player.vue'
+import Queue from '@/components/Queue.vue'
+import PlaylistModal from '@/components/playlists/PlaylistModal.vue'
+import ChannelUploadModal from '@/components/channels/UploadModal.vue'
+import Sidebar from '@/components/Sidebar.vue'
+import ServiceMessages from '@/components/ServiceMessages.vue'
+import SetInstanceModal from '@/components/SetInstanceModal.vue'
+import ShortcutsModal from '@/components/ShortcutsModal.vue'
+import FilterModal from '@/components/moderation/FilterModal.vue'
+import ReportModal from '@/components/moderation/ReportModal.vue'
+import { watch, watchEffect } from '@vue/composition-api'
+
+export default {
+  name: 'App',
+  components: {
+    Player,
+    Queue,
+    PlaylistModal,
+    ChannelUploadModal,
+    Sidebar,
+    ServiceMessages,
+    SetInstanceModal,
+    ShortcutsModal,
+    FilterModal,
+    ReportModal,
+    GlobalEvents
+  },
+  setup (props, { root }) {
+    const store = root.$store
+
+    const url = store.getters['instance/absoluteUrl']('api/v1/activity')
+      .replace(/^http/, 'ws')
+
+    const { data, status, open, close } = useWebSocket(url, {
+      autoReconnect: true,
+      immediate: false
+    })
+
+    watch(() => store.state.auth.authenticated, (authenticated) => {
+      if (authenticated) return open()
+      close()
+    })
+
+    whenever(data, () => {
+      store.dispatch('ui/websocketEvent', JSON.parse(data.value))
+    })
+
+    watchEffect(() => {
+      console.log('Websocket status:', status.value)
+    })
+  },
+  data () {
+    return {
+      instanceUrl: null,
+      showShortcutsModal: false,
+      showSetInstanceModal: false,
+      initialTitle: document.title,
+      width: window.innerWidth
+    }
+  },
+  computed: {
+    ...mapState({
+      messages: state => state.ui.messages,
+      nodeinfo: state => state.instance.nodeinfo,
+      playing: state => state.player.playing,
+      bufferProgress: state => state.player.bufferProgress,
+      isLoadingAudio: state => state.player.isLoadingAudio,
+      serviceWorker: state => state.ui.serviceWorker
+    }),
+    ...mapGetters({
+      hasNext: 'queue/hasNext',
+      currentTrack: 'queue/currentTrack',
+      progress: 'player/progress'
+    }),
+    labels () {
+      const play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play track')
+      const pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause track')
+      const next = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Next track')
+      const expandQueue = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue')
+      return {
+        play,
+        pause,
+        next,
+        expandQueue
+      }
+    },
+    suggestedInstances () {
+      const instances = this.$store.state.instance.knownInstances.slice(0)
+      if (this.$store.state.instance.frontSettings.defaultServerUrl) {
+        let serverUrl = this.$store.state.instance.frontSettings.defaultServerUrl
+        if (!serverUrl.endsWith('/')) {
+          serverUrl = serverUrl + '/'
+        }
+        instances.push(serverUrl)
+      }
+      instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio/')
+      return uniq(instances.filter((e) => { return e }))
+    },
+    version () {
+      if (!this.nodeinfo) {
+        return null
+      }
+      return get(this.nodeinfo, 'software.version')
+    },
+    customStylesheets () {
+      if (this.$store.state.instance.frontSettings) {
+        return this.$store.state.instance.frontSettings.additionalStylesheets || []
+      }
+      return null
+    },
+    matchDarkColorScheme () {
+      if (window.matchMedia) {
+        return window.matchMedia('(prefers-color-scheme: dark)')
+      }
+      return null
+    }
+  },
+  watch: {
+    '$store.state.instance.instanceUrl' (v) {
+      this.$store.dispatch('instance/fetchSettings')
+      this.fetchNodeInfo()
+    },
+    '$store.state.ui.theme': {
+      immediate: true,
+      handler (newValue) {
+        const matchesDark = this.matchDarkColorScheme
+        if (matchesDark) {
+          if (newValue === 'system') {
+            newValue = matchesDark.matches ? 'dark' : 'light'
+            matchesDark.addEventListener('change', this.handleThemeChange)
+          } else {
+            matchesDark.removeEventListener('change', this.handleThemeChange)
+          }
+        } else {
+          if (newValue === 'system') {
+            newValue = 'light'
+          }
+        }
+        this.setTheme(newValue)
+      }
+    },
+    '$store.state.ui.currentLanguage': {
+      immediate: true,
+      handler (newValue) {
+        const self = this
+        const htmlLocale = newValue.toLowerCase().replace('_', '-')
+        document.documentElement.setAttribute('lang', htmlLocale)
+        if (newValue === 'en_US') {
+          self.$language.current = 'noop'
+          self.$language.current = newValue
+          return self.$store.commit('ui/momentLocale', 'en')
+        }
+      }
+    },
+    currentTrack: {
+      immediate: true,
+      handler (newValue) {
+        this.updateDocumentTitle()
+      }
+    },
+    '$store.state.ui.pageTitle': {
+      immediate: true,
+      handler (newValue) {
+        this.updateDocumentTitle()
+      }
+    },
+    'serviceWorker.updateAvailable': {
+      handler (v) {
+        if (!v) {
+          return
+        }
+        const self = this
+        this.$store.commit('ui/addMessage', {
+          content: this.$pgettext('App/Message/Paragraph', 'A new version of the app is available.'),
+          date: new Date(),
+          key: 'refreshApp',
+          displayTime: 0,
+          classActions: 'bottom attached opaque',
+          actions: [
+            {
+              text: this.$pgettext('App/Message/Paragraph', 'Update'),
+              class: 'primary',
+              click: function () {
+                self.updateApp()
+              }
+            },
+            {
+              text: this.$pgettext('App/Message/Paragraph', 'Later'),
+              class: 'basic'
+            }
+          ]
+        })
+      },
+      immediate: true
+    }
+  },
+  async created () {
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.addEventListener(
+        'controllerchange', () => {
+          if (this.serviceWorker.refreshing) return
+          this.$store.commit('ui/serviceWorker', {
+            refreshing: true
+          })
+          window.location.reload()
+        }
+      )
+    }
+    window.addEventListener('resize', this.handleResize)
+    this.handleResize()
+    const self = this
+    if (!this.$store.state.ui.selectedLanguage) {
+      this.autodetectLanguage()
+    }
+    setInterval(() => {
+      // used to redraw ago dates every minute
+      self.$store.commit('ui/computeLastDate')
+    }, 1000 * 60)
+    const urlParams = new URLSearchParams(window.location.search)
+    const serverUrl = urlParams.get('_server')
+    if (serverUrl) {
+      this.$store.commit('instance/instanceUrl', serverUrl)
+    }
+    const url = urlParams.get('_url')
+    if (url) {
+      await this.$router.replace(url)
+    } else if (!this.$store.state.instance.instanceUrl) {
+      // we have several way to guess the API server url. By order of precedence:
+      // 1. use the url provided in settings.json, if any
+      // 2. use the url specified when building via VUE_APP_INSTANCE_URL
+      // 3. use the current url
+      const defaultInstanceUrl =
+        this.$store.state.instance.frontSettings.defaultServerUrl ||
+        import.meta.env.VUE_APP_INSTANCE_URL || this.$store.getters['instance/defaultUrl']()
+      this.$store.commit('instance/instanceUrl', defaultInstanceUrl)
+    } else {
+      // needed to trigger initialization of axios / service worker
+      this.$store.commit('instance/instanceUrl', this.$store.state.instance.instanceUrl)
+    }
+    await this.fetchNodeInfo()
+    this.$store.dispatch('instance/fetchSettings')
+    this.$store.commit('ui/addWebsocketEventHandler', {
+      eventName: 'inbox.item_added',
+      id: 'sidebarCount',
+      handler: this.incrementNotificationCountInSidebar
+    })
+    this.$store.commit('ui/addWebsocketEventHandler', {
+      eventName: 'mutation.created',
+      id: 'sidebarReviewEditCount',
+      handler: this.incrementReviewEditCountInSidebar
+    })
+    this.$store.commit('ui/addWebsocketEventHandler', {
+      eventName: 'mutation.updated',
+      id: 'sidebarReviewEditCount',
+      handler: this.incrementReviewEditCountInSidebar
+    })
+    this.$store.commit('ui/addWebsocketEventHandler', {
+      eventName: 'report.created',
+      id: 'sidebarPendingReviewReportCount',
+      handler: this.incrementPendingReviewReportsCountInSidebar
+    })
+    this.$store.commit('ui/addWebsocketEventHandler', {
+      eventName: 'user_request.created',
+      id: 'sidebarPendingReviewRequestCount',
+      handler: this.incrementPendingReviewRequestsCountInSidebar
+    })
+    this.$store.commit('ui/addWebsocketEventHandler', {
+      eventName: 'Listen',
+      id: 'handleListen',
+      handler: this.handleListen
+    })
+  },
+  mounted () {
+    const self = this
+    // slight hack to allow use to have internal links in <translate> tags
+    // while preserving router behaviour
+    document.documentElement.addEventListener('click', function (event) {
+      if (!event.target.matches('a.internal')) return
+      self.$router.push(event.target.getAttribute('href'))
+      event.preventDefault()
+    }, false)
+    this.$nextTick(() => {
+      document.getElementById('fake-content').classList.add('loaded')
+    })
+  },
+  destroyed () {
+    this.$store.commit('ui/removeWebsocketEventHandler', {
+      eventName: 'inbox.item_added',
+      id: 'sidebarCount'
+    })
+    this.$store.commit('ui/removeWebsocketEventHandler', {
+      eventName: 'mutation.created',
+      id: 'sidebarReviewEditCount'
+    })
+    this.$store.commit('ui/removeWebsocketEventHandler', {
+      eventName: 'mutation.updated',
+      id: 'sidebarReviewEditCount'
+    })
+    this.$store.commit('ui/removeWebsocketEventHandler', {
+      eventName: 'mutation.updated',
+      id: 'sidebarPendingReviewReportCount'
+    })
+    this.$store.commit('ui/removeWebsocketEventHandler', {
+      eventName: 'user_request.created',
+      id: 'sidebarPendingReviewRequestCount'
+    })
+    this.$store.commit('ui/removeWebsocketEventHandler', {
+      eventName: 'Listen',
+      id: 'handleListen'
+    })
+  },
+  methods: {
+    incrementNotificationCountInSidebar (event) {
+      this.$store.commit('ui/incrementNotifications', { type: 'inbox', count: 1 })
+    },
+    incrementReviewEditCountInSidebar (event) {
+      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewEdits', value: event.pending_review_count })
+    },
+    incrementPendingReviewReportsCountInSidebar (event) {
+      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewReports', value: event.unresolved_count })
+    },
+    incrementPendingReviewRequestsCountInSidebar (event) {
+      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewRequests', value: event.pending_count })
+    },
+    handleListen (event) {
+      if (this.$store.state.radios.current && this.$store.state.radios.running) {
+        const current = this.$store.state.radios.current
+        if (current.clientOnly && current.type === 'account') {
+          getClientOnlyRadio(current).handleListen(current, event, this.$store)
+        }
+      }
+    },
+    async fetchNodeInfo () {
+      const response = await axios.get('instance/nodeinfo/2.0/')
+      this.$store.commit('instance/nodeinfo', response.data)
+    },
+    autodetectLanguage () {
+      const userLanguage = navigator.language || navigator.userLanguage
+      const available = locales.locales.map(e => { return e.code })
+      let candidate
+      const matching = available.filter((a) => {
+        return userLanguage.replace('-', '_') === a
+      })
+      const almostMatching = available.filter((a) => {
+        return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
+      })
+      if (matching.length > 0) {
+        candidate = matching[0]
+      } else if (almostMatching.length > 0) {
+        candidate = almostMatching[0]
+      } else {
+        return
+      }
+      this.$store.commit('ui/currentLanguage', candidate)
+    },
+    getTrackInformationText (track) {
+      const trackTitle = track.title
+      const albumArtist = (track.album) ? track.album.artist.name : null
+      const artistName = (
+        (track.artist) ? track.artist.name : albumArtist)
+      const text = `♫ ${trackTitle} – ${artistName} ♫`
+      return text
+    },
+    updateDocumentTitle () {
+      const parts = []
+      const currentTrackPart = (
+        (this.currentTrack)
+          ? this.getTrackInformationText(this.currentTrack)
+          : null)
+      if (currentTrackPart) {
+        parts.push(currentTrackPart)
+      }
+      if (this.$store.state.ui.pageTitle) {
+        parts.push(this.$store.state.ui.pageTitle)
+      }
+      parts.push(this.initialTitle || 'Funkwhale')
+      document.title = parts.join(' – ')
+    },
+
+    updateApp () {
+      this.$store.commit('ui/serviceWorker', { updateAvailable: false })
+      if (!this.serviceWorker.registration || !this.serviceWorker.registration.waiting) { return }
+      this.serviceWorker.registration.waiting.postMessage({ command: 'skipWaiting' })
+    },
+    handleResize () {
+      this.width = window.innerWidth
+    },
+    handleThemeChange (event) {
+      this.setTheme(event.matches ? 'dark' : 'light')
+    },
+    setTheme (theme) {
+      const oldTheme = (theme === 'light') ? 'dark' : 'light'
+      document.body.classList.remove(`theme-${oldTheme}`)
+      document.body.classList.add(`theme-${theme}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "style/_main";
+
+</style>
diff --git a/front/src/components.d.ts b/front/src/components.d.ts
index c96fdf834..a32e4b5ec 100644
--- a/front/src/components.d.ts
+++ b/front/src/components.d.ts
@@ -1,7 +1,6 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/vue-next/pull/3399
-import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
@@ -161,4 +160,4 @@ declare module '@vue/runtime-core' {
   }
 }
 
-export {}
+export { }
diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index 5ef16e57b..1a88bec48 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -250,9 +250,9 @@
 
 <script>
 import { mapState } from 'vuex'
-import _ from 'lodash'
+import { get } from 'lodash-es'
 import showdown from 'showdown'
-import { humanSize } from '@/filters'
+import { humanSize } from '@/modules/filters'
 
 import SignupForm from '@/components/auth/SignupForm.vue'
 import LogoText from '@/components/LogoText.vue'
@@ -279,31 +279,31 @@ export default {
       }
     },
     podName () {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
+      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
     },
     banner () {
-      return _.get(this.nodeinfo, 'metadata.banner')
+      return get(this.nodeinfo, 'metadata.banner')
     },
     shortDescription () {
-      return _.get(this.nodeinfo, 'metadata.shortDescription')
+      return get(this.nodeinfo, 'metadata.shortDescription')
     },
     longDescription () {
-      return _.get(this.nodeinfo, 'metadata.longDescription')
+      return get(this.nodeinfo, 'metadata.longDescription')
     },
     rules () {
-      return _.get(this.nodeinfo, 'metadata.rules')
+      return get(this.nodeinfo, 'metadata.rules')
     },
     terms () {
-      return _.get(this.nodeinfo, 'metadata.terms')
+      return get(this.nodeinfo, 'metadata.terms')
     },
     stats () {
       const data = {
-        users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
-        artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
-        albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
-        tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
-        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
+        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
+        hours: get(this.nodeinfo, 'metadata.library.music.hours', null),
+        artists: get(this.nodeinfo, 'metadata.library.artists.total', null),
+        albums: get(this.nodeinfo, 'metadata.library.albums.total', null),
+        tracks: get(this.nodeinfo, 'metadata.library.tracks.total', null),
+        listenings: get(this.nodeinfo, 'metadata.usage.listenings.total', null)
       }
       if (data.users === null || data.artists === null) {
         return
@@ -311,28 +311,28 @@ export default {
       return data
     },
     contactEmail () {
-      return _.get(this.nodeinfo, 'metadata.contactEmail')
+      return get(this.nodeinfo, 'metadata.contactEmail')
     },
     anonymousCanListen () {
-      return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen')
+      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
     },
     allowListEnabled () {
-      return _.get(this.nodeinfo, 'metadata.allowList.enabled')
+      return get(this.nodeinfo, 'metadata.allowList.enabled')
     },
     allowListDomains () {
-      return _.get(this.nodeinfo, 'metadata.allowList.domains')
+      return get(this.nodeinfo, 'metadata.allowList.domains')
     },
     version () {
-      return _.get(this.nodeinfo, 'software.version')
+      return get(this.nodeinfo, 'software.version')
     },
     openRegistrations () {
-      return _.get(this.nodeinfo, 'openRegistrations')
+      return get(this.nodeinfo, 'openRegistrations')
     },
     defaultUploadQuota () {
-      return humanSize(_.get(this.nodeinfo, 'metadata.defaultUploadQuota') * 1000 * 1000)
+      return humanSize(get(this.nodeinfo, 'metadata.defaultUploadQuota') * 1000 * 1000)
     },
     federationEnabled () {
-      return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
+      return get(this.nodeinfo, 'metadata.library.federationEnabled')
     },
     headerStyle () {
       if (!this.banner) {
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index 62a8ee8f2..f94308cae 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -434,7 +434,7 @@ We render some markdown to html here, the content is set by the admin so we shou
 
 <script>
 import { mapState } from 'vuex'
-import _ from 'lodash'
+import { get } from 'lodash-es'
 import showdown from 'showdown'
 
 export default {
@@ -455,31 +455,31 @@ export default {
       }
     },
     podName () {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
+      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
     },
     banner () {
-      return _.get(this.nodeinfo, 'metadata.banner')
+      return get(this.nodeinfo, 'metadata.banner')
     },
     shortDescription () {
-      return _.get(this.nodeinfo, 'metadata.shortDescription')
+      return get(this.nodeinfo, 'metadata.shortDescription')
     },
     longDescription () {
-      return _.get(this.nodeinfo, 'metadata.longDescription')
+      return get(this.nodeinfo, 'metadata.longDescription')
     },
     rules () {
-      return _.get(this.nodeinfo, 'metadata.rules')
+      return get(this.nodeinfo, 'metadata.rules')
     },
     terms () {
-      return _.get(this.nodeinfo, 'metadata.terms')
+      return get(this.nodeinfo, 'metadata.terms')
     },
     stats () {
       const data = {
-        users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
-        artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
-        albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
-        tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
-        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
+        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
+        hours: get(this.nodeinfo, 'metadata.library.music.hours', null),
+        artists: get(this.nodeinfo, 'metadata.library.artists.total', null),
+        albums: get(this.nodeinfo, 'metadata.library.albums.total', null),
+        tracks: get(this.nodeinfo, 'metadata.library.tracks.total', null),
+        listenings: get(this.nodeinfo, 'metadata.usage.listenings.total', null)
       }
       if (data.users === null || data.artists === null) {
         return
@@ -487,28 +487,28 @@ export default {
       return data
     },
     contactEmail () {
-      return _.get(this.nodeinfo, 'metadata.contactEmail')
+      return get(this.nodeinfo, 'metadata.contactEmail')
     },
     anonymousCanListen () {
-      return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen')
+      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
     },
     allowListEnabled () {
-      return _.get(this.nodeinfo, 'metadata.allowList.enabled')
+      return get(this.nodeinfo, 'metadata.allowList.enabled')
     },
     allowListDomains () {
-      return _.get(this.nodeinfo, 'metadata.allowList.domains')
+      return get(this.nodeinfo, 'metadata.allowList.domains')
     },
     version () {
-      return _.get(this.nodeinfo, 'software.version')
+      return get(this.nodeinfo, 'software.version')
     },
     openRegistrations () {
-      return _.get(this.nodeinfo, 'openRegistrations')
+      return get(this.nodeinfo, 'openRegistrations')
     },
     defaultUploadQuota () {
-      return _.get(this.nodeinfo, 'metadata.defaultUploadQuota')
+      return get(this.nodeinfo, 'metadata.defaultUploadQuota')
     },
     federationEnabled () {
-      return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
+      return get(this.nodeinfo, 'metadata.library.federationEnabled')
     },
     headerStyle () {
       if (!this.banner) {
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index 2ae84e484..bd8336787 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -325,14 +325,14 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { get } from 'lodash-es'
 import { mapState } from 'vuex'
 import showdown from 'showdown'
 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 '@/filters'
+import { humanSize } from '@/modules/filters'
 
 export default {
   components: {
@@ -358,19 +358,19 @@ export default {
       }
     },
     podName () {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
+      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
     },
     banner () {
-      return _.get(this.nodeinfo, 'metadata.banner')
+      return get(this.nodeinfo, 'metadata.banner')
     },
     shortDescription () {
-      return _.get(this.nodeinfo, 'metadata.shortDescription')
+      return get(this.nodeinfo, 'metadata.shortDescription')
     },
     longDescription () {
-      return _.get(this.nodeinfo, 'metadata.longDescription')
+      return get(this.nodeinfo, 'metadata.longDescription')
     },
     rules () {
-      return _.get(this.nodeinfo, 'metadata.rules')
+      return get(this.nodeinfo, 'metadata.rules')
     },
     renderedDescription () {
       if (!this.longDescription) {
@@ -381,8 +381,8 @@ export default {
     },
     stats () {
       const data = {
-        users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null)
+        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
+        hours: get(this.nodeinfo, 'metadata.library.music.hours', null)
       }
       if (data.users === null || data.artists === null) {
         return
@@ -390,16 +390,16 @@ export default {
       return data
     },
     contactEmail () {
-      return _.get(this.nodeinfo, 'metadata.contactEmail')
+      return get(this.nodeinfo, 'metadata.contactEmail')
     },
     defaultUploadQuota () {
-      return _.get(this.nodeinfo, 'metadata.defaultUploadQuota')
+      return get(this.nodeinfo, 'metadata.defaultUploadQuota')
     },
     anonymousCanListen () {
-      return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen')
+      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
     },
     openRegistrations () {
-      return _.get(this.nodeinfo, 'openRegistrations')
+      return get(this.nodeinfo, 'openRegistrations')
     },
     headerStyle () {
       if (!this.banner) {
diff --git a/front/src/components/Pagination.vue b/front/src/components/Pagination.vue
index b466625f6..8e04a95c6 100644
--- a/front/src/components/Pagination.vue
+++ b/front/src/components/Pagination.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { range as lodashRange, sortBy, uniq } from 'lodash-es'
 
 export default {
   props: {
@@ -57,15 +57,15 @@ export default {
     pages: function () {
       const range = 2
       const current = this.current
-      const beginning = _.range(1, Math.min(this.maxPage, 1 + range))
-      const middle = _.range(
+      const beginning = lodashRange(1, Math.min(this.maxPage, 1 + range))
+      const middle = lodashRange(
         Math.max(1, current - range + 1),
         Math.min(this.maxPage, current + range)
       )
-      const end = _.range(this.maxPage, Math.max(1, this.maxPage - range))
+      const end = lodashRange(this.maxPage, Math.max(1, this.maxPage - range))
       let allowed = beginning.concat(middle, end)
-      allowed = _.uniq(allowed)
-      allowed = _.sortBy(allowed, [
+      allowed = uniq(allowed)
+      allowed = sortBy(allowed, [
         e => {
           return e
         }
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 4d54e22d8..ae0e4cd8c 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -345,8 +345,8 @@
 import { mapState, mapGetters, mapActions } from 'vuex'
 import $ from 'jquery'
 import moment from 'moment'
-import lodash from 'lodash'
-import time from '@/utils/time.js'
+import { sum } from 'lodash-es'
+import time from '@/utils/time'
 import { createFocusTrap } from 'focus-trap'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon.vue'
@@ -405,7 +405,7 @@ export default {
       }
     },
     timeLeft () {
-      const seconds = lodash.sum(
+      const seconds = sum(
         this.queue.tracks.slice(this.queue.currentIndex).map((t) => {
           return (t.uploads || []).map((u) => {
             return u.duration || 0
diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
index db7c81cdf..9cb2d49b8 100644
--- a/front/src/components/SetInstanceModal.vue
+++ b/front/src/components/SetInstanceModal.vue
@@ -107,7 +107,7 @@
 <script>
 import Modal from '@/components/semantic/Modal.vue'
 import axios from 'axios'
-import _ from 'lodash'
+import { uniq } from 'lodash-es'
 
 export default {
   components: {
@@ -135,7 +135,7 @@ export default {
       }
       const self = this
       instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio/')
-      return _.uniq(instances.filter((e) => { return e !== self.$store.state.instance.instanceUrl }))
+      return uniq(instances.filter((e) => { return e !== self.$store.state.instance.instanceUrl }))
     },
     instanceHostname () {
       const url = this.$store.state.instance.instanceUrl
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 1f6b63f5e..4383b368f 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -208,17 +208,17 @@
           </div>
           <div class="content">
             <fieldset
-              v-for="theme in themes"
-              :key="theme.key"
+              v-for="t in themes"
+              :key="t.key"
             >
               <input
-                :id="theme.key"
-                v-model="themeSelection"
+                :id="t.key"
+                v-model="theme"
                 type="radio"
                 name="theme"
-                :value="theme.key"
+                :value="t.key"
               >
-              <label :for="theme.key">{{ theme.name }}</label>
+              <label :for="t.key">{{ t.name }}</label>
             </fieldset>
           </div>
         </modal>
@@ -475,11 +475,11 @@ import { mapState, mapActions, mapGetters } from 'vuex'
 import UserModal from '@/components/common/UserModal.vue'
 import Logo from '@/components/Logo.vue'
 import SearchBar from '@/components/audio/SearchBar.vue'
-import ThemesMixin from '@/components/mixins/Themes.vue'
 import UserMenu from '@/components/common/UserMenu.vue'
 import Modal from '@/components/semantic/Modal.vue'
 
 import $ from 'jquery'
+import useThemeList from '@/composables/useThemeList'
 
 export default {
   name: 'Sidebar',
@@ -490,10 +490,15 @@ export default {
     UserModal,
     Modal
   },
-  mixins: [ThemesMixin],
   props: {
     width: { type: Number, required: true }
   },
+  setup () {
+    const theme = useTheme()
+    const themes = useThemeList()
+
+    return { theme, themes }
+  },
   data () {
     return {
       selectedTab: 'library',
@@ -504,8 +509,7 @@ export default {
       showUserModal: false,
       showLanguageModal: false,
       showThemeModal: false,
-      languageSelection: this.$language.current,
-      themeSelection: this.$store.state.ui.theme
+      languageSelection: this.$language.current
     }
   },
   destroy () {
@@ -645,10 +649,6 @@ export default {
     languageSelection: function (v) {
       this.$store.dispatch('ui/currentLanguage', v)
       this.$refs.languageModal.closeModal()
-    },
-    themeSelection: function (v) {
-      this.$store.dispatch('ui/theme', v)
-      this.$refs.themeModal.closeModal()
     }
   },
   mounted () {
@@ -691,11 +691,14 @@ export default {
           // works as expected
           const link = $($el).closest('a')
           const url = link.attr('href')
-          if (url.startsWith('http')) {
-            window.open(url, '_blank').focus()
-          } else {
-            self.$router.push(url)
+          if (url) {
+            if (url.startsWith('http')) {
+              window.open(url, '_blank').focus()
+            } else {
+              self.$router.push(url)
+            }
           }
+
           $(self.$el).find(selector).dropdown('hide')
         }
       })
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index 991fe371b..9667aec97 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -157,7 +157,7 @@
 
 <script>
 import axios from 'axios'
-import lodash from 'lodash'
+import { cloneDeep } from 'lodash-es'
 import SignupFormBuilder from '@/components/admin/SignupFormBuilder.vue'
 
 export default {
@@ -241,7 +241,7 @@ export default {
     },
     set (key, value) {
       // otherwise reactivity doesn't trigger :/
-      this.values = lodash.cloneDeep(this.values)
+      this.values = cloneDeep(this.values)
       this.$set(this.values, key, value)
     }
   }
diff --git a/front/src/components/admin/SignupFormBuilder.vue b/front/src/components/admin/SignupFormBuilder.vue
index 2f08dc051..bd2f4bb67 100644
--- a/front/src/components/admin/SignupFormBuilder.vue
+++ b/front/src/components/admin/SignupFormBuilder.vue
@@ -161,7 +161,7 @@
 </template>
 
 <script>
-import lodash from 'lodash'
+import { cloneDeep, tap, set } from 'lodash-es'
 
 import SignupForm from '@/components/auth/SignupForm.vue'
 
@@ -209,7 +209,7 @@ export default {
   },
   methods: {
     addField () {
-      const newValue = lodash.tap(lodash.cloneDeep(this.local), v => v.fields.push({
+      const newValue = tap(cloneDeep(this.local), v => v.fields.push({
         label: this.$pgettext('*/*/Form-builder', 'Additional field') + ' ' + (this.local.fields.length + 1),
         required: true,
         input_type: 'short_text'
@@ -217,7 +217,7 @@ export default {
       this.$emit('input', newValue)
     },
     remove (idx) {
-      this.$emit('input', lodash.tap(lodash.cloneDeep(this.local), v => v.fields.splice(idx, 1)))
+      this.$emit('input', tap(cloneDeep(this.local), v => v.fields.splice(idx, 1)))
     },
     move (idx, incr) {
       if (idx === 0 && incr < 0) {
@@ -226,7 +226,7 @@ export default {
       if (idx + incr >= this.local.fields.length) {
         return
       }
-      const newFields = arrayMove(lodash.cloneDeep(this.local).fields, idx, idx + incr)
+      const newFields = arrayMove(cloneDeep(this.local).fields, idx, idx + incr)
       this.update('fields', newFields)
     },
     update (key, value) {
@@ -241,7 +241,7 @@ export default {
           }
         }
       }
-      this.$emit('input', lodash.tap(lodash.cloneDeep(this.local), v => lodash.set(v, key, value)))
+      this.$emit('input', tap(cloneDeep(this.local), v => set(v, key, value)))
     }
   }
 }
diff --git a/front/src/components/audio/ChannelCard.vue b/front/src/components/audio/ChannelCard.vue
index 382928b19..5586481cf 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 '@/filters'
+import { momentFormat } from '@/modules/filters'
 import moment from 'moment'
 
 export default {
diff --git a/front/src/components/audio/ChannelEntries.vue b/front/src/components/audio/ChannelEntries.vue
index f0ef672af..39702ce3b 100644
--- a/front/src/components/audio/ChannelEntries.vue
+++ b/front/src/components/audio/ChannelEntries.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import axios from 'axios'
 import PodcastTable from '@/components/audio/podcast/Table.vue'
 import TrackTable from '@/components/audio/track/Table.vue'
@@ -96,7 +96,7 @@ export default {
       }
       this.isLoading = true
       const self = this
-      const params = _.clone(this.filters)
+      const params = clone(this.filters)
       params.page_size = this.limit
       params.page = this.page
       params.include_channels = true
diff --git a/front/src/components/audio/ChannelSeries.vue b/front/src/components/audio/ChannelSeries.vue
index 376b3085d..820f49aef 100644
--- a/front/src/components/audio/ChannelSeries.vue
+++ b/front/src/components/audio/ChannelSeries.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import axios from 'axios'
 import ChannelSerieCard from '@/components/audio/ChannelSerieCard.vue'
 import AlbumCard from '@/components/audio/album/Card.vue'
@@ -87,7 +87,7 @@ export default {
       }
       this.isLoading = true
       const self = this
-      const params = _.clone(this.filters)
+      const params = clone(this.filters)
       params.page_size = this.limit
       params.include_channels = true
       axios.get(url, { params: params }).then((response) => {
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index 68621b1f0..91eba0801 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import axios from 'axios'
 import ChannelCard from '@/components/audio/ChannelCard.vue'
 
@@ -68,7 +68,7 @@ export default {
       }
       this.isLoading = true
       const self = this
-      const params = _.clone(this.filters)
+      const params = clone(this.filters)
       params.page_size = this.limit
       params.include_channels = true
       axios.get(url, { params: params }).then((response) => {
diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue
index adcc3390f..3d66dba07 100644
--- a/front/src/components/audio/EmbedWizard.vue
+++ b/front/src/components/audio/EmbedWizard.vue
@@ -106,7 +106,7 @@
 <script>
 
 import { mapState } from 'vuex'
-import _ from 'lodash'
+import { get } from 'lodash-es'
 
 export default {
   props: {
@@ -131,7 +131,7 @@ export default {
       nodeinfo: state => state.instance.nodeinfo
     }),
     anonymousCanListen () {
-      return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen', false)
+      return get(this.nodeinfo, 'metadata.library.anonymousCanListen', false)
     },
     iframeSrc () {
       let base = import.meta.env.BASE_URL
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index b56c68810..81c98bd94 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -342,12 +342,12 @@ import { mapState, mapGetters, mapActions } from 'vuex'
 import GlobalEvents from '@/components/utils/global-events.vue'
 import { toLinearVolumeScale } from '@/audio/volume.js'
 import { Howl, Howler } from 'howler'
-import _ from 'lodash'
-import url from '@/utils/url'
+import { throttle, reverse } from 'lodash-es'
 import axios from 'axios'
 import VolumeControl from './VolumeControl.vue'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon.vue'
+import updateQueryString from '@/composables/updateQueryString'
 
 export default {
   components: {
@@ -399,7 +399,7 @@ export default {
       progress: 'player/progress'
     }),
     updateProgressThrottled () {
-      return _.throttle(this.updateProgress, 50)
+      return throttle(this.updateProgress, 50)
     },
     labels () {
       const audioPlayer = this.$pgettext('Sidebar/Player/Hidden text', 'Media player')
@@ -660,7 +660,7 @@ export default {
       // not support other codecs to be able to play it :)
       sources.push({
         type: 'mp3',
-        url: url.updateQueryString(
+        url: updateQueryString(
           this.$store.getters['instance/absoluteUrl'](trackData.listen_url),
           'to',
           'mp3'
@@ -680,7 +680,7 @@ export default {
           value = this.$store.state.auth.scopedTokens.listen
         }
         sources.forEach(e => {
-          e.url = url.updateQueryString(e.url, param, value)
+          e.url = updateQueryString(e.url, param, value)
         })
       }
       return sources
@@ -821,14 +821,14 @@ export default {
     checkCache () {
       const self = this
       const toKeep = []
-      _.reverse(this.soundsCache).forEach((e) => {
+      reverse(this.soundsCache).forEach((e) => {
         if (toKeep.length < self.maxPreloaded) {
           toKeep.push(e)
         } else {
           e.sound.unload()
         }
       })
-      this.soundsCache = _.reverse(toKeep)
+      this.soundsCache = reverse(toKeep)
     },
     removeFromCache (sound) {
       const toKeep = []
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index c7ef99fee..27c87d6dc 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { debounce } from 'lodash-es'
 import axios from 'axios'
 import logger from '@/logging'
 import AlbumCard from '@/components/audio/album/Card.vue'
@@ -112,7 +112,7 @@ export default {
     this.search()
   },
   methods: {
-    search: _.debounce(function () {
+    search: debounce(function () {
       if (this.query.length < 1) {
         return
       }
diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 71f89d78b..795096d62 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@@ -23,7 +23,7 @@
 <script>
 import jQuery from 'jquery'
 import router from '@/router'
-import lodash from 'lodash'
+import { trim } from 'lodash-es'
 import GlobalEvents from '@/components/utils/global-events.vue'
 
 export default {
@@ -248,8 +248,8 @@ export default {
       this.$refs.search.focus()
     },
     extractObjId (query) {
-      query = lodash.trim(query)
-      query = lodash.trim(query, '@')
+      query = trim(query)
+      query = trim(query, '@')
       if (query.indexOf(' ') > -1) {
         return
       }
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index c4ebc3520..9d7cdcb7f 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -158,12 +158,12 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } 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 '@/filters'
+import { unique } from '@/modules/filters'
 
 export default {
   components: {
@@ -228,7 +228,7 @@ export default {
       }
       this.isLoading = true
       const self = this
-      const params = _.clone(this.filters)
+      const params = clone(this.filters)
       params.page_size = this.paginateBy
       params.page = this.currentPage
       params.include_channels = true
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 4cc7f0920..fba14dd23 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import axios from 'axios'
 import PlayButton from '@/components/audio/PlayButton.vue'
 import TagsList from '@/components/tags/List.vue'
@@ -184,7 +184,7 @@ export default {
       }
       this.isLoading = true
       const self = this
-      const params = _.clone(this.filters)
+      const params = clone(this.filters)
       params.page_size = this.limit
       params.offset = this.offset
       axios.get(url, { params: params }).then((response) => {
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
index cbaccb486..fd5c80cec 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -119,7 +119,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { uniq } from 'lodash-es'
 import axios from 'axios'
 import TranslationsMixin from '@/components/mixins/Translations.vue'
 
@@ -163,7 +163,7 @@ export default {
         return this.fields.scopes.split(' ')
       },
       set (v) {
-        this.fields.scopes = _.uniq(v).join(' ')
+        this.fields.scopes = uniq(v).join(' ')
       }
     },
     allScopes () {
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
index 004dbc680..52b519ae4 100644
--- a/front/src/components/auth/Authorize.vue
+++ b/front/src/components/auth/Authorize.vue
@@ -229,8 +229,8 @@ export default {
       })
     }
   },
-  created () {
-    checkRedirectToLogin(this.$store, this.$router)
+  async created () {
+    await checkRedirectToLogin(this.$store, this.$router)
     if (this.clientId) {
       this.fetchApplication()
     }
diff --git a/front/src/components/auth/Plugin.vue b/front/src/components/auth/Plugin.vue
index 20d3b7cb9..573a052d1 100644
--- a/front/src/components/auth/Plugin.vue
+++ b/front/src/components/auth/Plugin.vue
@@ -166,7 +166,7 @@
 
 <script>
 import axios from 'axios'
-import lodash from 'lodash'
+import { clone } from 'lodash-es'
 import showdown from 'showdown'
 export default {
   props: {
@@ -178,7 +178,7 @@ export default {
       markdown: new showdown.Converter(),
       isLoading: false,
       enabled: this.plugin.enabled,
-      values: lodash.clone(this.plugin.values || {}),
+      values: clone(this.plugin.values || {}),
       errors: []
     }
   },
diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index a98109815..80b903e8f 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -144,7 +144,7 @@
 <script>
 import Modal from '@/components/semantic/Modal.vue'
 import ChannelUploadForm from '@/components/channels/UploadForm.vue'
-import { humanSize } from '@/filters'
+import { humanSize } from '@/modules/filters'
 
 export default {
   components: {
diff --git a/front/src/components/common/Duration.vue b/front/src/components/common/Duration.vue
index a1c652695..98b2690b9 100644
--- a/front/src/components/common/Duration.vue
+++ b/front/src/components/common/Duration.vue
@@ -13,7 +13,7 @@
   </span>
 </template>
 <script>
-import { secondsToObject } from '@/filters'
+import { secondsToObject } from '@/modules/filters'
 
 export default {
   props: { seconds: { type: Number, default: null } },
diff --git a/front/src/components/common/UserMenu.vue b/front/src/components/common/UserMenu.vue
index bfbf2a91c..761b15d07 100644
--- a/front/src/components/common/UserMenu.vue
+++ b/front/src/components/common/UserMenu.vue
@@ -26,14 +26,14 @@
         class="menu"
       >
         <a
-          v-for="theme in themes"
-          :key="theme.key"
-          :class="[{'active': $store.state.ui.theme === theme.key}, 'item']"
-          :value="theme.key"
-          @click="$store.dispatch('ui/theme', theme.key)"
+          v-for="t in themes"
+          :key="t.key"
+          :class="[{'active': theme === t.key}, 'item']"
+          :value="t.key"
+          @click="theme = t.key"
         >
-          <i :class="theme.icon" />
-          {{ theme.name }}
+          <i :class="t.icon" />
+          {{ t.name }}
         </a>
       </div>
     </div>
@@ -154,11 +154,16 @@
 <script>
 
 import { mapGetters } from 'vuex'
-
-import ThemesMixin from '@/components/mixins/Themes.vue'
+import useThemeList from '@/composables/useThemeList'
+import useTheme from '@/composables/useTheme'
 
 export default {
-  mixins: [ThemesMixin],
+  setup () {
+    return {
+      theme: useTheme(),
+      themes: useThemeList()
+    }
+  },
   computed: {
     labels () {
       return {
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index 7b7cf377e..dee0e003c 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -57,7 +57,7 @@
             <i class="palette icon user-modal list-icon" />
             <span class="user-modal list-item">{{ labels.theme }}:</span>
             <div class="right floated">
-              <span class="user-modal list-item"> {{ themes.find(x => x.key ===$store.state.ui.theme).name }}</span>
+              <span class="user-modal list-item"> {{ themes.find(x => x.key === theme).name }}</span>
               <i class="action-hint chevron right icon user-modal" />
             </div>
           </div>
@@ -175,17 +175,23 @@
 
 <script>
 import Modal from '@/components/semantic/Modal.vue'
-import ThemesMixin from '@/components/mixins/Themes.vue'
 import { mapGetters } from 'vuex'
+import useThemeList from '@/composables/useThemeList'
+import useTheme from '@/composables/useTheme'
 
 export default {
   components: {
     Modal
   },
-  mixins: [ThemesMixin],
   props: {
     show: { type: Boolean, required: true }
   },
+  setup () {
+    return {
+      theme: useTheme(),
+      themes: useThemeList()
+    }
+  },
   computed: {
     labels () {
       return {
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 7a4ea9acb..6859f4581 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -191,8 +191,8 @@ export default {
       this.updateQueryString()
     }
   },
-  created () {
-    checkRedirectToLogin(this.$store, this.$router)
+  async created () {
+    await checkRedirectToLogin(this.$store, this.$router)
     this.fetchFavorites(FAVORITES_URL)
   },
   mounted () {
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index f2ae6f05c..39c670286 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import axios from 'axios'
 import LibraryCard from '@/views/content/remote/Card.vue'
 
@@ -86,7 +86,7 @@ export default {
     fetchData (url) {
       this.isLoading = true
       const self = this
-      const params = _.clone({})
+      const params = clone({})
       params.page_size = this.limit
       params.offset = this.offset
       axios.get(url, { params: params }).then((response) => {
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 948f01c25..339201343 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -249,7 +249,7 @@
 
 <script>
 import axios from 'axios'
-import lodash from 'lodash'
+import { sum } from 'lodash-es'
 import PlayButton from '@/components/audio/PlayButton.vue'
 import TagsList from '@/components/tags/List.vue'
 import ArtistLabel from '@/components/audio/ArtistLabel.vue'
@@ -307,7 +307,7 @@ export default {
           durations.push(t.uploads[0].duration)
         }
       })
-      return lodash.sum(durations)
+      return sum(durations)
     },
     labels () {
       return {
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index c8bb360cc..2d315f809 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -92,7 +92,7 @@
 
 <script>
 
-import time from '@/utils/time.js'
+import time from '@/utils/time'
 import LibraryWidget from '@/components/federation/LibraryWidget.vue'
 import ChannelEntries from '@/components/audio/ChannelEntries.vue'
 import TrackTable from '@/components/audio/track/Table.vue'
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index 5ec8f3efb..80c3b825d 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -215,7 +215,7 @@
 
 <script>
 import axios from 'axios'
-import logger from '@/logging.js'
+import logger from '@/logging'
 import PlayButton from '@/components/audio/PlayButton.vue'
 import EmbedWizard from '@/components/audio/EmbedWizard.vue'
 import Modal from '@/components/semantic/Modal.vue'
@@ -223,7 +223,7 @@ import RadioButton from '@/components/radios/Button.vue'
 import TagsList from '@/components/tags/List.vue'
 import ReportMixin from '@/components/mixins/Report.vue'
 
-import { getDomain } from '@/utils.js'
+import { getDomain } from '@/utils'
 
 export default {
   components: {
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 56afd95a0..24a7b09a0 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -167,7 +167,7 @@ import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '@/logging.js'
+import logger from '@/logging'
 
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import PaginationMixin from '@/components/mixins/Pagination.vue'
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index fdbf83733..d93dbc3bc 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -240,7 +240,7 @@
 
 <script>
 import $ from 'jquery'
-import _ from 'lodash'
+import { isEqual, clone } from 'lodash-es'
 import axios from 'axios'
 import AttachmentInput from '@/components/common/AttachmentInput.vue'
 import EditList from '@/components/library/EditList.vue'
@@ -296,7 +296,7 @@ export default {
     mutationPayload () {
       const self = this
       const changedFields = this.config.fields.filter(f => {
-        return !_.isEqual(self.values[f.id], self.initialValues[f.id])
+        return !isEqual(self.values[f.id], self.initialValues[f.id])
       })
       if (changedFields.length === 0) {
         return null
@@ -339,15 +339,15 @@ export default {
     setValues () {
       const self = this
       this.config.fields.forEach(f => {
-        self.$set(self.values, f.id, _.clone(f.getValue(self.object)))
-        self.$set(self.initialValues, f.id, _.clone(self.values[f.id]))
+        self.$set(self.values, f.id, clone(f.getValue(self.object)))
+        self.$set(self.initialValues, f.id, clone(self.values[f.id]))
       })
     },
     submit () {
       const self = this
       self.isLoading = true
       self.errors = []
-      const payload = _.clone(this.mutationPayload || {})
+      const payload = clone(this.mutationPayload || {})
       if (this.canEdit) {
         payload.is_approved = true
       }
@@ -363,10 +363,10 @@ export default {
       )
     },
     fieldValuesChanged (fieldId) {
-      return !_.isEqual(this.values[fieldId], this.initialValues[fieldId])
+      return !isEqual(this.values[fieldId], this.initialValues[fieldId])
     },
     resetField (fieldId) {
-      this.values[fieldId] = _.clone(this.initialValues[fieldId])
+      this.values[fieldId] = clone(this.initialValues[fieldId])
     }
   }
 
diff --git a/front/src/components/library/EditList.vue b/front/src/components/library/EditList.vue
index b48630238..5da5617ce 100644
--- a/front/src/components/library/EditList.vue
+++ b/front/src/components/library/EditList.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import axios from 'axios'
 
 import EditCard from '@/components/library/EditCard.vue'
@@ -84,7 +84,7 @@ export default {
       }
       this.isLoading = true
       const self = this
-      const params = _.clone(this.filters)
+      const params = clone(this.filters)
       params.page_size = this.limit
       axios.get(url, { params: params }).then((response) => {
         self.previousPage = response.data.previous
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index bed31c9e0..16c03ef12 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -311,7 +311,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { sortBy, debounce } from 'lodash-es'
 import axios from 'axios'
 import FileUploadWidget from './FileUploadWidget.vue'
 import FsBrowser from './FsBrowser.vue'
@@ -435,7 +435,7 @@ export default {
     sortedFiles () {
       // return errored files on top
 
-      return _.sortBy(this.files.map(f => {
+      return sortBy(this.files.map(f => {
         let statusIndex = 0
         if (f.errored) {
           statusIndex = -1
@@ -467,7 +467,7 @@ export default {
     }
   },
   watch: {
-    importReference: _.debounce(function () {
+    importReference: debounce(function () {
       this.$router.replace({ query: { import: this.importReference } })
     }, 500),
     remainingSpace (newValue) {
diff --git a/front/src/components/library/FileUploadWidget.vue b/front/src/components/library/FileUploadWidget.vue
index 082e7adf4..3f5077257 100644
--- a/front/src/components/library/FileUploadWidget.vue
+++ b/front/src/components/library/FileUploadWidget.vue
@@ -1,6 +1,6 @@
 <script>
 import FileUpload from 'vue-upload-component'
-import { setCsrf } from '@/utils.js'
+import { setCsrf } from '@/utils'
 
 export default {
   extends: FileUpload,
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index a9482ed24..e42b49264 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -72,7 +72,7 @@
 
 <script>
 import axios from 'axios'
-import logger from '@/logging.js'
+import logger from '@/logging'
 import ChannelsWidget from '@/components/audio/ChannelsWidget.vue'
 import TrackWidget from '@/components/audio/track/Widget.vue'
 import AlbumWidget from '@/components/audio/album/Widget.vue'
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index c0730477b..e6c01b6b6 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -199,7 +199,7 @@ import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '@/logging.js'
+import logger from '@/logging'
 
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import PaginationMixin from '@/components/mixins/Pagination.vue'
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 89998b0f7..f68564dd0 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -178,7 +178,7 @@
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '@/logging.js'
+import logger from '@/logging'
 
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import PaginationMixin from '@/components/mixins/Pagination.vue'
diff --git a/front/src/components/library/TagsSelector.vue b/front/src/components/library/TagsSelector.vue
index 27e3d7143..10e148541 100644
--- a/front/src/components/library/TagsSelector.vue
+++ b/front/src/components/library/TagsSelector.vue
@@ -20,14 +20,14 @@
 <script>
 import $ from 'jquery'
 
-import lodash from 'lodash'
+import { isEqual } from 'lodash-es'
 export default {
   props: { value: { type: Array, required: true } },
   watch: {
     value: {
       handler (v) {
         const current = $(this.$refs.dropdown).dropdown('get value').split(',').sort()
-        if (!lodash.isEqual([...v].sort(), current)) {
+        if (!isEqual([...v].sort(), current)) {
           $(this.$refs.dropdown).dropdown('set exactly', v)
         }
       },
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 452632e50..3704509c6 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -219,18 +219,18 @@
 </template>
 
 <script>
-import time from '@/utils/time.js'
+import time from '@/utils/time'
 import axios from 'axios'
-import url from '@/utils/url.js'
-import { getDomain } from '@/utils.js'
-import logger from '@/logging.js'
+import { getDomain } from '@/utils'
+import logger from '@/logging'
 import PlayButton from '@/components/audio/PlayButton.vue'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
 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 '@/filters'
+import { momentFormat } from '@/modules/filters'
+import updateQueryString from '@/composables/updateQueryString'
 
 const FETCH_URL = 'tracks/'
 
@@ -322,7 +322,7 @@ export default {
           param = 'token'
           value = this.$store.state.auth.scopedTokens.listen
         }
-        u = url.updateQueryString(
+        u = updateQueryString(
           u,
           param,
           encodeURI(value)
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 1758453c6..dec50b3f6 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -186,7 +186,7 @@
 <script>
 import axios from 'axios'
 import $ from 'jquery'
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import BuilderFilter from './Filter.vue'
 import TrackTable from '@/components/audio/track/Table.vue'
 import RadioButton from '@/components/radios/Button.vue'
@@ -309,7 +309,7 @@ export default {
       const self = this
       const url = 'radios/radios/validate/'
       let final = this.filters.map(f => {
-        const c = _.clone(f.config)
+        const c = clone(f.config)
         c.type = f.filter.type
         return c
       })
@@ -326,7 +326,7 @@ export default {
       self.isLoading = true
 
       let final = this.filters.map(f => {
-        const c = _.clone(f.config)
+        const c = clone(f.config)
         c.type = f.filter.type
         return c
       })
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index 8ee0202bf..bc9cf39d5 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/front/src/components/library/radios/Filter.vue
@@ -107,7 +107,7 @@
 <script>
 import axios from 'axios'
 import $ from 'jquery'
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 
 import Modal from '@/components/semantic/Modal.vue'
 import TrackTable from '@/components/audio/track/Table.vue'
@@ -181,7 +181,7 @@ export default {
     fetchCandidates: function () {
       const self = this
       const url = 'radios/radios/validate/'
-      let final = _.clone(this.config)
+      let final = clone(this.config)
       final.type = this.filter.type
       final = { filters: [final] }
       axios.post(url, final).then((response) => {
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index cd1df49a3..d8dcaf7f9 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -201,8 +201,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -247,7 +247,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -287,7 +287,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 6ea4b863d..a41456210 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -186,8 +186,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -233,7 +233,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -273,7 +273,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index deeef42a8..71c46a421 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -185,8 +185,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -230,7 +230,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -276,7 +276,7 @@ export default {
       return { name: 'manage.library.artists.detail', params: { id: artist.id } }
     },
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index ed6785811..dd54c2fe7 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -131,8 +131,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { uniq, merge } from 'lodash-es'
+import time from '@/utils/time'
 import Pagination from '@/components/Pagination.vue'
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import TranslationsMixin from '@/components/mixins/Translations.vue'
@@ -197,7 +197,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
@@ -236,7 +236,7 @@ export default {
         if (config.ids.length === 0) {
           return
         }
-        axios.get(config.url, { params: { id: _.uniq(config.ids), hidden: 'null' } }).then((response) => {
+        axios.get(config.url, { params: { id: uniq(config.ids), hidden: 'null' } }).then((response) => {
           response.data.results.forEach((e) => {
             self.$set(self.targets[k], e.id, {
               payload: e,
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index da9848ebe..fb098cf37 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -216,8 +216,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -262,7 +262,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -302,7 +302,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 36266f29f..f1884d7a7 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -147,8 +147,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -198,7 +198,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -238,7 +238,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index bec213a4b..cd097baa1 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -199,8 +199,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -243,7 +243,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -283,7 +283,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 581c1087f..b76be1e4a 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -308,8 +308,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -361,7 +361,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -401,7 +401,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 72a4e1f3f..12b124527 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -172,8 +172,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
@@ -220,7 +220,7 @@ export default {
         q: this.search.query
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -255,7 +255,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index 7cb3c4e55..68c2c6ae2 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -183,8 +183,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
 import OrderingMixin from '@/components/mixins/Ordering.vue'
@@ -229,7 +229,7 @@ export default {
         q: this.search
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -290,7 +290,7 @@ export default {
       if (this.allowed !== null) {
         baseFilters.allowed = this.allowed
       }
-      const params = _.merge(baseFilters, this.filters)
+      const params = merge(baseFilters, this.filters)
       const self = this
       self.isLoading = true
       self.checked = []
diff --git a/front/src/components/manage/moderation/InstancePolicyForm.vue b/front/src/components/manage/moderation/InstancePolicyForm.vue
index f76484d4d..d0b5a5573 100644
--- a/front/src/components/manage/moderation/InstancePolicyForm.vue
+++ b/front/src/components/manage/moderation/InstancePolicyForm.vue
@@ -169,7 +169,7 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
+import { get } from 'lodash-es'
 
 export default {
   props: {
@@ -183,12 +183,12 @@ export default {
       isLoading: false,
       errors: [],
       current: {
-        summary: _.get(current, 'summary', ''),
-        isActive: _.get(current, 'is_active', true),
-        blockAll: _.get(current, 'block_all', true),
-        silenceActivity: _.get(current, 'silence_activity', false),
-        silenceNotifications: _.get(current, 'silence_notifications', false),
-        rejectMedia: _.get(current, 'reject_media', false)
+        summary: get(current, 'summary', ''),
+        isActive: get(current, 'is_active', true),
+        blockAll: get(current, 'block_all', true),
+        silenceActivity: get(current, 'silence_activity', false),
+        silenceNotifications: get(current, 'silence_notifications', false),
+        rejectMedia: get(current, 'reject_media', false)
       },
       fieldConfig: [
         // we hide those until we actually have the related features implemented :)
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index 3efd53cf2..d373fd4f3 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/front/src/components/manage/users/InvitationsTable.vue
@@ -158,7 +158,7 @@
 <script>
 import axios from 'axios'
 import moment from 'moment'
-import _ from 'lodash'
+import { merge } from 'lodash-es'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
 import OrderingMixin from '@/components/mixins/Ordering.vue'
@@ -199,7 +199,7 @@ export default {
         q: this.search
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -243,7 +243,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search,
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index 9d4245c68..53ce342cf 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/front/src/components/manage/users/UsersTable.vue
@@ -200,8 +200,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import Pagination from '@/components/Pagination.vue'
 import ActionTable from '@/components/common/ActionTable.vue'
 import OrderingMixin from '@/components/mixins/Ordering.vue'
@@ -261,7 +261,7 @@ export default {
         q: this.search
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -296,7 +296,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search,
diff --git a/front/src/components/mixins/Themes.vue b/front/src/components/mixins/Themes.vue
deleted file mode 100644
index fe7858c3b..000000000
--- a/front/src/components/mixins/Themes.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-export default {
-  computed: {
-    themes () {
-      return [
-        {
-          icon: 'palette icon',
-          name: this.$pgettext('*/Settings/Dropdown.Label/Theme name', 'Browser default'),
-          key: 'system'
-        },
-        {
-          icon: 'sun icon',
-          name: this.$pgettext('*/Settings/Dropdown.Label/Theme name', 'Light'),
-          key: 'light'
-        },
-        {
-          icon: 'moon icon',
-          name: this.$pgettext('*/Settings/Dropdown.Label/Theme name', 'Dark'),
-          key: 'dark'
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/front/src/components/moderation/ReportCategoryDropdown.vue b/front/src/components/moderation/ReportCategoryDropdown.vue
index 4521f5b1c..886f15b52 100644
--- a/front/src/components/moderation/ReportCategoryDropdown.vue
+++ b/front/src/components/moderation/ReportCategoryDropdown.vue
@@ -26,7 +26,6 @@
 
 <script>
 import TranslationsMixin from '@/components/mixins/Translations.vue'
-import lodash from 'lodash'
 export default {
   mixins: [TranslationsMixin],
   props: {
@@ -52,7 +51,7 @@ export default {
       if (this.restrictTo.length > 0) {
         choices = this.restrictTo
       } else {
-        choices = lodash.keys(this.sharedLabels.fields.report_type.choices)
+        choices = Object.keys(this.sharedLabels.fields.report_type.choices)
       }
       return c.concat(
         choices.sort().map((v) => {
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index a316a1629..bbf63511c 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -192,9 +192,7 @@
 </template>
 
 <script>
-import filter from 'lodash/fp/filter'
-import sortBy from 'lodash/fp/sortBy'
-import flow from 'lodash/fp/flow'
+import { filter, sortBy, flow } from 'lodash-es'
 
 import axios from 'axios'
 import { mapState } from 'vuex'
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index 437b787c9..d38271ae3 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { clone } from 'lodash-es'
 import axios from 'axios'
 import PlaylistCard from '@/components/playlists/Card.vue'
 
@@ -104,7 +104,7 @@ export default {
       }
       this.isLoading = true
       const self = this
-      const params = _.clone(this.filters)
+      const params = clone(this.filters)
       params.page_size = this.limit
       params.offset = this.offset
       axios.get(url, { params: params }).then((response) => {
diff --git a/front/src/components/radios/Button.vue b/front/src/components/radios/Button.vue
index 1d63b5528..56f836d7f 100644
--- a/front/src/components/radios/Button.vue
+++ b/front/src/components/radios/Button.vue
@@ -13,7 +13,7 @@
 
 <script>
 
-import lodash from 'lodash'
+import { isEqual } from 'lodash-es'
 export default {
   props: {
     customRadioId: { type: Number, required: false, default: null },
@@ -29,7 +29,7 @@ export default {
       if (!state.running) {
         return false
       } else {
-        return current.type === this.type && lodash.isEqual(current.objectId, this.objectId) && current.customRadioId === this.customRadioId
+        return current.type === this.type && isEqual(current.objectId, this.objectId) && current.customRadioId === this.customRadioId
       }
     },
     label () {
diff --git a/front/src/composables/updateQueryString.ts b/front/src/composables/updateQueryString.ts
new file mode 100644
index 000000000..98d3a3891
--- /dev/null
+++ b/front/src/composables/updateQueryString.ts
@@ -0,0 +1,9 @@
+export default (uri: string, key: string, value: string) => {
+  const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i')
+  if (uri.match(re)) {
+    return uri.replace(re, `$1${key}=${value}$2`)
+  } else {
+    const separator = uri.indexOf('?') !== -1 ? '&' : '?'
+    return `${uri}${separator}${key}=${value}`
+  }
+}
diff --git a/front/src/composables/useTheme.ts b/front/src/composables/useTheme.ts
new file mode 100644
index 000000000..838248d10
--- /dev/null
+++ b/front/src/composables/useTheme.ts
@@ -0,0 +1,12 @@
+import { useColorMode } from '@vueuse/core'
+import { watch } from '@vue/composition-api'
+
+const theme = useColorMode()
+
+document.body.classList.add(`theme-${theme.value}`)
+watch(theme, (newValue, oldValue) => {
+  document.body.classList.remove(`theme-${oldValue}`)
+  document.body.classList.add(`theme-${newValue}`)
+})
+
+export default () => theme
diff --git a/front/src/composables/useThemeList.ts b/front/src/composables/useThemeList.ts
new file mode 100644
index 000000000..f0713be94
--- /dev/null
+++ b/front/src/composables/useThemeList.ts
@@ -0,0 +1,24 @@
+import type { ThemeEntry } from '@/types'
+import Vue from 'vue'
+
+const { $pgettext } = Vue.prototype
+
+const themeList: ThemeEntry[] = [
+  {
+    icon: 'palette icon',
+    name: $pgettext('*/Settings/Dropdown.Label/Theme name', 'Browser default'),
+    key: 'auto'
+  },
+  {
+    icon: 'sun icon',
+    name: $pgettext('*/Settings/Dropdown.Label/Theme name', 'Light'),
+    key: 'light'
+  },
+  {
+    icon: 'moon icon',
+    name: $pgettext('*/Settings/Dropdown.Label/Theme name', 'Dark'),
+    key: 'dark'
+  }
+]
+
+export default () => themeList
diff --git a/front/src/composables/useWebSocketHandler.ts b/front/src/composables/useWebSocketHandler.ts
new file mode 100644
index 000000000..c86c5cb0a
--- /dev/null
+++ b/front/src/composables/useWebSocketHandler.ts
@@ -0,0 +1,15 @@
+import store from '~/store'
+import { tryOnScopeDispose } from '@vueuse/core'
+import { WebSocketEvent } from '~/types'
+
+export default (eventName: string, handler: (event: WebSocketEvent) => void) => {
+  const id = `${+new Date() + Math.random()}`
+  store.commit('ui/addWebsocketEventHandler', { eventName, handler, id })
+
+  const stop = () => {
+    store.commit('ui/removeWebsocketEventHandler', { eventName, id })
+  }
+
+  tryOnScopeDispose(stop)
+  return stop
+}
diff --git a/front/src/embed/embed.js b/front/src/embed.ts
similarity index 99%
rename from front/src/embed/embed.js
rename to front/src/embed.ts
index d448b2e12..a6561ea51 100644
--- a/front/src/embed/embed.js
+++ b/front/src/embed.ts
@@ -1,4 +1,3 @@
-
 import Vue from 'vue'
 import EmbedFrame from './EmbedFrame.vue'
 import VuePlyr from 'vue-plyr'
diff --git a/front/src/embed/EmbedFrame.vue b/front/src/embed/EmbedFrame.vue
index 6da9f99f6..10b525be2 100644
--- a/front/src/embed/EmbedFrame.vue
+++ b/front/src/embed/EmbedFrame.vue
@@ -247,7 +247,7 @@
 <script>
 import axios from 'axios'
 import Logo from '@/components/Logo.vue'
-import url from '@/utils/url'
+import updateQueryString from './composables/updateQueryString'
 import time from '@/utils/time'
 
 function getURLParams () {
@@ -516,7 +516,7 @@ export default {
         // not support other codecs to be able to play it :)
         sources.push({
           type: 'audio/mpeg',
-          src: url.updateQueryString(
+          src: updateQueryString(
             self.fullUrl(sources[0].src),
             'to',
             'mp3'
diff --git a/front/src/jquery.js b/front/src/jquery.ts
similarity index 100%
rename from front/src/jquery.js
rename to front/src/jquery.ts
diff --git a/front/src/locales.js b/front/src/locales.js
deleted file mode 100644
index 4d114df0b..000000000
--- a/front/src/locales.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/* eslint-disable */
-export default {
-  "locales": [
-    {
-      "code": "ar",
-      "label": "العربية"
-    },
-    {
-      "code": "ca",
-      "label": "Català"
-    },
-    {
-      "code": "cs",
-      "label": "Čeština"
-    },
-    {
-      "code": "de",
-      "label": "Deutsch"
-    },
-    {
-      "code": "en_GB",
-      "label": "English (UK)"
-    },
-    {
-      "code": "en_US",
-      "label": "English (United-States)"
-    },
-    {
-      "code": "eo",
-      "label": "Esperanto"
-    },
-    {
-      "code": "es",
-      "label": "Español"
-    },
-    {
-      "code": "eu",
-      "label": "Euskara"
-    },
-    {
-      "code": "fr_FR",
-      "label": "Français"
-    },
-    {
-      "code": "gl",
-      "label": "Galego"
-    },
-    {
-      "code": "hu",
-      "label": "Magyar"
-    },
-    {
-      "code": "it",
-      "label": "Italiano"
-    },
-    {
-      "code": "ja_JP",
-      "label": "日本語"
-    },
-    {
-      "code": "kab_DZ",
-      "label": "Taqbaylit"
-    },
-    {
-      "code": "ko_KR",
-      "label": "한국어"
-    },
-    {
-      "code": "nb_NO",
-      "label": "Bokmål"
-    },
-    {
-      "code": "nn_NO",
-      "label": "Nynorsk"
-    },
-    {
-      "code": "nl",
-      "label": "Nederlands"
-    },
-    {
-      "code": "oc",
-      "label": "Occitan"
-    },
-    {
-      "code": "pl",
-      "label": "Polski"
-    },
-    {
-      "code": "pt_BR",
-      "label": "Português (Brasil)"
-    },
-    {
-      "code": "pt_PT",
-      "label": "Português (Portugal)"
-    },
-    {
-      "code": "ru",
-      "label": "Русский"
-    },
-    {
-      "code": "sq",
-      "label": "Shqip"
-    },
-    {
-      "code": "zh_Hans",
-      "label": "中文(简体)"
-    },
-    {
-      "code": "zh_Hant",
-      "label": "中文(繁體)"
-    },
-    {
-      "code": "fa_IR",
-      "label": "فارسی"
-    },
-    {
-      "code": "ml",
-      "label": "മലയാളം"
-    },
-    {
-      "code": "sv",
-      "label": "Svenska"
-    },
-    {
-      "code": "el",
-      "label": "Ελληνικά"
-    }
-  ]
-}
diff --git a/front/src/locales.ts b/front/src/locales.ts
new file mode 100644
index 000000000..235374b47
--- /dev/null
+++ b/front/src/locales.ts
@@ -0,0 +1,129 @@
+import type { Locale } from '@/types'
+
+/* eslint-disable */
+export const locales: Locale[] = [
+  {
+    "code": "ar",
+    "label": "العربية"
+  },
+  {
+    "code": "ca",
+    "label": "Català"
+  },
+  {
+    "code": "cs",
+    "label": "Čeština"
+  },
+  {
+    "code": "de",
+    "label": "Deutsch"
+  },
+  {
+    "code": "en_GB",
+    "label": "English (UK)"
+  },
+  {
+    "code": "en_US",
+    "label": "English (United-States)"
+  },
+  {
+    "code": "eo",
+    "label": "Esperanto"
+  },
+  {
+    "code": "es",
+    "label": "Español"
+  },
+  {
+    "code": "eu",
+    "label": "Euskara"
+  },
+  {
+    "code": "fr_FR",
+    "label": "Français"
+  },
+  {
+    "code": "gl",
+    "label": "Galego"
+  },
+  {
+    "code": "hu",
+    "label": "Magyar"
+  },
+  {
+    "code": "it",
+    "label": "Italiano"
+  },
+  {
+    "code": "ja_JP",
+    "label": "日本語"
+  },
+  {
+    "code": "kab_DZ",
+    "label": "Taqbaylit"
+  },
+  {
+    "code": "ko_KR",
+    "label": "한국어"
+  },
+  {
+    "code": "nb_NO",
+    "label": "Bokmål"
+  },
+  {
+    "code": "nn_NO",
+    "label": "Nynorsk"
+  },
+  {
+    "code": "nl",
+    "label": "Nederlands"
+  },
+  {
+    "code": "oc",
+    "label": "Occitan"
+  },
+  {
+    "code": "pl",
+    "label": "Polski"
+  },
+  {
+    "code": "pt_BR",
+    "label": "Português (Brasil)"
+  },
+  {
+    "code": "pt_PT",
+    "label": "Português (Portugal)"
+  },
+  {
+    "code": "ru",
+    "label": "Русский"
+  },
+  {
+    "code": "sq",
+    "label": "Shqip"
+  },
+  {
+    "code": "zh_Hans",
+    "label": "中文(简体)"
+  },
+  {
+    "code": "zh_Hant",
+    "label": "中文(繁體)"
+  },
+  {
+    "code": "fa_IR",
+    "label": "فارسی"
+  },
+  {
+    "code": "ml",
+    "label": "മലയാളം"
+  },
+  {
+    "code": "sv",
+    "label": "Svenska"
+  },
+  {
+    "code": "el",
+    "label": "Ελληνικά"
+  }
+]
diff --git a/front/src/logging.js b/front/src/logging.ts
similarity index 100%
rename from front/src/logging.js
rename to front/src/logging.ts
diff --git a/front/src/main.js b/front/src/main.js
deleted file mode 100644
index 23efe39d6..000000000
--- a/front/src/main.js
+++ /dev/null
@@ -1,199 +0,0 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import logger from '@/logging'
-import jQuery from '@/jquery'
-
-import Vue from 'vue'
-import moment from 'moment'
-import App from './App.vue'
-import router from './router'
-import axios from 'axios'
-import VueLazyload from 'vue-lazyload'
-import store from './store'
-import GetTextPlugin from 'vue-gettext'
-import { sync } from 'vuex-router-sync'
-import locales from '@/locales'
-import createAuthRefreshInterceptor from 'axios-auth-refresh'
-import VueCompositionAPI from '@vue/composition-api'
-
-import filters from '@/filters' // eslint-disable-line
-import { parseAPIErrors } from '@/utils'
-import globals from '@/components/globals' // eslint-disable-line
-import './registerServiceWorker'
-import '@/semantic'
-
-logger.default.info('Loading environment:', import.meta.env.MODE)
-logger.default.debug('Environment variables:', import.meta.env)
-
-sync(store, router)
-
-let APP = null
-
-const availableLanguages = (function () {
-  const l = {}
-  locales.locales.forEach(c => {
-    l[c.code] = c.label
-  })
-  return l
-})()
-let defaultLanguage = 'en_US'
-if (availableLanguages[store.state.ui.currentLanguage]) {
-  defaultLanguage = store.state.ui.currentLanguage
-}
-Vue.use(GetTextPlugin, {
-  availableLanguages: availableLanguages,
-  defaultLanguage: defaultLanguage,
-  // cf https://github.com/Polyconseil/vue-gettext#configuration
-  // not recommended but this is fixing weird bugs with translation nodes
-  // not being updated when in v-if/v-else clauses
-  autoAddKeyAttributes: true,
-  languageVmMixin: {
-    computed: {
-      currentKebabCase: function () {
-        return this.current.toLowerCase().replace('_', '-')
-      }
-    }
-  },
-  translations: {},
-  silent: true
-})
-
-Vue.use(VueCompositionAPI)
-Vue.use(VueLazyload)
-Vue.directive('title', function (el, binding) {
-  store.commit('ui/pageTitle', binding.value)
-})
-Vue.directive('dropdown', function (el, binding) {
-  jQuery(el).dropdown({
-    selectOnKeydown: false,
-    action: function (text, value, $el) {
-      // used to ensure focusing the dropdown and clicking via keyboard
-      // works as expected
-      const button = $el[0]
-      button.click()
-      jQuery(el).find('.ui.dropdown').dropdown('hide')
-    },
-    ...(binding.value || {})
-  })
-})
-axios.defaults.xsrfCookieName = 'csrftoken'
-axios.defaults.xsrfHeaderName = 'X-CSRFToken'
-axios.interceptors.request.use(function (config) {
-  // Do something before request is sent
-  if (store.state.auth.oauth.accessToken) {
-    config.headers.Authorization = store.getters['auth/header']
-  }
-  return config
-}, function (error) {
-  // Do something with request error
-  return Promise.reject(error)
-})
-
-// Add a response interceptor
-axios.interceptors.response.use(function (response) {
-  return response
-}, function (error) {
-  error.backendErrors = []
-  if (store.state.auth.authenticated && !store.state.auth.oauth.accessToken && error.response.status === 401) {
-    store.commit('auth/authenticated', false)
-    logger.default.warn('Received 401 response from API, redirecting to login form', router.currentRoute.fullPath)
-    router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
-  }
-  if (error.response.status === 404) {
-    error.backendErrors.push('Resource not found')
-    const message = error.response.data
-    store.commit('ui/addMessage', {
-      content: message,
-      class: 'error'
-    })
-  } else if (error.response.status === 403) {
-    error.backendErrors.push('Permission denied')
-  } else if (error.response.status === 429) {
-    let message
-    const rateLimitStatus = {
-      limit: error.response.headers['x-ratelimit-limit'],
-      scope: error.response.headers['x-ratelimit-scope'],
-      remaining: error.response.headers['x-ratelimit-remaining'],
-      duration: error.response.headers['x-ratelimit-duration'],
-      availableSeconds: error.response.headers['retry-after'],
-      reset: error.response.headers['x-ratelimit-reset'],
-      resetSeconds: error.response.headers['x-ratelimit-resetseconds']
-    }
-    if (rateLimitStatus.availableSeconds) {
-      rateLimitStatus.availableSeconds = parseInt(rateLimitStatus.availableSeconds)
-      const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
-      message = APP.$pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again in %{ delay }')
-      message = APP.$gettextInterpolate(message, { delay: tryAgain })
-    } else {
-      message = APP.$pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again later')
-    }
-    error.backendErrors.push(message)
-    store.commit('ui/addMessage', {
-      content: message,
-      date: new Date(),
-      class: 'error'
-    })
-    logger.default.error('This client is rate-limited!', rateLimitStatus)
-  } else if (error.response.status === 500) {
-    error.backendErrors.push('A server error occured')
-  } else if (error.response.data) {
-    if (error.response.data.detail) {
-      error.backendErrors.push(error.response.data.detail)
-    } else {
-      error.rawPayload = error.response.data
-      const parsedErrors = parseAPIErrors(error.response.data)
-      error.backendErrors = [...error.backendErrors, ...parsedErrors]
-    }
-  }
-  if (error.backendErrors.length === 0) {
-    error.backendErrors.push('An unknown error occured, ensure your are connected to the internet and your funkwhale instance is up and running')
-  }
-  // Do something with response error
-  return Promise.reject(error)
-})
-
-const refreshAuth = (failedRequest) => {
-  if (store.state.auth.oauth.accessToken) {
-    console.log('Failed request, refreshing auth…')
-    // maybe the token was expired, let's try to refresh it
-    return store.dispatch('auth/refreshOauthToken').then(() => {
-      failedRequest.response.config.headers.Authorization = store.getters['auth/header']
-      return Promise.resolve()
-    })
-  } else {
-    return Promise.resolve()
-  }
-}
-
-createAuthRefreshInterceptor(axios, refreshAuth)
-
-store.dispatch('instance/fetchFrontSettings').finally(() => {
-  /* eslint-disable no-new */
-  new Vue({
-    el: '#app',
-    router,
-    store,
-    components: { App },
-    created () {
-      APP = this
-      window.addEventListener('resize', this.handleResize)
-      this.handleResize()
-    },
-    destroyed () {
-      window.removeEventListener('resize', this.handleResize)
-    },
-    methods: {
-      handleResize () {
-        this.$store.commit('ui/window', {
-          width: window.innerWidth,
-          height: window.innerHeight
-        })
-      }
-    },
-    render (h) {
-      return h('App')
-    }
-  })
-
-  logger.default.info('Everything loaded!')
-})
diff --git a/front/src/main.ts b/front/src/main.ts
new file mode 100644
index 000000000..2348e6db1
--- /dev/null
+++ b/front/src/main.ts
@@ -0,0 +1,35 @@
+import logger from '~/logging'
+import App from '~/App.vue'
+import router from '~/router'
+import VueLazyload from 'vue-lazyload'
+import store from '~/store'
+import { sync } from 'vuex-router-sync'
+import VueCompositionAPI, { createApp } from '@vue/composition-api'
+import { CreateElement } from 'vue'
+
+logger.default.info('Loading environment:', import.meta.env.MODE)
+logger.default.debug('Environment variables:', import.meta.env)
+
+sync(store, router)
+
+const app = createApp({
+  store,
+  router,
+  render: (h: CreateElement) => h(App)
+})
+
+app.use(VueCompositionAPI)
+app.use(VueLazyload)
+
+for (const module of Object.values(import.meta.globEager('./modules/*.ts'))) {
+  module.install?.({
+    app,
+    router,
+    store
+  })
+}
+
+store.dispatch('instance/fetchFrontSettings').finally(() => {
+  app.mount('#app')
+  logger.default.info('Everything loaded!')
+})
diff --git a/front/src/modules/axios.ts b/front/src/modules/axios.ts
new file mode 100644
index 000000000..4370397ed
--- /dev/null
+++ b/front/src/modules/axios.ts
@@ -0,0 +1,109 @@
+import { AppModule } from '@/types'
+
+import createAuthRefreshInterceptor from 'axios-auth-refresh'
+import axios, { AxiosError } from 'axios'
+import moment from 'moment'
+import logger from '@/logging'
+import { parseAPIErrors } from '@/utils'
+import Vue from 'vue'
+
+export const install: AppModule = ({ app, store, router }) => {
+  axios.defaults.xsrfCookieName = 'csrftoken'
+  axios.defaults.xsrfHeaderName = 'X-CSRFToken'
+  axios.interceptors.request.use(function (config) {
+    // Do something before request is sent
+    if (store.state.auth.oauth.accessToken) {
+      config.headers ??= {}
+      config.headers.Authorization = store.getters['auth/header']
+    }
+    return config
+  }, function (error) {
+    // Do something with request error
+    return Promise.reject(error)
+  })
+
+  // Add a response interceptor
+  axios.interceptors.response.use(function (response) {
+    return response
+  }, async (error) => {
+    error.backendErrors = []
+    if (store.state.auth.authenticated && !store.state.auth.oauth.accessToken && error.response.status === 401) {
+      store.commit('auth/authenticated', false)
+      logger.default.warn('Received 401 response from API, redirecting to login form', router.currentRoute.fullPath)
+      await router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
+    }
+
+    if (error.response.status === 404) {
+      error.backendErrors.push('Resource not found')
+      const message = error.response.data
+      store.commit('ui/addMessage', {
+        content: message,
+        class: 'error'
+      })
+    } else if (error.response.status === 403) {
+      error.backendErrors.push('Permission denied')
+    } else if (error.response.status === 429) {
+      let message
+      const rateLimitStatus = {
+        limit: error.response.headers['x-ratelimit-limit'],
+        scope: error.response.headers['x-ratelimit-scope'],
+        remaining: error.response.headers['x-ratelimit-remaining'],
+        duration: error.response.headers['x-ratelimit-duration'],
+        availableSeconds: error.response.headers['retry-after'],
+        reset: error.response.headers['x-ratelimit-reset'],
+        resetSeconds: error.response.headers['x-ratelimit-resetseconds']
+      }
+      if (rateLimitStatus.availableSeconds) {
+        rateLimitStatus.availableSeconds = parseInt(rateLimitStatus.availableSeconds)
+        const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
+        message = Vue.prototype.$pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again in %{ delay }')
+        message = Vue.prototype.$gettextInterpolate(message, { delay: tryAgain })
+      } else {
+        message = Vue.prototype.$pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again later')
+      }
+      error.backendErrors.push(message)
+      store.commit('ui/addMessage', {
+        content: message,
+        date: new Date(),
+        class: 'error'
+      })
+      logger.default.error('This client is rate-limited!', rateLimitStatus)
+    } else if (error.response.status === 500) {
+      error.backendErrors.push('A server error occured')
+    } else if (error.response.data) {
+      if (error.response.data.detail) {
+        error.backendErrors.push(error.response.data.detail)
+      } else {
+        error.rawPayload = error.response.data
+        const parsedErrors = parseAPIErrors(error.response.data)
+        error.backendErrors = [...error.backendErrors, ...parsedErrors]
+      }
+    }
+
+    if (error.backendErrors.length === 0) {
+      error.backendErrors.push('An unknown error occured, ensure your are connected to the internet and your funkwhale instance is up and running')
+    }
+
+    // Do something with response error
+    return Promise.reject(error)
+  })
+
+  const refreshAuth = (failedRequest: AxiosError) => {
+    if (store.state.auth.oauth.accessToken) {
+      console.log('Failed request, refreshing auth…')
+      // maybe the token was expired, let's try to refresh it
+      return store.dispatch('auth/refreshOauthToken').then(() => {
+        if (failedRequest.response) {
+          failedRequest.response.config.headers ??= {}
+          failedRequest.response.config.headers.Authorization = store.getters['auth/header']
+        }
+
+        return Promise.resolve()
+      })
+    }
+
+    return Promise.resolve()
+  }
+
+  createAuthRefreshInterceptor(axios, refreshAuth)
+}
diff --git a/front/src/modules/directives.ts b/front/src/modules/directives.ts
new file mode 100644
index 000000000..ee2fb44c4
--- /dev/null
+++ b/front/src/modules/directives.ts
@@ -0,0 +1,24 @@
+import { AppModule } from '@/types'
+import jQuery from '@/jquery'
+
+export const install: AppModule = ({ app, store }) => {
+  app.directive('title', function (el, binding) {
+    store.commit('ui/pageTitle', binding.value)
+  })
+
+  app.directive('dropdown', function (el, binding) {
+    // @ts-ignore
+    jQuery(el).dropdown({
+      selectOnKeydown: false,
+      action (text: string, value: string, $el: JQuery<HTMLElement>) {
+        // used to ensure focusing the dropdown and clicking via keyboard
+        // works as expected
+        const button = $el[0]
+        button.click()
+        // @ts-ignore
+        jQuery(el).find('.ui.dropdown').dropdown('hide')
+      },
+      ...(binding.value || {})
+    })
+  })
+}
diff --git a/front/src/filters.js b/front/src/modules/filters.ts
similarity index 63%
rename from front/src/filters.js
rename to front/src/modules/filters.ts
index 370f5cda9..db5e9266c 100644
--- a/front/src/filters.js
+++ b/front/src/modules/filters.ts
@@ -1,18 +1,18 @@
+import { AppModule } from '~/types'
+
 import Vue from 'vue'
-
-import time from '@/utils/time'
-
+import time from '~/utils/time'
 import moment from 'moment'
 
-export function truncate (str, max, ellipsis, middle) {
+export function truncate (str: string, max = 100, ellipsis = '…', middle = false) {
   if (max === 0) {
-    return
+    return ''
   }
-  max = max || 100
-  ellipsis = ellipsis || '…'
+
   if (str.length <= max) {
     return str
   }
+
   if (middle) {
     const sepLen = 1
     const charsToShow = max - sepLen
@@ -27,9 +27,7 @@ export function truncate (str, max, ellipsis, middle) {
   }
 }
 
-Vue.filter('truncate', truncate)
-
-export function ago (date, locale) {
+export function ago (date: Date, locale: string) {
   locale = locale || 'en'
   const m = moment(date)
   m.locale(locale)
@@ -43,9 +41,7 @@ export function ago (date, locale) {
   })
 }
 
-Vue.filter('ago', ago)
-
-export function fromNow (date, locale) {
+export function fromNow (date: Date, locale: string) {
   locale = 'en'
   moment.locale('en', {
     relativeTime: {
@@ -70,9 +66,7 @@ export function fromNow (date, locale) {
   return m.fromNow(true)
 }
 
-Vue.filter('fromNow', fromNow)
-
-export function secondsToObject (seconds) {
+export function secondsToObject (seconds: number) {
   const m = moment.duration(seconds, 'seconds')
   return {
     seconds: m.seconds(),
@@ -81,42 +75,30 @@ export function secondsToObject (seconds) {
   }
 }
 
-Vue.filter('secondsToObject', secondsToObject)
-
-export function padDuration (duration) {
+export function padDuration (duration: string) {
   let s = String(duration)
   while (s.length < 2) { s = '0' + s }
   return s
 }
 
-Vue.filter('padDuration', padDuration)
-
-export function duration (seconds) {
-  return time.parse(seconds)
+export function duration (seconds: string) {
+  return time.parse(+seconds)
 }
 
-Vue.filter('duration', duration)
-
-export function momentFormat (date, format) {
+export function momentFormat (date: Date, format: string) {
   format = format || 'lll'
   return moment(date).format(format)
 }
 
-Vue.filter('moment', momentFormat)
-
-export function year (date) {
+export function year (date: Date) {
   return moment(date).year()
 }
 
-Vue.filter('year', year)
-
-export function capitalize (str) {
+export function capitalize (str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-Vue.filter('capitalize', capitalize)
-
-export function humanSize (bytes) {
+export function humanSize (bytes: number) {
   const si = true
   const thresh = si ? 1000 : 1024
   if (Math.abs(bytes) < thresh) {
@@ -133,15 +115,24 @@ export function humanSize (bytes) {
   return bytes.toFixed(1) + ' ' + units[u]
 }
 
-Vue.filter('humanSize', humanSize)
-
 // Removes duplicates from a list
-export function unique (list, property) {
+export function unique (list: { [key: string]: unknown }[], property: string) {
   property = property || 'id'
-  const unique = []
+  const unique: { [key: string]: unknown }[] = []
   list.map(x => unique.filter(a => a[property] === x[property]).length > 0 ? null : unique.push(x))
   return unique
 }
-Vue.filter('unique', unique)
 
-export default {}
+export const install: AppModule = () => {
+  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/components/globals.js b/front/src/modules/globalComponents.ts
similarity index 56%
rename from front/src/components/globals.js
rename to front/src/modules/globalComponents.ts
index f69bde4d5..a01de4ebb 100644
--- a/front/src/components/globals.js
+++ b/front/src/modules/globalComponents.ts
@@ -1,4 +1,5 @@
-import Vue from 'vue'
+import { AppModule } from '@/types'
+
 import HumanDate from '@/components/common/HumanDate.vue'
 import HumanDuration from '@/components/common/HumanDuration.vue'
 import Username from '@/components/common/Username.vue'
@@ -19,24 +20,24 @@ import RenderedDescription from '@/components/common/RenderedDescription.vue'
 import ContentForm from '@/components/common/ContentForm.vue'
 import InlineSearchBar from '@/components/common/InlineSearchBar.vue'
 
-Vue.component('HumanDate', HumanDate)
-Vue.component('HumanDuration', HumanDuration)
-Vue.component('Username', Username)
-Vue.component('UserLink', UserLink)
-Vue.component('ActorLink', ActorLink)
-Vue.component('ActorAvatar', ActorAvatar)
-Vue.component('Duration', Duration)
-Vue.component('DangerousButton', DangerousButton)
-Vue.component('Message', Message)
-Vue.component('CopyInput', CopyInput)
-Vue.component('AjaxButton', AjaxButton)
-Vue.component('Tooltip', Tooltip)
-Vue.component('EmptyState', EmptyState)
-Vue.component('ExpandableDiv', ExpandableDiv)
-Vue.component('CollapseLink', CollapseLink)
-Vue.component('ActionFeedback', ActionFeedback)
-Vue.component('RenderedDescription', RenderedDescription)
-Vue.component('ContentForm', ContentForm)
-Vue.component('InlineSearchBar', InlineSearchBar)
-
-export default {}
+export const install: AppModule = ({ app }) => {
+  app.component('HumanDate', HumanDate)
+  app.component('HumanDuration', HumanDuration)
+  app.component('Username', Username)
+  app.component('UserLink', UserLink)
+  app.component('ActorLink', ActorLink)
+  app.component('ActorAvatar', ActorAvatar)
+  app.component('Duration', Duration)
+  app.component('DangerousButton', DangerousButton)
+  app.component('Message', Message)
+  app.component('CopyInput', CopyInput)
+  app.component('AjaxButton', AjaxButton)
+  app.component('Tooltip', Tooltip)
+  app.component('EmptyState', EmptyState)
+  app.component('ExpandableDiv', ExpandableDiv)
+  app.component('CollapseLink', CollapseLink)
+  app.component('ActionFeedback', ActionFeedback)
+  app.component('RenderedDescription', RenderedDescription)
+  app.component('ContentForm', ContentForm)
+  app.component('InlineSearchBar', InlineSearchBar)
+}
diff --git a/front/src/modules/instance.ts b/front/src/modules/instance.ts
new file mode 100644
index 000000000..8919af913
--- /dev/null
+++ b/front/src/modules/instance.ts
@@ -0,0 +1,40 @@
+import { AppModule } from '@/types'
+import { watch } from '@vue/composition-api'
+import axios from 'axios'
+
+export const install: AppModule = async ({ store, router }) => {
+  watch(() => store.state.instance.instanceUrl, async () => {
+    const [{ data }] = await Promise.all([
+      axios.get('instance/nodeinfo/2.0/'),
+      store.dispatch('instance/fetchSettings')
+    ])
+
+    store.commit('instance/nodeinfo', data)
+  })
+
+  const urlParams = new URLSearchParams(window.location.search)
+  const serverUrl = urlParams.get('_server')
+  if (serverUrl) {
+    store.commit('instance/instanceUrl', serverUrl)
+  }
+
+  const url = urlParams.get('_url')
+  if (url) {
+    return router.replace(url)
+  }
+
+  if (!store.state.instance.instanceUrl) {
+    // We have several way to guess the API server url. By order of precedence:
+    // 1. use the url provided in settings.json, if any
+    // 2. use the url specified when building via VUE_APP_INSTANCE_URL
+    // 3. use the current url
+    const defaultInstanceUrl = store.state.instance.frontSettings.defaultServerUrl ||
+      import.meta.env.VUE_APP_INSTANCE_URL ||
+      store.getters['instance/defaultUrl']()
+
+    store.commit('instance/instanceUrl', defaultInstanceUrl)
+  } else {
+    // needed to trigger initialization of axios / service worker / web socket
+    store.commit('instance/instanceUrl', store.state.instance.instanceUrl)
+  }
+}
diff --git a/front/src/modules/internalLinks.ts b/front/src/modules/internalLinks.ts
new file mode 100644
index 000000000..625845282
--- /dev/null
+++ b/front/src/modules/internalLinks.ts
@@ -0,0 +1,13 @@
+import { AppModule } from '@/types'
+
+// slight hack to allow use to have internal links in <translate> tags
+// while preserving router behaviour
+export const install: AppModule = ({ router }) => {
+  document.documentElement.addEventListener('click', async (event) => {
+    const target = <HTMLAnchorElement> event.target
+    if (!target.matches('a.internal')) return
+
+    event.preventDefault()
+    return router.push(target.href)
+  }, false)
+}
diff --git a/front/src/modules/locale.ts b/front/src/modules/locale.ts
new file mode 100644
index 000000000..7388aa128
--- /dev/null
+++ b/front/src/modules/locale.ts
@@ -0,0 +1,65 @@
+import Vue from 'vue'
+import GetText from 'vue-gettext'
+import { locales } from '@/locales'
+import { usePreferredLanguages } from '@vueuse/core'
+import { watch } from '@vue/composition-api'
+import { AppModule } from '@/types'
+
+export const install: AppModule = ({ store, app }) => {
+  const defaultLanguage = store.state.ui.currentLanguage ?? 'en_US'
+  const availableLanguages = locales.reduce((map: { [key: string]: string }, locale) => {
+    map[locale.code] = locale.label
+    return map
+  }, {})
+
+  app.use(GetText, {
+    availableLanguages,
+    defaultLanguage,
+
+    // cf https://github.com/Polyconseil/vue-gettext#configuration
+    // not recommended but this is fixing weird bugs with translation nodes
+    // not being updated when in v-if/v-else clauses
+    autoAddKeyAttributes: true,
+    languageVmMixin: {
+      computed: {
+        currentKebabCase (): string {
+          // @ts-ignore
+          return this.current.toLowerCase().replace('_', '-')
+        }
+      }
+    },
+    translations: {},
+    silent: true
+  })
+
+  // Set default language
+  if (!store.state.ui.selectedLanguage) {
+    // NOTE: We're selecting the language only once, hence we don't need to make it reactive
+    const languages = usePreferredLanguages().value.map((code) => {
+      return code.replace(/-/g, '_')
+    })
+
+    let language = Object.keys(availableLanguages).find(code => {
+      return languages.includes(code)
+    })
+
+    if (!language) {
+      language = Object.keys(availableLanguages).find(code => {
+        return languages.map(lang => lang.split('_')[0]).includes(code.split('_')[0])
+      })
+    }
+
+    store.commit('ui/currentLanguage', language ?? defaultLanguage)
+  }
+
+  // Handle language change
+  watch(() => store.state.ui.currentLanguage, (locale) => {
+    const htmlLocale = locale.toLowerCase().replace('_', '-')
+    document.documentElement.setAttribute('lang', htmlLocale)
+
+    if (locale === 'en_US') {
+      Vue.prototype.$language.current = locale
+      store.commit('ui/momentLocale', 'en')
+    }
+  }, { immediate: true })
+}
diff --git a/front/src/semantic.js b/front/src/modules/semantic.ts
similarity index 100%
rename from front/src/semantic.js
rename to front/src/modules/semantic.ts
diff --git a/front/src/modules/serviceWorker.ts b/front/src/modules/serviceWorker.ts
new file mode 100644
index 000000000..e494738e6
--- /dev/null
+++ b/front/src/modules/serviceWorker.ts
@@ -0,0 +1,45 @@
+import { AppModule } from '@/types'
+import { register } from 'register-service-worker'
+
+export const install: AppModule = ({ store }) => {
+  if (import.meta.env.PROD) {
+    register(`${import.meta.env.BASE_URL}service-worker.js`, {
+      registrationOptions: { scope: '/' },
+      ready () {
+        console.log(
+          'App is being served from cache by a service worker.'
+        )
+      },
+      registered (registration) {
+        console.log('Service worker has been registered.')
+        // check for updates every 2 hours
+        const checkInterval = 1000 * 60 * 60 * 2
+        // var checkInterval = 1000 * 5
+        setInterval(() => {
+          console.log('Checking for service worker update…')
+          registration.update()
+        }, checkInterval)
+        store.commit('ui/serviceWorker', { registration: registration })
+        if (registration.active) {
+          registration.active.postMessage({ command: 'serverChosen', serverUrl: store.state.instance.instanceUrl })
+        }
+      },
+      cached () {
+        console.log('Content has been cached for offline use.')
+      },
+      updatefound () {
+        console.log('New content is downloading.')
+      },
+      updated (registration) {
+        console.log('New content is available; please refresh!')
+        store.commit('ui/serviceWorker', { updateAvailable: true, registration: registration })
+      },
+      offline () {
+        console.log('No internet connection found. App is running in offline mode.')
+      },
+      error (error) {
+        console.error('Error during service worker registration:', error)
+      }
+    })
+  }
+}
diff --git a/front/src/modules/webSocket.ts b/front/src/modules/webSocket.ts
new file mode 100644
index 000000000..9ef5a3b15
--- /dev/null
+++ b/front/src/modules/webSocket.ts
@@ -0,0 +1,28 @@
+import { AppModule } from '@/types'
+import { watchEffect, watch } from '@vue/composition-api'
+import { useWebSocket, whenever } from '@vueuse/core'
+
+export const install: AppModule = ({ store }) => {
+  watch(() => store.state.instance.instanceUrl, () => {
+    const url = store.getters['instance/absoluteUrl']('api/v1/activity')
+      .replace(/^http/, 'ws')
+
+    const { data, status, open, close } = useWebSocket(url, {
+      autoReconnect: true,
+      immediate: false
+    })
+
+    watch(() => store.state.auth.authenticated, (authenticated) => {
+      if (authenticated) return open()
+      close()
+    })
+
+    whenever(data, () => {
+      return store.dispatch('ui/websocketEvent', JSON.parse(data.value))
+    })
+
+    watchEffect(() => {
+      console.log('Websocket status:', status.value)
+    })
+  })
+}
diff --git a/front/src/modules/window.ts b/front/src/modules/window.ts
new file mode 100644
index 000000000..17d35dea5
--- /dev/null
+++ b/front/src/modules/window.ts
@@ -0,0 +1,16 @@
+import { AppModule } from '@/types'
+import { useWindowSize } from '@vueuse/core'
+import { watchEffect } from '@vue/composition-api'
+
+export const install: AppModule = ({ store }) => {
+  // NOTE: Due to Vuex 3, when using store in watchEffect, it results in an infinite loop after committing
+  const { commit } = store
+
+  const { width, height } = useWindowSize()
+  watchEffect(() => {
+    commit('ui/window', {
+      width: width.value,
+      height: height.value
+    })
+  })
+}
diff --git a/front/src/registerServiceWorker.js b/front/src/registerServiceWorker.js
deleted file mode 100644
index 419332ec0..000000000
--- a/front/src/registerServiceWorker.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable no-console */
-
-import { register } from 'register-service-worker'
-
-import store from './store'
-
-if (import.meta.env.PROD) {
-  register(`${import.meta.env.BASE_URL}service-worker.js`, {
-    registrationOptions: { scope: '/' },
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.'
-      )
-    },
-    registered (registration) {
-      console.log('Service worker has been registered.')
-      // check for updates every 2 hours
-      const checkInterval = 1000 * 60 * 60 * 2
-      // var checkInterval = 1000 * 5
-      setInterval(() => {
-        console.log('Checking for service worker update…')
-        registration.update()
-      }, checkInterval)
-      store.commit('ui/serviceWorker', { registration: registration })
-      if (registration.active) {
-        registration.active.postMessage({ command: 'serverChosen', serverUrl: store.state.instance.instanceUrl })
-      }
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated (registration) {
-      console.log('New content is available; please refresh!')
-      store.commit('ui/serviceWorker', { updateAvailable: true, registration: registration })
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
-}
diff --git a/front/src/router/index.js b/front/src/router/index.ts
similarity index 100%
rename from front/src/router/index.js
rename to front/src/router/index.ts
diff --git a/front/src/store/auth.js b/front/src/store/auth.js
index 8a086180c..fc44883cd 100644
--- a/front/src/store/auth.js
+++ b/front/src/store/auth.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import axios from 'axios'
 import logger from '@/logging'
-import lodash from 'lodash'
 
 function getDefaultScopedTokens () {
   return {
@@ -110,7 +109,7 @@ export default {
       state.availablePermissions[key] = status
     },
     profilePartialUpdate: (state, payload) => {
-      lodash.keys(payload).forEach((k) => {
+      Object.keys(payload).forEach((k) => {
         Vue.set(state.profile, k, payload[k])
       })
     },
diff --git a/front/src/store/index.js b/front/src/store/index.ts
similarity index 95%
rename from front/src/store/index.js
rename to front/src/store/index.ts
index a79544203..d6ebf7a0d 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Vuex from 'vuex'
+import Vuex, { Store } from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 
 import favorites from './favorites'
@@ -16,7 +16,7 @@ import ui from './ui'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
+export default <Store<any>> new Vuex.Store({
   modules: {
     ui,
     auth,
@@ -44,7 +44,7 @@ export default new Vuex.Store({
     }),
     createPersistedState({
       key: 'ui',
-      paths: ['ui.currentLanguage', 'ui.selectedLanguage', 'ui.momentLocale', 'ui.theme', 'ui.routePreferences']
+      paths: ['ui.currentLanguage', 'ui.selectedLanguage', 'ui.momentLocale', 'ui.routePreferences']
     }),
     createPersistedState({
       key: 'radios',
diff --git a/front/src/store/instance.js b/front/src/store/instance.js
index 257727c74..e8d9a7324 100644
--- a/front/src/store/instance.js
+++ b/front/src/store/instance.js
@@ -1,6 +1,6 @@
 import axios from 'axios'
 import logger from '@/logging'
-import _ from 'lodash'
+import { merge } from 'lodash-es'
 
 function getDefaultUrl () {
   return (
@@ -65,7 +65,7 @@ export default {
   },
   mutations: {
     settings: (state, value) => {
-      _.merge(state.settings, value)
+      merge(state.settings, value)
     },
     event: (state, value) => {
       state.events.unshift(value)
@@ -112,11 +112,11 @@ export default {
       if (relativeUrl.startsWith('http')) {
         return relativeUrl
       }
-      if (state.instanceUrl.endsWith('/') && relativeUrl.startsWith('/')) {
+      if (state.instanceUrl?.endsWith('/') && relativeUrl.startsWith('/')) {
         relativeUrl = relativeUrl.slice(1)
       }
 
-      const instanceUrl = state.instanceUrl || getDefaultUrl()
+      const instanceUrl = state.instanceUrl ?? getDefaultUrl()
       return instanceUrl + relativeUrl
     },
     domain: (state) => {
@@ -149,17 +149,15 @@ export default {
     fetchSettings ({ commit }, payload) {
       return axios.get('instance/settings/').then(response => {
         logger.default.info('Successfully fetched instance settings')
-        const sections = {}
-        response.data.forEach(e => {
-          sections[e.section] = {}
-        })
-        response.data.forEach(e => {
-          sections[e.section][e.name] = e
-        })
+
+        const sections = response.data.reduce((map, entry) => {
+          map[entry.section] ??= {}
+          map[entry.section][entry.name] = entry
+          return map
+        }, {})
+
         commit('settings', sections)
-        if (payload && payload.callback) {
-          payload.callback()
-        }
+        payload?.callback?.()
       }, response => {
         logger.default.error('Error while fetching settings', response.data)
       })
diff --git a/front/src/store/moderation.js b/front/src/store/moderation.js
index 4e507ee85..6fe8a90e8 100644
--- a/front/src/store/moderation.js
+++ b/front/src/store/moderation.js
@@ -1,6 +1,6 @@
 import axios from 'axios'
 import logger from '@/logging'
-import _ from 'lodash'
+import {sortBy} from "lodash-es";
 
 export default {
   namespaced: true,
@@ -70,7 +70,7 @@ export default {
       const f = state.filters.filter((f) => {
         return f.target.type === 'artist'
       })
-      const p = _.sortBy(f, [(e) => { return e.creation_date }])
+      const p = sortBy(f, [(e) => { return e.creation_date }])
       p.reverse()
       return p
     }
diff --git a/front/src/store/queue.js b/front/src/store/queue.js
index ca0997997..14b5a8040 100644
--- a/front/src/store/queue.js
+++ b/front/src/store/queue.js
@@ -1,5 +1,5 @@
 import logger from '@/logging'
-import _ from 'lodash'
+import { shuffle } from 'lodash-es'
 
 export default {
   namespaced: true,
@@ -159,7 +159,7 @@ export default {
       commit('ended', true)
     },
     async shuffle ({ dispatch, commit, state }, callback) {
-      const shuffled = _.shuffle(state.tracks)
+      const shuffled = shuffle(state.tracks)
       commit('tracks', [])
       const params = { tracks: shuffled }
       if (callback) {
diff --git a/front/src/store/ui.js b/front/src/store/ui.js
index de77b8bba..3adff8b85 100644
--- a/front/src/store/ui.js
+++ b/front/src/store/ui.js
@@ -13,7 +13,6 @@ export default {
     messageDisplayDuration: 5 * 1000,
     supportedExtensions: ['flac', 'ogg', 'mp3', 'opus', 'aac', 'm4a', 'aiff', 'aif'],
     messages: [],
-    theme: 'system',
     window: {
       height: 0,
       width: 0
@@ -268,9 +267,6 @@ export default {
       state.queueFocused = value
     },
 
-    theme: (state, value) => {
-      state.theme = value
-    },
     addMessage (state, message) {
       const finalMessage = {
         displayTime: state.messageDisplayDuration,
@@ -350,21 +346,11 @@ export default {
       }
     },
 
-    async theme ({ state, commit, rootState }, value) {
-      commit('theme', value)
-      if (rootState.auth.authenticated) {
-        await axios.post('users/settings', { theme: value })
-      }
-    },
-
     async initSettings ({ commit }, settings) {
       settings = settings || {}
       if (settings.language) {
         commit('currentLanguage', settings.language)
       }
-      if (settings.theme) {
-        commit('theme', settings.theme)
-      }
     },
     websocketEvent ({ state }, event) {
       const handlers = state.websocketEventsHandlers[event.type]
diff --git a/front/src/types.ts b/front/src/types.ts
new file mode 100644
index 000000000..871947d47
--- /dev/null
+++ b/front/src/types.ts
@@ -0,0 +1,78 @@
+import type { App } from '@vue/composition-api'
+import type { Store } from 'vuex'
+import type VueRouter from 'vue-router'
+
+declare global {
+  interface Window {
+    $: JQueryStatic
+    jQuery: JQueryStatic
+  }
+}
+
+// App structure stuff
+export interface AppModuleContext {
+  app: App
+  router: VueRouter
+  store: Store<any>
+}
+
+export type AppModule = (ctx: AppModuleContext) => void
+
+// Theme stuff
+export type Theme = 'auto' | 'light' | 'dark'
+
+export interface ThemeEntry {
+  icon: string
+  name: string
+  key: Theme
+}
+
+// Locale stuff
+export interface Locale {
+  label: string
+  code: string
+}
+
+// Track stuff
+export interface Artist {
+  name: string
+}
+
+export interface Album {
+  artist: Artist
+}
+
+export interface Track {
+  title: string
+  album?: Album
+  artist?: Artist
+}
+
+// API stuff
+export interface APIErrorResponse {
+  [key: string]: APIErrorResponse | string[]
+}
+
+// WebSocket stuff
+export interface PendingReviewEditsWSEvent {
+  pending_review_count: number
+}
+
+export interface PendingReviewReportsWSEvent {
+  unresolved_count: number
+}
+
+export interface PendingReviewRequestsWSEvent {
+  pending_count: number
+}
+
+export interface ListenWsEventObject {
+  local_id: string
+}
+
+export interface ListenWSEvent {
+  actor: ListenWsEventObject
+  object: ListenWsEventObject
+}
+
+export type WebSocketEvent = PendingReviewEditsWSEvent | PendingReviewReportsWSEvent | PendingReviewRequestsWSEvent | ListenWSEvent
diff --git a/front/src/utils.js b/front/src/utils.js
deleted file mode 100644
index 621b51e03..000000000
--- a/front/src/utils.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import lodash from 'lodash'
-
-export function setUpdate (obj, statuses, value) {
-  const updatedKeys = lodash.keys(obj)
-  updatedKeys.forEach((k) => {
-    statuses[k] = value
-  })
-}
-
-export function parseAPIErrors (responseData, parentField) {
-  let errors = []
-  for (const field in responseData) {
-    if (Object.prototype.hasOwnProperty.call(responseData, field)) {
-      const value = responseData[field]
-      let fieldName = lodash.startCase(field.replace('_', ' '))
-      if (parentField) {
-        fieldName = `${parentField} - ${fieldName}`
-      }
-      if (value.forEach) {
-        value.forEach(e => {
-          if (e.toLocaleLowerCase().includes('this field ')) {
-            errors.push(`${fieldName}: ${e}`)
-          } else {
-            errors.push(e)
-          }
-        })
-      } else if (typeof value === 'object') {
-        // nested errors
-        const nestedErrors = parseAPIErrors(value, fieldName)
-        errors = [...errors, ...nestedErrors]
-      }
-    }
-  }
-  return errors
-}
-
-export function getCookie (name) {
-  return document.cookie
-    .split('; ')
-    .find(row => row.startsWith(name))
-    .split('=')[1]
-}
-export function setCsrf (xhr) {
-  if (getCookie('csrftoken')) {
-    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'))
-  }
-}
-
-export function checkRedirectToLogin (store, router) {
-  if (!store.state.auth.authenticated) {
-    router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
-  }
-}
-
-export function getDomain (url) {
-  const parser = document.createElement('a')
-  parser.href = url
-  return parser.hostname
-}
diff --git a/front/src/utils/index.ts b/front/src/utils/index.ts
new file mode 100644
index 000000000..850c07bcf
--- /dev/null
+++ b/front/src/utils/index.ts
@@ -0,0 +1,63 @@
+import { startCase } from 'lodash-es'
+import { Store } from 'vuex'
+import VueRouter from 'vue-router'
+import { APIErrorResponse } from '@/types'
+
+export function setUpdate (obj: object, statuses: { [key: string]: unknown }, value: unknown) {
+  for (const key of Object.keys(obj)) {
+    statuses[key] = value
+  }
+}
+
+export function parseAPIErrors (responseData: APIErrorResponse, parentField?: string): string[] {
+  const errors = []
+  for (const field in responseData) {
+    if (Object.prototype.hasOwnProperty.call(responseData, field)) {
+      let fieldName = startCase(field.replace('_', ' '))
+      if (parentField) {
+        fieldName = `${parentField} - ${fieldName}`
+      }
+
+      const value = responseData[field]
+      if (value as string[]) {
+        errors.push(...(value as string[]).map(err => {
+          return err.toLocaleLowerCase().includes('this field ')
+            ? `${fieldName}: ${err}`
+            : err
+        }))
+      } else if (value as APIErrorResponse) {
+        // nested errors
+        const nestedErrors = parseAPIErrors(value as APIErrorResponse, fieldName)
+        errors.push(...nestedErrors)
+      }
+    }
+  }
+
+  return errors
+}
+
+export function getCookie (name: string) {
+  return document.cookie
+    .split('; ')
+    .find(row => row.startsWith(name))
+    ?.split('=')[1]
+}
+
+export function setCsrf (xhr: XMLHttpRequest) {
+  const token = getCookie('csrftoken')
+  if (token) {
+    xhr.setRequestHeader('X-CSRFToken', token)
+  }
+}
+
+export async function checkRedirectToLogin (store: Store<any>, router: VueRouter) {
+  if (!store.state.auth.authenticated) {
+    return router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
+  }
+}
+
+export function getDomain (url: string) {
+  const parser = document.createElement('a')
+  parser.href = url
+  return parser.hostname
+}
diff --git a/front/src/utils/time.js b/front/src/utils/time.js
deleted file mode 100644
index 7a5f66ccf..000000000
--- a/front/src/utils/time.js
+++ /dev/null
@@ -1,31 +0,0 @@
-function pad (val) {
-  val = Math.floor(val)
-  if (val < 10) {
-    return '0' + val
-  }
-  return val + ''
-}
-
-export default {
-  parse: function (sec) {
-    let min = 0
-    const hours = Math.floor(sec / 3600)
-    if (hours >= 1) {
-      sec = sec % 3600
-    }
-    min = Math.floor(sec / 60)
-    sec = sec - min * 60
-    if (hours >= 1) {
-      return hours + ':' + pad(min) + ':' + pad(sec)
-    }
-    return min + ':' + pad(sec)
-  },
-  durationFormatted (v) {
-    let duration = parseInt(v)
-    if (duration % 1 !== 0) {
-      return this.parse(0)
-    }
-    duration = Math.round(duration)
-    return this.parse(duration)
-  }
-}
diff --git a/front/src/utils/time.ts b/front/src/utils/time.ts
new file mode 100644
index 000000000..43423b420
--- /dev/null
+++ b/front/src/utils/time.ts
@@ -0,0 +1,28 @@
+function pad (val: number) {
+  val = Math.floor(val)
+  if (val < 10) {
+    return '0' + val
+  }
+
+  return val + ''
+}
+
+export default {
+  parse: function (sec: number) {
+    const hours = Math.floor(sec / 3600)
+    if (hours >= 1) {
+      sec = sec % 3600
+    }
+
+    const min = Math.floor(sec / 60)
+    sec -= min * 60
+
+    return hours >= 1
+      ? `${hours}:${pad(min)}:${pad(sec)}`
+      : `${pad(min)}:${pad(sec)}`
+  },
+  durationFormatted (v: string) {
+    const duration = parseInt(v)
+    return this.parse(duration % 1 !== 0 ? 0 : Math.round(duration))
+  }
+}
diff --git a/front/src/utils/url.js b/front/src/utils/url.js
deleted file mode 100644
index 2055ec675..000000000
--- a/front/src/utils/url.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  updateQueryString (uri, key, value) {
-    const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i')
-    const separator = uri.indexOf('?') !== -1 ? '&' : '?'
-    if (uri.match(re)) {
-      return uri.replace(re, '$1' + key + '=' + value + '$2')
-    } else {
-      return uri + separator + key + '=' + value
-    }
-  }
-}
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index 6c5e41ca4..9c8ecaa4d 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -379,7 +379,7 @@
 import axios from 'axios'
 import TranslationsMixin from '@/components/mixins/Translations.vue'
 import ImportStatusModal from '@/components/library/ImportStatusModal.vue'
-import time from '@/utils/time.js'
+import time from '@/utils/time'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 35015710e..3ddc5aaf3 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -568,7 +568,6 @@
 <script>
 import axios from 'axios'
 import logger from '@/logging'
-import lodash from 'lodash'
 import $ from 'jquery'
 
 import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm.vue'
@@ -582,7 +581,6 @@ export default {
   props: { id: { type: Number, required: true } },
   data () {
     return {
-      lodash,
       isLoading: true,
       isLoadingStats: false,
       isLoadingPolicy: false,
diff --git a/front/src/views/admin/moderation/Base.vue b/front/src/views/admin/moderation/Base.vue
index 5d2182bac..f72ab8b4c 100644
--- a/front/src/views/admin/moderation/Base.vue
+++ b/front/src/views/admin/moderation/Base.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import { get } from 'lodash-es'
 import axios from 'axios'
 
 export default {
@@ -85,7 +85,7 @@ export default {
     fetchNodeInfo () {
       const self = this
       axios.get('instance/nodeinfo/2.0/').then(response => {
-        self.allowListEnabled = _.get(response.data, 'metadata.allowList.enabled', false)
+        self.allowListEnabled = get(response.data, 'metadata.allowList.enabled', false)
       })
     }
   }
diff --git a/front/src/views/admin/moderation/DomainsDetail.vue b/front/src/views/admin/moderation/DomainsDetail.vue
index cfccac97d..e5043fe0e 100644
--- a/front/src/views/admin/moderation/DomainsDetail.vue
+++ b/front/src/views/admin/moderation/DomainsDetail.vue
@@ -193,7 +193,7 @@
                         </translate>
                       </td>
                       <td>
-                        {{ lodash.get(object, 'nodeinfo.payload.software.name', $pgettext('*/*/*', 'N/A')) }} ({{ lodash.get(object, 'nodeinfo.payload.software.version', $pgettext('*/*/*', 'N/A')) }})
+                        {{ get(object, 'nodeinfo.payload.software.name', $pgettext('*/*/*', 'N/A')) }} ({{ get(object, 'nodeinfo.payload.software.version', $pgettext('*/*/*', 'N/A')) }})
                       </td>
                     </tr>
                     <tr>
@@ -203,7 +203,7 @@
                         </translate>
                       </td>
                       <td>
-                        {{ lodash.get(object, 'nodeinfo.payload.metadata.nodeName', $pgettext('*/*/*', 'N/A')) }}
+                        {{ get(object, 'nodeinfo.payload.metadata.nodeName', $pgettext('*/*/*', 'N/A')) }}
                       </td>
                     </tr>
                     <tr>
@@ -213,7 +213,7 @@
                         </translate>
                       </td>
                       <td>
-                        {{ lodash.get(object, 'nodeinfo.payload.usage.users.total', $pgettext('*/*/*', 'N/A')) }}
+                        {{ get(object, 'nodeinfo.payload.usage.users.total', $pgettext('*/*/*', 'N/A')) }}
                       </td>
                     </tr>
                   </template>
@@ -458,7 +458,7 @@
 
 <script>
 import axios from 'axios'
-import lodash from 'lodash'
+import { get } from 'lodash-es'
 
 import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '@/components/manage/moderation/InstancePolicyCard.vue'
@@ -471,7 +471,7 @@ export default {
   props: { id: { type: String, required: true }, allowListEnabled: { type: Boolean, required: true } },
   data () {
     return {
-      lodash,
+      get,
       isLoading: true,
       isLoadingStats: false,
       isLoadingPolicy: false,
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index 97d4646fe..b81da3964 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -127,8 +127,8 @@
 <script>
 
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import Pagination from '@/components/Pagination.vue'
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import TranslationsMixin from '@/components/mixins/Translations.vue'
@@ -194,7 +194,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 0fe6e129c..bbe80d15e 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/front/src/views/admin/moderation/RequestsList.vue
@@ -125,8 +125,8 @@
 <script>
 
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import Pagination from '@/components/Pagination.vue'
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import TranslationsMixin from '@/components/mixins/Translations.vue'
@@ -187,7 +187,7 @@ export default {
   },
   methods: {
     fetchData () {
-      const params = _.merge({
+      const params = merge({
         page: this.page,
         page_size: this.paginateBy,
         q: this.search.query,
diff --git a/front/src/views/content/Home.vue b/front/src/views/content/Home.vue
index 8532999ee..e565c87ef 100644
--- a/front/src/views/content/Home.vue
+++ b/front/src/views/content/Home.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script>
-import { humanSize } from '@/filters'
+import { humanSize } from '@/modules/filters'
 
 export default {
   computed: {
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index e425475b3..f2de32b52 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -267,8 +267,8 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time.js'
+import { merge } from 'lodash-es'
+import time from '@/utils/time'
 import { normalizeQuery, parseTokens } from '@/search'
 
 import Pagination from '@/components/Pagination.vue'
@@ -335,7 +335,7 @@ export default {
         include_channels: 'true'
       }
       if (this.filters) {
-        return _.merge(currentFilters, this.filters)
+        return merge(currentFilters, this.filters)
       } else {
         return currentFilters
       }
@@ -388,7 +388,7 @@ export default {
   methods: {
     fetchData () {
       this.$emit('fetch-start')
-      const params = _.merge(
+      const params = merge(
         {
           page: this.page,
           page_size: this.paginateBy,
diff --git a/front/src/views/content/libraries/Quota.vue b/front/src/views/content/libraries/Quota.vue
index 4ebc5a5a7..abc4d4531 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 '@/filters'
+import { humanSize } from '@/modules/filters'
 import { compileTokens } from '@/search'
 
 export default {
diff --git a/front/tests/unit/specs/store/queue.spec.js b/front/tests/unit/specs/store/queue.spec.js
index d7d98a17a..bb1ada4c3 100644
--- a/front/tests/unit/specs/store/queue.spec.js
+++ b/front/tests/unit/specs/store/queue.spec.js
@@ -1,8 +1,6 @@
 var sinon = require('sinon')
 import {expect} from 'chai'
 
-import _ from 'lodash'
-
 import store from '@/store/queue'
 import { testAction } from '../../utils'
 
diff --git a/front/tsconfig.json b/front/tsconfig.json
index c4cc7a16d..6748c54ac 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -13,13 +13,22 @@
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
     "types": [
       "vite/client",
       "vue/ref-macros",
+      "unplugin-vue2-script-setup/types",
+      "vue-gettext/types"
     ],
     "paths": {
+      "~/*": ["src/*"],
       "@/*": ["src/*"]
     }
   },
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
+  },
   "include": ["src/*.d.ts", "src/**/*.ts", "src/**/*.vue"]
 }
diff --git a/front/vite.config.js b/front/vite.config.ts
similarity index 79%
rename from front/vite.config.js
rename to front/vite.config.ts
index 553ee230e..ac4572cf1 100644
--- a/front/vite.config.js
+++ b/front/vite.config.ts
@@ -1,16 +1,16 @@
-import { defineConfig } from 'vite'
+import { defineConfig, HmrOptions } from 'vite'
 import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
-import Components from 'unplugin-vue-components/vite'
 import ScriptSetup from 'unplugin-vue2-script-setup/vite'
 
+// @ts-ignore
 import path from 'path'
 
-const port = process.env.VUE_PORT ?? 8080
+const port = +(process.env.VUE_PORT ?? 8080)
 
 const hmr = {
   port: process.env.HMR_PORT || (process.env.FUNKWHALE_PROTOCOL === 'https' ? 443 : port),
   protocol: process.env.HMR_PROTOCOL || (process.env.FUNKWHALE_PROTOCOL === 'https' ? 'wss' : 'ws')
-}
+} as HmrOptions
 
 if (process.env.GITPOD_WORKSPACE_URL) {
   hmr.host = process.env.GITPOD_WORKSPACE_URL.replace('https://', `${process.env.HMR_PORT ?? process.env.VUE_PORT ?? 4000}-`)
@@ -20,8 +20,8 @@ if (process.env.GITPOD_WORKSPACE_URL) {
 }
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  envPrefix: "VUE_",
+export default defineConfig(() => ({
+  envPrefix: 'VUE_',
   plugins: [
     // https://github.com/underfin/vite-plugin-vue2
     Vue2(),
@@ -29,12 +29,6 @@ export default defineConfig({
     // https://github.com/antfu/unplugin-vue2-script-setup
     ScriptSetup(),
 
-    // https://github.com/antfu/unplugin-vue-components
-    Components({
-      dts: 'src/components.d.ts',
-      transformer: 'vue2'
-    }),
-
     {
       name: 'fix-fomantic-ui-css',
       transform (src, id) {
@@ -47,6 +41,9 @@ export default defineConfig({
   server: { port, hmr },
   resolve: {
     alias: {
+      '~': path.resolve(__dirname, './src'),
+
+      // TODO: Remove @/dependency from all files as `@` is used as an organization prefix
       '@': path.resolve(__dirname, './src')
     }
   },
@@ -58,4 +55,4 @@ export default defineConfig({
       }
     }
   }
-})
+}))
diff --git a/front/yarn.lock b/front/yarn.lock
index 099d21bce..74dba6146 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -10,7 +10,7 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@antfu/utils@^0.5.0", "@antfu/utils@^0.5.2":
+"@antfu/utils@^0.5.0":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.5.2.tgz#8c2d931ff927be0ebe740169874a3d4004ab414b"
   integrity sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==
@@ -1272,7 +1272,7 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@rollup/pluginutils@^4.1.1", "@rollup/pluginutils@^4.1.2", "@rollup/pluginutils@^4.2.1":
+"@rollup/pluginutils@^4.1.1", "@rollup/pluginutils@^4.1.2":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@@ -1379,6 +1379,13 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jquery@^3.5.14":
+  version "3.5.14"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.14.tgz#ac8e11ee591e94d4d58da602cb3a5a8320dee577"
+  integrity sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==
+  dependencies:
+    "@types/sizzle" "*"
+
 "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -1389,6 +1396,18 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash-es@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.6.tgz#c2ed4c8320ffa6f11b43eb89e9eaeec65966a0a0"
+  integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.184"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.184.tgz#23f96cd2a21a28e106dc24d825d4aa966de7a9fe"
+  integrity sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==
+
 "@types/node@*":
   version "18.7.15"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.15.tgz#20ae1ec80c57ee844b469f968a1cd511d4088b29"
@@ -1399,6 +1418,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.0.tgz#ea03e9f0376a4446f44797ca19d9c46c36e352dc"
   integrity sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==
 
+"@types/sizzle@*":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
+  integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
@@ -1441,16 +1465,6 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^4.0.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
-  integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "4.33.0"
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/typescript-estree" "4.33.0"
-    debug "^4.3.1"
-
 "@typescript-eslint/parser@^5.0.0":
   version "5.36.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.2.tgz#3ddf323d3ac85a25295a55fcb9c7a49ab4680ddd"
@@ -1461,14 +1475,6 @@
     "@typescript-eslint/typescript-estree" "5.36.2"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
-  integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
-  dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/visitor-keys" "4.33.0"
-
 "@typescript-eslint/scope-manager@5.36.2":
   version "5.36.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.2.tgz#a75eb588a3879ae659514780831370642505d1cd"
@@ -1487,29 +1493,11 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
-  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
-
 "@typescript-eslint/types@5.36.2":
   version "5.36.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.2.tgz#a5066e500ebcfcee36694186ccc57b955c05faf9"
   integrity sha512-9OJSvvwuF1L5eS2EQgFUbECb99F0mwq501w0H0EkYULkhFa19Qq7WFbycdw1PexAc929asupbZcgjVIe6OK/XQ==
 
-"@typescript-eslint/typescript-estree@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
-  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
-  dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/visitor-keys" "4.33.0"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
-
 "@typescript-eslint/typescript-estree@5.36.2":
   version "5.36.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.2.tgz#0c93418b36c53ba0bc34c61fe9405c4d1d8fe560"
@@ -1535,14 +1523,6 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/visitor-keys@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
-  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
-  dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    eslint-visitor-keys "^2.0.0"
-
 "@typescript-eslint/visitor-keys@5.36.2":
   version "5.36.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.2.tgz#2f8f78da0a3bad3320d2ac24965791ac39dace5a"
@@ -1751,24 +1731,24 @@
     lodash "^4.17.15"
     pretty "^2.0.0"
 
-"@vueuse/core@8.2.6":
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.2.6.tgz#baf674acadd678b0429c60477213c6dab08ea9e0"
-  integrity sha512-fzlpM3B5oVe+UhCT1mXlhG1Zxdq2lq1Z2AvddSB8+RxrsSFzII7DKfsQEz8Vop7Lzc++4m8drTNbhPovYoFqHw==
+"@vueuse/core@8.2.5":
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.2.5.tgz#ca6a59091ecf16e6739c53f3d857b11967a5eb06"
+  integrity sha512-5prZAA1Ji2ltwNUnzreu6WIXYqHYP/9U2BiY5mD/650VYLpVcwVlYznJDFcLCmEWI3o3Vd34oS1FUf+6Mh68GQ==
   dependencies:
-    "@vueuse/metadata" "8.2.6"
-    "@vueuse/shared" "8.2.6"
+    "@vueuse/metadata" "8.2.5"
+    "@vueuse/shared" "8.2.5"
     vue-demi "*"
 
-"@vueuse/metadata@8.2.6":
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.2.6.tgz#0e649ff5c784ac73d35f44f9758fac33f62e3e3f"
-  integrity sha512-OBKtafCt+4RcEJlYDCjp1vl65pBCL2g4TmipEtdZ8/qphKlW6nakJbkY7XRN5grPmjqU99/ahJGtyGk5NHS2hw==
+"@vueuse/metadata@8.2.5":
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.2.5.tgz#51c7d95e04284ea378a5242a2e88b77494e2c117"
+  integrity sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA==
 
-"@vueuse/shared@8.2.6":
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.2.6.tgz#7cbf2bdd576f86d888014272982a7c84b7015d21"
-  integrity sha512-J/W4CMfdL8TahELuSOgtfVO4eQXTjhigp7dVWIBsLUVFCeY9d49gvHUcQN3y5xYLZ6iNP57TjTQjMMT/zhklkw==
+"@vueuse/shared@8.2.5":
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.2.5.tgz#1ae200a240c4b8d42d41723b64d8f917aa57ff16"
+  integrity sha512-lNWo+7sk6JCuOj4AiYM+6HZ6fq4xAuVq1sVckMQKgfCJZpZRe4i8es+ZULO5bYTKP+VrOCtqrLR2GzEfrbr3YQ==
   dependencies:
     vue-demi "*"
 
@@ -1845,7 +1825,7 @@ acorn@^7.1.1, acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.2.4, acorn@^8.7.1, acorn@^8.8.0:
+acorn@^8.2.4, acorn@^8.8.0:
   version "8.8.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
@@ -2392,7 +2372,7 @@ cheerio@^1.0.0-rc.3:
     parse5 "^7.0.0"
     parse5-htmlparser2-tree-adapter "^7.0.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0":
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -2649,7 +2629,7 @@ deasync@^0.1.15:
     bindings "^1.5.0"
     node-addon-api "^1.7.1"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3058,7 +3038,7 @@ esbuild-windows-arm64@0.14.54:
   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
   integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
 
-esbuild@^0.14.27:
+esbuild@^0.14.14:
   version "0.14.54"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
   integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
@@ -3117,15 +3097,7 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-standard-with-typescript@^21.0.1:
-  version "21.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-21.0.1.tgz#f4c8bb883d8dfd634005239a54c3c222746e3c64"
-  integrity sha512-FeiMHljEJ346Y0I/HpAymNKdrgKEpHpcg/D93FvPHWfCzbT4QyUJba/0FwntZeGLXfUiWDSeKmdJD597d9wwiw==
-  dependencies:
-    "@typescript-eslint/parser" "^4.0.0"
-    eslint-config-standard "^16.0.0"
-
-eslint-config-standard@16.0.3, eslint-config-standard@^16.0.0, eslint-config-standard@^16.0.3:
+eslint-config-standard@16.0.3, eslint-config-standard@^16.0.3:
   version "16.0.3"
   resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-16.0.3.tgz#6c8761e544e96c531ff92642eeb87842b8488516"
   integrity sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==
@@ -3415,7 +3387,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9:
+fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -3699,7 +3671,7 @@ globals@^9.18.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
-globby@^11.0.3, globby@^11.1.0:
+globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -4737,11 +4709,6 @@ loadjs@^4.2.0:
   resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
   integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
 
-local-pkg@^0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.2.tgz#13107310b77e74a0e513147a131a2ba288176c2f"
-  integrity sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==
-
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -4749,6 +4716,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -4769,7 +4741,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@4.17.21, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -4810,13 +4782,6 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-magic-string@^0.26.2:
-  version "0.26.3"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.3.tgz#25840b875140f7b4785ab06bddc384270b7dd452"
-  integrity sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg==
-  dependencies:
-    sourcemap-codec "^1.4.8"
-
 make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -4885,7 +4850,7 @@ minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^5.0.1, minimatch@^5.1.0:
+minimatch@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
   integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
@@ -5261,7 +5226,7 @@ postcss@^7.0.36:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.10, postcss@^8.3.11, postcss@^8.4.12, postcss@^8.4.14:
+postcss@^8.1.10, postcss@^8.3.11, postcss@^8.4.14, postcss@^8.4.6:
   version "8.4.16"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
   integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
@@ -6150,22 +6115,6 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unplugin-vue-components@^0.19.3:
-  version "0.19.9"
-  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.19.9.tgz#87e913f3cf8cd1d36c6f5b597ca7a46cddb6229b"
-  integrity sha512-i5mZtg85euPWZrGswFkoa9pf4WjKCP5qOjnwOyg3KOKVzFjnP3osCdrunQMjtoMKehTdz1vV6baZH8bZR4PNgg==
-  dependencies:
-    "@antfu/utils" "^0.5.2"
-    "@rollup/pluginutils" "^4.2.1"
-    chokidar "^3.5.3"
-    debug "^4.3.4"
-    fast-glob "^3.2.11"
-    local-pkg "^0.4.1"
-    magic-string "^0.26.2"
-    minimatch "^5.1.0"
-    resolve "^1.22.0"
-    unplugin "^0.7.0"
-
 unplugin-vue2-script-setup@^0.10.2:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.10.2.tgz#d1e20bfccbf49aa1d3e456663f361c824d4f8eb0"
@@ -6193,16 +6142,6 @@ unplugin@^0.3.2:
   dependencies:
     webpack-virtual-modules "^0.4.3"
 
-unplugin@^0.7.0:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.7.2.tgz#4127012fdc2c84ea4ce03ce75e3d4f54ea47bba1"
-  integrity sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==
-  dependencies:
-    acorn "^8.7.1"
-    chokidar "^3.5.3"
-    webpack-sources "^3.2.3"
-    webpack-virtual-modules "^0.4.4"
-
 update-browserslist-db@^1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz#16279639cff1d0f800b14792de43d97df2d11b7d"
@@ -6281,13 +6220,13 @@ vite-plugin-vue2@1.9.3:
     source-map "^0.7.3"
     vue-template-es2015-compiler "^1.9.1"
 
-vite@2.9.5:
-  version "2.9.5"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.5.tgz#08ef37ac7a6d879c96f328b791732c9a00ea25ea"
-  integrity sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg==
+vite@2.8.6:
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.6.tgz#32d50e23c99ca31b26b8ccdc78b1d72d4d7323d3"
+  integrity sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==
   dependencies:
-    esbuild "^0.14.27"
-    postcss "^8.4.12"
+    esbuild "^0.14.14"
+    postcss "^8.4.6"
     resolve "^1.22.0"
     rollup "^2.59.0"
   optionalDependencies:
@@ -6425,6 +6364,11 @@ vuex-router-sync@5.0.0:
   resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz#1a225c17a1dd9e2f74af0a1b2c62072e9492b305"
   integrity sha512-Mry2sO4kiAG64714X1CFpTA/shUH1DmkZ26DFDtwoM/yyx6OtMrc+MxrU+7vvbNLO9LSpgwkiJ8W+rlmRtsM+w==
 
+vuex@3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -6456,12 +6400,7 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
-
-webpack-virtual-modules@^0.4.3, webpack-virtual-modules@^0.4.4:
+webpack-virtual-modules@^0.4.3:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz#a19fcf371923c59c4712d63d7d194b1e4d8262cc"
   integrity sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==